Add descriptions to Secrets in Workspace creation wizard

Signed-off-by: Charles Thao <[email protected]>

Author: thaorell

workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSecrets.tsx

@@ -25,10 +25,9 @@ interface WorkspaceCreationPropertiesSecretsProps {
   setSecrets: React.Dispatch<React.SetStateAction<WorkspaceSecret[]>>;
 }
 
-export const WorkspaceCreationPropertiesSecrets: React.FC<WorkspaceCreationPropertiesSecretsProps> = ({
-  secrets,
-  setSecrets,
-}) => {
+export const WorkspaceCreationPropertiesSecrets: React.FC<
+  WorkspaceCreationPropertiesSecretsProps
+> = ({ secrets, setSecrets }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [formData, setFormData] = useState<WorkspaceSecret>({
@@ -157,6 +156,11 @@ export const WorkspaceCreationPropertiesSecrets: React.FC<WorkspaceCreationPrope
         <ModalHeader
           title={editIndex === null ? 'Create Secret' : 'Edit Secret'}
           labelId="secret-modal-title"
+          description={
+            editIndex === null
+              ? 'Add a secret to securely use API keys, tokens, or other credentials in your workspace.'
+              : ''
+          }
         />
         <ModalBody id="secret-modal-box-body">
           <Form onSubmit={handleAddOrEditSubmit}>

workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection.tsx

@@ -14,7 +14,7 @@ import {
 import { WorkspaceCreationImageDetails } from '~/app/pages/Workspaces/Creation/image/WorkspaceCreationImageDetails';
 import { WorkspaceCreationPropertiesVolumes } from '~/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesVolumes';
 import { WorkspaceImage, WorkspaceVolumes, WorkspaceVolume, WorkspaceSecret } from '~/shared/types';
-import WorkspaceCreationPropertiesSecrets from './WorkspaceCreationPropertiesSecrets';
+import { WorkspaceCreationPropertiesSecrets } from './WorkspaceCreationPropertiesSecrets';
 
 interface WorkspaceCreationPropertiesSelectionProps {
   selectedImage: WorkspaceImage | undefined;
@@ -138,6 +138,9 @@ const WorkspaceCreationPropertiesSelection: React.FunctionComponent<
                 </ExpandableSection>
                 {!isSecretsExpanded && (
                   <div style={{ paddingLeft: '36px' }}>
+                    <div>
+                      Secrets enable your project to securely access and manage credentials.
+                    </div>
                     <div className="pf-u-font-size-sm">
                       <strong>{secrets.length} added</strong>
                     </div>