chore: Remove footer and move links to status bar MAASENG-2058 (#5193)

src/app/base/components/PageContent/PageContent.tsx

@@ -6,7 +6,6 @@ import { matchPath, useLocation } from "react-router-dom-v5-compat";
 
 import AppSidePanel from "../AppSidePanel";
 import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
-import Footer from "../Footer";
 import MainContentSection from "../MainContentSection";
 import SecondaryNavigation from "../SecondaryNavigation";
 
@@ -78,8 +77,6 @@ const PageContent = ({
           >
             <ErrorBoundary>{children}</ErrorBoundary>
           </MainContentSection>
-          <hr />
-          <Footer />
         </div>
       </main>
       <AppSidePanel content={sidePanelContent} title={sidePanelTitle} />

src/app/base/components/StatusBar/StatusBar.test.tsx

@@ -17,6 +17,8 @@ import {
 import { screen, renderWithMockStore } from "testing/utils";
 
 let state: RootState;
+const originalEnv = process.env;
+
 beforeEach(() => {
   jest.useFakeTimers("modern");
   // Thu, 31 Dec. 2020 23:00:00 UTC
@@ -40,6 +42,7 @@ beforeEach(() => {
 
 afterEach(() => {
   jest.useRealTimers();
+  process.env = originalEnv;
 });
 
 it("can show if a machine is currently commissioning", () => {
@@ -208,3 +211,50 @@ it("displays last image sync timestamp for a rack or region+rack controller", ()
     `Last image sync: ${controller.last_image_sync}`
   );
 });
+
+it("displays the feedback link when analytics enabled and not in development environment", () => {
+  process.env = { ...originalEnv, NODE_ENV: "production" };
+
+  state.config = configStateFactory({
+    items: [
+      ...state.config.items,
+      configFactory({ name: ConfigNames.ENABLE_ANALYTICS, value: true }),
+    ],
+  });
+
+  renderWithMockStore(<StatusBar />, { state });
+
+  expect(
+    screen.getByRole("button", { name: "Give feedback" })
+  ).toBeInTheDocument();
+});
+
+it("hides the feedback link when analytics disabled", () => {
+  process.env = { ...originalEnv, NODE_ENV: "production" };
+  state.config = configStateFactory({
+    items: [
+      ...state.config.items,
+      configFactory({ name: ConfigNames.ENABLE_ANALYTICS, value: false }),
+    ],
+  });
+  renderWithMockStore(<StatusBar />, { state });
+
+  expect(
+    screen.queryByRole("button", { name: "Give feedback" })
+  ).not.toBeInTheDocument();
+});
+
+it("hides the feedback link in development environment", () => {
+  process.env = { ...originalEnv, NODE_ENV: "development" };
+  state.config = configStateFactory({
+    items: [
+      ...state.config.items,
+      configFactory({ name: ConfigNames.ENABLE_ANALYTICS, value: true }),
+    ],
+  });
+  renderWithMockStore(<StatusBar />, { state });
+
+  expect(
+    screen.queryByRole("button", { name: "Give feedback" })
+  ).not.toBeInTheDocument();
+});

src/app/base/components/StatusBar/StatusBar.tsx

@@ -1,7 +1,9 @@
 import type { ReactNode } from "react";
 
+import { Button, Link } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 
+import { useUsabilla } from "app/base/hooks";
 import configSelectors from "app/store/config/selectors";
 import controllerSelectors from "app/store/controller/selectors";
 import {
@@ -53,6 +55,7 @@ export const StatusBar = (): JSX.Element | null => {
   const activeMachine = useSelector(machineSelectors.active);
   const version = useSelector(versionSelectors.get);
   const maasName = useSelector(configSelectors.maasName);
+  const allowUsabilla = useUsabilla();
 
   if (!(maasName && version)) {
     return null;
@@ -95,6 +98,37 @@ export const StatusBar = (): JSX.Element | null => {
           : 
           <span data-testid="status-bar-version">{version}</span>
         </div>
+        <ul className="p-inline-list--middot u-no-margin--bottom">
+          <li className="p-inline-list__item">
+            <Link
+              href={`${process.env.REACT_APP_BASENAME}/docs/`}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Local documentation
+            </Link>
+          </li>
+          <li className="p-inline-list__item">
+            <Link
+              href="https://www.ubuntu.com/legal"
+              rel="noreferrer"
+              target="_blank"
+            >
+              Legal information
+            </Link>
+          </li>
+          {allowUsabilla ? (
+            <li className="p-inline-list__item">
+              <Button
+                appearance="link"
+                className="u-no-margin u-no-padding"
+                onClick={() => window.usabilla_live("click")}
+              >
+                Give feedback
+              </Button>
+            </li>
+          ) : null}
+        </ul>
         {status && (
           <div
             className="p-status-bar__secondary u-flex--grow u-flex--wrap"

src/scss/_patterns_status-bar.scss

@@ -1,6 +1,6 @@
 @mixin maas-status-bar {
   .p-status-bar {
-    background-color: #cce0f5;
+    background-color: #f7f7f7;
     bottom: 0;
     left: 0;
     padding: $spv--small 0;