Merge pull request #163 from PRO-Robotech/feature/dev

search controls and url sync

Author: typescreep

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@prorobotech/openapi-k8s-toolkit",
-  "version": "0.0.1-alpha.115",
+  "version": "0.0.1-alpha.116",
   "description": "ProRobotech OpenAPI k8s tools",
   "main": "dist/openapi-k8s-toolkit.cjs.js",
   "module": "dist/openapi-k8s-toolkit.es.js",

package.json

@@ -1,14 +1,14 @@
 /* eslint-disable max-lines-per-function */
 import React, { FC, useState, useEffect } from 'react'
-import { Typography, Form, Select, SelectProps, Input } from 'antd'
+import { Form, Select, SelectProps, Input } from 'antd'
 import type { CustomTagProps } from 'rc-select/lib/BaseSelect'
 import { useLocation, useSearchParams } from 'react-router-dom'
 import { getKinds } from 'api/bff/search/getKinds'
 import { getSortedKinds } from 'utils/getSortedKinds'
 import { TKindIndex } from 'localTypes/bff/search'
 import { TKindWithVersion } from 'localTypes/search'
 import { filterSelectOptions } from 'utils/filterSelectOptions'
-import { useDebouncedCallback, getArrayParam, setArrayParam } from './utils'
+import { useDebouncedCallback, getArrayParam, setArrayParam, getStringParam, setStringParam } from './utils'
 import { Styled } from './styled'
 
 type TSearchProps = {
@@ -23,8 +23,12 @@ export const Search: FC<TSearchProps> = ({ cluster }) => {
   const FIELD_NAME = 'kinds'
   const FIELD_NAME_STRING = 'name'
   const FIELD_NAME_MULTIPLE = 'labels'
+
   const TYPE_SELECTOR = 'TYPE_SELECTOR'
+
   const QUERY_KEY = 'kinds' // the query param name
+  const NAME_QUERY_KEY = 'name'
+  const LABELS_QUERY_KEY = 'labels'
 
   const watchedKinds = Form.useWatch<string[] | undefined>(FIELD_NAME, form)
   const watchedName = Form.useWatch<string | undefined>(FIELD_NAME_STRING, form)
@@ -46,14 +50,40 @@ export const Search: FC<TSearchProps> = ({ cluster }) => {
 
   // Apply current values from search params on mount / when URL changes
   useEffect(() => {
-    const fromUrl = getArrayParam(searchParams, QUERY_KEY)
-    const current = form.getFieldValue(FIELD_NAME)
+    const fromKinds = getArrayParam(searchParams, QUERY_KEY)
+    const currentKinds = form.getFieldValue(FIELD_NAME)
+    const kindsDiffer =
+      (fromKinds.length || 0) !== (currentKinds?.length || 0) || fromKinds.some((v, i) => v !== currentKinds?.[i])
 
-    // Only update the form if URL differs from form (prevents loops)
-    const differ = (fromUrl.length || 0) !== (current?.length || 0) || fromUrl.some((v, i) => v !== current?.[i])
+    // name
+    const fromName = getStringParam(searchParams, NAME_QUERY_KEY)
+    const currentName = form.getFieldValue(FIELD_NAME_STRING) as string | undefined
+    const nameDiffer = (fromName || '') !== (currentName || '')
+
+    // labels
+    const fromLabels = getArrayParam(searchParams, LABELS_QUERY_KEY)
+    const currentLabels = form.getFieldValue(FIELD_NAME_MULTIPLE) as string[] | undefined
+    const labelsDiffer =
+      (fromLabels.length || 0) !== (currentLabels?.length || 0) || fromLabels.some((v, i) => v !== currentLabels?.[i])
+
+    // decide type from params
+    const currentType = form.getFieldValue(TYPE_SELECTOR)
+    let inferredType: string | undefined
+    if (fromName) {
+      inferredType = 'name'
+    } else if (fromLabels.length > 0) {
+      inferredType = 'labels'
+    }
+    const typeDiffer = inferredType !== currentType
 
-    if (differ) {
-      form.setFieldsValue({ [FIELD_NAME]: fromUrl })
+    // Only update the form if URL differs from form (prevents loops)
+    if (kindsDiffer || nameDiffer || labelsDiffer) {
+      form.setFieldsValue({
+        [FIELD_NAME]: kindsDiffer ? fromKinds : currentKinds,
+        [FIELD_NAME_STRING]: nameDiffer ? fromName : currentName,
+        [FIELD_NAME_MULTIPLE]: labelsDiffer ? fromLabels : currentLabels,
+        [TYPE_SELECTOR]: typeDiffer ? inferredType : currentType,
+      })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.search]) // react to back/forward, external URL edits
@@ -64,13 +94,49 @@ export const Search: FC<TSearchProps> = ({ cluster }) => {
     setSearchParams(next, { replace: true }) // replace to keep history cleaner
   }, 250)
 
+  const debouncedPushName = useDebouncedCallback((value: string) => {
+    const next = setStringParam(searchParams, NAME_QUERY_KEY, value)
+    setSearchParams(next, { replace: true })
+  }, 250)
+
+  const debouncedPushLabels = useDebouncedCallback((values: string[]) => {
+    const next = setArrayParam(searchParams, LABELS_QUERY_KEY, values)
+    setSearchParams(next, { replace: true })
+  }, 250)
+
   useEffect(() => {
     debouncedPush(watchedKinds || [])
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [watchedKinds])
 
-  // eslint-disable-next-line no-console
-  console.log(kindWithVersion)
+  useEffect(() => {
+    debouncedPushName((watchedName || '').trim())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchedName])
+
+  useEffect(() => {
+    debouncedPushLabels(watchedMultiple || [])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchedMultiple])
+
+  useEffect(() => {
+    if (watchedTypedSelector === 'name') {
+      // Clear labels when switching to "name"
+      const cur = form.getFieldValue(FIELD_NAME_MULTIPLE) as string[] | undefined
+      if (cur?.length) {
+        form.setFieldsValue({ [FIELD_NAME_MULTIPLE]: [] })
+      }
+    } else if (watchedTypedSelector === 'labels') {
+      // Clear name when switching to "labels"
+      const cur = (form.getFieldValue(FIELD_NAME_STRING) as string | undefined) ?? ''
+      if (cur) {
+        form.setFieldsValue({ [FIELD_NAME_STRING]: '' })
+      }
+    }
+    // Optional: if undefined (e.g., initial), choose a default behavior:
+    // else { form.setFieldsValue({ [FIELD_NAME_STRING]: '', [FIELD_NAME_MULTIPLE]: [] }) }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchedTypedSelector])
 
   const options: SelectProps['options'] =
     kindWithVersion?.map(({ kind, notUnique, group, version }) => ({
@@ -101,7 +167,7 @@ export const Search: FC<TSearchProps> = ({ cluster }) => {
   )
 
   return (
-    <Styled.CatContainer>
+    <div>
       <Form form={form} layout="vertical">
         <Styled.FormContainer>
           <Form.Item name={FIELD_NAME} label="Kinds">
@@ -113,6 +179,7 @@ export const Search: FC<TSearchProps> = ({ cluster }) => {
               allowClear
               showSearch
               tagRender={tagRender}
+              maxTagCount="responsive"
             />
           </Form.Item>
           <Form.Item name={TYPE_SELECTOR} label="Type">
@@ -163,13 +230,12 @@ export const Search: FC<TSearchProps> = ({ cluster }) => {
               />
             </Form.Item>
           </Styled.HideableContainer>
-          {/* Example of "watching" the value for display or side-effects */}
-          <div>Current: {(watchedKinds || []).join(', ')}</div>
-          <div>Current name: {watchedName}</div>
-          <div>Current labels: {(watchedMultiple || []).join(', ')}</div>
         </Styled.FormContainer>
       </Form>
-      <Typography.Title>To Be Done</Typography.Title>
-    </Styled.CatContainer>
+      {/* Example of "watching" the value for display or side-effects */}
+      <div>Current: {(watchedKinds || []).join(', ')}</div>
+      <div>Current name: {watchedName}</div>
+      <div>Current labels: {(watchedMultiple || []).join(', ')}</div>
+    </div>
   )
 }

src/components/molecules/Search/Search.tsx

@@ -1,14 +1,6 @@
 import { Tag } from 'antd'
 import styled from 'styled-components'
 
-export const CatContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-flow: column;
-  margin: auto;
-`
-
 const SelectTag = styled(Tag)`
   margin-inline-end: 4px;
   padding: 4px 6px;
@@ -25,7 +17,9 @@ const SelectTagSpan = styled.span`
 `
 
 const FormContainer = styled.div`
-  width: 450px;
+  display: grid;
+  grid-template-columns: 300px 100px 1fr;
+  gap: 16px;
 `
 
 type THideableContainerProps = {
@@ -37,7 +31,6 @@ const HideableContainer = styled.div<THideableContainerProps>`
 `
 
 export const Styled = {
-  CatContainer,
   SelectTag,
   SelectTagSpan,
   FormContainer,

src/components/molecules/Search/styled.ts

@@ -28,3 +28,15 @@ export const setArrayParam = (sp: URLSearchParams, key: string, values: string[]
   }
   return next
 }
+
+export const getStringParam = (sp: URLSearchParams, key: string): string => {
+  return sp.get(key) ?? ''
+}
+
+export const setStringParam = (sp: URLSearchParams, key: string, value: string | undefined | null) => {
+  const next = new URLSearchParams(sp) // preserve other params
+  const v = (value ?? '').trim()
+  if (!v) next.delete(key)
+  else next.set(key, v)
+  return next
+}