From 34b8478d71da0cfbe85bbcf5ce877ec9667c548e Mon Sep 17 00:00:00 2001
From: yolossn <sannagaraj@microsoft.com>
Date: Thu, 1 Feb 2024 00:56:17 +0530
Subject: [PATCH] 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 <sannagaraj@microsoft.com>
---
 plugins/examples/pod-counter/src/Message.tsx |  7 ++-
 plugins/examples/pod-counter/src/index.tsx   | 50 ++++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/plugins/examples/pod-counter/src/Message.tsx b/plugins/examples/pod-counter/src/Message.tsx
index e0fce2bd6e5..f2073f0cdc6 100644
--- a/plugins/examples/pod-counter/src/Message.tsx
+++ b/plugins/examples/pod-counter/src/Message.tsx
@@ -1,3 +1,4 @@
+import { ConfigStore } from '@kinvolk/headlamp-plugin/lib';
 import { Typography } from '@mui/material';
 
 export interface MessageProps {
@@ -17,9 +18,13 @@ export interface MessageProps {
  *
  */
 export default function Message({ msg, error }: MessageProps) {
+  const config = new ConfigStore<{ errorMessage?: string }>('@kinvolk/headlamp-pod-counter');
+  const useConf = config.useConfig();
+  const conf = useConf();
+
   return (
     <Typography color="textPrimary" sx={{ fontStyle: 'italic' }}>
-      {!error ? `# Pods: ${msg}` : 'Uh, pods!?'}
+      {!error ? `# Pods: ${msg}` : conf?.errorMessage ? conf?.errorMessage : 'Uh, pods!?'}
     </Typography>
   );
 }
diff --git a/plugins/examples/pod-counter/src/index.tsx b/plugins/examples/pod-counter/src/index.tsx
index 8f1e146ac20..abbd8e08e51 100644
--- a/plugins/examples/pod-counter/src/index.tsx
+++ b/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, true);