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;
@@ -136,14 +136,15 @@ const WorkspaceCreationPropertiesSelection: React.FunctionComponent<
                     </FormGroup>
                   )}
                 </ExpandableSection>
-                {!isSecretsExpanded && (
-                  <div style={{ paddingLeft: '36px' }}>
-                    <div className="pf-u-font-size-sm">
-                      <strong>{secrets.length} added</strong>
-                    </div>
-                  </div>
-                )}
               </div>
+              {!isSecretsExpanded && (
+                <div style={{ paddingLeft: '36px', marginTop: '-10px' }}>
+                  <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>
+                </div>
+              )}
             </Form>
           </div>
         </SplitItem>