Repository: opendatahub-io/odh-dashboard
Pull request #3875: Feat(Rhoaieng 21255) ilab mircocopy ux rewording modal content
Author: login: claudialphonse78
Labels: name: lgtm
name: approved
Created: 2025-03-07T10:23:48Z | Merged: 2025-03-13T21:36:34Z

<!--- If this is a non-code change, this template is not required; reference any issues or top-level descriptions as needed -->
<!--- All code change PRs should relate to an issue, reference it here; see example below -->
<!--- https://issues.redhat.com/browse/RHOAIENG-123456 -->
Closes [RHOAIENG-21255](https://issues.redhat.com/browse/RHOAIENG-21255)

## Description
<!--- Describe your changes in detail; the what, the why, any findings, etc -->
<!--- Include any screenshots of changed UI; Include any gifs if it was a flow / UX change -->

1. Modal States Rewording changes for Content,Alerts.
2. [Modal Content Changes Doc](https://docs.google.com/document/d/1LVNsOJLXipRDJxddIaKYZ3R-fejqjSptiGzZaFzPV-8/edit?tab=t.0)
3. [Figma Link](https://www.figma.com/design/Pk0BnnzSoaplpGU6jcFX8i/End-to-End---Phase-4?node-id=1362-39785)

![modal_microcopy1](https://github.com/user-attachments/assets/fa33826a-0e74-46bf-b422-2900fa22304f)
**Initial State with placeholder** 

![modal_microcopy2](https://github.com/user-attachments/assets/8e20c8a2-882c-43b0-99ca-a0711fb98efd)
**Textual Changes when Server pipeline is not available** 

![modal_mircocopy3](https://github.com/user-attachments/assets/f0758cf9-0a70-4a0a-b744-f8245381cf05)
**Textual Changes when server pipeline is not configured** 



https://github.com/user-attachments/assets/e14f33c8-efd3-4179-8325-0dff4691d8c9


## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran to -->
<!--- see how your change affects other areas of the code, etc. -->
Add the StartRunModal component somewhere in the code and select the projects.

```javascript
import StartRunModal from '~/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal';
...
<StartRunModal onSubmit={(selectedProject) => {}} onCancel={() => {}} />
...

```

## Test Impact
<!--- What tests have you done to cover the implemented functionality -->
<!--- If tests are not applicable, explain why here -->

## Request review criteria:
<!--- This PR will be merged by any repository approver when it meets all the points in the checklist -->
<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->

Self checklist (all need to be checked):
- [x] The developer has manually tested the changes and verified that the changes work
- [x] Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
- [x] The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes: 
<!--- You can ignore these if you are doing manifest, backend, internal logic, etc changes; aka non-UI / visual changes -->
- [x] Included any necessary screenshots or gifs if it was a UI change.
- [x] Included tags to the UX team if it was a UI/UX change.

After the PR is posted & before it merges:
- [ ] The developer has tested their solution on a cluster by using the image produced by the PR to `main`

@kaedward 



Diff:
diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDetails.ts b/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDetails.ts
index 029e6bb952..31719ce874 100644
--- a/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDetails.ts
+++ b/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDetails.ts
@@ -164,7 +164,7 @@ class ModelVersionDetails {
   }
 
   findStartRunModal() {
-    return cy.findByTestId('start-run-modal');
+    return cy.findByRole('dialog', { hidden: true }).contains('Start a LAB-tuning run');
   }
 }
 
diff --git a/frontend/src/pages/pipelines/global/modelCustomization/startRunModal/MissingConditionAlert.tsx b/frontend/src/pages/pipelines/global/modelCustomization/startRunModal/MissingConditionAlert.tsx
index 17618636b2..1b87ab12a4 100644
--- a/frontend/src/pages/pipelines/global/modelCustomization/startRunModal/MissingConditionAlert.tsx
+++ b/frontend/src/pages/pipelines/global/modelCustomization/startRunModal/MissingConditionAlert.tsx
@@ -19,25 +19,24 @@ const ALERT_CONFIG: Record<ContinueCondition, PickedAlertProps> = {
     variant: 'danger',
     title: 'InstructLab pipeline not installed',
     children:
-      'This project is missing an InstructLab pipeline. You can import the InstructLab pipeline into your project.',
+      'To start a LAB-tuning run, the InstructLab pipeline must exist in the selected project. Install the InstructLab pipeline on your project, or select a different project.',
   },
   pipelineServerConfigured: {
     variant: 'danger',
     title: 'Pipeline server not configured',
     children:
-      'To utilize InstructLab fine-tuning you need a pipeline server configured with an InstructLab pipeline.',
+      'To start a LAB-tuning run, the selected project must have a configured pipeline server and an InstructLab pipeline installed. Configure the server and install the pipeline, or select a different project.',
   },
   pipelineServerAccessible: {
     variant: 'danger',
     title: 'Pipeline server not accessible',
     children:
-      'The pipeline server is not accessible. To utilize InstructLab fine-tuning you need a pipeline server configured and online with an InstructLab pipeline.',
+      'To start a LAB-tuning run, the selected project must have a configured pipeline server that is online, and an InstructLab pipeline installed. Ensure the server is online and install the pipeline, or select a different project.',
   },
   pipelineServerOnline: {
     variant: 'danger',
     title: 'Pipeline server is offline',
-    children:
-      'The pipeline server is offline. To utilize InstructLab fine-tuning you need to start the server.',
+    children: 'To start a LAB-tuning run, you must first start this project’s pipeline server.',
   },
 };
 
@@ -82,7 +81,7 @@ const MissingConditionAlert: React.FC<MissingConditionAlertProps> = ({
               component="a"
               onClick={() => navigate(`/pipelines/${selectedProject}`)}
             >
-              Go to pipelines
+              Go to <b>Pipelines</b>
             </Button>
           </StackItem>
         </Stack>
diff --git a/frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx b/frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
index 19f6564606..558b62603b 100644
--- a/frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
+++ b/frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
@@ -1,10 +1,26 @@
 import * as React from 'react';
 import { Modal } from '@patternfly/react-core/deprecated';
-import { Button, Form, FormGroup, Stack, StackItem, Alert } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
+  Stack,
+  StackItem,
+  Alert,
+  Content,
+  ContentVariants,
+} from '@patternfly/react-core';
+import { Link } from 'react-router-dom';
 import ProjectSelector from '~/concepts/projects/ProjectSelector';
 import DashboardModalFooter from '~/concepts/dashboard/DashboardModalFooter';
 import { PipelineContextProvider } from '~/concepts/pipelines/context';
 import MissingConditionAlert from '~/pages/pipelines/global/modelCustomization/startRunModal/MissingConditionAlert';
+import { modelCustomizationRootPath } from '~/routes';
 
 export type StartRunModalProps = {
   onSubmit: (selectedProject: string) => void;
@@ -25,7 +41,6 @@ const StartRunModal: React.FC<StartRunModalProps> = ({
 
   return (
     <Modal
-      title="Start an InstructLab run"
       isOpen
       onClose={onCancel}
       footer={
@@ -40,85 +55,76 @@ const StartRunModal: React.FC<StartRunModalProps> = ({
           isSubmitDisabled={!canContinue || !loaded}
         />
       }
-      variant="medium"
-      data-testid="start-run-modal"
+      variant={ModalVariant.medium}
+      hasNoBodyWrapper
     >
-      <Form>
-        <Stack hasGutter>
-          {loadError && (
-            <StackItem>
-              <Alert variant="danger" title="Error loading model data">
-                {loadError.message}
-              </Alert>
-            </StackItem>
-          )}
-          <StackItem>
-            Fine-tune your models to improve their performance, accuracy, and task specialization,
-            using the{' '}
-            <Button
-              data-testid="lab-method"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              LAB method
-            </Button>
-            . Before creating a run, a taxonomy is needed and a teacher and judge model must be
-            configured.{' '}
-            <Button
-              data-testid="learn-more-prerequisites"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              Learn more about prerequisites for InstructLab fine-tuning
-            </Button>
-            .
-          </StackItem>
-          <StackItem>
-            <FormGroup
-              label="Data science project"
-              fieldId="start-run-modal-project-name"
-              isRequired
-            >
-              <Stack hasGutter>
+      <ModalHeader
+        title="Start a LAB-tuning run"
+        description={
+          <>
+            <Content component={ContentVariants.p}>
+              Tune a model using the LAB method with the InstructLab pipeline. To create a
+              LAB-tuning run, you must have a taxonomy stored in a git repository, and a configured
+              teacher and judge model.
+            </Content>
+            <Link to={modelCustomizationRootPath}>Learn more about LAB-tuning prerequisites</Link>.
+          </>
+        }
+      />
+      <ModalBody data-testid="start-run-modal">
+        {loadError && (
+          <Alert variant="danger" title="Error loading model data" className="pf-v6-u-mb-md">
+            {loadError.message}
+          </Alert>
+        )}
+        <Form>
+          <FormGroup
+            label="Data science project"
+            fieldId="start-run-modal-project-name"
+            isRequired
+            labelHelp={
+              <HelperText>
+                <HelperTextItem>
+                  Select a project for the InstructLab pipeline to run in.
+                </HelperTextItem>
+              </HelperText>
+            }
+          >
+            <Stack hasGutter>
+              <StackItem>
+                <ProjectSelector
+                  isFullWidth
+                  onSelection={(projectName) => {
+                    setSelectedProject(projectName);
+                  }}
+                  namespace={selectedProject ?? ''}
+                  placeholder="Select a Data science project"
+                  isLoading={isLoadingProject}
+                />
+                <FormHelperText>
+                  <HelperText>
+                    <HelperTextItem>
+                      The InstructLab pipeline will run in the selected project
+                    </HelperTextItem>
+                  </HelperText>
+                </FormHelperText>
+              </StackItem>
+              {selectedProject && (
                 <StackItem>
-                  <ProjectSelector
-                    isFullWidth
-                    onSelection={(projectName) => {
-                      setSelectedProject(projectName);
-                    }}
-                    namespace={selectedProject ?? ''}
-                    placeholder="Select a Data science project"
-                    isLoading={isLoadingProject}
-                  />
+                  <PipelineContextProvider namespace={selectedProject}>
+                    <MissingConditionAlert
+                      key={selectedProject}
+                      selectedProject={selectedProject}
+                      setIsLoadingProject={setIsLoadingProject}
+                      setCanContinue={setCanContinue}
+                    />
+                  </PipelineContextProvider>
                 </StackItem>
-                <StackItem>The InstructLab pipeline will run in the selected project</StackItem>
-                {selectedProject && (
-                  <StackItem>
-                    <PipelineContextProvider namespace={selectedProject}>
-                      <MissingConditionAlert
-                        key={selectedProject}
-                        selectedProject={selectedProject}
-                        setIsLoadingProject={setIsLoadingProject}
-                        setCanContinue={setCanContinue}
-                      />
-                    </PipelineContextProvider>
-                  </StackItem>
-                )}
-              </Stack>
-            </FormGroup>
-          </StackItem>
-        </Stack>
-      </Form>
+              )}
+            </Stack>
+          </FormGroup>
+        </Form>
+      </ModalBody>
     </Modal>
   );
 };


Reviews:
user: login: dpanshug
body: We also need to change the button `Go to pipelines` -> `Go to <b>Pipelines</b>`
here https://github.com/dpanshug/odh-dashboard/blob/15ae0b677b2b26323fc3e7a40f7a5d2e5aba8d51/frontend/src/pages/pipelines/global/modelCustomization/startRunModal/MissingConditionAlert.tsx#L85
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T11:55:25Z
user: login: dpanshug
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T12:02:57Z
user: login: claudialphonse78
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T13:29:22Z
user: login: dpanshug
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T13:32:01Z
user: login: claudialphonse78
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T14:15:43Z
user: login: DaoDaoNoCode
body: Left some suggestions about how we can make the layout look better.
PF website is a good place to refer to before you need to create some custom layouts or styles, checking the examples and seeing if there are similar use cases could reduce your effort and make the layout more precise because the designers are following the PF guidelines.
Hope that helps!
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-08T00:51:39Z
user: login: claudialphonse78
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T19:05:20Z
user: login: DaoDaoNoCode
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-11T15:33:26Z
user: login: claudialphonse78
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T18:05:54Z
user: login: caponetto
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T14:16:39Z
user: login: claudialphonse78
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T14:45:36Z
user: login: caponetto
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T16:08:21Z
user: login: caponetto
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T16:10:28Z
user: login: caponetto
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T17:48:25Z
user: login: DaoDaoNoCode
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-13T17:49:40Z
user: login: DaoDaoNoCode
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-13T17:54:04Z
user: login: andrewballantyne
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-13T19:22:20Z
user: login: Gkrumbach07
body: /lgtm
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-13T21:31:28Z

Review comments:
diff_hunk: @@ -52,9 +51,11 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
               }}
             >
               LAB method
-            </Button>
-            . Before creating a run, a taxonomy is needed and a teacher and judge model must be
-            configured.{' '}
+            </Button>{' '}
+            with the InstructLab pipeline. To create a LAB-tuning run, you must have a taxonomy
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: dpanshug
body: ```suggestion
            To create a LAB-tuning run, you must have a taxonomy
```
created_at: 2025-03-07T12:00:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -39,8 +39,7 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
       <Form>
         <Stack hasGutter>
           <StackItem>
-            Fine-tune your models to improve their performance, accuracy, and task specialization,
-            using the{' '}
+            Tune a model using the{' '}
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: dpanshug
body: ```suggestion
            Fine-tune a model using the{' '}
```
created_at: 2025-03-07T12:01:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -52,9 +51,11 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
               }}
             >
               LAB method
-            </Button>
-            . Before creating a run, a taxonomy is needed and a teacher and judge model must be
-            configured.{' '}
+            </Button>{' '}
+            with the InstructLab pipeline. To create a LAB-tuning run, you must have a taxonomy
+            stored in a git repository, and a configured teacher and judge model.{' '}
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: dpanshug
body: I don't think space is needed here.

```suggestion
            stored in a git repository, and a configured teacher and judge model.
```
created_at: 2025-03-07T12:02:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -39,8 +39,7 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
       <Form>
         <Stack hasGutter>
           <StackItem>
-            Fine-tune your models to improve their performance, accuracy, and task specialization,
-            using the{' '}
+            Tune a model using the{' '}
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: claudialphonse78
body: Its ``Tune a model `` itself acc to the UX doc
![image](https://github.com/user-attachments/assets/01726969-d3f8-40c6-8930-af2e013a132d)



created_at: 2025-03-07T13:29:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -39,8 +39,7 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
       <Form>
         <Stack hasGutter>
           <StackItem>
-            Fine-tune your models to improve their performance, accuracy, and task specialization,
-            using the{' '}
+            Tune a model using the{' '}
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: dpanshug
body: Ah, i was in viewing mode so i haven't saw the suggestions, you can ignore this
created_at: 2025-03-07T13:32:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -52,9 +51,11 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
               }}
             >
               LAB method
-            </Button>
-            . Before creating a run, a taxonomy is needed and a teacher and judge model must be
-            configured.{' '}
+            </Button>{' '}
+            with the InstructLab pipeline. To create a LAB-tuning run, you must have a taxonomy
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: claudialphonse78
body: https://docs.google.com/document/d/1LVNsOJLXipRDJxddIaKYZ3R-fejqjSptiGzZaFzPV-8/edit?tab=t.0
These are based on the UX text changes

created_at: 2025-03-07T14:15:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -18,7 +28,7 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
 
   return (
     <Modal
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: DaoDaoNoCode
body: The Modal should be refactored a little bit to better match the PF guidelines. Currently, it's not the best practice.
Please refer to https://www.patternfly.org/components/modal#with-a-static-description, and set the description correctly. The descriptions are not part of the `Form` and should stay outside of it, it's part of `ModalHeader`. In this way, we can make sure the font and position look correct as it's shown in the mockup.
Normally, there shouldn't be that many `Stack` components to help us organize the layout because PF components have already helped with the layout, unless there are some special cases.
Thus, you can refer to the examples that PF provides and try to get rid of the `Stack` as many as you can.
created_at: 2025-03-08T00:46:27Z
author_association: MEMBER
diff_hunk: @@ -74,20 +85,37 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
               label="Data science project"
               fieldId="start-run-modal-project-name"
               isRequired
+              labelHelp={
+                <HelperText>
+                  <HelperTextItem>
+                    Select a project for the InstructLab pipeline to run in.
+                  </HelperTextItem>
+                </HelperText>
+              }
             >
               <Stack hasGutter>
                 <StackItem>
-                  <ProjectSelector
-                    isFullWidth
-                    onSelection={(projectName) => {
-                      setSelectedProject(projectName);
-                    }}
-                    namespace={selectedProject ?? ''}
-                    placeholder="Select a Data science project"
-                    isLoading={isLoadingProject}
-                  />
+                  <Flex gap={{ default: 'gapSm' }} direction={{ default: 'column' }}>
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: DaoDaoNoCode
body: Refer to https://www.patternfly.org/components/forms/form#examples
> When using helper text inside a FormGroup, the HelperText component should be wrapped with the FormHelperText component to provide additional spacing.

Thus, simply wrapping this helper text component to `FormHelperText` should solve your problem, instead of creating a layout by yourself.
created_at: 2025-03-08T00:49:08Z
author_association: MEMBER
diff_hunk: @@ -18,7 +28,7 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
 
   return (
     <Modal
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: claudialphonse78
body: Refactored it to follow the PF guidelines and the figma 
 
<img width="884" alt="Screenshot 2025-03-11 at 12 25 21 AM" src="https://github.com/user-attachments/assets/d3df1617-7917-4643-b565-038f2ff31180" />

created_at: 2025-03-10T19:05:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -33,78 +44,98 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
           isSubmitDisabled={!canContinue}
         />
       }
-      variant="medium"
+      variant={ModalVariant.medium}
       data-testid="start-run-modal"
+      hasNoBodyWrapper
     >
-      <Form>
-        <Stack hasGutter>
-          <StackItem>
-            Fine-tune your models to improve their performance, accuracy, and task specialization,
-            using the{' '}
-            <Button
-              data-testid="lab-method"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              LAB method
-            </Button>
-            . Before creating a run, a taxonomy is needed and a teacher and judge model must be
-            configured.{' '}
-            <Button
-              data-testid="learn-more-prerequisites"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              Learn more about prerequisites for InstructLab fine-tuning
-            </Button>
-            .
-          </StackItem>
-          <StackItem>
-            <FormGroup
-              label="Data science project"
-              fieldId="start-run-modal-project-name"
-              isRequired
-            >
-              <Stack hasGutter>
+      <ModalHeader
+        title="Start a LAB-tuning run"
+        description={
+          <Stack hasGutter>
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: DaoDaoNoCode
body: No need to use a `Stack` component here IMO, a `<br />` between the first sentence and the second link is enough.

<img width="846" alt="Screenshot 2025-03-11 at 11 18 56 AM" src="https://github.com/user-attachments/assets/853c00e2-770d-44a9-822d-e8c8d34033f9" />

created_at: 2025-03-11T15:20:17Z
author_association: MEMBER
diff_hunk: @@ -33,78 +44,98 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
           isSubmitDisabled={!canContinue}
         />
       }
-      variant="medium"
+      variant={ModalVariant.medium}
       data-testid="start-run-modal"
+      hasNoBodyWrapper
     >
-      <Form>
-        <Stack hasGutter>
-          <StackItem>
-            Fine-tune your models to improve their performance, accuracy, and task specialization,
-            using the{' '}
-            <Button
-              data-testid="lab-method"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              LAB method
-            </Button>
-            . Before creating a run, a taxonomy is needed and a teacher and judge model must be
-            configured.{' '}
-            <Button
-              data-testid="learn-more-prerequisites"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              Learn more about prerequisites for InstructLab fine-tuning
-            </Button>
-            .
-          </StackItem>
-          <StackItem>
-            <FormGroup
-              label="Data science project"
-              fieldId="start-run-modal-project-name"
-              isRequired
-            >
-              <Stack hasGutter>
+      <ModalHeader
+        title="Start a LAB-tuning run"
+        description={
+          <Stack hasGutter>
+            <StackItem>
+              Tune a model using the{' '}
+              <Button
+                data-testid="lab-method"
+                variant="link"
+                isInline
+                component="a"
+                style={{ textDecoration: 'none' }}
+                onClick={() => {
+                  // TODO: Link to documentation
+                }}
+              >
+                LAB method
+              </Button>{' '}
+              with the InstructLab pipeline. To create a LAB-tuning run, you must have a taxonomy
+              stored in a git repository, and a configured teacher and judge model.
+            </StackItem>
+            <StackItem>
+              <Button
+                data-testid="learn-more-prerequisites"
+                variant="link"
+                isInline
+                component="a"
+                style={{ textDecoration: 'none' }}
+                onClick={() => {
+                  // TODO: Link to documentation
+                }}
+              >
+                Learn more about LAB-tuning prerequisites
+              </Button>
+              .
+            </StackItem>
+          </Stack>
+        }
+      />
+      <ModalBody>
+        <Form className="pf-v6-u-w-75">
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: DaoDaoNoCode
body: Can you remove the width you added here? We don't set a width limitation to any of the modals unless it's needed.
I know you want to make sure it's pixel-perfect and fully matching the UX mockup - It's very hard to decide when should we follow the UX and when we should not. Just keep in mind that the mockups are also not pixel-perfect.
In some situations, for example - my previous comments about the description, we need to follow the UX, because this is how that component is used, it's following the PF design guidelines. Every component has a design guideline, like Modal (https://www.patternfly.org/components/modal/design-guidelines)
Thus, in this situation, when you notice that you will need to add a class name, or even some custom style to a PF component, you just need to check the guidelines, and also think whether the custom style is really needed. For example, here I don't see any benefits to have the 75% width, and it's also not mentioned in the guideline. If this is the case, we normally don't require to fully match the UX. What we need to make sure is we use the right components and we use them correctly.
And anytime when you find out you need to add a custom style or class name to implement something, you can always send a message in the Slack channel and the team will be happy to help figure it out together. Hope that helps!
created_at: 2025-03-11T15:33:19Z
author_association: MEMBER
diff_hunk: @@ -33,78 +44,98 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
           isSubmitDisabled={!canContinue}
         />
       }
-      variant="medium"
+      variant={ModalVariant.medium}
       data-testid="start-run-modal"
+      hasNoBodyWrapper
     >
-      <Form>
-        <Stack hasGutter>
-          <StackItem>
-            Fine-tune your models to improve their performance, accuracy, and task specialization,
-            using the{' '}
-            <Button
-              data-testid="lab-method"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              LAB method
-            </Button>
-            . Before creating a run, a taxonomy is needed and a teacher and judge model must be
-            configured.{' '}
-            <Button
-              data-testid="learn-more-prerequisites"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              Learn more about prerequisites for InstructLab fine-tuning
-            </Button>
-            .
-          </StackItem>
-          <StackItem>
-            <FormGroup
-              label="Data science project"
-              fieldId="start-run-modal-project-name"
-              isRequired
-            >
-              <Stack hasGutter>
+      <ModalHeader
+        title="Start a LAB-tuning run"
+        description={
+          <Stack hasGutter>
+            <StackItem>
+              Tune a model using the{' '}
+              <Button
+                data-testid="lab-method"
+                variant="link"
+                isInline
+                component="a"
+                style={{ textDecoration: 'none' }}
+                onClick={() => {
+                  // TODO: Link to documentation
+                }}
+              >
+                LAB method
+              </Button>{' '}
+              with the InstructLab pipeline. To create a LAB-tuning run, you must have a taxonomy
+              stored in a git repository, and a configured teacher and judge model.
+            </StackItem>
+            <StackItem>
+              <Button
+                data-testid="learn-more-prerequisites"
+                variant="link"
+                isInline
+                component="a"
+                style={{ textDecoration: 'none' }}
+                onClick={() => {
+                  // TODO: Link to documentation
+                }}
+              >
+                Learn more about LAB-tuning prerequisites
+              </Button>
+              .
+            </StackItem>
+          </Stack>
+        }
+      />
+      <ModalBody>
+        <Form className="pf-v6-u-w-75">
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: claudialphonse78
body: @DaoDaoNoCode 

Thanks for the feedback! I’ll remove the width class. 
That totally makes sense, it’s better to follow the PatternFly guidelines and thoughtfully decide when to strictly adhere to the design versus applying custom styles or class names. I really appreciate the insights and detailed feedback! 
I’ll definitely reach out to the team if anything of such a situation comes up. Thanks again!


created_at: 2025-03-11T18:05:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -40,35 +52,32 @@ const StartRunModal: React.FC<StartRunModalProps> = ({
           isSubmitDisabled={!canContinue || !loaded}
         />
       }
-      variant="medium"
+      variant={ModalVariant.medium}
       data-testid="start-run-modal"
+      hasNoBodyWrapper
     >
-      <Form>
-        <Stack hasGutter>
-          {loadError && (
-            <StackItem>
-              <Alert variant="danger" title="Error loading model data">
-                {loadError.message}
-              </Alert>
-            </StackItem>
-          )}
-          <StackItem>
-            Fine-tune your models to improve their performance, accuracy, and task specialization,
-            using the{' '}
-            <Button
-              data-testid="lab-method"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              LAB method
-            </Button>
-            . Before creating a run, a taxonomy is needed and a teacher and judge model must be
-            configured.{' '}
+      <ModalHeader
+        title="Start a LAB-tuning run"
+        description={
+          <>
+            <p>
+              Tune a model using the{' '}
+              <Button
+                data-testid="lab-method"
+                variant="link"
+                isInline
+                component="a"
+                style={{ textDecoration: 'none' }}
+                onClick={() => {
+                  // TODO: Link to documentation
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: caponetto
body: Do we know where this link leads to? I think it's important to have this defined at this stage.
created_at: 2025-03-13T14:01:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -79,46 +88,66 @@ const StartRunModal: React.FC<StartRunModalProps> = ({
                 // TODO: Link to documentation
               }}
             >
-              Learn more about prerequisites for InstructLab fine-tuning
+              Learn more about LAB-tuning prerequisites
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: caponetto
body: Do we know where this link leads to? I think it's important to have this defined at this stage.
created_at: 2025-03-13T14:01:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -40,35 +52,32 @@ const StartRunModal: React.FC<StartRunModalProps> = ({
           isSubmitDisabled={!canContinue || !loaded}
         />
       }
-      variant="medium"
+      variant={ModalVariant.medium}
       data-testid="start-run-modal"
+      hasNoBodyWrapper
     >
-      <Form>
-        <Stack hasGutter>
-          {loadError && (
-            <StackItem>
-              <Alert variant="danger" title="Error loading model data">
-                {loadError.message}
-              </Alert>
-            </StackItem>
-          )}
-          <StackItem>
-            Fine-tune your models to improve their performance, accuracy, and task specialization,
-            using the{' '}
-            <Button
-              data-testid="lab-method"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              LAB method
-            </Button>
-            . Before creating a run, a taxonomy is needed and a teacher and judge model must be
-            configured.{' '}
+      <ModalHeader
+        title="Start a LAB-tuning run"
+        description={
+          <>
+            <p>
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: caponetto
body: Small suggestion: consider using`<Content component={ContentVariants.p}>` instead of `<p>`
created_at: 2025-03-13T14:03:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -79,46 +88,66 @@ const StartRunModal: React.FC<StartRunModalProps> = ({
                 // TODO: Link to documentation
               }}
             >
-              Learn more about prerequisites for InstructLab fine-tuning
+              Learn more about LAB-tuning prerequisites
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: claudialphonse78
body: It's not present on the figma nor the mircocopy doc which was present, we will need this link redirection if its required.
created_at: 2025-03-13T14:45:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -79,46 +88,66 @@ const StartRunModal: React.FC<StartRunModalProps> = ({
                 // TODO: Link to documentation
               }}
             >
-              Learn more about prerequisites for InstructLab fine-tuning
+              Learn more about LAB-tuning prerequisites
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: caponetto
body: As agreed on slack that it leads to the Model customization landing page, we can replace this button component with:

```ts
<Link to={modelCustomizationRootPath}>
    Learn more about LAB-tuning prerequisites
</Link>
```
created_at: 2025-03-13T16:08:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -40,35 +52,32 @@ const StartRunModal: React.FC<StartRunModalProps> = ({
           isSubmitDisabled={!canContinue || !loaded}
         />
       }
-      variant="medium"
+      variant={ModalVariant.medium}
       data-testid="start-run-modal"
+      hasNoBodyWrapper
     >
-      <Form>
-        <Stack hasGutter>
-          {loadError && (
-            <StackItem>
-              <Alert variant="danger" title="Error loading model data">
-                {loadError.message}
-              </Alert>
-            </StackItem>
-          )}
-          <StackItem>
-            Fine-tune your models to improve their performance, accuracy, and task specialization,
-            using the{' '}
-            <Button
-              data-testid="lab-method"
-              variant="link"
-              isInline
-              component="a"
-              style={{ textDecoration: 'none' }}
-              onClick={() => {
-                // TODO: Link to documentation
-              }}
-            >
-              LAB method
-            </Button>
-            . Before creating a run, a taxonomy is needed and a teacher and judge model must be
-            configured.{' '}
+      <ModalHeader
+        title="Start a LAB-tuning run"
+        description={
+          <>
+            <p>
+              Tune a model using the{' '}
+              <Button
+                data-testid="lab-method"
+                variant="link"
+                isInline
+                component="a"
+                style={{ textDecoration: 'none' }}
+                onClick={() => {
+                  // TODO: Link to documentation
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: caponetto
body: As agreed on slack we can remove this button and make `LAB method` plain text. 
created_at: 2025-03-13T16:10:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -18,7 +28,7 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
 
   return (
     <Modal
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: caponetto
body: @DaoDaoNoCode We are using here the `Modal` component from `@patternfly/react-core/deprecated` as most of the other modals that we have throughout the app. Is it ok to mix up the `Modal` component from this package folder with components directly imported from `@patternfly/react-core` like `ModalBody`, `ModalHeader`, etc.?
created_at: 2025-03-13T17:48:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -40,85 +55,77 @@ const StartRunModal: React.FC<StartRunModalProps> = ({
           isSubmitDisabled={!canContinue || !loaded}
         />
       }
-      variant="medium"
+      variant={ModalVariant.medium}
       data-testid="start-run-modal"
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: DaoDaoNoCode
body: You may need to move this to `ModalBody` component to fix the tests because there is no body wrapper now. The previous data-testid would apply to `ModalBody`.
created_at: 2025-03-13T17:49:40Z
author_association: MEMBER
diff_hunk: @@ -18,7 +28,7 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
 
   return (
     <Modal
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: DaoDaoNoCode
body: Good question, I didn't notice this. I might need @andrewballantyne to chime in here about what's our plan for the `Modal` component.
created_at: 2025-03-13T17:54:04Z
author_association: MEMBER
diff_hunk: @@ -18,7 +28,7 @@ const StartRunModal: React.FC<StartRunModalProps> = ({ onSubmit, onCancel }) =>
 
   return (
     <Modal
path: frontend/src/pages/pipelines/global/modelCustomization/startRunModal/StartRunModal.tsx
user: login: andrewballantyne
body: @DaoDaoNoCode Log a tech debt ticket -- we gotta get off the `/deprecated` components...
created_at: 2025-03-13T19:22:20Z
author_association: MEMBER

PR comments:
user: login: codecov[bot]
created_at: 2025-03-07T11:15:03Z
body: ## [Codecov](https://app.codecov.io/gh/opendatahub-io/odh-dashboard/pull/3875?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 84.49%. Comparing base [(`c427c4c`)](https://app.codecov.io/gh/opendatahub-io/odh-dashboard/commit/c427c4ca8ff74d2a82886a5f52ec9410b877ed49?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io) to head [(`71327e7`)](https://app.codecov.io/gh/opendatahub-io/odh-dashboard/commit/71327e79cbbe086180c1b6b839ef785de41119b3?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io).
> Report is 46 commits behind head on main.

<details><summary>Additional details and impacted files</summary>


[![Impacted file tree graph](https://app.codecov.io/gh/opendatahub-io/odh-dashboard/pull/3875/graphs/tree.svg?width=650&height=150&src=pr&token=UQM7NLQUXJ&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io)](https://app.codecov.io/gh/opendatahub-io/odh-dashboard/pull/3875?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io)

```diff
@@           Coverage Diff           @@
##             main    #3875   +/-   ##
=======================================
  Coverage   84.48%   84.49%           
=======================================
  Files        1572     1577    +5     
  Lines       37418    37490   +72     
  Branches    10545    10576   +31     
=======================================
+ Hits        31614    31676   +62     
- Misses       5804     5814   +10     
```

[see 59 files with indirect coverage changes](https://app.codecov.io/gh/opendatahub-io/odh-dashboard/pull/3875/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io)

------

[Continue to review full report in Codecov by Sentry](https://app.codecov.io/gh/opendatahub-io/odh-dashboard/pull/3875?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://app.codecov.io/gh/opendatahub-io/odh-dashboard/pull/3875?dropdown=coverage&src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io). Last update [c427c4c...71327e7](https://app.codecov.io/gh/opendatahub-io/odh-dashboard/pull/3875?dropdown=coverage&src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opendatahub-io).

</details>
<details><summary>🚀 New features to boost your workflow: </summary>

- ❄ [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- 📦 [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: claudialphonse78
created_at: 2025-03-07T15:52:42Z
body: Added Review changes acc to UX doc and made a few changes to match the figma
![final_microcopychanges1](https://github.com/user-attachments/assets/21f1ce9e-c12e-4938-94b5-fdcdacbee0ef)

author_association: CONTRIBUTOR
user: login: caponetto
created_at: 2025-03-13T16:13:17Z
body: @claudialphonse78 the [failed test](https://github.com/opendatahub-io/odh-dashboard/actions/runs/13838195020/job/38719475708?pr=3875) seems related to your changes. Could you please take a look?

```
[1]   1) Model version details
[1]        Model Version Details
[1]          should handle lab tune workflow:
[1]      AssertionError: Timed out retrying after 10000ms: Unable to find an element by: [data-testid="start-run-modal"]
```
author_association: CONTRIBUTOR
user: login: openshift-ci[bot]
created_at: 2025-03-13T21:31:35Z
body: [APPROVALNOTIFIER] This PR is **APPROVED**

This pull-request has been approved by: *<a href="https://github.com/opendatahub-io/odh-dashboard/pull/3875#pullrequestreview-2683409831" title="LGTM">Gkrumbach07</a>*

The full list of commands accepted by this bot can be found [here](https://go.k8s.io/bot-commands?repo=opendatahub-io%2Fodh-dashboard).

The pull request process is described [here](https://git.k8s.io/community/contributors/guide/owners.md#the-code-review-process)

<details >
Needs approval from an approver in each of these files:

- ~~[frontend/OWNERS](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/OWNERS)~~ [Gkrumbach07]

Approvers can indicate their approval by writing `/approve` in a comment
Approvers can cancel approval by writing `/approve cancel` in a comment
</details>
<!-- META={"approvers":[]} -->
author_association: CONTRIBUTOR