plugins(change-logo): Make the logo configurable

this patch adds plugin settings component which can be used by the user to configure custom logo by providing the URL. Signed-off-by: yolossn <[email protected]>
headlamp-k8s · Feb 1, 2024 · f0f291a · f0f291a
1 parent 27d6f2f
commit f0f291a
Showing 1 changed file with 96 additions and 3 deletions.
diff --git a/plugins/examples/change-logo/src/index.tsx b/plugins/examples/change-logo/src/index.tsx
@@ -3,11 +3,20 @@
 // import { registerAppLogo } from '@kinvolk/headlamp-plugin/lib';
 // registerAppLogo(() => <p>My Logo</p>);
 
-import { AppLogoProps, registerAppLogo } from '@kinvolk/headlamp-plugin/lib';
+import {
+  AppLogoProps,
+  registerAppLogo,
+  registerPluginSettings,
+} from '@kinvolk/headlamp-plugin/lib';
+import { ConfigStore } from '@kinvolk/headlamp-plugin/lib';
+import { PluginSettingsDetailProps } from '@kinvolk/headlamp-plugin/lib';
+import { NameValueTable } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { SvgIcon } from '@mui/material';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import { useEffect, useState } from 'react';
 import LogoWithTextLight from './icon-large-light.svg';
 import LogoLight from './icon-small-light.svg';
-
 /**
  * A simple logo using two different SVG files.
  * One for the small logo (used in mobile view), and a larger one used in desktop view.
@@ -18,7 +27,12 @@ import LogoLight from './icon-small-light.svg';
 function SimpleLogo(props: AppLogoProps) {
   const { logoType, className } = props;
 
-  return (
+  const useConf = store.useConfig();
+  const config = useConf();
+
+  return config?.url ? (
+    <img src={config?.url} alt="logo" className={className} />
+  ) : (
     <SvgIcon
       className={className}
       component={logoType === 'large' ? LogoWithTextLight : LogoLight}
@@ -56,3 +70,82 @@ if (show === 'simple') {
 } else {
   registerAppLogo(ReactiveLogo);
 }
+
+const 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(() => {
+    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 {
+  url: string;
+}
+
+const store = new ConfigStore<pluginConfig>('change-logo');
+
+const Settings: React.FC<PluginSettingsDetailProps> = () => {
+  const config = store.get();
+  const [currentConfig, setCurrentConfig] = useState<pluginConfig>(config);
+
+  function handleSave(value) {
+    const updatedConfig = { url: value };
+    store.set(updatedConfig);
+    setCurrentConfig(store.get());
+  }
+
+  const settingsRows = [
+    {
+      name: 'Logo URL',
+      value: (
+        <AutoSaveInput
+          defaultValue={currentConfig?.url}
+          onSave={handleSave}
+          delay={1000}
+          helperText={'Enter the URL of your logo.'}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Box width={'80%'} style={{ paddingTop: '8vh' }}>
+      <NameValueTable rows={settingsRows} />
+    </Box>
+  );
+};
+
+registerPluginSettings('change-logo', Settings, true);