AthenZ · abvaidya · Jun 21, 2023 · Mar 28, 2023 · Jun 2, 2023
diff --git a/ui/src/__tests__/components/group/GroupRow.test.js b/ui/src/__tests__/components/group/GroupRow.test.js
@@ -14,20 +14,21 @@
  * limitations under the License.
  */
 import React from 'react';
-import { render } from '@testing-library/react';
 import GroupRow from '../../../components/group/GroupRow';
 import { colors } from '../../../components/denali/styles';
 import { renderWithRedux } from '../../../tests_utils/ComponentsTestUtils';
 
 describe('GroupRow', () => {
     it('should render', () => {
-        let details = {
+        const details = {
             name: 'athens:group.testui',
             modified: '2017-08-03T18:44:41.867Z',
         };
-        let domain = 'domain';
-        let color = colors.row;
-        let idx = '50';
+        const domain = 'domain';
+        const color = colors.row;
+        const idx = '50';
+        const timeZone = 'UTC';
+
         const { getByTestId } = renderWithRedux(
             <table>
                 <tbody>
@@ -36,6 +37,7 @@ describe('GroupRow', () => {
                         domain={domain}
                         color={color}
                         idx={idx}
+                        timeZone={timeZone}
                     />
                 </tbody>
             </table>

diff --git a/ui/src/__tests__/components/group/GroupTable.test.js b/ui/src/__tests__/components/group/GroupTable.test.js
@@ -14,30 +14,31 @@
  * limitations under the License.
  */
 import React from 'react';
-import { render } from '@testing-library/react';
 import GroupTable from '../../../components/group/GroupTable';
-import API from '../../../api';
 import { renderWithRedux } from '../../../tests_utils/ComponentsTestUtils';
 
 describe('GroupTable', () => {
     it('should render', () => {
-        let domains = [];
-        let groups = [];
+        const domains = [];
         domains.push('dom1');
         domains.push('dom2');
         domains.push('dom3');
         domains.push('dom4');
-        let group1 = {
+
+        const groups = [];
+        const group1 = {
             name: 'a',
         };
-
-        let group2 = {
+        const group2 = {
             name: 'b',
         };
         groups.push(group1);
         groups.push(group2);
+
+        const timeZone = 'UTC';
+
         const { getByTestId } = renderWithRedux(
-            <GroupTable groups={groups} domain={domains} />
+            <GroupTable groups={groups} domain={domains} timeZone={timeZone} />
         );
         const grouptable = getByTestId('grouptable');
 

diff --git a/ui/src/__tests__/components/header/RoleDetails.test.js b/ui/src/__tests__/components/header/RoleDetails.test.js
@@ -14,28 +14,28 @@
  * limitations under the License.
  */
 import React from 'react';
-import { render } from '@testing-library/react';
+import { renderWithRedux } from '../../../tests_utils/ComponentsTestUtils';;
 import CollectionDetails from '../../../components/header/CollectionDetails';
 
 describe('RoleDetails', () => {
-    it('should render', () => {
+    it('should renderWithRedux', () => {
         const roleMetadata = {
             modified: '2020-02-12T21:44:37.792Z',
         };
 
-        const { getByTestId } = render(
+        const { getByTestId } = renderWithRedux(
             <CollectionDetails collectionDetails={roleMetadata} />
         );
         const domainDetails = getByTestId('collection-details');
         expect(domainDetails).toMatchSnapshot();
     });
-    it('should render with mock data', () => {
+    it('should renderWithRedux with mock data', () => {
         const roleMetadata = {
             modified: '2020-12-01T21:44:37.792Z',
             lastReviewedDate: '2020-12-01T21:44:37.792Z',
         };
 
-        const { getByTestId } = render(
+        const { getByTestId } = renderWithRedux(
             <CollectionDetails collectionDetails={roleMetadata} />
         );
         const roleDetails = getByTestId('collection-details');

diff --git a/ui/src/__tests__/components/header/__snapshots__/RoleDetails.test.js.snap b/ui/src/__tests__/components/header/__snapshots__/RoleDetails.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RoleDetails should render 1`] = `
+exports[`RoleDetails should renderWithRedux 1`] = `
 .emotion-0 {
   margin: 20px 0;
 }
@@ -69,7 +69,7 @@ exports[`RoleDetails should render 1`] = `
 </div>
 `;
 
-exports[`RoleDetails should render with mock data 1`] = `
+exports[`RoleDetails should renderWithRedux with mock data 1`] = `
 .emotion-0 {
   margin: 20px 0;
 }

diff --git a/ui/src/__tests__/components/pending-approval/PendingApprovalTableRow.test.js b/ui/src/__tests__/components/pending-approval/PendingApprovalTableRow.test.js
@@ -26,6 +26,7 @@ describe('PendingApprovalTable', () => {
         const roleName = 'c';
         const checked = false;
         const userComment = 'd';
+        const timeZone = 'UTC';
 
         const { getByTestId } = render(
             <table>
@@ -40,6 +41,7 @@ describe('PendingApprovalTable', () => {
                         pendingDecision={() => {}}
                         auditRefMissing={false}
                         pendingState={PENDING_STATE_ENUM.ADD}
+                        timeZone={timeZone}
                     />
                 </tbody>
             </table>

diff --git a/ui/src/__tests__/components/policy/PolicyRow.test.js b/ui/src/__tests__/components/policy/PolicyRow.test.js
@@ -23,10 +23,11 @@ describe('PolicyRow', () => {
     it('should render', () => {
         const color = colors.row;
         const name = 'sections';
+        const timeZone = 'UTC';
         const { getByTestId } = renderWithRedux(
             <table>
                 <tbody>
-                    <PolicyRow name={name} color={color} isActive={true} />
+                    <PolicyRow name={name} color={color} isActive={true} timeZone={timeZone} />
                 </tbody>
             </table>
         );

diff --git a/ui/src/__tests__/components/role/RoleMember.test.js b/ui/src/__tests__/components/role/RoleMember.test.js
@@ -16,12 +16,13 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Member from '../../../components/member/Member';
+import { renderWithRedux } from '../../../tests_utils/ComponentsTestUtils';
 
 describe('Member', () => {
     it('should render', () => {
         let member = { memberName: 'user.test2' };
 
-        const { getByTestId } = render(<Member item={member} idx={0} />);
+        const { getByTestId } = renderWithRedux(<Member item={member} idx={0} />);
         const roleMember = getByTestId('tag');
         expect(roleMember).toMatchSnapshot();
     });

diff --git a/ui/src/__tests__/components/role/RoleRow.test.js b/ui/src/__tests__/components/role/RoleRow.test.js
@@ -14,20 +14,20 @@
  * limitations under the License.
  */
 import React from 'react';
-import { render } from '@testing-library/react';
 import RoleRow from '../../../components/role/RoleRow';
 import { colors } from '../../../components/denali/styles';
 import { renderWithRedux } from '../../../tests_utils/ComponentsTestUtils';
 
 describe('RoleRow', () => {
     it('should render', () => {
-        let details = {
+        const details = {
             name: 'athens:role.ztssia_cert_rotate',
             modified: '2017-08-03T18:44:41.867Z',
         };
-        let domain = 'domain';
-        let color = colors.row;
-        let idx = '50';
+        const domain = 'domain';
+        const color = colors.row;
+        const idx = '50';
+        const timeZone = 'UTC';
         const { getByTestId } = renderWithRedux(
             <table>
                 <tbody>
@@ -36,6 +36,7 @@ describe('RoleRow', () => {
                         domain={domain}
                         color={color}
                         idx={idx}
+                        timeZone={timeZone}
                     />
                 </tbody>
             </table>

diff --git a/ui/src/__tests__/components/role/RoleSectionRow.test.js b/ui/src/__tests__/components/role/RoleSectionRow.test.js
@@ -20,19 +20,21 @@ import { renderWithRedux } from '../../../tests_utils/ComponentsTestUtils';
 
 describe('RoleRow', () => {
     it('should render', () => {
-        let details = {
+        const details = {
             name: 'athens:role.ztssia_cert_rotate',
             modified: '2017-08-03T18:44:41.867Z',
         };
-        let domain = 'domain';
-        let color = colors.row;
+        const domain = 'domain';
+        const color = colors.row;
+        const timeZone = 'UTC';
         const { getByTestId } = renderWithRedux(
             <table>
                 <tbody>
                     <RoleSectionRow
                         details={details}
                         domain={domain}
                         color={color}
+                        timeZone={timeZone}
                     />
                 </tbody>
             </table>

diff --git a/ui/src/__tests__/components/role/RoleTable.test.js b/ui/src/__tests__/components/role/RoleTable.test.js
@@ -21,23 +21,26 @@ import { renderWithRedux } from '../../../tests_utils/ComponentsTestUtils';
 
 describe('RoleTable', () => {
     it('should render', () => {
-        let domains = [];
-        let roles = [];
+        const domains = [];
         domains.push('dom1');
         domains.push('dom2');
         domains.push('dom3');
         domains.push('dom4');
-        let role1 = {
+
+        const roles = [];
+        const role1 = {
             name: 'a',
         };
-
-        let role2 = {
+        const role2 = {
             name: 'b',
         };
         roles.push(role1);
         roles.push(role2);
+
+        const timeZone = 'UTC';
+
         const { getByTestId } = renderWithRedux(
-            <RoleTable roles={roles} domain={domains} />
+            <RoleTable roles={roles} domain={domains} timeZone={timeZone} />
         );
         const roletable = getByTestId('roletable');
 

diff --git a/ui/src/__tests__/components/service/InstanceTable.test.js b/ui/src/__tests__/components/service/InstanceTable.test.js
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 import React from 'react';
-import { render } from '@testing-library/react';
 import InstanceTable from '../../../components/service/InstanceTable';
 import API from '../../../api';
 import { renderWithRedux } from '../../../tests_utils/ComponentsTestUtils';
 
 describe('InstanceTable', () => {
     it('should render', () => {
-        let domain = 'test.domain';
-        let _csrf = '_csrfToken';
-        let api = API();
-        let instances = [
+        const domain = 'test.domain';
+        const _csrf = '_csrfToken';
+        const api = API();
+        const timeZone = 'UTC';
+        const instances = [
             {
                 domainName: null,
                 serviceName: null,
@@ -41,10 +41,11 @@ describe('InstanceTable', () => {
                 domain={domain}
                 _csrf={_csrf}
                 category={'dynamic'}
+                timeZone={timeZone}
             />
         );
         const instanceTable = getByTestId('instancetable');
 
         expect(instanceTable).toMatchSnapshot();
-    });
+   });
 });
diff --git a/ui/src/__tests__/components/service/ServiceRow.test.js b/ui/src/__tests__/components/service/ServiceRow.test.js
@@ -39,6 +39,7 @@ describe('ServiceRow', () => {
         const modified = '2017-12-19T20:24:41.195Z';
         const color = '';
         const newService = false;
+        const timeZone = 'UTC';
         const { getByTestId } = renderWithRedux(
             <table>
                 <tbody>
@@ -48,6 +49,7 @@ describe('ServiceRow', () => {
                         color={color}
                         modified={modified}
                         newService={newService}
+                        timeZone={timeZone}
                     />
                 </tbody>
             </table>
@@ -81,6 +83,7 @@ describe('ServiceRow', () => {
 
         const color = '';
         const newService = false;
+        const timeZone = 'UTC';
         const { getByText, getByTitle } = renderWithRedux(
             <table>
                 <tbody>
@@ -90,6 +93,7 @@ describe('ServiceRow', () => {
                         color={color}
                         modified={modified}
                         newService={newService}
+                        timeZone={timeZone}
                     />
                 </tbody>
             </table>,
@@ -147,6 +151,7 @@ describe('ServiceRow', () => {
         MockApi.setMockApi(api);
         const color = '';
         const newService = false;
+        const timeZone = 'UTC';
         const { getByText, getByTitle } = renderWithRedux(
             <table>
                 <tbody>
@@ -157,6 +162,7 @@ describe('ServiceRow', () => {
                         color={color}
                         modified={modified}
                         newService={newService}
+                        timeZone={timeZone}
                     />
                 </tbody>
             </table>,

diff --git a/ui/src/__tests__/pages/workflow/domain.test.js b/ui/src/__tests__/pages/workflow/domain.test.js
@@ -106,6 +106,9 @@ describe('PendingApprovalPage', () => {
                 value: 'home.domain1',
             },
         ];
+
+        const timeZone = 'UTC';
+
         const mockApi = {
             ...mockAllDomainDataApiCalls(domainDetails, headerDetails),
             listUserDomains: jest.fn().mockReturnValue(
@@ -122,6 +125,9 @@ describe('PendingApprovalPage', () => {
             getPendingDomainMembersList: jest
                 .fn()
                 .mockReturnValue(Promise.resolve(pendingData)),
+            getTimeZone: jest
+                .fn()
+                .mockReturnValue(Promise.resolve(timeZone)),
         };
         // const pendingUserData = buildUserForState(pendingData);
         // const domainData = buildDomainDataForState(pendingData, domain);

diff --git a/ui/src/api.js b/ui/src/api.js
@@ -1853,6 +1853,21 @@ const Api = (req) => {
             });
         },
 
+        getTimeZone() {
+            return new Promise((resolve, reject) => {
+                fetchr
+                    .read('time-zone')
+                    .params()
+                    .end((err, data) => {
+                        if (err) {
+                            reject(err);
+                        } else {
+                            resolve(data);
+                        }
+                    });
+            });
+        },
+
         getFeatureFlag() {
             return new Promise((resolve, reject) => {
                 fetchr