[flux] make the flux controller namespace configurable

flux/src/index.tsx

@@ -1,5 +1,5 @@
 import { addIcon } from '@iconify/react';
-import { registerRoute, registerSidebarEntry } from '@kinvolk/headlamp-plugin/lib';
+import { registerRoute, registerSidebarEntry, registerPluginSettings } from '@kinvolk/headlamp-plugin/lib';
 import { HelmReleases } from './helm-releases/HelmReleaseList';
 import { FluxHelmReleaseDetailView } from './helm-releases/HelmReleaseSingle';
 import { ImageAutomation } from './image-automation/ImageAutomationList';
@@ -11,6 +11,7 @@ import { Notification } from './notifications/NotificationSingle';
 import { FluxRunTime } from './runtime/RuntimeList';
 import { FluxSources } from './sources/SourceList';
 import { FluxSourceDetailView } from './sources/SourceSingle';
+import Settings, { store } from './settings';
 
 addIcon('simple-icons:flux', {
   body: '<path fill="currentColor" d="M11.402 23.747q.231.112.454.238c.181.038.37.004.525-.097l.386-.251c-1.242-.831-2.622-1.251-3.998-1.602zm-7.495-5.783a8 8 0 0 1-.222-.236a.696.696 0 0 0 .112 1.075l2.304 1.498c1.019.422 2.085.686 3.134.944c1.636.403 3.2.79 4.554 1.728l.697-.453c-1.541-1.158-3.327-1.602-5.065-2.03c-2.039-.503-3.965-.977-5.514-2.526m1.414-1.322l-.665.432q.033.037.068.073c1.702 1.702 3.825 2.225 5.877 2.731c1.778.438 3.469.856 4.9 1.982l.682-.444c-1.612-1.357-3.532-1.834-5.395-2.293c-2.019-.497-3.926-.969-5.467-2.481m7.502 2.084c1.596.412 3.096.904 4.367 2.036l.67-.436c-1.484-1.396-3.266-1.953-5.037-2.403zm.698-2.337l-.698-.174v.802l.512.127c2.039.503 3.965.978 5.514 2.526l.007.009l.663-.431l-.121-.128c-1.702-1.701-3.824-2.225-5.877-2.731m-.698-1.928v.816c.624.19 1.255.347 1.879.501c2.039.502 3.965.977 5.513 2.526q.116.116.226.239a.704.704 0 0 0-.238-.911l-3.064-1.992c-.744-.245-1.502-.433-2.251-.618a31 31 0 0 1-2.065-.561m-1.646 3.049c-1.526-.4-2.96-.888-4.185-1.955l-.674.439c1.439 1.326 3.151 1.88 4.859 2.319zm0-1.772a8.5 8.5 0 0 1-2.492-1.283l-.686.446c.975.804 2.061 1.293 3.178 1.655zm0-1.946a8 8 0 0 1-.776-.453l-.701.456c.462.337.957.627 1.477.865zm3.533.269l-1.887-1.226v.581q.922.386 1.887.645m5.493-8.863L12.381.112a.7.7 0 0 0-.762 0L3.797 5.198a.698.698 0 0 0 0 1.171l7.38 4.797V7.678a.414.414 0 0 0-.412-.412h-.543a.413.413 0 0 1-.356-.617l1.777-3.079a.412.412 0 0 1 .714 0l1.777 3.079a.413.413 0 0 1-.356.617h-.543a.414.414 0 0 0-.412.412v3.488l7.38-4.797a.7.7 0 0 0 0-1.171" />',
@@ -163,3 +164,13 @@ registerRoute({
   sidebar: 'flux-runtime',
   component: () => <FluxRunTime />,
 });
+
+
+/**
+ * Register the settings component for the plugin.
+ *
+ * In this example, the settings component allows users to update the logo URL.
+ * The updated URL is automatically saved to the configStore.
+ */
+
+registerPluginSettings('flux', Settings, false);

flux/src/settings.tsx

@@ -0,0 +1,119 @@
+import { ConfigStore } from '@kinvolk/headlamp-plugin/lib';
+import { NameValueTable } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import { useEffect, useState } from 'react';
+
+/**
+ * The Settings component for the flux plugin allows users to configure certain properties, such as the flux controller namespace.
+ * The component uses the ConfigStore to manage the plugin configuration and automatically saves updates to the store.
+ *
+ */
+
+/**
+ * A text input component with auto-save functionality. It debounces the input value changes and triggers the onSave callback after a specified delay, allowing for efficient data saving with minimal performance impact.
+ *
+ * @param {Object} props - The component props.
+ * @param {function(string): void} props.onSave - Callback function to save the value. It receives the current value as its only argument.
+ * @param {string} [props.defaultValue=''] - The default value of the input.
+ * @param {number} [props.delay=1000] - The delay in milliseconds before the onSave callback is invoked after the user stops typing.
+ * @param {string} [props.helperText=''] - Optional helper text to display below the input.
+ * @returns {JSX.Element} The AutoSaveInput component.
+ */
+function AutoSaveInput({ onSave, defaultValue = '', delay = 1000, helperText = '' }) {
+  const [value, setValue] = useState(defaultValue);
+  const [timer, setTimer] = useState(null);
+
+  const handleChange = event => {
+    const newValue = event.target.value;
+    setValue(newValue);
+
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    const newTimer = setTimeout(() => onSave(newValue), delay);
+    setTimer(newTimer);
+  };
+
+  useEffect(() => {
+    // Cleanup on unmount
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [timer]);
+
+  return (
+    <TextField
+      fullWidth
+      InputProps={{ style: { borderBottom: '1px solid rgba(0, 0, 0, 0.42)' } }}
+      InputLabelProps={{
+        shrink: true,
+        style: { display: 'none' },
+      }}
+      helperText={helperText}
+      value={value}
+      onChange={handleChange}
+      variant="standard"
+    />
+  );
+}
+
+interface pluginConfig {
+  fluxControllerNamespace: string;
+}
+
+export const store = new ConfigStore<pluginConfig>('flux');
+
+/**
+ * Settings component for managing plugin configuration details.
+ * It allows users to update specific configuration properties, such as the flux controller namespace,
+ * and automatically saves these updates to a persistent store.
+ *
+ * @returns {JSX.Element} The rendered settings component with configuration options.
+ */
+export default function Settings() {
+  // Retrieve initial configuration from the store
+  const config = store.get();
+  // State to manage the current configuration within the component
+  const [currentConfig, setCurrentConfig] = useState(config);
+
+  /**
+   * Handles saving the updated configuration value to the store.
+   * It updates the specified configuration property and refreshes the local component state
+   * to reflect the latest configuration.
+   *
+   * @param {string} value - The new value for the configuration property to be updated.
+   */
+  function handleSave(value) {
+    const updatedConfig = { url: value };
+    // Save the updated configuration to the store
+    store.set(updatedConfig);
+    // Update the component state to reflect the new configuration
+    setCurrentConfig(store.get());
+  }
+
+  // Define rows for the settings table, including the AutoSaveInput component for the flux controller namespace
+  const settingsRows = [
+    {
+      name: 'Flux Controller Namespace',
+      value: (
+        <AutoSaveInput
+          defaultValue={currentConfig?.fluxControllerNamespace}
+          onSave={handleSave}
+          delay={1000}
+          helperText={'Enter the name of the namespace where your flux controller is deployed.'}
+        />
+      ),
+    },
+  ];
+
+  // Render the settings component
+  return (
+    <Box width={'80%'} style={{ paddingTop: '8vh' }}>
+      <NameValueTable rows={settingsRows} />
+    </Box>
+  );
+}