fix: sealed secrets styling and type issues & update components

Author: ferruhcihan

src/components/forms/KeyValue.tsx

@@ -265,7 +265,10 @@ export default function KeyValue(props: KeyValueProps) {
               </Box>
             </FormRow>
             {addLabel && !disabled && (
-              <IconButton sx={{ alignSelf: 'flex-end' }} onClick={() => remove(index)}>
+              <IconButton
+                sx={{ alignSelf: 'flex-start', mt: localIndex === 0 ? '48px' : '20px' }}
+                onClick={() => remove(index)}
+              >
                 <Clear />
               </IconButton>
             )}

src/components/forms/TextArea.tsx

@@ -4,27 +4,43 @@ import { Theme } from '@mui/material/styles'
 import { Box } from '@mui/material'
 import { InputLabel } from 'components/InputLabel'
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  inputLabel: {
-    color: theme.palette.cl.text.title,
-    marginBottom: theme.spacing(2),
-  },
-  textarea: {
-    backgroundColor: theme.palette.background.default,
-    color: theme.palette.cl.text.title,
-    padding: theme.spacing(1),
-    border: `1px solid ${theme.palette.cm.inputBorder}`,
-    boxSizing: 'border-box',
-    fontSize: '1rem',
-    fontFamily: theme.typography.fontFamily,
-    width: '100%',
-    resize: 'both',
-    display: 'block',
-    whiteSpace: 'pre-wrap',
-    overflowWrap: 'anywhere',
-    wordBreak: 'break-word',
-  },
-}))
+const useStyles = makeStyles<{ disabled?: boolean }>()((theme: Theme, { disabled }) => {
+  const disabledStyles = disabled
+    ? {
+        backgroundColor: theme.palette.cm.disabledBackground,
+        borderColor: theme.palette.cm.disabledBorder,
+        color: theme.palette.cm.disabledText,
+      }
+    : {}
+  return {
+    inputLabel: {
+      color: theme.palette.cl.text.title,
+      marginBottom: theme.spacing(2),
+    },
+    textarea: {
+      backgroundColor: theme.palette.background.default,
+      color: theme.palette.cl.text.title,
+      padding: theme.spacing(1),
+      border: `1px solid ${theme.palette.cm.inputBorder}`,
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      fontFamily: 'monospace',
+      fontSize: '14px',
+      resize: 'both',
+      display: 'inline-block',
+      whiteSpace: 'pre-wrap',
+      overflowWrap: 'anywhere',
+      wordBreak: 'break-word',
+      minWidth: '200px',
+      minHeight: '34px',
+      maxWidth: '850px',
+      maxHeight: '800px',
+      width: 'auto',
+      height: 'auto',
+      ...disabledStyles,
+    },
+  }
+})
 
 export interface AutoResizableTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'style'> {
   label?: string
@@ -43,15 +59,15 @@ export function AutoResizableTextarea({
   maxRows = 40,
   minWidth = 200,
   maxWidth = 850,
-  minHeight,
+  minHeight = 34,
   maxHeight = 800,
   style,
   onInput,
   onPaste,
   onChange,
   ...rest
 }: AutoResizableTextareaProps) {
-  const { classes, cx } = useStyles()
+  const { classes, cx } = useStyles(rest.disabled ? { disabled: true } : {})
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const rulerRef = useRef<HTMLSpanElement | null>(null)
 
@@ -152,7 +168,6 @@ export function AutoResizableTextarea({
         {...rest}
         ref={textareaRef}
         className={cx(classes.textarea)}
-        style={style}
         rows={minRows}
         onInput={(e) => {
           onInput?.(e)
@@ -166,6 +181,7 @@ export function AutoResizableTextarea({
           onChange?.(e)
           adjustSize()
         }}
+        disabled={rest.disabled}
       />
     </Box>
   )

src/pages/code-repositories/create-edit/index.tsx

@@ -323,15 +323,15 @@ export default function CreateEditCodeRepositories({
                           Select a secret
                         </MenuItem>
                         {teamSecrets?.map((secret) => (
-                          <MenuItem key={secret?.id} id={secret?.id} value={secret?.name}>
+                          <MenuItem key={secret?.name} id={secret?.name} value={secret?.name}>
                             {secret?.name}
                           </MenuItem>
                         ))}
                       </TextField>
                       <Button
                         className={classes.link}
                         onClick={() =>
-                          history.push(`/teams/${teamId}/create-sealedsecret`, {
+                          history.push(`/teams/${teamId}/secrets/create`, {
                             coderepository: true,
                             prefilled: watch(),
                           })

src/pages/secrets/create-edit/SecretCreateEditPage.tsx

@@ -1,7 +1,7 @@
 import { Grid, MenuItem } from '@mui/material'
 import PaperLayout from 'layouts/Paper'
 import { LandingHeader } from 'components/LandingHeader'
-import { Redirect, RouteComponentProps } from 'react-router-dom'
+import { Redirect, RouteComponentProps, useHistory, useLocation } from 'react-router-dom'
 import {
   CreateSealedSecretApiResponse,
   useCreateSealedSecretMutation,
@@ -26,6 +26,7 @@ import { useSession } from 'providers/Session'
 import { useTranslation } from 'react-i18next'
 import { mapObjectToKeyValueArray, valueArrayToObject } from 'utils/helpers'
 import { useAppSelector } from 'redux/hooks'
+import InformationBanner from 'components/InformationBanner'
 import { useStyles } from './create-edit-secrets.styles'
 import { createSealedSecretApiResponseSchema, secretTypes } from './create-edit-secrets.validator'
 import { SecretTypeFields } from './SecretTypeFields'
@@ -85,14 +86,21 @@ export default function SecretCreateEditPage({
   const { t } = useTranslation()
   const { classes } = useStyles()
   const { sealedSecretsPEM } = useSession()
+  const history = useHistory()
+  const location = useLocation()
+  const locationState = location?.state as any
+  const isCoderepository = locationState?.coderepository
+  const prefilled = locationState?.prefilled || {}
 
-  const [create, { isLoading: isLoadingCreate, isSuccess: isSuccessCreate }] = useCreateSealedSecretMutation()
+  const [create, { isLoading: isLoadingCreate, isSuccess: isSuccessCreate, data: dataCreate }] =
+    useCreateSealedSecretMutation()
   const [update, { isLoading: isLoadingUpdate, isSuccess: isSuccessUpdate }] = useEditSealedSecretMutation()
   const [del, { isLoading: isLoadingDelete, isSuccess: isSuccessDelete }] = useDeleteSealedSecretMutation()
   const { data, isLoading, isFetching, isError, refetch } = useGetSealedSecretQuery(
     { teamId, sealedSecretName },
     { skip: !sealedSecretName },
   )
+  const isImmutable = data?.immutable || false
 
   const isDirty = useAppSelector(({ global: { isDirty } }) => isDirty)
   useEffect(() => {
@@ -109,10 +117,8 @@ export default function SecretCreateEditPage({
   }
 
   const mergedDefaultValues = createSealedSecretApiResponseSchema.cast(formData)
-
   const methods = useForm<SealedSecretFormData>({
-    // @ts-ignore
-    resolver: yupResolver(createSealedSecretApiResponseSchema) as Resolver<CreateSealedSecretApiResponse>,
+    resolver: yupResolver(createSealedSecretApiResponseSchema) as Resolver<SealedSecretFormData>,
     defaultValues: mergedDefaultValues,
   })
 
@@ -146,8 +152,14 @@ export default function SecretCreateEditPage({
   }, [watch('type'), sealedSecretName])
 
   const mutating = isLoadingCreate || isLoadingUpdate || isLoadingDelete
-  if (!mutating && (isSuccessUpdate || isSuccessDelete)) return <Redirect to={`/teams/${teamId}/secrets`} />
-  if (!mutating && isSuccessCreate) return <Redirect to={`/teams/${teamId}/secrets`} />
+  if (!mutating && (isSuccessCreate || isSuccessUpdate || isSuccessDelete)) {
+    if (isCoderepository) {
+      history.push(`/teams/${teamId}/code-repositories/create`, {
+        coderepository: false,
+        prefilled: { ...prefilled, secret: dataCreate.name },
+      })
+    } else return <Redirect to={`/teams/${teamId}/secrets`} />
+  }
 
   const onSubmit = async () => {
     const body = cloneDeep(watch())
@@ -227,6 +239,12 @@ export default function SecretCreateEditPage({
           // hides the first two crumbs (e.g. /teams/teamName)
           hideCrumbX={[0, 1]}
         />
+        {sealedSecretName && isImmutable && (
+          <InformationBanner
+            sx={{ my: '1rem' }}
+            message='This secret is marked as immutable and therefore values cannot be changed, only deleted.'
+          />
+        )}
         <FormProvider {...methods}>
           <form onSubmit={handleSubmit(onSubmit)}>
             <Section>
@@ -250,22 +268,27 @@ export default function SecretCreateEditPage({
                 value={watch('type') || 'kubernetes.io/opaque'}
                 disabled={!!sealedSecretName}
               >
-                {/** default will be basic auth */}
-                {/* <MenuItem key='select-a-secret'>Select a secret type</MenuItem> */}
                 {secretTypes.map((t) => (
                   <MenuItem key={t} value={t}>
                     {t}
                   </MenuItem>
                 ))}
               </TextField>
-              <SecretTypeFields />
-              <Divider />
+              {sealedSecretName && !isImmutable && (
+                <InformationBanner
+                  sx={{ mt: '2rem' }}
+                  message='You can add new values to override existing values, but be aware that applications using this token might need to be adapted.'
+                />
+              )}
+              <SecretTypeFields immutable={sealedSecretName && watch('immutable')} />
+              <Divider sx={{ mb: 1 }} />
               <ControlledCheckbox
                 sx={{ my: 2 }}
                 name='immutable'
                 control={control}
                 label='Immutable'
                 explainertext='If set to true, ensures that data stored in the Secret cannot be updated (only object metadata can be modified).'
+                disabled={sealedSecretName && isImmutable}
               />
             </Section>
             <AdvancedSettings>

src/pages/secrets/create-edit/SecretTypeFields.tsx

@@ -5,23 +5,57 @@ import { secretTypes } from './create-edit-secrets.validator'
  * Renders the secret-specific form fields based on selected secret type.
  * Expects encryptedData to be part of form schema.
  */
-export function SecretTypeFields({ namePrefix = '' }: { namePrefix?: string }) {
+export function SecretTypeFields({ namePrefix = '', immutable = false }: { namePrefix?: string; immutable?: boolean }) {
   const { control } = useFormContext()
   const typePath = namePrefix ? `${namePrefix}.type` : 'type'
   const dataPath = namePrefix ? `${namePrefix}.encryptedData` : 'encryptedData'
   const selectedType = useWatch({ control, name: typePath }) as typeof secretTypes[number]
+  const title = 'Encrypted Data'
+  const disabled = immutable && { keyDisabled: true, valueDisabled: true, disabled: true }
 
   switch (selectedType) {
     case 'kubernetes.io/opaque':
-      return <KeyValue title='' name={dataPath} keyLabel='Key' valueLabel='Value' addLabel='Add another' isTextArea />
+      return (
+        <KeyValue
+          title={title}
+          subTitle='A Kubernetes Opaque Secret is simply the "generic" secret type—perfect any time you need to stash arbitrary key-value data that doesn’t fit one of the built‐in types'
+          name={dataPath}
+          keyLabel='Key'
+          valueLabel='Value'
+          addLabel='Add another'
+          isTextArea
+          {...disabled}
+        />
+      )
     case 'kubernetes.io/service-account-token':
     case 'kubernetes.io/dockercfg':
     case 'kubernetes.io/dockerconfigjson':
     case 'kubernetes.io/ssh-auth':
     case 'kubernetes.io/tls':
-      return <KeyValue title='' name={dataPath} keyDisabled keyLabel='Key' valueLabel='Value' isTextArea />
+      return (
+        <KeyValue
+          title={title}
+          subTitle={`Enter key-value pairs for the "${selectedType}" secret type`}
+          name={dataPath}
+          keyDisabled
+          keyLabel='Key'
+          valueLabel='Value'
+          isTextArea
+          {...disabled}
+        />
+      )
     case 'kubernetes.io/basic-auth':
-      return <KeyValue title='' keyDisabled name={dataPath} keyLabel='Key' valueLabel='Value' />
+      return (
+        <KeyValue
+          title={title}
+          subTitle='Basic-auth Secret exists out of a username and password'
+          keyDisabled
+          name={dataPath}
+          keyLabel='Key'
+          valueLabel='Value'
+          {...disabled}
+        />
+      )
     default:
       return null
   }

src/pages/secrets/create-edit/create-edit-secrets.validator.ts

@@ -52,7 +52,6 @@ const metadataSchema = yup
 
 // 5) Main CreateSealedSecretApiResponse schema
 export const createSealedSecretApiResponseSchema = yup.object({
-  id: yup.string().optional().default(undefined),
   name: yup.string().required('Secret name is required'),
   namespace: yup.string().optional().default(undefined),
   immutable: yup.boolean().optional().default(undefined),
@@ -68,5 +67,4 @@ export const createSealedSecretApiResponseSchema = yup.object({
     .min(1, 'At least one encrypted data entry is required')
     .default(() => [{ key: '', value: '' }]), // default to one empty entry
   metadata: metadataSchema,
-  isDisabled: yup.boolean().optional().default(undefined),
 })