CONSOLE-2457: Modify CatalogSource Details view and include new Operators tab

frontend/packages/operator-lifecycle-manager/integration-tests-cypress/tests/catalog-source-details.spec.ts

@@ -0,0 +1,82 @@
+import { checkErrors, testName } from '../../../integration-tests-cypress/support';
+import { detailsPage } from '../../../integration-tests-cypress/views/details-page';
+import { modal } from '../../../integration-tests-cypress/views/modal';
+
+const catalogSource = 'redhat-operators';
+
+describe(`Interacting with CatalogSource page`, () => {
+  before(() => {
+    cy.login();
+    cy.createProject(testName);
+  });
+
+  beforeEach(() => {
+    cy.log('navigate to Catalog Source page');
+    cy.visit(`/settings/cluster`);
+    cy.byLegacyTestID('horizontal-link-Global configuration').click();
+    cy.byLegacyTestID('OperatorHub').click();
+
+    // verfiy operatorHub details page is open
+    detailsPage.sectionHeaderShouldExist('OperatorHub details');
+    cy.byLegacyTestID('horizontal-link-Sources').click();
+    cy.byLegacyTestID(catalogSource).click();
+
+    // verfiy catalogSource details page is open
+    detailsPage.sectionHeaderShouldExist('CatalogSource details');
+  });
+
+  afterEach(() => {
+    checkErrors();
+  });
+
+  after(() => {
+    cy.deleteProject(testName);
+    cy.logout();
+  });
+
+  it(`renders details about the ${catalogSource} catalog source`, () => {
+    // validate Name field
+    cy.byTestSelector('details-item-label__Name').should('be.visible');
+    cy.byTestSelector('details-item-value__Name').should('have.text', catalogSource);
+
+    // validate Status field
+    cy.byTestSelector('details-item-label__Status').should('be.visible');
+    cy.byTestSelector('details-item-value__Status').should('have.text', 'READY');
+
+    // validate DisplayName field
+    cy.byTestSelector('details-item-label__Display Name').should('be.visible');
+    cy.byTestSelector('details-item-value__Display Name').should('have.text', 'Red Hat Operators');
+
+    // validate RegistryPollInterval field
+    cy.byTestID('Registry Poll Interval')
+      .scrollIntoView()
+      .should('be.visible');
+    cy.byTestSelector('details-item-value__Registry Poll Interval')
+      .scrollIntoView()
+      .should('be.visible');
+
+    // validate NumberOfOperators field
+    cy.byTestSelector('details-item-label__Number of Operators')
+      .scrollIntoView()
+      .should('be.visible');
+    cy.byTestSelector('details-item-value__Number of Operators')
+      .scrollIntoView()
+      .should('be.visible');
+  });
+
+  it('allows modifying registry poll interval', () => {
+    cy.byTestID('Registry Poll Interval-details-item__edit-button').click();
+    modal.modalTitleShouldContain('Edit registry poll interval');
+    cy.byLegacyTestID('dropdown-button').click();
+    cy.byTestDropDownMenu('30m0s').click();
+    modal.submit();
+
+    // verify that registryPollInterval is updated
+    cy.byTestSelector('details-item-value__Registry Poll Interval').should('have.text', '30m0s');
+  });
+
+  it(`lists all the package manifests for ${catalogSource} under Operators tab`, () => {
+    cy.byLegacyTestID('horizontal-link-catalog-source~Operators').click();
+    cy.get('[data-label=Name]').should('exist');
+  });
+});

frontend/packages/operator-lifecycle-manager/locales/en/catalog-source.json

@@ -1,12 +1,13 @@
 {
   "Disable": "Disable",
   "Enable": "Enable",
-  "Name": "Name",
-  "Publisher": "Publisher",
-  "Packages": "Packages",
+  "CatalogSource details": "CatalogSource details",
+  "Operators": "Operators",
   "Package not found": "Package not found",
   "Cannot create a Subscription to a non-existent package.": "Cannot create a Subscription to a non-existent package.",
+  "Name": "Name",
   "Status": "Status",
+  "Publisher": "Publisher",
   "Availability": "Availability",
   "Endpoint": "Endpoint",
   "Registry poll interval": "Registry poll interval",

frontend/packages/operator-lifecycle-manager/locales/en/edit-registry-poll-interval-modal.json

@@ -0,0 +1,3 @@
+{
+  "Registry Poll Interval": "Registry Poll Interval"
+}

frontend/packages/operator-lifecycle-manager/mocks.ts

@@ -245,6 +245,7 @@ export const testPackageManifest: PackageManifestKind = {
   metadata: {
     name: 'test-package',
     namespace: 'default',
+    creationTimestamp: '2018-05-02T18:10:38Z',
   },
   spec: {},
   status: {
@@ -689,7 +690,7 @@ const svcatPackageManifest = {
   },
 };
 
-const dummyPackageManifest = {
+export const dummyPackageManifest = {
   apiVersion: 'packages.operators.coreos.com/v1' as PackageManifestKind['apiVersion'],
   kind: 'PackageManifest' as PackageManifestKind['kind'],
   metadata: {

frontend/packages/operator-lifecycle-manager/src/components/catalog-source.spec.tsx

@@ -5,24 +5,25 @@ import { safeLoad } from 'js-yaml';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { DetailsPage } from '@console/internal/components/factory';
 import { ErrorBoundary } from '@console/shared/src/components/error/error-boundary';
-import { Firehose, LoadingBox } from '@console/internal/components/utils';
+import { Firehose, LoadingBox, DetailsItem } from '@console/internal/components/utils';
 import { CreateYAML, CreateYAMLProps } from '@console/internal/components/create-yaml';
 import {
   SubscriptionModel,
   CatalogSourceModel,
   PackageManifestModel,
   OperatorGroupModel,
 } from '../models';
-import { testCatalogSource, testPackageManifest } from '../../mocks';
+import { testCatalogSource, testPackageManifest, dummyPackageManifest } from '../../mocks';
 import {
   CatalogSourceDetails,
   CatalogSourceDetailsProps,
   CatalogSourceDetailsPage,
   CatalogSourceDetailsPageProps,
   CreateSubscriptionYAML,
   CreateSubscriptionYAMLProps,
+  CatalogSourceOperatorsPage,
 } from './catalog-source';
-import { PackageManifestList } from './package-manifest';
+import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 
 jest.mock('react-i18next', () => {
   const reactI18next = require.requireActual('react-i18next');
@@ -33,40 +34,33 @@ jest.mock('react-i18next', () => {
 });
 const i18nNS = 'details-page';
 
+jest.mock('@console/internal/components/utils/k8s-watch-hook', () => ({
+  useK8sWatchResource: jest.fn(),
+}));
+
 describe(CatalogSourceDetails.displayName, () => {
   let wrapper: ShallowWrapper<CatalogSourceDetailsProps>;
   let obj: CatalogSourceDetailsProps['obj'];
 
   beforeEach(() => {
     obj = _.cloneDeep(testCatalogSource);
-
-    wrapper = shallow(
-      <CatalogSourceDetails
-        obj={obj}
-        packageManifests={[testPackageManifest]}
-        subscriptions={[]}
-        operatorGroups={[]}
-      />,
-    );
-  });
-
-  it('renders nothing if not all resources are loaded', () => {
-    wrapper = wrapper.setProps({ obj: null });
-
-    expect(wrapper.find('.co-catalog-details').exists()).toBe(false);
+    wrapper = shallow(<CatalogSourceDetails obj={obj} packageManifests={[testPackageManifest]} />);
   });
 
   it('renders name and publisher of the catalog', () => {
-    expect(wrapper.find('[data-test-id="catalog-source-name"]').text()).toEqual(
-      obj.spec.displayName,
-    );
-    expect(wrapper.find('[data-test-id="catalog-source-publisher"]').text()).toEqual(
-      obj.spec.publisher,
-    );
-  });
+    expect(
+      wrapper
+        .find(DetailsItem)
+        .at(1)
+        .props().obj.spec.displayName,
+    ).toEqual(obj.spec.displayName);
 
-  it('renders a `PackageManifestList` component', () => {
-    expect(wrapper.find(PackageManifestList).props().data).toEqual([testPackageManifest]);
+    expect(
+      wrapper
+        .find(DetailsItem)
+        .at(2)
+        .props().obj.spec.publisher,
+    ).toEqual(obj.spec.publisher);
   });
 });
 
@@ -75,41 +69,31 @@ describe(CatalogSourceDetailsPage.displayName, () => {
   let match: CatalogSourceDetailsPageProps['match'];
 
   beforeEach(() => {
+    (useK8sWatchResource as jest.Mock).mockReturnValue([dummyPackageManifest, true, null]);
     match = { isExact: true, params: { ns: 'default', name: 'some-catalog' }, path: '', url: '' };
     wrapper = shallow(<CatalogSourceDetailsPage match={match} />);
   });
 
   it('renders `DetailsPage` with correct props', () => {
-    const selector = { matchLabels: { catalog: match.params.name } };
-
     expect(wrapper.find(DetailsPage).props().kind).toEqual(referenceForModel(CatalogSourceModel));
-    expect(
-      wrapper
-        .find(DetailsPage)
-        .props()
-        .pages.map((p) => p.nameKey),
-    ).toEqual([`${i18nNS}~Details`, `${i18nNS}~YAML`]);
-    expect(wrapper.find(DetailsPage).props().pages[0].component).toEqual(CatalogSourceDetails);
+
+    const detailsPage = wrapper.find(DetailsPage);
+    const { pages } = detailsPage.props();
+    expect(pages.length).toEqual(3);
+    expect(pages[0].nameKey).toEqual(`${i18nNS}~Details`);
+    expect(pages[1].nameKey).toEqual(`${i18nNS}~YAML`);
+    expect(pages[2].nameKey).toEqual(`catalog-source~Operators`);
+
+    expect(pages[0].component).toEqual(CatalogSourceDetails);
+    expect(pages[2].component).toEqual(CatalogSourceOperatorsPage);
+
     expect(wrapper.find(DetailsPage).props().resources).toEqual([
       {
         kind: referenceForModel(PackageManifestModel),
         isList: true,
         namespace: match.params.ns,
-        selector,
         prop: 'packageManifests',
       },
-      {
-        kind: referenceForModel(SubscriptionModel),
-        isList: true,
-        namespace: match.params.ns,
-        prop: 'subscriptions',
-      },
-      {
-        kind: referenceForModel(OperatorGroupModel),
-        isList: true,
-        namespace: match.params.ns,
-        prop: 'operatorGroups',
-      },
     ]);
   });
 });