refactor

Author: Hubert-Szczepanski-SAP

src/components/ControlPlane/FluxList.tsx

@@ -16,7 +16,7 @@ import { timeAgo } from '../../utils/i18n/timeAgo.ts';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
-import StatusFilter from '../Shared/StatusFilter.tsx';
+import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 
 export default function FluxList() {
   const {

src/components/ControlPlane/ManagedResources.tsx

@@ -15,7 +15,7 @@ import { resourcesInterval } from '../../lib/shared/constants';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell';
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
-import StatusFilter from '../Shared/StatusFilter.tsx';
+import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 
 interface CellData<T> {
   cell: {

src/components/ControlPlane/Providers.tsx

@@ -17,7 +17,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 
 import '@ui5/webcomponents-icons/dist/sys-enter-2';
 import '@ui5/webcomponents-icons/dist/sys-cancel-2';
-import StatusFilter from '../Shared/StatusFilter.tsx';
+import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 
 interface CellData<T> {
   cell: {

src/components/Shared/StatusFilter.tsx

@@ -0,0 +1,19 @@
+.option {
+  padding: 6px 10px;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.label {
+  font-size: 14px;
+}

src/components/Shared/StatusFilter/StatusFilter.module.css

@@ -0,0 +1,64 @@
+import { Icon, Option, Select } from '@ui5/webcomponents-react';
+import { useTranslation } from 'react-i18next';
+import styles from './StatusFilter.module.css';
+
+interface StatusFilterProps {
+  column: {
+    filterValue?: string;
+    setFilter?: (value?: string | undefined) => void;
+  };
+}
+
+interface OptionConfig {
+  value: string;
+  iconName: string;
+  color: string;
+  labelKey: string;
+}
+
+const StatusFilter: React.FC<StatusFilterProps> = ({ column }) => {
+  const { t } = useTranslation();
+
+  const options: OptionConfig[] = [
+    { value: 'all', iconName: 'filter', color: 'gray', labelKey: 'All' },
+    {
+      value: 'true',
+      iconName: 'sys-enter-2',
+      color: 'green',
+      labelKey: 'Enabled',
+    },
+    {
+      value: 'false',
+      iconName: 'sys-cancel-2',
+      color: 'red',
+      labelKey: 'Disabled',
+    },
+  ];
+
+  const handleChange = (
+    e: CustomEvent<{ selectedOption: { dataset?: { value?: string } } }>,
+  ) => {
+    const value = e.detail.selectedOption.dataset?.value;
+    column.setFilter?.(value === 'all' ? undefined : value);
+  };
+
+  const renderOption = ({ value, iconName, color, labelKey }: OptionConfig) => (
+    <Option
+      key={value}
+      data-value={value}
+      selected={
+        column.filterValue === value || (value === 'all' && !column.filterValue)
+      }
+      className={styles.option}
+    >
+      <div className={styles.container}>
+        <Icon name={iconName} style={{ color }} className={styles.icon} />
+        <span className={styles.label}>{t(labelKey)}</span>
+      </div>
+    </Option>
+  );
+
+  return <Select onChange={handleChange}>{options.map(renderOption)}</Select>;
+};
+
+export default StatusFilter;