frontend: Allow direct editing of secret data

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>

Author: skoeva

frontend/src/components/common/Resource/Resource.tsx

@@ -11,7 +11,6 @@ import { BaseTextFieldProps } from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/system';
 import { Location } from 'history';
-import { Base64 } from 'js-base64';
 import _, { has } from 'lodash';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -506,12 +505,12 @@ export function SecretField(props: InputProps) {
       </Grid>
       <Grid item xs>
         <Input
-          readOnly
+          readOnly={!showPassword}
           type="password"
           fullWidth
           multiline={showPassword}
           maxRows="20"
-          value={showPassword ? Base64.decode(value as string) : '******'}
+          value={showPassword ? (value as string) : '******'}
           {...other}
         />
       </Grid>

frontend/src/components/secret/Details.tsx

@@ -1,6 +1,13 @@
+import { Box, Button } from '@mui/material';
+import { Base64 } from 'js-base64';
+import _ from 'lodash';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import Secret from '../../lib/k8s/secret';
+import { clusterAction } from '../../redux/clusterActionSlice';
+import { AppDispatch } from '../../redux/stores/store';
 import { EmptyContent } from '../common';
 import { DetailsGrid, SecretField } from '../common/Resource';
 import { SectionBox } from '../common/SectionBox';
@@ -14,6 +21,7 @@ export default function SecretDetails(props: {
   const params = useParams<{ namespace: string; name: string }>();
   const { name = params.name, namespace = params.namespace, cluster } = props;
   const { t } = useTranslation();
+  const dispatch: AppDispatch = useDispatch();
 
   return (
     <DetailsGrid
@@ -35,19 +43,68 @@ export default function SecretDetails(props: {
           {
             id: 'headlamp.secrets-data',
             section: () => {
-              const itemData = item?.data || {};
-              const mainRows: NameValueTableRow[] = Object.entries(itemData).map(
-                (item: unknown[]) => ({
-                  name: item[0] as string,
-                  value: <SecretField value={item[1]} />,
-                })
-              );
+              const initialData = _.mapValues(item.data, (v: string) => Base64.decode(v));
+              const [data, setData] = React.useState(initialData);
+              const lastDataRef = React.useRef(initialData);
+
+              React.useEffect(() => {
+                const newData = _.mapValues(item.data, (v: string) => Base64.decode(v));
+                if (!_.isEqual(newData, lastDataRef.current)) {
+                  if (_.isEqual(data, lastDataRef.current)) {
+                    setData(newData);
+                    lastDataRef.current = newData;
+                  }
+                }
+              }, [item.data]);
+
+              const handleFieldChange = (key: string, newValue: string) => {
+                setData(prev => ({ ...prev, [key]: newValue }));
+              };
+
+              const handleSave = () => {
+                const encodedData = _.mapValues(data, (v: string) => Base64.encode(v));
+                const updatedSecret = { ...item.jsonData, data: encodedData };
+                dispatch(
+                  clusterAction(() => item.update(updatedSecret), {
+                    startMessage: t('translation|Applying changes to {{ itemName }}…', {
+                      itemName: item.metadata.name,
+                    }),
+                    cancelledMessage: t('translation|Cancelled changes to {{ itemName }}.', {
+                      itemName: item.metadata.name,
+                    }),
+                    successMessage: t('translation|Applied changes to {{ itemName }}.', {
+                      itemName: item.metadata.name,
+                    }),
+                    errorMessage: t('translation|Failed to apply changes to {{ itemName }}.', {
+                      itemName: item.metadata.name,
+                    }),
+                  })
+                );
+                lastDataRef.current = _.cloneDeep(data);
+              };
+
+              const mainRows: NameValueTableRow[] = Object.entries(data).map((item: unknown[]) => ({
+                name: item[0] as string,
+                value: (
+                  <SecretField
+                    value={item[1]}
+                    onChange={e => handleFieldChange(item[0] as string, e.target.value)}
+                  />
+                ),
+              }));
               return (
                 <SectionBox title={t('translation|Data')}>
                   {mainRows.length === 0 ? (
                     <EmptyContent>{t('No data in this secret')}</EmptyContent>
                   ) : (
-                    <NameValueTable rows={mainRows} />
+                    <>
+                      <NameValueTable rows={mainRows} />
+                      <Box mt={2} display="flex" justifyContent="flex-end">
+                        <Button variant="contained" color="primary" onClick={handleSave}>
+                          {t('translation|Save')}
+                        </Button>
+                      </Box>
+                    </>
                   )}
                 </SectionBox>
               );

frontend/src/components/secret/__snapshots__/Details.WithBase.stories.storyshot

@@ -344,6 +344,20 @@
                   </div>
                 </dd>
               </dl>
+              <div
+                class="MuiBox-root css-10igwnb"
+              >
+                <button
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-gn8fa3-MuiButtonBase-root-MuiButton-root"
+                  tabindex="0"
+                  type="button"
+                >
+                  Save
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </button>
+              </div>
             </div>
           </div>
         </div>