frontend: add node shell

Fixes #996

Signed-off-by: farodin91 <github@jan-jansen.net>

Author: farodin91

frontend/src/components/App/Settings/SettingsCluster.tsx

@@ -14,7 +14,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
-import helpers, { ClusterSettings } from '../../../helpers';
+import helpers, { ClusterSettings, DEFAULT_NODE_SHELL_LINUX_IMAGE } from '../../../helpers';
 import { useCluster, useClustersConf } from '../../../lib/k8s';
 import { deleteCluster, parseKubeConfig, renameCluster } from '../../../lib/k8s/apiProxy';
 import { setConfig, setStatelessConfig } from '../../../redux/configSlice';
@@ -85,6 +85,7 @@ export default function SettingsCluster() {
   const { t } = useTranslation(['translation']);
   const [defaultNamespace, setDefaultNamespace] = React.useState('default');
   const [userDefaultNamespace, setUserDefaultNamespace] = React.useState('');
+  const [nodeShellLinuxImage, setNodeShellLinuxImage] = React.useState('');
   const [newAllowedNamespace, setNewAllowedNamespace] = React.useState('');
   const [clusterSettings, setClusterSettings] = React.useState<ClusterSettings | null>(null);
   const [cluster, setCluster] = React.useState(useCluster() || '');
@@ -217,10 +218,32 @@ export default function SettingsCluster() {
     }
   }, [location.search, clusters]);
 
+  React.useEffect(() => {
+    let timeoutHandle: NodeJS.Timeout | null = null;
+
+    if (isEditingNodeShellLinuxImage()) {
+      // We store the node shell image after a timeout.
+      timeoutHandle = setTimeout(() => {
+        storeNewNodeShellLinuxImage(nodeShellLinuxImage);
+      }, 1000);
+    }
+
+    return () => {
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+        timeoutHandle = null;
+      }
+    };
+  }, [nodeShellLinuxImage]);
+
   function isEditingDefaultNamespace() {
     return clusterSettings?.defaultNamespace !== userDefaultNamespace;
   }
 
+  function isEditingNodeShellLinuxImage() {
+    return clusterSettings?.nodeShellLinuxImage !== nodeShellLinuxImage;
+  }
+
   function storeNewAllowedNamespace(namespace: string) {
     setNewAllowedNamespace('');
     setClusterSettings((settings: ClusterSettings | null) => {
@@ -265,6 +288,14 @@ export default function SettingsCluster() {
     });
   }
 
+  function storeNewNodeShellLinuxImage(image: string) {
+    setClusterSettings((settings: ClusterSettings | null) => {
+      const newSettings = { ...(settings || {}) };
+      newSettings.nodeShellLinuxImage = image;
+      return newSettings;
+    });
+  }
+
   const isValidDefaultNamespace = isValidNamespaceFormat(userDefaultNamespace);
   const isValidCurrentName = isValidClusterNameFormat(newClusterName);
   const isValidNewAllowedNamespace = isValidNamespaceFormat(newAllowedNamespace);
@@ -504,6 +535,35 @@ export default function SettingsCluster() {
                 </>
               ),
             },
+            {
+              name: t('translation|Node Shell Linux Image'),
+              value: (
+                <TextField
+                  onChange={event => {
+                    let value = event.target.value;
+                    value = value.replace(' ', '');
+                    setNodeShellLinuxImage(value);
+                  }}
+                  value={nodeShellLinuxImage}
+                  placeholder={DEFAULT_NODE_SHELL_LINUX_IMAGE}
+                  helperText={t(
+                    'translation|The default image is used for dropping a shell into a node (when not specified directly).'
+                  )}
+                  InputProps={{
+                    endAdornment: isEditingNodeShellLinuxImage() ? (
+                      <Icon
+                        width={24}
+                        color={theme.palette.text.secondary}
+                        icon="mdi:progress-check"
+                      />
+                    ) : (
+                      <Icon width={24} icon="mdi:check-bold" />
+                    ),
+                    sx: { maxWidth: 250 },
+                  }}
+                />
+              ),
+            },
           ]}
         />
       </SectionBox>