ui - display domains org as link to a role in audit domain

ui/next.config.js

@@ -3,5 +3,6 @@ const appConfig = require('./src/config/config')();
 module.exports = {
     publicRuntimeConfig: {
         onCallUrl: appConfig.onCallUrl || appConfig.serverURL,
+        organizationDomain: appConfig?.organizationDomain,
     },
 };

ui/src/__tests__/components/header/DomainDetails.test.js

@@ -14,46 +14,62 @@
  * limitations under the License.
  */
 import React from 'react';
-import DomainDetails from '../../../components/header/DomainDetails';
 import {
-    getStateWithDomainData,
-    buildDomainDataForState,
     renderWithRedux,
+    buildDomainDataForState,
+    getStateWithDomainData,
 } from '../../../tests_utils/ComponentsTestUtils';
-import { getExpiryTime } from '../../../redux/utils';
 import MockApi from '../../../mock/MockApi';
+import { fireEvent, screen } from '@testing-library/react';
+import DomainDetails from '../../../components/header/DomainDetails';
+import * as constants from '../../../components/constants/constants';
 
+// \* simple stable mock api \*/
 const mockApi = {
-    getMeta: jest.fn().mockReturnValue(
-        new Promise((resolve, reject) => {
-            resolve([]);
-        })
-    ),
+    getMeta: jest.fn().mockResolvedValue([]),
 };
 
 beforeEach(() => {
+    jest.resetAllMocks();
     MockApi.setMockApi(mockApi);
 });
 
 afterEach(() => {
     MockApi.cleanMockApi();
 });
 
+// helper: render DomainDetails with given org
+const renderDomainDetails = ({ org, orgDomain, extraMeta = {} }) => {
+    const domainMetadata = {
+        modified: '2020-02-12T21:44:37.792Z',
+        auditEnabled: true,
+        ypmId: 'test',
+        account: 'test',
+        environment: 'qa',
+        org,
+        ...extraMeta,
+    };
+
+    const domainData = buildDomainDataForState(domainMetadata);
+    const state = getStateWithDomainData(domainData);
+
+    return renderWithRedux(<DomainDetails organization={org} />, state);
+};
+
 describe('DomainDetails', () => {
-    it('should render', () => {
+    it('should render snapshot with minimal metadata', () => {
         const domainMetadata = {
             modified: '2020-02-12T21:44:37.792Z',
             auditEnabled: false,
         };
         const domainData = buildDomainDataForState(domainMetadata);
-        const { getByTestId } = renderWithRedux(
-            <DomainDetails />,
-            getStateWithDomainData(domainData)
-        );
-        const domainDetails = getByTestId('domain-details');
-        expect(domainDetails).toMatchSnapshot();
+        const state = getStateWithDomainData(domainData);
+
+        const { getByTestId } = renderWithRedux(<DomainDetails />, state);
+        expect(getByTestId('domain-details')).toMatchSnapshot();
     });
-    it('should render with mock data', () => {
+
+    it('should render snapshot with full metadata', () => {
         const domainMetadata = {
             modified: '2020-02-12T21:44:37.792Z',
             ypmId: 'test',
@@ -63,11 +79,64 @@ describe('DomainDetails', () => {
             environment: 'qa',
         };
         const domainData = buildDomainDataForState(domainMetadata);
-        const { getByTestId } = renderWithRedux(
-            <DomainDetails />,
-            getStateWithDomainData(domainData)
+        const state = getStateWithDomainData(domainData);
+
+        const { getByTestId } = renderWithRedux(<DomainDetails />, state);
+        expect(getByTestId('domain-details')).toMatchSnapshot();
+    });
+
+    it('shows organization as link when org and orgDomain are set', () => {
+        const organization = 'test-org';
+        const orgDomain = 'test-domain';
+
+        jest.spyOn(constants, 'getOrganizationDomain').mockReturnValue(
+            orgDomain
+        );
+
+        renderDomainDetails({ org: organization, orgDomain });
+
+        fireEvent.click(screen.getByTestId('expand-domain-details'));
+
+        const orgNameNode = screen.getByTestId('organization-name');
+        expect(orgNameNode).toBeInTheDocument();
+
+        const organizationLink = screen.getByTestId('organization-link');
+        expect(organizationLink).toHaveAttribute(
+            'href',
+            `/domain/${orgDomain}/role/${organization}/members`
         );
-        const domainDetails = getByTestId('domain-details');
-        expect(domainDetails).toMatchSnapshot();
+    });
+
+    it('shows organization as plain text when orgDomain is empty', () => {
+        const organization = 'test-org';
+        const orgDomain = '';
+
+        jest.spyOn(constants, 'getOrganizationDomain').mockReturnValue('');
+
+        renderDomainDetails({ org: organization, orgDomain });
+
+        fireEvent.click(screen.getByTestId('expand-domain-details'));
+
+        const organizationLink = screen.queryByTestId('organization-link');
+        expect(organizationLink).toBeNull();
+
+        expect(screen.getByText(organization)).toBeInTheDocument();
+    });
+
+    it('shows N/A when organization is empty and orgDomain is empty', () => {
+        const organization = '';
+        const orgDomain = '';
+
+        jest.spyOn(constants, 'getOrganizationDomain').mockReturnValue('');
+
+        renderDomainDetails({ org: organization, orgDomain });
+
+        fireEvent.click(screen.getByTestId('expand-domain-details'));
+
+        const organizationLink = screen.queryByTestId('organization-link');
+        expect(organizationLink).toBeNull();
+
+        const organizationName = screen.getByTestId('organization-name');
+        expect(organizationName).toHaveTextContent('N/A');
     });
 });

ui/src/__tests__/components/header/__snapshots__/DomainDetails.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DomainDetails should render 1`] = `
+exports[`DomainDetails should render snapshot with full metadata 1`] = `
 .emotion-0 {
   margin: 20px 0;
 }
@@ -166,6 +166,49 @@ exports[`DomainDetails should render 1`] = `
   vertical-align: text-bottom;
 }
 
+.emotion-52 {
+  border: none;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px #3697f2 inset;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: Helvetica,Arial,sans-serif;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 1;
+  margin: 5px;
+  outline: 0;
+  padding: 10px 24px;
+  text-align: center;
+  text-shadow: none;
+  text-transform: none;
+  -webkit-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
+  vertical-align: baseline;
+  white-space: nowrap;
+  background: transparent;
+  color: #3697f2;
+}
+
+.emotion-52:first-of-type {
+  margin-left: 0;
+}
+
+.emotion-52:disabled {
+  background: rgba(48,48,48,0.1);
+  color: rgba(48,48,48,0.2);
+  cursor: not-allowed;
+}
+
+.emotion-52:disabled {
+  box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
+}
+
+.emotion-52:hover:not(:disabled) {
+  background: #d7e2fd;
+}
+
 <div
   class="emotion-0 emotion-1"
   data-testid="domain-details"
@@ -236,12 +279,13 @@ exports[`DomainDetails should render 1`] = `
           data-testid="switch-wrapper"
         >
           <input
+            checked=""
             data-testid="auditDomainDetails-switch-input"
             disabled=""
             id="switch-auditDomainDetails"
             name="auditDomainDetails"
             type="checkbox"
-            value="false"
+            value="true"
           />
           <label
             for="switch-auditDomainDetails"
@@ -260,7 +304,7 @@ exports[`DomainDetails should render 1`] = `
       <div
         class="emotion-22 emotion-23"
       >
-        N/A
+        test
       </div>
       <div
         class="emotion-10 emotion-11"
@@ -292,7 +336,7 @@ exports[`DomainDetails should render 1`] = `
     >
       <svg
         class="emotion-49"
-        data-testid="icon"
+        data-testid="expand-domain-details"
         data-wdio="domain-details-expand-icon"
         height="1.25em"
         id=""
@@ -310,11 +354,20 @@ exports[`DomainDetails should render 1`] = `
         />
       </svg>
     </div>
+    <div
+      class="emotion-4 emotion-5"
+    >
+      <button
+        class="emotion-52 denali-button"
+      >
+        Onboard to AWS
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`DomainDetails should render with mock data 1`] = `
+exports[`DomainDetails should render snapshot with minimal metadata 1`] = `
 .emotion-0 {
   margin: 20px 0;
 }
@@ -480,49 +533,6 @@ exports[`DomainDetails should render with mock data 1`] = `
   vertical-align: text-bottom;
 }
 
-.emotion-52 {
-  border: none;
-  border-radius: 2px;
-  box-shadow: 0 0 0 1px #3697f2 inset;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  font-family: Helvetica,Arial,sans-serif;
-  font-weight: 300;
-  font-size: 14px;
-  line-height: 1;
-  margin: 5px;
-  outline: 0;
-  padding: 10px 24px;
-  text-align: center;
-  text-shadow: none;
-  text-transform: none;
-  -webkit-transition: all 0.2s ease-in;
-  transition: all 0.2s ease-in;
-  vertical-align: baseline;
-  white-space: nowrap;
-  background: transparent;
-  color: #3697f2;
-}
-
-.emotion-52:first-of-type {
-  margin-left: 0;
-}
-
-.emotion-52:disabled {
-  background: rgba(48,48,48,0.1);
-  color: rgba(48,48,48,0.2);
-  cursor: not-allowed;
-}
-
-.emotion-52:disabled {
-  box-shadow: 0 0 0 1px rgba(48,48,48,0.1) inset;
-}
-
-.emotion-52:hover:not(:disabled) {
-  background: #d7e2fd;
-}
-
 <div
   class="emotion-0 emotion-1"
   data-testid="domain-details"
@@ -593,13 +603,12 @@ exports[`DomainDetails should render with mock data 1`] = `
           data-testid="switch-wrapper"
         >
           <input
-            checked=""
             data-testid="auditDomainDetails-switch-input"
             disabled=""
             id="switch-auditDomainDetails"
             name="auditDomainDetails"
             type="checkbox"
-            value="true"
+            value="false"
           />
           <label
             for="switch-auditDomainDetails"
@@ -618,7 +627,7 @@ exports[`DomainDetails should render with mock data 1`] = `
       <div
         class="emotion-22 emotion-23"
       >
-        test
+        N/A
       </div>
       <div
         class="emotion-10 emotion-11"
@@ -650,7 +659,7 @@ exports[`DomainDetails should render with mock data 1`] = `
     >
       <svg
         class="emotion-49"
-        data-testid="icon"
+        data-testid="expand-domain-details"
         data-wdio="domain-details-expand-icon"
         height="1.25em"
         id=""
@@ -668,15 +677,6 @@ exports[`DomainDetails should render with mock data 1`] = `
         />
       </svg>
     </div>
-    <div
-      class="emotion-4 emotion-5"
-    >
-      <button
-        class="emotion-52 denali-button"
-      >
-        Onboard to AWS
-      </button>
-    </div>
   </div>
 </div>
 `;

ui/src/__tests__/pages/domain/[domain]/__snapshots__/domain-settings.test.js.snap

@@ -1531,7 +1531,7 @@ exports[`DomainSettingsPage should render 1`] = `
                 >
                   <svg
                     class="emotion-93"
-                    data-testid="icon"
+                    data-testid="expand-domain-details"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
                     id=""

ui/src/__tests__/pages/domain/[domain]/__snapshots__/group.test.js.snap

@@ -1407,7 +1407,7 @@ exports[`GroupPage should render 1`] = `
                 >
                   <svg
                     class="emotion-93"
-                    data-testid="icon"
+                    data-testid="expand-domain-details"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
                     id=""

ui/src/__tests__/pages/domain/[domain]/__snapshots__/microsegmentation.test.js.snap

@@ -1408,7 +1408,7 @@ exports[`MicrosegmentationPage should render 1`] = `
                 >
                   <svg
                     class="emotion-93"
-                    data-testid="icon"
+                    data-testid="expand-domain-details"
                     data-wdio="domain-details-expand-icon"
                     height="1.25em"
                     id=""