plugin(pod-counter): Make error message configurable

this patch registers a Settings Detail Component
which allows the user to set the error message to
be displayed when the pods count cannot be
retrieved.

Signed-off-by: yolossn <[email protected]>

plugins/examples/pod-counter/src/Message.tsx

@@ -1,3 +1,4 @@
+import { ConfigStore } from '@kinvolk/headlamp-plugin/lib';
 import { Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 
@@ -25,9 +26,13 @@ export interface MessageProps {
  */
 export default function Message({ msg, error }: MessageProps) {
   const classes = useStyle();
+  const config = new ConfigStore<{ errorMessage?: string }>('@kinvolk/headlamp-pod-counter');
+  const useConf = config.useConfig();
+  const conf = useConf();
+
   return (
     <Typography color="textPrimary" className={classes.pods}>
-      {!error ? `# Pods: ${msg}` : 'Uh, pods!?'}
+      {!error ? `# Pods: ${msg}` : conf?.errorMessage ? conf?.errorMessage : 'Uh, pods!?'}
     </Typography>
   );
 }

plugins/examples/pod-counter/src/index.tsx

@@ -2,8 +2,13 @@ import {
   AppBarActionsProcessorArgs,
   DefaultAppBarAction,
   K8s,
+  PluginSettingsDetailProps,
   registerAppBarAction,
+  registerPluginSettings,
 } 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 Message from './Message';
 
 function PodCounter() {
@@ -30,3 +35,33 @@ registerAppBarAction(function reorderNotifications({ actions }: AppBarActionsPro
 
   return newActions;
 });
+
+const Settings: React.FC<PluginSettingsDetailProps> = props => {
+  const { data, onDataChange } = props;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onDataChange({ errorMessage: event.target.value });
+  };
+
+  const settingsRows = [
+    {
+      name: 'Custom Error message',
+      value: (
+        <TextField
+          fullWidth
+          helperText="Enter the custom error message to display when the pod count cannot be retrieved"
+          defaultValue={data?.errorMessage ? data.errorMessage : 'Uh.pods!?'}
+          onChange={handleChange}
+          variant="standard"
+        />
+      ),
+    },
+  ];
+  return (
+    <Box width={'80%'}>
+      <NameValueTable rows={settingsRows} />
+    </Box>
+  );
+};
+
+registerPluginSettings('@kinvolk/headlamp-pod-counter', Settings, false);