Device manager - device security recommendation card (PSG-637) (#9158)

* add security card and style * deprecate warning and verified svgs that use hard coded color * style icons, test * i18n * stylelint * redo lost lint fixes * fix svg ref * actually fix svg * fix stupid copy pasting * use rgba for e2e light variations * add security card and style * deprecate warning and verified svgs that use hard coded color * style icons, test * i18n * stylelint * fix svg ref * actually fix svg * fix stupid copy pasting * use rgba for e2e light variations * use device security card in current session section * lint * update snapshot test after dev merge
2022-08-11 12:39:14 +02:00 · 2022-08-11 12:39:14 +02:00 · 7b52145461
commit 7b52145461
parent 0be622e7f0
18 changed files with 401 additions and 11 deletions
--- a/test/components/views/settings/devices/DeviceSecurityCard-test.tsx
+++ b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx
@ -0,0 +1,45 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import DeviceSecurityCard, {
+    DeviceSecurityVariation,
+} from '../../../../../src/components/views/settings/devices/DeviceSecurityCard';
+
+describe('<DeviceSecurityCard />', () => {
+    const defaultProps = {
+        variation: DeviceSecurityVariation.Verified,
+        heading: 'Verified session',
+        description: 'nice',
+    };
+    const getComponent = (props = {}): React.ReactElement =>
+        <DeviceSecurityCard {...defaultProps} {...props} />;
+
+    it('renders basic card', () => {
+        const { container } = render(getComponent());
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders with children', () => {
+        const { container } = render(getComponent({
+            children: <div>hey</div>,
+            variation: DeviceSecurityVariation.Unverified,
+        }));
+        expect(container).toMatchSnapshot();
+    });
+});
--- a/test/components/views/settings/devices/snapshots/DeviceSecurityCard-test.tsx.snap
+++ b/test/components/views/settings/devices/snapshots/DeviceSecurityCard-test.tsx.snap
@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DeviceSecurityCard /> renders basic card 1`] = `
+<div>
+  <div
+    class="mx_DeviceSecurityCard"
+  >
+    <div
+      class="mx_DeviceSecurityCard_icon Verified"
+    >
+      <div
+        height="16"
+        width="16"
+      />
+    </div>
+    <div
+      class="mx_DeviceSecurityCard_content"
+    >
+      <p
+        class="mx_DeviceSecurityCard_heading"
+      >
+        Verified session
+      </p>
+      <p
+        class="mx_DeviceSecurityCard_description"
+      >
+        nice
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DeviceSecurityCard /> renders with children 1`] = `
+<div>
+  <div
+    class="mx_DeviceSecurityCard"
+  >
+    <div
+      class="mx_DeviceSecurityCard_icon Unverified"
+    >
+      <div
+        height="16"
+        width="16"
+      />
+    </div>
+    <div
+      class="mx_DeviceSecurityCard_content"
+    >
+      <p
+        class="mx_DeviceSecurityCard_heading"
+      >
+        Verified session
+      </p>
+      <p
+        class="mx_DeviceSecurityCard_description"
+      >
+        nice
+      </p>
+      <div>
+        hey
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@ -143,7 +143,7 @@ describe('<SessionManagerTab />', () => {
        expect(getByTestId(`device-tile-${alicesDevice.device_id}`)).toMatchSnapshot();
    });

-    it('renders current session section', async () => {
+    it('renders current session section with an unverified session', async () => {
        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
        const { getByTestId } = render(getComponent());

@ -154,6 +154,21 @@ describe('<SessionManagerTab />', () => {
        expect(getByTestId('current-session-section')).toMatchSnapshot();
    });

+    it('renders current session section with a verified session', async () => {
+        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
+        mockClient.getStoredDevice.mockImplementation(() => new DeviceInfo(alicesDevice.device_id));
+        mockCrossSigningInfo.checkDeviceTrust
+            .mockReturnValue(new DeviceTrustLevel(true, true, false, false));
+
+        const { getByTestId } = render(getComponent());
+
+        await act(async () => {
+            await flushPromisesWithFakeTimers();
+        });
+
+        expect(getByTestId('current-session-section')).toMatchSnapshot();
+    });
+
    it('does not render other sessions section when user has only one device', async () => {
        mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice] });
        const { queryByTestId } = render(getComponent());
@ -165,7 +180,7 @@ describe('<SessionManagerTab />', () => {
        expect(queryByTestId('other-sessions-section')).toBeFalsy();
    });

-    it('renders other sessions section', async () => {
+    it('renders other sessions section when user has more than one device', async () => {
        mockClient.getDevices.mockResolvedValue({
            devices: [alicesDevice, alicesOlderMobileDevice, alicesMobileDevice],
        });
--- a/test/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
@ -1,6 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<SessionManagerTab /> renders current session section 1`] = `
+exports[`<SessionManagerTab /> renders current session section with a verified session 1`] = `
+<div
+  class="mx_SettingsSubsection"
+  data-testid="current-session-section"
+>
+  <h3
+    class="mx_Heading_h3 mx_SettingsSubsection_heading"
+  >
+    Current session
+  </h3>
+  <div
+    class="mx_SettingsSubsection_content"
+  >
+    <div
+      class="mx_DeviceTile"
+      data-testid="device-tile-alices_device"
+    >
+      <div
+        class="mx_DeviceTile_info"
+      >
+        <h4
+          class="mx_Heading_h4"
+        >
+          alices_device
+        </h4>
+        <div
+          class="mx_DeviceTile_metadata"
+        >
+          <span
+            data-testid="device-metadata-isVerified"
+          >
+            Verified
+          </span>
+           · 
+           · 
+        </div>
+      </div>
+      <div
+        class="mx_DeviceTile_actions"
+      />
+    </div>
+    <br />
+    <div
+      class="mx_DeviceSecurityCard"
+    >
+      <div
+        class="mx_DeviceSecurityCard_icon Verified"
+      >
+        <div
+          height="16"
+          width="16"
+        />
+      </div>
+      <div
+        class="mx_DeviceSecurityCard_content"
+      >
+        <p
+          class="mx_DeviceSecurityCard_heading"
+        >
+          Verified session
+        </p>
+        <p
+          class="mx_DeviceSecurityCard_description"
+        >
+          This session is ready for secure messaging.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SessionManagerTab /> renders current session section with an unverified session 1`] = `
 <div
  class="mx_SettingsSubsection"
  data-testid="current-session-section"
@ -41,6 +113,33 @@ exports[`<SessionManagerTab /> renders current session section 1`] = `
        class="mx_DeviceTile_actions"
      />
    </div>
+    <br />
+    <div
+      class="mx_DeviceSecurityCard"
+    >
+      <div
+        class="mx_DeviceSecurityCard_icon Unverified"
+      >
+        <div
+          height="16"
+          width="16"
+        />
+      </div>
+      <div
+        class="mx_DeviceSecurityCard_content"
+      >
+        <p
+          class="mx_DeviceSecurityCard_heading"
+        >
+          Unverified session
+        </p>
+        <p
+          class="mx_DeviceSecurityCard_description"
+        >
+          Verify or sign out from this session for best security and reliability.
+        </p>
+      </div>
+    </div>
  </div>
 </div>
 `;