test: Workspace Models tests [CM-538]

webui/react/src/components/ModelCreateModal.tsx

@@ -207,6 +207,7 @@ const ModelCreateModal = ({ onClose, workspaceId }: Props): JSX.Element => {
                       <Button
                         block
                         icon={<Icon decorative name="add" size="tiny" />}
+                        test-id="add-metadata"
                         type="dashed"
                         onClick={() => add()}>
                         Add metadata
@@ -269,6 +270,7 @@ const ModelCreateModal = ({ onClose, workspaceId }: Props): JSX.Element => {
                       <Button
                         block
                         icon={<Icon decorative name="add" size="tiny" />}
+                        test-id="add-tag"
                         type="dashed"
                         onClick={() => add()}>
                         Add tag

webui/react/src/components/ModelMoveModal.tsx

@@ -74,6 +74,7 @@ const ModelMoveModal = ({ model }: Props): JSX.Element => {
               (option?.label?.toString() ?? '').toLowerCase().includes(input.toLowerCase())
             }
             filterSort={(a, b) => ((a?.label ?? '') < (b?.label ?? '') ? -1 : 1)}
+            id="workspace"
             options={workspaces
               .filter(
                 (ws) => ws.id !== model.workspaceId && canMoveModel({ destination: { id: ws.id } }),

webui/react/src/components/ModelRegistry.tsx

@@ -513,7 +513,7 @@ const ModelRegistry: React.FC<Props> = ({ workspace }: Props) => {
         filterIcon: tableSearchIcon,
         isFiltered: (settings: Settings) => !!settings.name,
         key: V1GetModelsRequestSortBy.NAME,
-        onCell: onRightClickableCell,
+        onCell: () => ({ ...onRightClickableCell(), 'data-testid': 'name' }),
         render: modelNameRenderer,
         sorter: true,
         title: 'Name',
@@ -577,6 +577,7 @@ const ModelRegistry: React.FC<Props> = ({ workspace }: Props) => {
         dataIndex: 'archived',
         defaultWidth: DEFAULT_COLUMN_WIDTHS['archived'],
         key: 'archived',
+        onCell: () => ({ ...onRightClickableCell(), 'data-testid': 'archived' }),
         render: checkmarkRenderer,
         title: 'Archived',
       },
@@ -597,6 +598,7 @@ const ModelRegistry: React.FC<Props> = ({ workspace }: Props) => {
         defaultWidth: DEFAULT_COLUMN_WIDTHS['action'],
         fixed: 'right',
         key: 'action',
+        onCell: () => ({ ...onRightClickableCell(), 'data-testid': 'actions' }),
         render: actionRenderer,
         title: '',
         width: DEFAULT_COLUMN_WIDTHS['action'],
@@ -704,7 +706,9 @@ const ModelRegistry: React.FC<Props> = ({ workspace }: Props) => {
             <FilterCounter activeFilterCount={filterCount} onReset={resetFilters} />
           )}
           {canCreateModels ? (
-            <Button onClick={showCreateModelModal}>New Model</Button>
+            <Button test-id="new-model-button" onClick={showCreateModelModal}>
+              New Model
+            </Button>
           ) : (
             <Tooltip content="User lacks permission to create models" placement="leftBottom">
               <div>
@@ -727,6 +731,7 @@ const ModelRegistry: React.FC<Props> = ({ workspace }: Props) => {
             </>
           }
           icon="model"
+          testId="no-models-registered"
           title="No Models Registered"
         />
       ) : (

webui/react/src/e2e/models/components/AddUsersToGroupsModal.ts

@@ -7,7 +7,7 @@ import { Modal } from 'e2e/models/common/hew/Modal';
  */
 export class AddUsersToGroupsModal extends Modal {
   readonly groups = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="groups"]',
   });
 }

webui/react/src/e2e/models/components/ChangeUserStatusModal.ts

@@ -6,7 +6,7 @@ import { Select } from 'e2e/models/common/hew/Select';
  */
 export class ChangeUserStatusModal extends Modal {
   readonly status = new StatusSelect({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="status"]',
   });
 }

webui/react/src/e2e/models/components/CreateUserModal.ts

@@ -7,31 +7,31 @@ import { Modal } from 'e2e/models/common/hew/Modal';
  */
 export class CreateUserModal extends Modal {
   readonly username = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="username"]',
   });
   readonly displayName = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="displayName"]',
   });
   readonly adminToggle = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="isAdmin"] button',
   });
   readonly remoteToggle = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="isRemote"] button',
   });
   readonly password = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="password"]',
   });
   readonly confirmPassword = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="confirmPassword"]',
   });
   readonly roleSelect = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="roles"]',
   });
 }

webui/react/src/e2e/models/components/ModelCreateModal.ts

@@ -0,0 +1,41 @@
+import { BaseComponent } from 'playwright-page-model-base/BaseComponent';
+
+import { Modal } from 'e2e/models/common/hew/Modal';
+
+/**
+ * Represents the ModelCreateModal component in src/components/ModelCreateModal.tsx
+ */
+export class ModelCreateModal extends Modal {
+  readonly name = new BaseComponent({
+    parent: this,
+    selector: '[id="modelName"]',
+  });
+  readonly description = new BaseComponent({
+    parent: this,
+    selector: '[id="modelDescription"]',
+  });
+  readonly addMoreDetails = new BaseComponent({
+    parent: this,
+    selector: '[class^="Link_base"]',
+  });
+  readonly addMetadatButton = new BaseComponent({
+    parent: this,
+    selector: '[test-id="add-metadata"]',
+  });
+  readonly addTagButton = new BaseComponent({
+    parent: this,
+    selector: '[test-id="add-tag"]',
+  });
+  readonly metadataKey = new BaseComponent({
+    parent: this,
+    selector: '[id="metadata_0_key"]',
+  });
+  readonly metadataValue = new BaseComponent({
+    parent: this,
+    selector: '[id="metadata_0_value"]',
+  });
+  readonly tag = new BaseComponent({
+    parent: this,
+    selector: '[id="tags_0"]',
+  });
+}

webui/react/src/e2e/models/components/ModelRegistry.ts

@@ -1,6 +1,92 @@
+import { BaseComponent } from 'playwright-page-model-base/BaseComponent';
 import { BaseReactFragment } from 'playwright-page-model-base/BaseReactFragment';
 
+import { Modal } from 'e2e/models/common/ant/Modal';
+import { Notification } from 'e2e/models/common/ant/Notification';
+import { DropdownMenu } from 'e2e/models/common/hew/Dropdown';
+import { Select } from 'e2e/models/common/hew/Select';
+import { Toggle } from 'e2e/models/common/hew/Toggle';
+import { ModelCreateModal } from 'e2e/models/components/ModelCreateModal';
+import { HeadRow, InteractiveTable, Row } from 'e2e/models/components/Table/InteractiveTable';
+
+class ModelHeadRow extends HeadRow {}
+class ModelRow extends Row {
+  readonly actions = new ModelActionDropdown({
+    clickThisComponentToOpen: new BaseComponent({
+      parent: this,
+      selector: '[data-testid="actions"]',
+    }),
+    root: this.root,
+  });
+  readonly archived = new BaseComponent({
+    parent: this,
+    selector: '[data-testid="archived"]',
+  });
+  readonly name = new BaseComponent({
+    parent: this,
+    selector: '[data-testid="name"]',
+  });
+  readonly archivedIcon = new BaseComponent({
+    parent: this,
+    selector: '[aria-label="Checkmark"]',
+  });
+}
+
 /**
- * Represents the ModelRegistry component in src/components/ModelRegistry.tsx
+ * Represents the ModelActionDropdown from src/components/ModelActionDropdown.tsx
+ */
+class ModelActionDropdown extends DropdownMenu {
+  readonly delete = this.menuItem('delete-model');
+  readonly switchArchived = this.menuItem('switch-archived');
+  readonly move = this.menuItem('move-model');
+}
+
+class ModelDeleteModal extends Modal {
+  readonly deleteButton = new BaseComponent({
+    parent: this,
+    selector: '.ant-btn-dangerous',
+  });
+}
+
+class ModelMoveModal extends Modal {
+  readonly workspaceSelect = new Select({
+    parent: this,
+    selector: 'input[id="workspace"]',
+  });
+}
+
+/* Represents the ModelRegistry component in src/components/ModelRegistry.tsx
  */
-export class ModelRegistry extends BaseReactFragment {}
+export class ModelRegistry extends BaseReactFragment {
+  readonly showArchived = new Toggle({
+    parent: this,
+  });
+  readonly newModelButton = new BaseComponent({
+    parent: this,
+    selector: '[test-id="new-model-button"]',
+  });
+  readonly modelCreateModal = new ModelCreateModal({
+    root: this.root,
+  });
+  readonly modelMoveModal = new ModelMoveModal({
+    root: this.root,
+  });
+  readonly table = new InteractiveTable({
+    parent: this,
+    tableArgs: {
+      attachment: '[data-testid="table"]',
+      headRowType: ModelHeadRow,
+      rowType: ModelRow,
+    },
+  });
+  readonly notification = new Notification({
+    parent: this.root,
+  });
+  readonly modelDeleteModal = new ModelDeleteModal({
+    root: this.root,
+  });
+  readonly noModelsMessage = new BaseComponent({
+    parent: this,
+    selector: '[data-testid="no-models-registered"]',
+  });
+}

webui/react/src/e2e/models/components/SetUserRolesModal.ts

@@ -7,7 +7,7 @@ import { Modal } from 'e2e/models/common/hew/Modal';
  */
 export class SetUserRolesModal extends Modal {
   readonly roles = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="roles"]',
   });
 }

webui/react/src/e2e/models/components/WorkspaceCreateModal.ts

@@ -8,43 +8,43 @@ import { Toggle } from 'e2e/models/common/hew/Toggle';
  */
 export class WorkspaceCreateModal extends Modal {
   readonly workspaceName = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: 'input[id="workspaceName"]',
   });
 
   readonly useAgentUser = new Toggle({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="useAgentUser"]',
   });
   readonly agentUid = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: 'input[id="agentUid"]',
   });
   readonly agentUser = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: 'input[id="agentUser"]',
   });
 
   readonly useAgentGroup = new Toggle({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="useAgentGroup"]',
   });
   readonly agentGid = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: 'input[id="agentGid"]',
   });
   readonly agentGroup = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: 'input[id="agentGroup"]',
   });
 
   readonly useCheckpointStorage = new Toggle({
-    parent: this.body,
+    parent: this,
     selector: '[data-testid="useCheckpointStorage"]',
   });
   // We need more work on this to handle input well most likely since the code editor is complex
   readonly checkpointCodeEditor = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: 'div.cm-editor',
   });
 }

webui/react/src/e2e/models/components/WorkspaceDeleteModal.ts

@@ -7,7 +7,7 @@ import { Modal } from 'e2e/models/common/hew/Modal';
  */
 export class WorkspaceDeleteModal extends Modal {
   readonly nameConfirmation = new BaseComponent({
-    parent: this.body,
+    parent: this,
     selector: 'input[id="workspaceName"]',
   });
 }