css update for events; using pivot instead of custome

Azure · Jul 21, 2020 · efe0f4f · efe0f4f
1 parent b871597
commit efe0f4f
Show file tree

Hide file tree

Showing 11 changed files with 164 additions and 127 deletions.
diff --git a/src/app/css/_pivotHeader.scss b/src/app/css/_pivotHeader.scss
diff --git a/src/app/css/_deviceEvents.scss → ...deviceEvents/components/deviceEvents.scss b/src/app/css/_deviceEvents.scss → ...deviceEvents/components/deviceEvents.scss
@@ -3,7 +3,7 @@
  * Licensed under the MIT License
  **********************************************************/
 
-@import 'themes';
+@import '../../../css/themes';
 
 .device-events {
     .device-events-container {
@@ -68,13 +68,21 @@
     }
 
     .scrollable-telemetry {
-        height: calc(100vh - 400px);
+        height: calc(100vh - 390px);
         overflow-y: auto;
         overflow-x: hidden;
     }
 
+    .scrollable-telemetry-custom {
+        height: calc(100vh - 482px) !important;
+    }
+
+    .scrollable-pnp-telemetry-custom {
+        height: calc(100vh - 525px) !important;
+    }
+
     .scrollable-pnp-telemetry {
-        height: calc(100vh - 490px);
+        height: calc(100vh - 433px);
         overflow-y: auto;
         overflow-x: hidden;
         .column-value-text {

diff --git a/src/app/devices/deviceEvents/components/deviceEvents.tsx b/src/app/devices/deviceEvents/components/deviceEvents.tsx
@@ -40,7 +40,7 @@ import { getSchemaValidationErrors } from '../../../shared/utils/jsonSchemaAdapt
 import { ParsedJsonSchema } from '../../../api/models/interfaceJsonParserOutput';
 import { TelemetryContent } from '../../../api/models/modelDefinition';
 import { getLocalizedData } from '../../../api/dataTransforms/modelDefinitionTransform';
-import '../../../css/_deviceEvents.scss';
+import './deviceEvents.scss';
 
 const JSON_SPACES = 2;
 const LOADING_LOCK = 2000;
@@ -314,7 +314,7 @@ export const DeviceEvents: React.FC = () => {
     const renderRawEvents = () => {
         const filteredEvents = componentName ? events.filter(result => filterMessage(result)) : events;
         return (
-            <div className={componentName ? 'scrollable-pnp-telemetry' : 'scrollable-telemetry'}>
+            <>
             {
                 filteredEvents && filteredEvents.map((event: Message, index) => {
                     const modifiedEvents = showSystemProperties ? event : {
@@ -330,14 +330,14 @@ export const DeviceEvents: React.FC = () => {
                     );
                 })
             }
-            </div>
+            </>
         );
     };
 
     //#region pnp specific render
     const renderPnpModeledEvents = () => {
         return (
-            <div className={componentName ? 'scrollable-pnp-telemetry' : 'scrollable-telemetry'}>
+            <>
                 {
                     events && events.length > 0 &&
                     <>
@@ -362,7 +362,7 @@ export const DeviceEvents: React.FC = () => {
                         </section>
                     </>
                 }
-            </div>
+            </>
         );
     };
 
@@ -636,6 +636,9 @@ export const DeviceEvents: React.FC = () => {
         return <MultiLineShimmer/>;
     }
 
+    const className = componentName ?
+        'scrollable-pnp-telemetry' + (!useBuiltInEventHub ? ' scrollable-pnp-telemetry-custom' : '') :
+        'scrollable-telemetry' + (!useBuiltInEventHub ? ' scrollable-telemetry-custom' : '');
     return (
         <div className="device-events" key="device-events">
             <CommandBar
@@ -651,7 +654,9 @@ export const DeviceEvents: React.FC = () => {
             {renderCustomEventHub()}
             <div className="device-events-container">
                 {renderLoader()}
-                {showPnpModeledEvents ? renderPnpModeledEvents() : renderRawEvents()}
+                <div className={className}>
+                    {showPnpModeledEvents ? renderPnpModeledEvents() : renderRawEvents()}
+                </div>
             </div>
             {loadingAnnounced}
         </div>

diff --git a/src/app/devices/module/moduleIdentityTwin/components/moduleIdentityTwin.tsx b/src/app/devices/module/moduleIdentityTwin/components/moduleIdentityTwin.tsx
@@ -6,8 +6,6 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Route, useLocation, useHistory } from 'react-router-dom';
 import { CommandBar } from 'office-ui-fabric-react/lib/components/CommandBar';
-import { SpinnerSize, Spinner } from 'office-ui-fabric-react/lib/components/Spinner';
-import { useThemeContext } from '../../../../shared/contexts/themeContext';
 import { ResourceKeys } from '../../../../../localization/resourceKeys';
 import { getDeviceIdFromQueryString, getModuleIdentityIdFromQueryString } from '../../../../shared/utils/queryStringHelper';
 import { REFRESH, NAVIGATE_BACK } from '../../../../constants/iconNames';
@@ -26,7 +24,6 @@ import '../../../../css/_moduleIdentityDetail.scss';
 
 export const ModuleIdentityTwin: React.FC = () => {
     const { t } = useTranslation();
-    const { editorTheme } = useThemeContext();
     const { search, pathname } = useLocation();
     const history = useHistory();
     const moduleId = getModuleIdentityIdFromQueryString(search);

diff --git a/...p/devices/module/shared/components/__snapshots__/moduleIdentityDetailHeader.spec.tsx.snap b/...p/devices/module/shared/components/__snapshots__/moduleIdentityDetailHeader.spec.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModuleIdentityDetailHeader matches snapshot 1`] = `
+<Stack
+  className="module-pivot"
+  horizontal={true}
+>
+  <StyledPivotBase
+    aria-label="digitalTwin.pivot.ariaLabel"
+    onLinkClick={[Function]}
+    selectedKey="moduleDetail"
+  >
+    <PivotItem
+      headerText="deviceContent.navBar.moduleDetail"
+      itemKey="moduleDetail"
+      key="moduleDetail"
+    />
+    <PivotItem
+      headerText="deviceContent.navBar.moduleTwin"
+      itemKey="moduleTwin"
+      key="moduleTwin"
+    />
+  </StyledPivotBase>
+</Stack>
+`;
diff --git a/src/app/devices/module/shared/components/moduleIdentityDetailHeader.scss b/src/app/devices/module/shared/components/moduleIdentityDetailHeader.scss
@@ -0,0 +1,9 @@
+/***********************************************************
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License
+ **********************************************************/
+ @import '../../../../css/themes';
+
+ .module-pivot {
+    padding-left: 20px;
+ }
diff --git a/src/app/devices/module/shared/components/moduleIdentityDetailHeader.spec.tsx b/src/app/devices/module/shared/components/moduleIdentityDetailHeader.spec.tsx
@@ -0,0 +1,22 @@
+/***********************************************************
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License
+ **********************************************************/
+import 'jest';
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { ModuleIdentityDetailHeader } from './moduleIdentityDetailHeader';
+
+const search = '?id=device1';
+const pathname = `/#/devices/deviceDetail/moduleIdentity/moduleDetail/${search}`;
+jest.mock('react-router-dom', () => ({
+    useHistory: () => ({ push: jest.fn() }),
+    useLocation: () => ({ search, pathname }),
+    useRouteMatch: () => ({ url: pathname })
+}));
+
+describe('ModuleIdentityDetailHeader', () => {
+    it('matches snapshot', () => {
+        expect(shallow(<ModuleIdentityDetailHeader/>)).toMatchSnapshot();
+    });
+});
diff --git a/src/app/devices/module/shared/components/moduleIdentityDetailHeader.tsx b/src/app/devices/module/shared/components/moduleIdentityDetailHeader.tsx
@@ -4,39 +4,47 @@
  **********************************************************/
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 import { Stack } from 'office-ui-fabric-react/lib/components/Stack';
-import { ActionButton } from 'office-ui-fabric-react/lib/components/Button';
+import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/components/Pivot';
 import { ROUTE_PARTS, ROUTE_PARAMS } from '../../../../constants/routes';
 import { ResourceKeys } from '../../../../../localization/resourceKeys';
 import { getDeviceIdFromQueryString, getModuleIdentityIdFromQueryString } from '../../../../shared/utils/queryStringHelper';
-import '../../../../css/_pivotHeader.scss';
+import './moduleIdentityDetailHeader.scss';
 
 export const ModuleIdentityDetailHeader: React.FC = () => {
     const { t } = useTranslation();
     const { search, pathname } = useLocation();
+    const history = useHistory();
 
     const NAV_LINK_ITEMS = [ROUTE_PARTS.MODULE_DETAIL, ROUTE_PARTS.MODULE_TWIN];
     const deviceId = getDeviceIdFromQueryString(search);
     const moduleId = getModuleIdentityIdFromQueryString(search);
 
+    const [selectedKey, setSelectedKey] = React.useState((NAV_LINK_ITEMS.find(item => pathname.indexOf(item) > 0) || ROUTE_PARTS.MODULE_DETAIL).toString());
+    const path = pathname.replace(/\/moduleIdentity\/.*/, `/${ROUTE_PARTS.MODULE_IDENTITY}`);
     const pivotItems = NAV_LINK_ITEMS.map(nav =>  {
         const text = t((ResourceKeys.deviceContent.navBar as any)[nav]); // tslint:disable-line:no-any
-        const path = pathname.replace(/\/moduleIdentity\/.*/, `/${ROUTE_PARTS.MODULE_IDENTITY}`);
-        const url = `#${path}/${nav}/?${ROUTE_PARAMS.DEVICE_ID}=${encodeURIComponent(deviceId)}&${ROUTE_PARAMS.MODULE_ID}=${encodeURIComponent(moduleId)}`;
-        const isCurrentPivot = pathname.indexOf(nav) > 0;
-        return (
-            <Stack.Item className={`pivot-item ${isCurrentPivot ? 'pivot-item-active' : ''}`} key={nav}>
-                <ActionButton href={url} >
-                    {text}
-                </ActionButton>
-            </Stack.Item>
-        );
+        return (<PivotItem key={nav} headerText={text} itemKey={nav} />);
     });
+    const handleLinkClick = (item: PivotItem) => {
+        setSelectedKey(item.props.itemKey);
+        const url = `${path}/${item.props.itemKey}/?${ROUTE_PARAMS.DEVICE_ID}=${encodeURIComponent(deviceId)}&${ROUTE_PARAMS.MODULE_ID}=${encodeURIComponent(moduleId)}`;
+        history.push(url);
+    };
+    const pivot = (
+        <Pivot
+            aria-label={t(ResourceKeys.digitalTwin.pivot.ariaLabel)}
+            selectedKey={selectedKey}
+            onLinkClick={handleLinkClick}
+        >
+            {pivotItems}
+        </Pivot>
+    );
 
     return (
-        <Stack horizontal={true} className="pivot">
-            {pivotItems}
+        <Stack horizontal={true} className="module-pivot">
+            {pivot}
         </Stack>
     );
 };
diff --git a/src/app/devices/pnp/components/__snapshots__/digitalTwinDetail.spec.tsx.snap b/src/app/devices/pnp/components/__snapshots__/digitalTwinDetail.spec.tsx.snap
@@ -3,59 +3,40 @@
 exports[`DigitalTwinDetail matches snapshot 1`] = `
 <Fragment>
   <Stack
-    className="pivot"
+    className="digitaltwin-pivot"
     horizontal={true}
   >
-    <StackItem
-      className="pivot-item "
-      key="interfaces"
+    <StyledPivotBase
+      aria-label="digitalTwin.pivot.ariaLabel"
+      onLinkClick={[Function]}
+      selectedKey="interfaces"
     >
-      <CustomizedActionButton
-        href="#/#/devices/deviceDetail/ioTPlugAndPlay/?id=device1&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1:1/interfaces/?deviceId=null&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1:1"
-      >
-        deviceContent.navBar.interfaces
-      </CustomizedActionButton>
-    </StackItem>
-    <StackItem
-      className="pivot-item "
-      key="properties"
-    >
-      <CustomizedActionButton
-        href="#/#/devices/deviceDetail/ioTPlugAndPlay/?id=device1&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1:1/properties/?deviceId=null&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1:1"
-      >
-        deviceContent.navBar.properties
-      </CustomizedActionButton>
-    </StackItem>
-    <StackItem
-      className="pivot-item "
-      key="settings"
-    >
-      <CustomizedActionButton
-        href="#/#/devices/deviceDetail/ioTPlugAndPlay/?id=device1&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1:1/settings/?deviceId=null&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1:1"
-      >
-        deviceContent.navBar.settings
-      </CustomizedActionButton>
-    </StackItem>
-    <StackItem
-      className="pivot-item "
-      key="commands"
-    >
-      <CustomizedActionButton
-        href="#/#/devices/deviceDetail/ioTPlugAndPlay/?id=device1&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1:1/commands/?deviceId=null&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1:1"
-      >
-        deviceContent.navBar.commands
-      </CustomizedActionButton>
-    </StackItem>
-    <StackItem
-      className="pivot-item "
-      key="events"
-    >
-      <CustomizedActionButton
-        href="#/#/devices/deviceDetail/ioTPlugAndPlay/?id=device1&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1:1/events/?deviceId=null&componentName=foo&interfaceId=urn:iotInterfaces:com:interface1:1"
-      >
-        deviceContent.navBar.events
-      </CustomizedActionButton>
-    </StackItem>
+      <PivotItem
+        headerText="deviceContent.navBar.interfaces"
+        itemKey="interfaces"
+        key="interfaces"
+      />
+      <PivotItem
+        headerText="deviceContent.navBar.properties"
+        itemKey="properties"
+        key="properties"
+      />
+      <PivotItem
+        headerText="deviceContent.navBar.settings"
+        itemKey="settings"
+        key="settings"
+      />
+      <PivotItem
+        headerText="deviceContent.navBar.commands"
+        itemKey="commands"
+        key="commands"
+      />
+      <PivotItem
+        headerText="deviceContent.navBar.events"
+        itemKey="events"
+        key="events"
+      />
+    </StyledPivotBase>
   </Stack>
   <Component
     component={[Function]}

diff --git a/src/app/devices/pnp/components/digitalTwinDetail.scss b/src/app/devices/pnp/components/digitalTwinDetail.scss
@@ -0,0 +1,9 @@
+/***********************************************************
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License
+ **********************************************************/
+ @import '../../../css/themes';
+
+ .digitaltwin-pivot {
+    padding-left: 22px;
+ }