Frontend: Fix secrets missing ARIA label & update logic

Author: vyncent-t

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

@@ -499,8 +499,12 @@ export function DataField(props: DataFieldProps) {
   );
 }
 
-export function SecretField(props: InputProps) {
-  const { value, ...other } = props;
+export interface SecretFieldProps extends InputProps {
+  nameID?: string;
+}
+
+export function SecretField(props: SecretFieldProps) {
+  const { value, nameID, ...other } = props;
   const [showPassword, setShowPassword] = React.useState(false);
   const [copied, setCopied] = React.useState(false);
   const { t } = useTranslation();
@@ -555,6 +559,7 @@ export function SecretField(props: InputProps) {
       </Grid>
       <Grid item xs>
         <Input
+          aria-labelledby={nameID}
           readOnly={!showPassword}
           type="password"
           fullWidth

frontend/src/components/secret/Details.tsx

@@ -100,12 +100,18 @@ export default function SecretDetails(props: {
                 lastDataRef.current = _.cloneDeep(data);
               };
 
-              const mainRows: NameValueTableRow[] = Object.entries(data).map((item: unknown[]) => ({
-                name: item[0] as string,
+              const mainRows: NameValueTableRow[] = (
+                Object.entries(data) as [string, unknown][]
+              ).map(([key, val]) => ({
+                name: key,
+                nameID: key,
                 value: (
                   <SecretField
-                    value={item[1]}
-                    onChange={e => handleFieldChange(item[0] as string, e.target.value)}
+                    value={val}
+                    nameID={key}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+                      handleFieldChange(key, e.target.value)
+                    }
                   />
                 ),
               }));

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

@@ -234,6 +234,7 @@
               >
                 <dt
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1iczkge-MuiGrid-root"
+                  id="storageClassName"
                 >
                   storageClassName
                 </dt>
@@ -272,6 +273,7 @@
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1z0dvx8-MuiGrid-root"
                     >
                       <div
+                        aria-labelledby="storageClassName"
                         class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-readOnly MuiInputBase-readOnly css-zam05p-MuiInputBase-root-MuiInput-root"
                       >
                         <input
@@ -286,6 +288,7 @@
                 </dd>
                 <dt
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1iczkge-MuiGrid-root"
+                  id="volumeMode"
                 >
                   volumeMode
                 </dt>
@@ -324,6 +327,7 @@
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1z0dvx8-MuiGrid-root"
                     >
                       <div
+                        aria-labelledby="volumeMode"
                         class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-readOnly MuiInputBase-readOnly css-zam05p-MuiInputBase-root-MuiInput-root"
                       >
                         <input
@@ -338,6 +342,7 @@
                 </dd>
                 <dt
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-iqixpy-MuiGrid-root"
+                  id="volumeName"
                 >
                   volumeName
                 </dt>
@@ -376,6 +381,7 @@
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1z0dvx8-MuiGrid-root"
                     >
                       <div
+                        aria-labelledby="volumeName"
                         class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-readOnly MuiInputBase-readOnly css-zam05p-MuiInputBase-root-MuiInput-root"
                       >
                         <input