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

search: other inputs

Author: typescreep

src/components/molecules/Search/Search.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines-per-function */
 import React, { FC, useState, useEffect } from 'react'
-import { Typography, Form, Select, SelectProps } from 'antd'
+import { Typography, 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'
@@ -20,10 +20,16 @@ export const Search: FC<TSearchProps> = ({ cluster }) => {
   const [searchParams, setSearchParams] = useSearchParams()
   const location = useLocation()
 
-  const FIELD_NAME = 'kinds' // the Form.Item name
+  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 watchedKinds = Form.useWatch<string[] | undefined>(FIELD_NAME, form)
+  const watchedName = Form.useWatch<string | undefined>(FIELD_NAME_STRING, form)
+  const watchedMultiple = Form.useWatch<string[] | undefined>(FIELD_NAME_MULTIPLE, form)
+  const watchedTypedSelector = Form.useWatch<string | undefined>(TYPE_SELECTOR, form)
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [kindIndex, setKindIndex] = useState<TKindIndex>()
@@ -97,7 +103,7 @@ export const Search: FC<TSearchProps> = ({ cluster }) => {
   return (
     <Styled.CatContainer>
       <Form form={form} layout="vertical">
-        <Styled.SelectContainer>
+        <Styled.FormContainer>
           <Form.Item name={FIELD_NAME} label="Kinds">
             <Select
               mode="multiple"
@@ -109,9 +115,59 @@ export const Search: FC<TSearchProps> = ({ cluster }) => {
               tagRender={tagRender}
             />
           </Form.Item>
-        </Styled.SelectContainer>
-        {/* Example of "watching" the value for display or side-effects */}
-        <div>Current: {(watchedKinds || []).join(', ')}</div>
+          <Form.Item name={TYPE_SELECTOR} label="Type">
+            <Select
+              placeholder="Select"
+              options={[
+                { label: 'Name', value: 'name' },
+                { label: 'Labels', value: 'labels' },
+              ]}
+              defaultValue="name"
+              filterOption={filterSelectOptions}
+              showSearch
+            />
+          </Form.Item>
+          <Styled.HideableContainer $isHidden={watchedTypedSelector === 'labels'}>
+            <Form.Item name={FIELD_NAME_STRING} label="Name">
+              <Input allowClear />
+            </Form.Item>
+          </Styled.HideableContainer>
+          <Styled.HideableContainer $isHidden={watchedTypedSelector === 'name' || watchedTypedSelector === undefined}>
+            <Form.Item
+              name={FIELD_NAME_MULTIPLE}
+              label="Labels"
+              validateTrigger="onBlur"
+              rules={[
+                () => ({
+                  validator(_, value) {
+                    if (
+                      Array.isArray(value) &&
+                      value.every(str => typeof str === 'string' && str.includes('=') && !str.startsWith('='))
+                    ) {
+                      return Promise.resolve()
+                    }
+                    return Promise.reject(new Error('Please enter key=value style'))
+                  },
+                }),
+              ]}
+            >
+              <Select
+                mode="tags"
+                allowClear
+                placeholder="Select"
+                // dropdownStyle={{ display: 'none' }}
+                tokenSeparators={[',', ' ', '	']}
+                suffixIcon={null}
+                filterOption={filterSelectOptions}
+                tagRender={tagRender}
+              />
+            </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>

src/components/molecules/Search/styled.ts

@@ -24,13 +24,22 @@ const SelectTagSpan = styled.span`
   flex-direction: column;
 `
 
-const SelectContainer = styled.div`
+const FormContainer = styled.div`
   width: 450px;
 `
 
+type THideableContainerProps = {
+  $isHidden?: boolean
+}
+
+const HideableContainer = styled.div<THideableContainerProps>`
+  display: ${({ $isHidden }) => ($isHidden ? 'none' : 'initial')};
+`
+
 export const Styled = {
   CatContainer,
   SelectTag,
   SelectTagSpan,
-  SelectContainer,
+  FormContainer,
+  HideableContainer,
 }