Model Catalog Settings Table

clients/ui/frontend/src/__mocks__/index.ts

@@ -3,5 +3,6 @@ export * from './mockModelVersion';
 export * from './mockModelVersionList';
 export * from './mockModelArtifactList';
 export * from './mockCatalogSourceList';
+export * from './mockCatalogSourceConfigList';
 export * from './mockCatalogModelList';
 export * from './mockCatalogModelArtifactList';

clients/ui/frontend/src/__mocks__/mockCatalogSourceConfigList.ts

@@ -0,0 +1,74 @@
+import {
+  CatalogSourceConfig,
+  CatalogSourceConfigList,
+  YamlCatalogSourceConfig,
+  HuggingFaceCatalogSourceConfig,
+} from '~/app/modelCatalogTypes';
+import { CatalogSourceType } from '~/concepts/modelCatalogSettings/const';
+
+export const mockYamlCatalogSourceConfig = (
+  partial?: Partial<YamlCatalogSourceConfig>,
+): YamlCatalogSourceConfig => ({
+  id: 'yaml-source-1',
+  name: 'Red Hat AI',
+  type: CatalogSourceType.YAML,
+  enabled: true,
+  labels: ['Red Hat AI'],
+  includedModels: [],
+  excludedModels: [],
+  isDefault: true,
+  yaml: 'version: 1.0\nmodels:\n  - name: example-model',
+  ...partial,
+});
+
+export const mockHuggingFaceCatalogSourceConfig = (
+  partial?: Partial<HuggingFaceCatalogSourceConfig>,
+): HuggingFaceCatalogSourceConfig => ({
+  id: 'huggingface-source-1',
+  name: 'Huggingface_Admin_1',
+  type: CatalogSourceType.HUGGING_FACE,
+  enabled: true,
+  labels: ['Hugging Face'],
+  includedModels: [],
+  excludedModels: [],
+  isDefault: false,
+  allowedOrganization: 'Google',
+  apiKey: undefined,
+  ...partial,
+});
+
+export const mockCatalogSourceConfig = (
+  partial?: Partial<CatalogSourceConfig>,
+): CatalogSourceConfig => {
+  if (partial?.type === CatalogSourceType.HUGGING_FACE) {
+    return mockHuggingFaceCatalogSourceConfig(partial as Partial<HuggingFaceCatalogSourceConfig>);
+  }
+  return mockYamlCatalogSourceConfig(partial as Partial<YamlCatalogSourceConfig>);
+};
+
+export const mockCatalogSourceConfigList = (
+  partial?: Partial<CatalogSourceConfigList>,
+): CatalogSourceConfigList => ({
+  catalogs: [
+    mockYamlCatalogSourceConfig({ id: 'red-hat-ai', name: 'Red Hat AI', isDefault: true }),
+    mockYamlCatalogSourceConfig({
+      id: 'red-hat-ai-validated',
+      name: 'Red Hat AI validated',
+      isDefault: true,
+    }),
+    mockHuggingFaceCatalogSourceConfig({
+      id: 'huggingface-admin-1',
+      name: 'Huggingface_Admin_1',
+      allowedOrganization: 'Google',
+      isDefault: false,
+    }),
+    mockYamlCatalogSourceConfig({
+      id: 'yaml-amdimport-1',
+      name: 'YAMLAmdImport_1',
+      isDefault: false,
+      includedModels: ['model1', 'model2'],
+      excludedModels: ['model3'],
+    }),
+  ],
+  ...partial,
+});

clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelCatalogSettings.ts

@@ -1,4 +1,75 @@
 import { appChrome } from './appChrome';
+import { TableRow } from './components/table';
+
+class CatalogSourceConfigRow extends TableRow {
+  findName() {
+    return this.find().find('[data-label="Name"]');
+  }
+
+  findOrganization() {
+    return this.find().find('[data-label="Organization"]');
+  }
+
+  findModelVisibility() {
+    return this.find().find('[data-label="Model visibility"]');
+  }
+
+  findSourceType() {
+    return this.find().find('[data-label="Source type"]');
+  }
+
+  findEnableToggle() {
+    return this.find().find('[data-label="Enable"]').find('input[type="checkbox"]');
+  }
+
+  findValidationStatus() {
+    return this.find().find('[data-label="Validation status"]');
+  }
+
+  findManageSourceButton() {
+    return this.find()
+      .find('[data-label="Actions"]')
+      .findByRole('button', { name: 'Manage source' });
+  }
+
+  shouldHaveModelVisibility(visibility: 'Filtered' | 'Unfiltered') {
+    this.findModelVisibility().contains(visibility);
+    return this;
+  }
+
+  shouldHaveOrganization(org: string) {
+    this.findOrganization().contains(org);
+    return this;
+  }
+
+  shouldHaveSourceType(type: string) {
+    this.findSourceType().contains(type);
+    return this;
+  }
+
+  toggleEnable() {
+    this.findEnableToggle().click({ force: true });
+    return this;
+  }
+
+  shouldHaveEnableToggle(shouldExist: boolean) {
+    if (shouldExist) {
+      this.findEnableToggle().should('exist');
+    } else {
+      this.find().find('[data-label="Enable"]').should('be.empty');
+    }
+    return this;
+  }
+
+  shouldHaveEnableState(enabled: boolean) {
+    if (enabled) {
+      this.findEnableToggle().should('be.checked');
+    } else {
+      this.findEnableToggle().should('not.be.checked');
+    }
+    return this;
+  }
+}
 
 class ModelCatalogSettings {
   visit(wait = true) {
@@ -38,6 +109,35 @@ class ModelCatalogSettings {
   findAddSourceButton() {
     return cy.findByTestId('add-source-button');
   }
+
+  findTable() {
+    return cy.findByTestId('catalog-source-configs-table');
+  }
+
+  findEmptyState() {
+    return cy.findByTestId('catalog-settings-empty-state');
+  }
+
+  getRow(name: string) {
+    return new CatalogSourceConfigRow(() =>
+      this.findTable().find('tbody').find('tr').contains(name).parents('tr'),
+    );
+  }
+
+  findRows() {
+    return this.findTable().find('tbody tr');
+  }
+
+  shouldHaveSourceConfigs() {
+    this.findTable().should('exist');
+    this.findRows().should('have.length.at.least', 1);
+    return this;
+  }
+
+  shouldBeEmpty() {
+    this.findEmptyState().should('exist');
+    return this;
+  }
 }
 
 class ManageSourcePage {