final working version

opendatahub-io · Oct 25, 2024 · dfc382e · dfc382e
1 parent 2abe9b5
commit dfc382e
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 174 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDetails.ts b/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDetails.ts
@@ -24,12 +24,12 @@ class ModelVersionDetails {
     return cy.findByTestId('model-version-description');
   }
 
-  findSourceModelFormat() {
-    return cy.findByTestId('source-model-format');
+  findSourceModelFormat(subComponent: 'group' | 'edit' | 'save' | 'cancel') {
+    return cy.findByTestId(`source-model-format-${subComponent}`);
   }
 
-  findSourceModelVersion() {
-    return cy.findByTestId('source-model-version');
+  findSourceModelVersion(subComponent: 'group' | 'edit' | 'save' | 'cancel') {
+    return cy.findByTestId(`source-model-version-${subComponent}`);
   }
 
   findMoreLabelsButton() {

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionDetails.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionDetails.cy.ts
@@ -211,20 +211,6 @@ const initIntercepts = () => {
     },
     mockModelArtifactList({}),
   );
-
-  cy.intercept('PATCH', '/api/service/modelregistry/*/api/model_registry/*/model_artifacts/*', {
-    body: {
-      artifactType: 'model-artifact',
-      createTimeSinceEpoch: '1729694473577',
-      customProperties: {},
-      id: '24',
-      lastUpdateTimeSinceEpoch: '1729712188616',
-      modelFormatName: 'UPdate',
-      name: 'test1-n1-artifact',
-      state: 'LIVE',
-      uri: 's3://b/t?endpoint=b',
-    },
-  }).as('updateArtifact');
 };
 
 describe('Model version details', () => {
@@ -410,9 +396,13 @@ describe('Model version details', () => {
         mockModelArtifact({}),
       ).as('updateModelFormat');
 
-      modelVersionDetails.findSourceModelFormat().find('[data-testid="edit-button"]').click();
-      modelVersionDetails.findSourceModelFormat().find('input').clear().type('UpdatedFormat');
-      modelVersionDetails.findSourceModelFormat().find('[data-testid="save-button"]').click();
+      modelVersionDetails.findSourceModelFormat('edit').click();
+      modelVersionDetails
+        .findSourceModelFormat('group')
+        .find('input')
+        .clear()
+        .type('UpdatedFormat');
+      modelVersionDetails.findSourceModelFormat('save').click();
 
       cy.wait('@updateModelFormat').then((interception) => {
         expect(interception.request.body).to.deep.equal({
@@ -434,9 +424,13 @@ describe('Model version details', () => {
         mockModelArtifact({}),
       ).as('updateModelVersion');
 
-      modelVersionDetails.findSourceModelVersion().find('[data-testid="edit-button"]').click();
-      modelVersionDetails.findSourceModelVersion().find('input').clear().type('2.0.0');
-      modelVersionDetails.findSourceModelVersion().find('[data-testid="save-button"]').click();
+      modelVersionDetails.findSourceModelVersion('edit').click();
+      modelVersionDetails
+        .findSourceModelVersion('group')
+        .find('input')
+        .clear()
+        .type('2.0.0');
+      modelVersionDetails.findSourceModelVersion('save').click();
 
       cy.wait('@updateModelVersion').then((interception) => {
         expect(interception.request.body).to.deep.equal({

diff --git a/frontend/src/components/DashboardDescriptionListGroup.scss b/frontend/src/components/DashboardDescriptionListGroup.scss
@@ -1,4 +1,4 @@
 .odh-custom-description-list-term-with-action > span {
   /* Workaround for missing functionality in PF DescriptionList, see https://github.com/patternfly/patternfly/issues/6583 */
   width: 100%;
-}
+}
diff --git a/frontend/src/components/DashboardDescriptionListGroup.tsx b/frontend/src/components/DashboardDescriptionListGroup.tsx
@@ -23,6 +23,9 @@ type EditableProps = {
   onEditClick: () => void;
   onSaveEditsClick: () => void;
   onDiscardEditsClick: () => void;
+  editButtonTestId?: string;
+  saveButtonTestId?: string;
+  cancelButtonTestId?: string;
 };
 
 export type DashboardDescriptionListGroupProps = {
@@ -32,6 +35,7 @@ export type DashboardDescriptionListGroupProps = {
   isEmpty?: boolean;
   contentWhenEmpty?: React.ReactNode;
   children: React.ReactNode;
+  groupTestId?: string;
 } & (({ isEditable: true } & EditableProps) | ({ isEditable?: false } & Partial<EditableProps>));
 
 const DashboardDescriptionListGroup: React.FC<DashboardDescriptionListGroupProps> = (props) => {
@@ -49,9 +53,13 @@ const DashboardDescriptionListGroup: React.FC<DashboardDescriptionListGroupProps
     onSaveEditsClick,
     onDiscardEditsClick,
     children,
+    groupTestId,
+    editButtonTestId,
+    saveButtonTestId,
+    cancelButtonTestId,
   } = props;
   return (
-    <DescriptionListGroup>
+    <DescriptionListGroup data-testid={groupTestId}>
       {action || isEditable ? (
         <DescriptionListTerm className="odh-custom-description-list-term-with-action">
           <Split>
@@ -62,7 +70,7 @@ const DashboardDescriptionListGroup: React.FC<DashboardDescriptionListGroupProps
                   <ActionList isIconList>
                     <ActionListItem>
                       <Button
-                        data-testid={`save-edit-button-${title}`}
+                        data-testid={saveButtonTestId}
                         aria-label={`Save edits to ${title}`}
                         variant="link"
                         onClick={onSaveEditsClick}
@@ -73,7 +81,7 @@ const DashboardDescriptionListGroup: React.FC<DashboardDescriptionListGroupProps
                     </ActionListItem>
                     <ActionListItem>
                       <Button
-                        data-testid={`discard-edit-button-${title}`}
+                        data-testid={cancelButtonTestId}
                         aria-label={`Discard edits to ${title} `}
                         variant="plain"
                         onClick={onDiscardEditsClick}
@@ -85,7 +93,7 @@ const DashboardDescriptionListGroup: React.FC<DashboardDescriptionListGroupProps
                   </ActionList>
                 ) : (
                   <Button
-                    data-testid={`edit-button-${title}`}
+                    data-testid={editButtonTestId}
                     aria-label={`Edit ${title}`}
                     isInline
                     variant="link"

diff --git a/frontend/src/components/EditableInputDescriptionListGroup.tsx b/frontend/src/components/EditableInputDescriptionListGroup.tsx
diff --git a/frontend/src/components/EditableTextDescriptionListGroup.tsx b/frontend/src/components/EditableTextDescriptionListGroup.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ExpandableSection, TextArea } from '@patternfly/react-core';
+import { ExpandableSection, TextArea, TextInput } from '@patternfly/react-core';
 import DashboardDescriptionListGroup, {
   DashboardDescriptionListGroupProps,
 } from './DashboardDescriptionListGroup';
@@ -10,8 +10,9 @@ type EditableTextDescriptionListGroupProps = Pick<
 > & {
   value: string;
   saveEditedValue: (value: string) => Promise<void>;
-  testid?: string;
+  baseTestId?: string;
   isArchive?: boolean;
+  editableVariant: 'TextInput' | 'TextArea';
 };
 
 const EditableTextDescriptionListGroup: React.FC<EditableTextDescriptionListGroupProps> = ({
@@ -20,7 +21,8 @@ const EditableTextDescriptionListGroup: React.FC<EditableTextDescriptionListGrou
   value,
   isArchive,
   saveEditedValue,
-  testid,
+  baseTestId,
+  editableVariant,
 }) => {
   const [isEditing, setIsEditing] = React.useState(false);
   const [unsavedValue, setUnsavedValue] = React.useState(value);
@@ -34,17 +36,32 @@ const EditableTextDescriptionListGroup: React.FC<EditableTextDescriptionListGrou
       isEditable={!isArchive}
       isEditing={isEditing}
       isSavingEdits={isSavingEdits}
+      groupTestId={`${baseTestId}-group`}
+      editButtonTestId={`${baseTestId}-edit`}
+      saveButtonTestId={`${baseTestId}-save`}
+      cancelButtonTestId={`${baseTestId}-cancel`}
       contentWhenEditing={
-        <TextArea
-          autoFocus
-          data-testid={`edit-text-area-${title}`}
-          aria-label={`Text box for editing ${title}`}
-          value={unsavedValue}
-          onChange={(_event, v) => setUnsavedValue(v)}
-          isDisabled={isSavingEdits}
-          rows={24}
-          resizeOrientation="vertical"
-        />
+        editableVariant === 'TextInput' ? (
+          <TextInput
+            autoFocus
+            data-testid={`${baseTestId}-input`}
+            aria-label={`Text input for editing ${title}`}
+            value={unsavedValue}
+            onChange={(_event, v) => setUnsavedValue(v)}
+            isDisabled={isSavingEdits}
+          />
+        ) : (
+          <TextArea
+            autoFocus
+            data-testid={`${baseTestId}-input`}
+            aria-label={`Text box for editing ${title}`}
+            value={unsavedValue}
+            onChange={(_event, v) => setUnsavedValue(v)}
+            isDisabled={isSavingEdits}
+            rows={24}
+            resizeOrientation="vertical"
+          />
+        )
       }
       onEditClick={() => {
         setUnsavedValue(value);
@@ -65,7 +82,7 @@ const EditableTextDescriptionListGroup: React.FC<EditableTextDescriptionListGrou
       }}
     >
       <ExpandableSection
-        data-testid={testid}
+        data-testid={baseTestId}
         variant="truncate"
         truncateMaxLines={12}
         toggleText={isTextExpanded ? 'Show less' : 'Show more'}