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

@@ -3,7 +3,11 @@ import {
   DefaultAppBarAction,
   K8s,
   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 +34,49 @@ registerAppBarAction(function reorderNotifications({ actions }: AppBarActionsPro
 
   return newActions;
 });
+
+/**
+ * A component for displaying and editing plugin settings, specifically for customizing error messages.
+ * It renders a text input field that allows users to specify a custom error message.
+ * This message is intended to be displayed when a specific error condition occurs (e.g., pod count cannot be retrieved).
+ *
+ * @param {PluginSettingsDetailsProps} props - Properties passed to the Settings component.
+ * @param {Object} props.data - The current configuration data for the plugin, including the current error message.
+ * @param {function(Object): void} props.onDataChange - Callback function to handle changes to the data, specifically the error message.
+ */
+function Settings(props) {
+  const { data, onDataChange } = props;
+
+  /**
+   * Handles changes to the error message input field by invoking the onDataChange callback
+   * with the new error message.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event - The change event from the input field.
+   */
+  const handleChange = event => {
+    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);