feat: header design update

awslabs · Nov 21, 2023 · 700a913 · 700a913
1 parent 68b8618
commit 700a913
Show file tree

Hide file tree

Showing 20 changed files with 193 additions and 109 deletions.
diff --git a/packages/dashboard/e2e/tests/dashboard/dashboard.spec.ts b/packages/dashboard/e2e/tests/dashboard/dashboard.spec.ts
@@ -4,26 +4,18 @@ import { GRID_SIZE, gridUtil } from '../utils/grid';
 import { getBoundingBox } from '../utils/locator';
 
 const TEST_PAGE = '/iframe.html?id=dashboard-mocked-data--empty';
-const TEST_IFRAME = '#root';
-const COMPONENT_SELECTOR = '.dashboard';
 
 test('dashboard', async ({ page }) => {
   await page.goto(TEST_PAGE);
-  const frame = page.locator(TEST_IFRAME); // Need to go into frame otherwise the `locator` won't locate the selection.
 
-  // KPI will always show value shows value
-  await expect(frame.locator(COMPONENT_SELECTOR)).toContainText('Time machine');
+  await expect(page.getByTestId('time-selection')).toBeVisible();
 });
 
 test('dashboard drag and drop text widget', async ({ page }) => {
   await page.goto(TEST_PAGE);
-  const frame = page.locator(TEST_IFRAME); // Need to go into frame otherwise the `locator` won't locate the selection.
 
   const dragGenerator = dragAndDrop(page);
 
-  // KPI will always show value shows value
-  await expect(frame.locator(COMPONENT_SELECTOR)).toContainText('Time machine');
-
   const textWidget = page.getByRole('button', { name: 'add Text widget' });
   const gridArea = page.locator('#container');
 
@@ -36,13 +28,9 @@ test('dashboard drag and drop text widget', async ({ page }) => {
 
 test('dashboard resize, move, and select gestures', async ({ page }) => {
   await page.goto(TEST_PAGE);
-  const frame = page.locator(TEST_IFRAME); // Need to go into frame otherwise the `locator` won't locate the selection.
 
   const grid = gridUtil(page);
 
-  // KPI will always show value shows value
-  await expect(frame.locator(COMPONENT_SELECTOR)).toContainText('Time machine');
-
   const location1 = await grid.cellLocation(0, 0);
 
   // drag widget into 0, 0 position
@@ -89,13 +77,9 @@ test('dashboard resize, move, and select gestures', async ({ page }) => {
 
 test('dashboard add and remove multiple widgets', async ({ page }) => {
   await page.goto(TEST_PAGE);
-  const frame = page.locator(TEST_IFRAME); // Need to go into frame otherwise the `locator` won't locate the selection.
 
   const grid = gridUtil(page);
 
-  // KPI will always show value shows value
-  await expect(frame.locator(COMPONENT_SELECTOR)).toContainText('Time machine');
-
   const location1 = await grid.cellLocation(0, 0);
   const location2 = await grid.cellLocation(5, 0);
   const location3 = await grid.cellLocation(4, 3);
@@ -124,14 +108,14 @@ test('dashboard add and remove multiple widgets', async ({ page }) => {
 
 test('pagination buttons', async ({ page }) => {
   await page.goto(TEST_PAGE);
-  const frame = page.locator(TEST_IFRAME); // Need to go into frame otherwise the `locator` won't locate the selection.
 
-  await expect(frame.locator(COMPONENT_SELECTOR)).toContainText('Time machine');
+  await expect(page.getByTestId('time-selection')).toBeVisible();
+
   const forwardBtn = await page.getByRole('button', {
     name: /paginate-foward/i,
   });
+  await expect(page.getByTestId('time-selection')).toBeVisible();
 
-  await expect(frame.locator(COMPONENT_SELECTOR)).toContainText('Time machine');
   const backBtn = await page.getByRole('button', {
     name: /paginate-backward/i,
   });

diff --git a/packages/dashboard/src/components/actions/index.tsx b/packages/dashboard/src/components/actions/index.tsx
@@ -1,13 +1,15 @@
 import React, { memo, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { isEqual, pick } from 'lodash';
 
 import { useViewport } from '@iot-app-kit/react-components';
 import { Button, SpaceBetween, Box } from '@cloudscape-design/components';
+
 import { onToggleReadOnly } from '~/store/actions';
 import type { DashboardState } from '~/store/state';
-import { isEqual, pick } from 'lodash';
 import { DashboardSave } from '~/types';
 import DashboardSettings from './settings';
+import CustomOrangeButton from '../customOrangeButton';
 
 const DEFAULT_VIEWPORT = { duration: '10m' };
 
@@ -56,11 +58,10 @@ const Actions: React.FC<ActionsProps> = ({
   };
 
   return (
-    <>
-      <Box variant='awsui-key-label'>Actions</Box>
+    <Box padding={{ top: 'xxs' }} data-testid='dashboard-actions'>
       <SpaceBetween size='s' direction='horizontal'>
         {onSave && <Button onClick={handleOnSave}>Save</Button>}
-        {editable && <Button onClick={handleOnReadOnly}>{readOnly ? 'Edit' : 'Preview'}</Button>}
+        {editable && <CustomOrangeButton title={readOnly ? 'Edit' : 'Preview'} handleClick={handleOnReadOnly} />}
         {editable && !readOnly && (
           <Button
             onClick={() => setDashboardSettingsVisible(true)}
@@ -71,7 +72,7 @@ const Actions: React.FC<ActionsProps> = ({
         )}
         <DashboardSettings isVisible={dashboardSettingsVisible} onClose={handleOnClose} />
       </SpaceBetween>
-    </>
+    </Box>
   );
 };
 

diff --git a/packages/dashboard/src/components/dashboard/index.test.tsx b/packages/dashboard/src/components/dashboard/index.test.tsx
@@ -7,7 +7,7 @@ import { type IoTTwinMakerClient } from '@aws-sdk/client-iottwinmaker';
 import { type IoTSiteWiseClient } from '@aws-sdk/client-iotsitewise';
 
 it('renders', function () {
-  const { queryByText } = render(
+  const { queryByText, queryByTestId } = render(
     <Dashboard
       onSave={() => Promise.resolve()}
       dashboardConfiguration={{
@@ -16,6 +16,7 @@ it('renders', function () {
           numRows: 100,
         },
         widgets: [],
+        name: '',
         viewport: { duration: '5m' },
       }}
       clientConfiguration={{
@@ -27,12 +28,12 @@ it('renders', function () {
   );
 
   expect(queryByText(/component library/i)).not.toBeInTheDocument();
-  expect(queryByText(/actions/i)).toBeInTheDocument();
-  expect(queryByText(/time machine/i)).toBeInTheDocument();
+  expect(queryByTestId(/dashboard-actions/i)).toBeInTheDocument();
+  expect(queryByTestId(/time-selection/i)).toBeInTheDocument();
 });
 
 it('renders in readonly initially', function () {
-  const { queryByText } = render(
+  const { queryByText, queryByTestId } = render(
     <Dashboard
       onSave={() => Promise.resolve()}
       dashboardConfiguration={{
@@ -41,6 +42,7 @@ it('renders in readonly initially', function () {
           numRows: 100,
         },
         widgets: [],
+        name: '',
         viewport: { duration: '5m' },
       }}
       clientConfiguration={{
@@ -53,6 +55,54 @@ it('renders in readonly initially', function () {
   );
 
   expect(queryByText(/component library/i)).not.toBeInTheDocument();
-  expect(queryByText(/actions/i)).toBeInTheDocument();
-  expect(queryByText(/time machine/i)).toBeInTheDocument();
+  expect(queryByTestId(/dashboard-actions/i)).toBeInTheDocument();
+  expect(queryByTestId(/time-selection/i)).toBeInTheDocument();
+});
+
+it('renders dashboard name', function () {
+  const { queryByText } = render(
+    <Dashboard
+      onSave={() => Promise.resolve()}
+      dashboardConfiguration={{
+        displaySettings: {
+          numColumns: 100,
+          numRows: 100,
+        },
+        widgets: [],
+        name: 'Test dashboard',
+        viewport: { duration: '5m' },
+      }}
+      clientConfiguration={{
+        iotEventsClient: createMockIoTEventsSDK(),
+        iotSiteWiseClient: createMockSiteWiseSDK() as IoTSiteWiseClient,
+        iotTwinMakerClient: { send: jest.fn() } as unknown as IoTTwinMakerClient,
+      }}
+    />
+  );
+
+  expect(queryByText(/Test dashboard/i)).toBeInTheDocument();
+});
+
+it('renders without dashboard name', function () {
+  const { queryByText } = render(
+    <Dashboard
+      onSave={() => Promise.resolve()}
+      dashboardConfiguration={{
+        displaySettings: {
+          numColumns: 100,
+          numRows: 100,
+        },
+        widgets: [],
+        name: '',
+        viewport: { duration: '5m' },
+      }}
+      clientConfiguration={{
+        iotEventsClient: createMockIoTEventsSDK(),
+        iotSiteWiseClient: createMockSiteWiseSDK() as IoTSiteWiseClient,
+        iotTwinMakerClient: { send: jest.fn() } as unknown as IoTTwinMakerClient,
+      }}
+    />
+  );
+
+  expect(queryByText(/Test dashboard/i)).not.toBeInTheDocument();
 });
diff --git a/packages/dashboard/src/components/dashboard/view.test.tsx b/packages/dashboard/src/components/dashboard/view.test.tsx
@@ -7,14 +7,15 @@ import DashboardView from './view';
 import React from 'react';
 
 it('renders', function () {
-  const { queryByText } = render(
+  const { queryByText, queryByTestId } = render(
     <DashboardView
       dashboardConfiguration={{
         displaySettings: {
           numColumns: 100,
           numRows: 100,
         },
         widgets: [],
+        name: '',
         viewport: { duration: '5m' },
       }}
       clientConfiguration={{
@@ -26,6 +27,6 @@ it('renders', function () {
   );
 
   expect(queryByText(/component library/i)).not.toBeInTheDocument();
-  expect(queryByText(/actions/i)).not.toBeInTheDocument();
-  expect(queryByText(/time machine/i)).toBeInTheDocument();
+  expect(queryByTestId(/dashboard-actions/i)).not.toBeInTheDocument();
+  expect(queryByTestId(/time-selection/i)).toBeInTheDocument();
 });
diff --git a/packages/dashboard/src/components/internalDashboard/index.css b/packages/dashboard/src/components/internalDashboard/index.css
@@ -15,12 +15,6 @@
   box-sizing: initial;
 }
 
-.dashboard .divider {
-  width: 2px;
-  height: 70px;
-  background: var(--colors-light-grey);
-}
-
 .dashboard .display-area {
   height: 100%;
   width: 100%;