Make customizing ItemListLayout header explicitly reducable (#2956)

- Add search placeholder text for helm releases

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+custom-resources/crd-list.scss

@@ -42,4 +42,8 @@
       }
     }
   }
-}
+
+  .SearchInput {
+    width: 300px;
+  }
+}

src/renderer/components/+custom-resources/crd-list.tsx

@@ -95,7 +95,7 @@ export class CrdList extends React.Component {
         sortingCallbacks={sortingCallbacks}
         searchFilters={Object.values(sortingCallbacks)}
         renderHeaderTitle="Custom Resources"
-        customizeHeader={() => {
+        customizeHeader={({ filters, ...headerPlaceholders }) => {
           let placeholder = <>All groups</>;
 
           if (selectedGroups.length == 1) placeholder = <>Group: {selectedGroups[0]}</>;
@@ -104,26 +104,30 @@ export class CrdList extends React.Component {
           return {
             // todo: move to global filters
             filters: (
-              <Select
-                className="group-select"
-                placeholder={placeholder}
-                options={Object.keys(crdStore.groups)}
-                onChange={({ value: group }: SelectOption) => this.toggleSelection(group)}
-                closeMenuOnSelect={false}
-                controlShouldRenderValue={false}
-                formatOptionLabel={({ value: group }: SelectOption) => {
-                  const isSelected = selectedGroups.includes(group);
-
-                  return (
-                    <div className="flex gaps align-center">
-                      <Icon small material="folder"/>
-                      <span>{group}</span>
-                      {isSelected && <Icon small material="check" className="box right"/>}
-                    </div>
-                  );
-                }}
-              />
-            )
+              <>
+                {filters}
+                <Select
+                  className="group-select"
+                  placeholder={placeholder}
+                  options={Object.keys(crdStore.groups)}
+                  onChange={({ value: group }: SelectOption) => this.toggleSelection(group)}
+                  closeMenuOnSelect={false}
+                  controlShouldRenderValue={false}
+                  formatOptionLabel={({ value: group }: SelectOption) => {
+                    const isSelected = selectedGroups.includes(group);
+  
+                    return (
+                      <div className="flex gaps align-center">
+                        <Icon small material="folder"/>
+                        <span>{group}</span>
+                        {isSelected && <Icon small material="check" className="box right"/>}
+                      </div>
+                    );
+                  }}
+                />
+              </>
+            ),
+            ...headerPlaceholders,
           };
         }}
         renderTableHeader={[

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -101,6 +101,13 @@ export class CrdResources extends React.Component<Props> {
           (item: KubeObject) => item.getSearchFields(),
         ]}
         renderHeaderTitle={crd.getResourceTitle()}
+        customizeHeader={({ searchProps, ...headerPlaceholders }) => ({
+          searchProps: {
+            ...searchProps,
+            placeholder: `Search ${crd.getResourceTitle()}...`,
+          },
+          ...headerPlaceholders
+        })}
         renderTableHeader={[
           { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
           isNamespaced && { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },