Configurable domain page details

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

@@ -123,6 +123,60 @@ describe('DomainDetails', () => {
         expect(screen.getByText(organization)).toBeInTheDocument();
     });
 
+    it('should hide cloud account details when showCloudAccountDetails is false', () => {
+        const domainMetadata = {
+            modified: '2020-02-12T21:44:37.792Z',
+            ypmId: 'test',
+            org: 'test',
+            auditEnabled: true,
+            account: 'aws-account-123',
+            gcpProject: 'gcp-project-456',
+            environment: 'qa',
+        };
+        const domainData = buildDomainDataForState(domainMetadata);
+        const state = {
+            ...getStateWithDomainData(domainData),
+            domains: {
+                featureFlag: {
+                    enabled: true,
+                    showCloudAccountDetails: false,
+                },
+            },
+        };
+
+        renderWithRedux(<DomainDetails />, state);
+
+        expect(screen.queryByText('AWS ACCOUNT ID')).toBeNull();
+        expect(screen.queryByText('GCP PROJECT ID')).toBeNull();
+        expect(screen.queryByText('Onboard to AWS')).toBeNull();
+    });
+
+    it('should show cloud account details when showCloudAccountDetails is true', () => {
+        const domainMetadata = {
+            modified: '2020-02-12T21:44:37.792Z',
+            ypmId: 'test',
+            org: 'test',
+            auditEnabled: true,
+            account: 'aws-account-123',
+            environment: 'qa',
+        };
+        const domainData = buildDomainDataForState(domainMetadata);
+        const state = {
+            ...getStateWithDomainData(domainData),
+            domains: {
+                featureFlag: {
+                    enabled: true,
+                    showCloudAccountDetails: true,
+                },
+            },
+        };
+
+        renderWithRedux(<DomainDetails />, state);
+
+        expect(screen.getByText('AWS ACCOUNT ID')).toBeInTheDocument();
+        expect(screen.getByText('GCP PROJECT ID')).toBeInTheDocument();
+    });
+
     it('shows N/A when organization is empty and orgDomain is empty', () => {
         const organization = '';
         const orgDomain = '';

ui/src/__tests__/redux/selectors/domains.test.js

@@ -24,6 +24,7 @@ import {
     selectShowInstances,
     selectShowProviders,
     selectShowMicrosegmentation,
+    selectShowCloudAccountDetails,
     selectUserLink,
     selectHeaderDetails,
     selectProductMasterLink,
@@ -192,6 +193,30 @@ describe('test domains selectors', () => {
             expect(selectShowMicrosegmentation(state)).toEqual(false);
         });
     });
+    describe('test selectShowCloudAccountDetails selector', () => {
+        it('should return true by default', () => {
+            expect(selectShowCloudAccountDetails(stateWithDomainsData)).toEqual(
+                true
+            );
+        });
+        it('should return false when explicitly disabled', () => {
+            const state = {
+                domains: {
+                    featureFlag: {
+                        enabled: true,
+                        showCloudAccountDetails: false,
+                    },
+                },
+            };
+            expect(selectShowCloudAccountDetails(state)).toEqual(false);
+        });
+        it('should return true when not set in object', () => {
+            const state = {
+                domains: { featureFlag: { enabled: true } },
+            };
+            expect(selectShowCloudAccountDetails(state)).toEqual(true);
+        });
+    });
     describe('test selectUserLink selector', () => {
         it('should return user link', () => {
             const userLink = {

ui/src/components/header/DomainDetails.js

@@ -37,6 +37,7 @@ import {
 import {
     selectProductMasterLink,
     selectTimeZone,
+    selectShowCloudAccountDetails,
 } from '../../redux/selectors/domains';
 import { makeRolesExpires } from '../../redux/actions/roles';
 import { makePoliciesExpires } from '../../redux/actions/policies';
@@ -548,22 +549,26 @@ class DomainDetails extends React.Component {
                         </ValueDiv>
                         <LabelDiv>AUDIT ENABLED</LabelDiv>
                     </SectionDiv>
-                    <SectionDiv>
-                        <ValueDiv>
-                            {this.props.domainDetails.account
-                                ? this.props.domainDetails.account
-                                : 'N/A'}
-                        </ValueDiv>
-                        <LabelDiv>AWS ACCOUNT ID</LabelDiv>
-                    </SectionDiv>
-                    <SectionDiv>
-                        <ValueDiv>
-                            {this.props.domainDetails.gcpProject
-                                ? this.props.domainDetails.gcpProject
-                                : 'N/A'}
-                        </ValueDiv>
-                        <LabelDiv>GCP PROJECT ID</LabelDiv>
-                    </SectionDiv>
+                    {this.props.showCloudAccountDetails && (
+                        <React.Fragment>
+                            <SectionDiv>
+                                <ValueDiv>
+                                    {this.props.domainDetails.account
+                                        ? this.props.domainDetails.account
+                                        : 'N/A'}
+                                </ValueDiv>
+                                <LabelDiv>AWS ACCOUNT ID</LabelDiv>
+                            </SectionDiv>
+                            <SectionDiv>
+                                <ValueDiv>
+                                    {this.props.domainDetails.gcpProject
+                                        ? this.props.domainDetails.gcpProject
+                                        : 'N/A'}
+                                </ValueDiv>
+                                <LabelDiv>GCP PROJECT ID</LabelDiv>
+                            </SectionDiv>
+                        </React.Fragment>
+                    )}
                     <ValueDiv>More Details</ValueDiv>
                     <IconContainer>
                         <Icon
@@ -579,7 +584,7 @@ class DomainDetails extends React.Component {
                             verticalAlign={'text-bottom'}
                         />
                     </IconContainer>
-                    {showOnBoardToAWS && (
+                    {this.props.showCloudAccountDetails && showOnBoardToAWS ? (
                         <SectionDiv>
                             <Button
                                 secondary
@@ -588,8 +593,9 @@ class DomainDetails extends React.Component {
                                 Onboard to AWS
                             </Button>
                         </SectionDiv>
-                    )}
-                    {this.state.showOnBoardToAWSModal ? (
+                    ) : null}
+                    {this.props.showCloudAccountDetails &&
+                    this.state.showOnBoardToAWSModal ? (
                         <AddModal
                             isOpen={this.state.showOnBoardToAWSModal}
                             cancel={this.toggleOnboardToAWSModal}
@@ -729,6 +735,7 @@ const mapStateToProps = (state, props) => {
         auditEnabled: selectDomainAuditEnabled(state),
         timeZone: selectTimeZone(state),
         userList: selectAllUsers(state),
+        showCloudAccountDetails: selectShowCloudAccountDetails(state),
     };
 };
 

ui/src/config/default-config.js

@@ -154,6 +154,7 @@ const config = {
         statusPath: process.env.UI_SESSION_SECRET_PATH || 'keys/cookie-session',
         featureFlag: true,
         showMicrosegmentation: true,
+        showCloudAccountDetails: true,
         pageFeatureFlag: {
             microsegmentation: {
                 policyValidation: true,

ui/src/redux/selectors/domains.js

@@ -98,6 +98,14 @@ export const selectShowMicrosegmentation = (state) => {
     if (ff && typeof ff === 'object') return ff.showMicrosegmentation !== false;
     return true;
 };
+
+export const selectShowCloudAccountDetails = (state) => {
+    const ff = state.domains.featureFlag;
+    if (ff && typeof ff === 'object')
+        return ff.showCloudAccountDetails !== false;
+    return true;
+};
+
 export const selectAuthorityAttributes = (state) => {
     return state.domains.authorityAttributes
         ? state.domains.authorityAttributes

ui/src/server/handlers/api.js

@@ -2625,6 +2625,8 @@ Fetchr.registerService({
             showInstances: appConfig.servicePageConfig?.showInstances !== false,
             showProviders: appConfig.servicePageConfig?.showProviders !== false,
             showMicrosegmentation: appConfig.showMicrosegmentation !== false,
+            showCloudAccountDetails:
+                appConfig.showCloudAccountDetails !== false,
         });
     },
 });
@@ -3490,6 +3492,8 @@ module.exports.load = function (config, secrets) {
         zmsLoginUrl: config.zmsLoginUrl,
         timeZone: config.timeZone,
         featureFlag: config.featureFlag,
+        showMicrosegmentation: config.showMicrosegmentation,
+        showCloudAccountDetails: config.showCloudAccountDetails,
         pageFeatureFlag: config.pageFeatureFlag,
         serviceHeaderLinks: config.serviceHeaderLinks,
         templates: config.templates,