Merge pull request #2755 from ONSdigital/EAR-1822-add-decomm-banner

Ear 1822 add decomm banner

eq-author/src/App/QuestionnaireDesignPage/index.js

@@ -52,6 +52,8 @@ import {
   ERR_UNAUTHORIZED_QUESTIONNAIRE,
 } from "constants/error-codes";
 
+import WarningBanner from "components/WarningBanner";
+
 const NavColumn = styled(Column)`
   background-color: ${colors.black};
 `;
@@ -150,6 +152,7 @@ export const QuestionnaireDesignPage = () => {
 
   return (
     <QuestionnaireContext.Provider value={{ questionnaire }}>
+      <WarningBanner />
       <BaseLayout questionnaire={questionnaire}>
         <ScrollPane>
           <Titled title={() => (loading ? "" : questionnaire.title)}>

eq-author/src/App/QuestionnaireDesignPage/index.test.js

@@ -166,6 +166,11 @@ describe("QuestionnaireDesignPage", () => {
     ).toThrow(ERR_UNAUTHORIZED_QUESTIONNAIRE);
   });
 
+  it("should display warning banner message", () => {
+    const { getByText } = setup();
+    expect(getByText("Action required")).toBeTruthy();
+  });
+
   describe("Document title", () => {
     it("should display existing title if loading", () => {
       setup({ questionnaireQuery: { loading: true } });

eq-author/src/App/QuestionnairesPage/index.js

@@ -24,6 +24,7 @@ import withCreateQuestionnaire from "./withCreateQuestionnaire";
 import withDuplicateQuestionnaire from "./withDuplicateQuestionnaire";
 
 import useLockStatusSubscription from "hooks/useLockStatusSubscription";
+import WarningBanner from "components/WarningBanner";
 
 export const QUESTIONNAIRES_QUERY = gql`
   query GetQuestionnaireList {
@@ -92,6 +93,7 @@ const QuestionnairesPage = ({
 
   return (
     <Theme themeName={"ons"}>
+      <WarningBanner />
       <Layout title="Author">
         <QuestionnairesView
           questionnaires={data.questionnaires}

eq-author/src/App/QuestionnairesPage/index.test.js

@@ -112,4 +112,48 @@ describe("QuestionnairesPage", () => {
 
     expect(getByText("UKIS")).toBeTruthy();
   });
+
+  it("should display warning banner message", async () => {
+    const { getByText } = renderQuestionnairesPage({
+      mocks: [
+        {
+          request: {
+            query: QUESTIONNAIRES_QUERY,
+          },
+          result: {
+            data: {
+              questionnaires: [
+                {
+                  id: "123",
+                  title: "UKIS",
+                  shortTitle: null,
+                  starred: false,
+                  updatedAt: Date.now().toString(),
+                  createdAt: Date.now().toString(),
+                  displayName: "UKIS",
+                  permission: WRITE,
+                  publishStatus: UNPUBLISHED,
+                  createdBy: {
+                    id: "1",
+                    name: "A Dude",
+                    email: "[email protected]",
+                    displayName: "A Dude",
+                    __typename: "User",
+                  },
+                  locked: false,
+                  __typename: "Questionnaire",
+                },
+              ],
+            },
+          },
+        },
+      ],
+    });
+
+    await act(async () => {
+      await flushPromises();
+    });
+
+    expect(getByText("Action required")).toBeTruthy();
+  });
 });

eq-author/src/App/SignInPage/index.js

@@ -19,6 +19,8 @@ import EmailVerification from "./EmailVerification";
 import ApiError from "./ApiError";
 import Theme from "contexts/themeContext";
 
+import WarningBanner from "components/WarningBanner";
+
 const MainPanel = styled.div`
   margin: 2em auto 0;
   display: flex;
@@ -93,6 +95,7 @@ const SignInPage = ({
   return (
     <>
       <Theme themeName={"ons"}>
+        <WarningBanner />
         {me && <Redirect to="/" />}
 
         <Layout title="Author">

eq-author/src/App/SignInPage/index.test.js

@@ -95,6 +95,13 @@ describe("SignInPage", () => {
       userEvent.click(btn);
       expect(getAllByText("Enter password")).toBeTruthy();
     });
+
+    it("should display warning banner message", () => {
+      const { getByText } = renderSignIn({
+        ...props,
+      });
+      expect(getByText("Action required")).toBeTruthy();
+    });
   });
 
   describe("recover password page", () => {

eq-author/src/components/WarningBanner/index.js

@@ -0,0 +1,75 @@
+import React from "react";
+import styled from "styled-components";
+
+import { colors } from "constants/theme";
+import IconText from "components/IconText";
+import WarningIcon from "./icon-warning.svg?inline";
+import ExternalLinkIcon from "./icon-external-link.svg";
+
+const Banner = styled.div`
+  background-color: ${colors.red};
+  height: 7em;
+  display: flex;
+`;
+
+const WarningMessage = styled(IconText)`
+  display: flex;
+  color: ${colors.white};
+  padding: 1em;
+  margin-bottom: 2.7em;
+  font-weight: bold;
+  width: 20em;
+  font-size: 1.2em;
+`;
+
+const BannerMessageContainer = styled.div`
+  color: ${colors.white};
+  display: flex;
+  flex-direction: column;
+  width: 100em;
+  font-weight: bold;
+  margin-top: 1em;
+`;
+
+const Content = styled.div`
+  line-height: 1.7em;
+`;
+
+const Link = styled.a`
+  color: ${colors.white};
+  [target="_blank"]&:after {
+    content: url(${ExternalLinkIcon});
+    margin-left: 5px;
+  }
+`;
+
+const WarningBanner = () => {
+  return (
+    <Banner>
+      <WarningMessage icon={WarningIcon}>Action required</WarningMessage>
+      <BannerMessageContainer>
+        <Content>
+          Author has migrated and this page will be turned off shortly.
+        </Content>
+        <Content>
+          Please use latest version of Author:&nbsp;
+          <Link
+            href="https://author.eqbs.gcp.onsdigital.uk/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            https://author.eqbs.gcp.onsdigital.uk/
+          </Link>
+        </Content>
+        <Content>
+          If you have any questions please contact the Author team at&nbsp;
+          <Link href="mailto:[email protected]">
+            [email protected]
+          </Link>
+        </Content>
+      </BannerMessageContainer>
+    </Banner>
+  );
+};
+
+export default WarningBanner;