Update version of Patternfly to v6 (#3038)

* Update to Patternfly v6 * Fix some alignment issues in table rows
opendatahub-io · Dec 12, 2024 · 1341fee · 1341fee
1 parent 68d2006
commit 1341fee
Show file tree

Hide file tree

Showing 10 changed files with 209 additions and 137 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts b/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts
@@ -102,11 +102,14 @@ class ClusterStorageModal extends Modal {
 
   private findPVSizeSelectButton() {
     return this.find().findByTestId('value-unit-select');
+    return this.find().findByTestId('value-unit-select');
   }
 
   selectPVSize(name: string) {
     this.findPVSizeSelectButton().findDropdownItem(name).click();
     return this;
+    this.findPVSizeSelectButton().findDropdownItem(name).click();
+    return this;
   }
 
   shouldHavePVSizeSelectValue(name: string) {
@@ -142,11 +145,6 @@ class ClusterStorageModal extends Modal {
     return this.find().findByTestId('storage-classes-selector');
   }
 
-  selectStorageClassSelectOption(name: string | RegExp) {
-    this.findStorageClassSelect().click();
-    cy.findByRole('option', { name, hidden: true }).click();
-  }
-
   findStorageClassOption(name: string) {
     return cy.get('#storage-classes-selector').findByText(name);
   }

diff --git a/frontend/src/__tests__/cypress/cypress/pages/components/DashboardCodeEditor.ts b/frontend/src/__tests__/cypress/cypress/pages/components/DashboardCodeEditor.ts
@@ -6,6 +6,6 @@ export class DashboardCodeEditor extends Contextual<HTMLElement> {
   }
 
   findUpload(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.find().find('input[type="file"]');
+    return this.find().find('.pf-v6-c-code-editor__main input[type="file"]');
   }
 }
diff --git a/frontend/src/__tests__/cypress/cypress/pages/workbench.ts b/frontend/src/__tests__/cypress/cypress/pages/workbench.ts
@@ -199,7 +199,7 @@ class AttachExistingStorageModal extends Modal {
     cy.findByTestId('persistent-storage-group')
       .findByPlaceholderText('Select a persistent storage')
       .click();
-    cy.findByTestId('persistent-storage-typeahead').contains(name).click();
+    cy.findByTestId('persistent-storage-group').contains('button.pf-v6-c-menu__item', name).click();
   }
 
   findStandardPathInput() {

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/clusterStorage.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/clusterStorage.cy.ts
@@ -171,7 +171,10 @@ describe('ClusterStorage', () => {
     addClusterStorageModal.find().findByText('openshift-default-sc').should('exist');
 
     // select storage class
-    addClusterStorageModal.selectStorageClassSelectOption(/Test SC 1/);
+    addClusterStorageModal
+      .findStorageClassSelect()
+      .findSelectOption(/Test SC 1/)
+      .click();
     addClusterStorageModal.findSubmitButton().should('be.enabled');
     addClusterStorageModal.findDescriptionInput().fill('description');
     addClusterStorageModal.findPVSizeMinusButton().click();
@@ -181,22 +184,38 @@ describe('ClusterStorage', () => {
     addClusterStorageModal.selectPVSize('MiB');
 
     //connect workbench
-    addClusterStorageModal.findAddWorkbenchButton().click();
-    addClusterStorageModal.findWorkbenchTable().should('exist');
-    addClusterStorageModal.selectWorkbenchName(0, 'test-notebook');
+    addClusterStorageModal
+      .findWorkbenchConnectionSelect()
+      .findSelectOption('Test Notebook')
+      .click();
 
     //don't allow duplicate path
     addClusterStorageModal.findMountPathField(0).fill('test-dupe');
     addClusterStorageModal
       .findMountFieldHelperText()
-      .should('contain.text', 'This path is already connected to this workbench');
+      .should('contain.text', 'Mount folder is already in use for this workbench.');
 
     addClusterStorageModal.findMountPathField(0).clear();
     addClusterStorageModal.selectCustomPathFormat(0);
     addClusterStorageModal
       .findMountFieldHelperText()
-      .should('contain.text', 'Enter a path to a model or folder.');
-    addClusterStorageModal.findMountPathField(0).fill('data');
+      .should('contain.text', 'Must only consist of lowercase letters and dashes.');
+
+    // Allow trailing slash
+    addClusterStorageModal.findMountField().clear();
+    addClusterStorageModal.findMountField().fill('test/');
+    addClusterStorageModal
+      .findMountFieldHelperText()
+      .should('contain.text', 'Must consist of lowercase letters and dashes.');
+
+    addClusterStorageModal.findMountField().clear();
+    addClusterStorageModal
+      .findMountFieldHelperText()
+      .should(
+        'contain.text',
+        'Enter a path to a model or folder. This path cannot point to a root folder.',
+      );
+    addClusterStorageModal.findMountField().fill('data');
     addClusterStorageModal.findWorkbenchRestartAlert().should('exist');
 
     cy.interceptK8s('PATCH', NotebookModel, mockNotebookK8sResource({})).as('addClusterStorage');
@@ -267,9 +286,14 @@ describe('ClusterStorage', () => {
     clusterStorage.visit('test-project');
     const clusterStorageRow = clusterStorage.getClusterStorageRow('Existing PVC');
     clusterStorageRow.findKebabAction('Edit storage').click();
-    updateClusterStorageModal.findAddWorkbenchButton().click();
-    updateClusterStorageModal.selectWorkbenchName(1, 'another-notebook');
-    updateClusterStorageModal.findMountPathField(1).fill('new-data');
+
+    // Connect to 'Another Notebook'
+    updateClusterStorageModal
+      .findWorkbenchConnectionSelect()
+      .findSelectOption('Another Notebook')
+      .click();
+
+    updateClusterStorageModal.findMountField().fill('new-data');
 
     cy.interceptK8s('PATCH', NotebookModel, anotherNotebook).as('updateClusterStorage');
 

diff --git a/frontend/src/app/ThemeContext.tsx b/frontend/src/app/ThemeContext.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useBrowserStorage } from '~/components/browserStorage';
 
 type ThemeContextProps = {
   theme: string;
@@ -15,7 +14,7 @@ type ThemeProviderProps = {
   children: React.ReactNode;
 };
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  const [theme, setTheme] = useBrowserStorage<string>('odh.dashboard.ui.theme', 'light');
+  const [theme, setTheme] = React.useState('light');
 
   const contextValue = React.useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
 

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx
@@ -5,6 +5,7 @@ import {
   Flex,
   FlexItem,
   ContentVariants,
+  ContentVariants,
   Title,
   Bullseye,
   Spinner,
@@ -115,117 +116,106 @@ const ModelVersionDetailsView: React.FC<ModelVersionDetailsViewProps> = ({
             <InlineTruncatedClipboardCopy testId="model-version-id" textToCopy={mv.id} />
           </DashboardDescriptionListGroup>
         </DescriptionList>
+        <Title style={{ margin: '1em 0' }} headingLevel={ContentVariants.h3}>
         <Title style={{ margin: '1em 0' }} headingLevel={ContentVariants.h3}>
           Model location
         </Title>
-        {modelArtifactsLoadError ? (
-          <Alert variant="danger" isInline title={modelArtifactsLoadError.name}>
-            {modelArtifactsLoadError.message}
-          </Alert>
-        ) : (
-          <>
-            <DescriptionList>
-              {storageFields && (
-                <>
-                  <DashboardDescriptionListGroup
-                    title="Endpoint"
-                    isEmpty={modelArtifacts.size === 0 || !storageFields.endpoint}
-                    contentWhenEmpty="No endpoint"
-                  >
-                    <InlineTruncatedClipboardCopy
-                      testId="storage-endpoint"
-                      textToCopy={storageFields.endpoint}
-                    />
-                  </DashboardDescriptionListGroup>
-                  <DashboardDescriptionListGroup
-                    title="Region"
-                    isEmpty={modelArtifacts.size === 0 || !storageFields.region}
-                    contentWhenEmpty="No region"
-                  >
-                    <InlineTruncatedClipboardCopy
-                      testId="storage-region"
-                      textToCopy={storageFields.region || ''}
-                    />
-                  </DashboardDescriptionListGroup>
-                  <DashboardDescriptionListGroup
-                    title="Bucket"
-                    isEmpty={modelArtifacts.size === 0 || !storageFields.bucket}
-                    contentWhenEmpty="No bucket"
-                  >
-                    <InlineTruncatedClipboardCopy
-                      testId="storage-bucket"
-                      textToCopy={storageFields.bucket}
-                    />
-                  </DashboardDescriptionListGroup>
-                  <DashboardDescriptionListGroup
-                    title="Path"
-                    isEmpty={modelArtifacts.size === 0 || !storageFields.path}
-                    contentWhenEmpty="No path"
-                  >
-                    <InlineTruncatedClipboardCopy
-                      testId="storage-path"
-                      textToCopy={storageFields.path}
-                    />
-                  </DashboardDescriptionListGroup>
-                </>
-              )}
-              {!storageFields && (
-                <>
-                  <DashboardDescriptionListGroup
-                    title="URI"
-                    isEmpty={modelArtifacts.size === 0 || !modelArtifact?.uri}
-                    contentWhenEmpty="No URI"
-                  >
-                    <InlineTruncatedClipboardCopy
-                      testId="storage-uri"
-                      textToCopy={modelArtifact?.uri || ''}
-                    />
-                  </DashboardDescriptionListGroup>
-                </>
-              )}
-            </DescriptionList>
-            <Divider style={{ marginTop: '1em' }} />
-            <Title style={{ margin: '1em 0' }} headingLevel={ContentVariants.h3}>
-              Source model format
-            </Title>
-            <DescriptionList>
-              <EditableTextDescriptionListGroup
-                editableVariant="TextInput"
-                baseTestId="source-model-format"
-                isArchive={isArchiveVersion}
-                value={modelArtifact?.modelFormatName || ''}
-                saveEditedValue={(value) =>
-                  apiState.api
-                    .patchModelArtifact({}, { modelFormatName: value }, modelArtifact?.id || '')
-                    .then(() => {
-                      refreshModelArtifacts();
-                    })
-                }
-                title="Model Format"
-                contentWhenEmpty="No model format specified"
-              />
-              <EditableTextDescriptionListGroup
-                editableVariant="TextInput"
-                baseTestId="source-model-version"
-                value={modelArtifact?.modelFormatVersion || ''}
-                isArchive={isArchiveVersion}
-                saveEditedValue={(newVersion) =>
-                  apiState.api
-                    .patchModelArtifact(
-                      {},
-                      { modelFormatVersion: newVersion },
-                      modelArtifact?.id || '',
-                    )
-                    .then(() => {
-                      refreshModelArtifacts();
-                    })
-                }
-                title="Version"
-                contentWhenEmpty="No source model format version"
-              />
-            </DescriptionList>
-          </>
-        )}
+        <DescriptionList>
+          {storageFields && (
+            <>
+              <DashboardDescriptionListGroup
+                title="Endpoint"
+                isEmpty={modelArtifacts.size === 0 || !storageFields.endpoint}
+                contentWhenEmpty="No endpoint"
+              >
+                <InlineTruncatedClipboardCopy
+                  testId="storage-endpoint"
+                  textToCopy={storageFields.endpoint}
+                />
+              </DashboardDescriptionListGroup>
+              <DashboardDescriptionListGroup
+                title="Region"
+                isEmpty={modelArtifacts.size === 0 || !storageFields.region}
+                contentWhenEmpty="No region"
+              >
+                <InlineTruncatedClipboardCopy
+                  testId="storage-region"
+                  textToCopy={storageFields.region || ''}
+                />
+              </DashboardDescriptionListGroup>
+              <DashboardDescriptionListGroup
+                title="Bucket"
+                isEmpty={modelArtifacts.size === 0 || !storageFields.bucket}
+                contentWhenEmpty="No bucket"
+              >
+                <InlineTruncatedClipboardCopy
+                  testId="storage-bucket"
+                  textToCopy={storageFields.bucket}
+                />
+              </DashboardDescriptionListGroup>
+              <DashboardDescriptionListGroup
+                title="Path"
+                isEmpty={modelArtifacts.size === 0 || !storageFields.path}
+                contentWhenEmpty="No path"
+              >
+                <InlineTruncatedClipboardCopy
+                  testId="storage-path"
+                  textToCopy={storageFields.path}
+                />
+              </DashboardDescriptionListGroup>
+            </>
+          )}
+          {!storageFields && (
+            <>
+              <DashboardDescriptionListGroup
+                title="URI"
+                isEmpty={modelArtifacts.size === 0 || !modelArtifact?.uri}
+                contentWhenEmpty="No URI"
+              >
+                <InlineTruncatedClipboardCopy
+                  testId="storage-uri"
+                  textToCopy={modelArtifact?.uri || ''}
+                />
+              </DashboardDescriptionListGroup>
+            </>
+          )}
+        </DescriptionList>
+        <Divider style={{ marginTop: '1em' }} />
+        <Title style={{ margin: '1em 0' }} headingLevel={ContentVariants.h3}>
+          Source model format
+        </Title>
+        <DescriptionList>
+          <EditableTextDescriptionListGroup
+            editableVariant="TextInput"
+            baseTestId="source-model-format"
+            isArchive={isArchiveVersion}
+            value={modelArtifact?.modelFormatName || ''}
+            saveEditedValue={(value) =>
+              apiState.api
+                .patchModelArtifact({}, { modelFormatName: value }, modelArtifact?.id || '')
+                .then(() => {
+                  refreshModelArtifacts();
+                })
+            }
+            title="Model Format"
+            contentWhenEmpty="No model format specified"
+          />
+          <EditableTextDescriptionListGroup
+            editableVariant="TextInput"
+            baseTestId="source-model-version"
+            value={modelArtifact?.modelFormatVersion || ''}
+            isArchive={isArchiveVersion}
+            saveEditedValue={(newVersion) =>
+              apiState.api
+                .patchModelArtifact({}, { modelFormatVersion: newVersion }, modelArtifact?.id || '')
+                .then(() => {
+                  refreshModelArtifacts();
+                })
+            }
+            title="Version"
+            contentWhenEmpty="No source model format version"
+          />
+        </DescriptionList>
         <Divider style={{ marginTop: '1em' }} />
         <DescriptionList isFillColumns style={{ marginTop: '1em' }}>
           <DashboardDescriptionListGroup

diff --git a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -79,6 +79,7 @@ const RegisterModel: React.FC = () => {
       loaded
       empty={false}
     >
+      <PageSection hasBodyWrapper={false} isFilled>
       <PageSection hasBodyWrapper={false} isFilled>
         <Form isWidthLimited>
           <Stack hasGutter>
@@ -128,15 +129,13 @@ const RegisterModel: React.FC = () => {
             </StackItem>
           </Stack>
           <RegistrationFormFooter
-            submitLabel={SubmitLabel.REGISTER_MODEL}
+            submitLabel="Register model"
             submitError={submitError}
+            setSubmitError={setSubmitError}
             isSubmitDisabled={isSubmitDisabled}
             isSubmitting={isSubmitting}
-            onSubmit={handleSubmit}
+            onSubmit={onSubmit}
             onCancel={onCancel}
-            errorName={errorName}
-            versionName={versionName}
-            modelName={registeredModelName}
           />
         </Form>
       </PageSection>