container selection for connect operations

mruoss · Dec 13, 2024 · 41fa4e2 · 41fa4e2
1 parent 6abf614
commit 41fa4e2
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 18 deletions.
diff --git a/assets/packs/get_cell/connect_operation_form.tsx b/assets/packs/get_cell/connect_operation_form.tsx
@@ -11,6 +11,21 @@ const ConnectOperationForm: React.FC<{
   updateField: UpdateFieldFun<GetCellFields>
 }> = ({ fields, updateField }) => (
   <div className="flex gap-x-5 p-3">
+    <SearchSelect<GVK>
+      className="opacity-60"
+      name="gvk"
+      label="Resource Kind"
+      onSearch={updateField('search_term')}
+      searchTerm={fields.search_term}
+      resultItemsKeyField={'index'}
+      resultItems={fields.search_result_items}
+      onSelect={updateField('gvk')}
+      itemRenderer={(item: GVK) => <GVKOption gvk={item} />}
+      selectedValue={fields.gvk?.kind}
+      placeholder="apps/v1 Deployment"
+      disabled={true}
+    />
+
     {fields.namespaces && (
       <SelectOrInput
         name="namespace"
@@ -27,14 +42,26 @@ const ConnectOperationForm: React.FC<{
       <SelectOrInput
         name="resource"
         label={fields.gvk.kind}
-        options={fields.resources.map((ns) => ({
-          label: ns,
-          value: ns,
+        options={fields.resources.map((resource) => ({
+          label: resource,
+          value: resource,
         }))}
         selectedOption={fields.resource}
         onChange={updateField('resource')}
       />
     )}
+    {fields.containers && (
+      <SelectOrInput
+        name="container"
+        label="Container"
+        options={fields.containers.map((container) => ({
+          label: container,
+          value: container,
+        }))}
+        selectedOption={fields.container}
+        onChange={updateField('container')}
+      />
+    )}
   </div>
 )
 

diff --git a/assets/packs/get_cell/types.d.ts b/assets/packs/get_cell/types.d.ts
@@ -14,6 +14,8 @@ export interface GetCellFields extends Fields {
   namespace: string
   resources?: [string]
   resource?: string
+  containers?: [string]
+  container?: string
 }
 
 export interface ConnectionState {

diff --git a/assets/shared/search_select.tsx b/assets/shared/search_select.tsx
@@ -8,6 +8,7 @@ type SearchInputProps = {
   searchTerm: string
   onSearch: (searchTerm: string) => void
   placeholder?: string
+  disabled?: boolean
 }
 
 const SearchInput: React.FC<SearchInputProps> = ({
@@ -16,6 +17,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
   searchTerm,
   onSearch,
   placeholder,
+  disabled = false,
 }: SearchInputProps) => {
   const performSearch = debounce((searchTerm) => {
     onSearch(searchTerm.toLowerCase())
@@ -61,6 +63,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
           type="text"
           value={localSearchTerm}
           name={name}
+          disabled={disabled}
           autoComplete="off"
           placeholder={placeholder}
           onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -104,7 +107,7 @@ const SearchResult = <ItemType,>({
   )
 }
 
-type SearchSelectProps = { label: string; className: string }
+type SearchSelectProps = { label: string; className?: string }
 
 const SearchSelect = <ItemType,>({
   name,
@@ -114,10 +117,11 @@ const SearchSelect = <ItemType,>({
   resultItems,
   resultItemsKeyField,
   itemRenderer,
-  className,
+  className = '',
   onSelect,
   selectedValue,
   placeholder,
+  disabled = false,
 }: SearchInputProps & SearchResultProps<ItemType> & SearchSelectProps) => {
   return (
     <div className={className}>
@@ -130,6 +134,7 @@ const SearchSelect = <ItemType,>({
         searchTerm={searchTerm}
         selectedValue={selectedValue}
         placeholder={placeholder}
+        disabled={disabled}
       />
       {(resultItems && resultItems.length) > 0 && (
         <SearchResult

diff --git a/lib/assets/get_cell/build/main.css b/lib/assets/get_cell/build/main.css