Add notification component (#4079)

* Fixes staging-docs (#4070)

* Fixes staging-docs

- var interpolation wasn't working with single quotes
- also introduce change to skip versioning on PRs which makes the build
  much faster

* Don't disable versioning on PRs

* add notifications

* Update javascript library version to 0.34.0

* Update helm chart to 4.0.32 to use gitops 0.34.0

* Update the helm reference

* Update docs for release 0.34.0

* Update README to point download link to 0.34.0

* Remove test-connection.yaml

* replace notiication context with props from EE

* fix notifications

* using AlertListErrors in Page

* fix alert message padding

---------

Co-authored-by: Simon <footless@gmail.com>
Co-authored-by: weave-gitops-bot <weave-gitops-bot@weave.works>
Co-authored-by: Lauri <lauri@weave.works>

ui/components/AlertListErrors.tsx

@@ -0,0 +1,130 @@
+import { Box, Button, Collapse } from "@material-ui/core";
+import Alert from "@material-ui/lab/Alert";
+import { sortBy, uniqBy } from "lodash";
+import React, { FC, useEffect, useState } from "react";
+import styled from "styled-components";
+import { ListError } from "../lib/api/core/core.pb";
+import Flex from "./Flex";
+import Icon, { IconType } from "./Icon";
+import Text from "./Text";
+
+type compinedError = ListError & {
+  name?: string;
+  message?: string;
+  stack?: string;
+};
+
+const BoxWrapper = styled(Box)`
+  width: 100%;
+  .MuiAlert-root {
+    margin-bottom: ${(props) => props.theme.spacing.base};
+    background: ${(props) => props.theme.colors.alertLight};
+    border-radius: ${(props) => props.theme.spacing.xs};
+    align-items: center;
+  }
+  .MuiAlert-action {
+    display: inline;
+    color: ${(props) => props.theme.colors.alertMedium};
+  }
+  .MuiIconButton-root:hover {
+    background-color: ${(props) => props.theme.colors.alertLight};
+  }
+  .MuiAlert-icon {
+    .MuiSvgIcon-root {
+      display: none;
+    }
+  }
+  .MuiAlert-message {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+  }
+`;
+const ErrorText = styled(Text)`
+  margin-left: 8px;
+`;
+const NavButton = styled(Button)`
+  padding: 0;
+  min-width: auto;
+  margin: 0;
+`;
+const ErrorsCount = styled.span`
+  background: ${(props) => props.theme.colors.feedbackMedium};
+  color: ${(props) => props.theme.colors.white};
+  padding: 4px;
+  border-radius: 4px;
+  margin: 0 4px;
+`;
+
+export const AlertListErrors: FC<{
+  errors?: compinedError[];
+}> = ({ errors }) => {
+  const [index, setIndex] = useState<number>(0);
+  const [filteredErrors, setFilteredErrors] = useState<ListError[]>([]);
+  const [show, setShow] = useState<boolean>(true);
+
+  useEffect(() => {
+    const fErrors = sortBy(
+      uniqBy(errors, (error) => [error.clusterName, error.message].join()),
+      [(v) => v.clusterName, (v) => v.namespace, (v) => v.message]
+    );
+    setFilteredErrors(fErrors);
+    setIndex(0);
+    return () => {
+      setFilteredErrors([]);
+    };
+  }, [errors]);
+
+  if (!errors || !errors.length) {
+    return null;
+  }
+
+  return (
+    <BoxWrapper id="alert-list-errors">
+      <Collapse in={show}>
+        {!!filteredErrors[index] && (
+          <Alert severity="error" onClose={() => setShow(false)}>
+            <Flex align center>
+              <Icon type={IconType.ErrorIcon} size="medium" color="alertDark" />
+              <ErrorText data-testid="error-message" color="black">
+                {filteredErrors[index].clusterName}:&nbsp;
+                {filteredErrors[index].message}
+              </ErrorText>
+            </Flex>
+            {filteredErrors.length !== 1 && (
+              <Flex align center>
+                <NavButton
+                  disabled={index === 0}
+                  data-testid="prevError"
+                  onClick={() => setIndex((currIndex) => currIndex - 1)}
+                >
+                  <Icon
+                    type={IconType.NavigateBeforeIcon}
+                    color="alertMedium"
+                    size="medium"
+                  />
+                </NavButton>
+                <ErrorsCount data-testid="errorsCount">
+                  {filteredErrors.length}
+                </ErrorsCount>
+                <NavButton
+                  disabled={filteredErrors.length === index + 1}
+                  id="nextError"
+                  data-testid="nextError"
+                  onClick={() => setIndex((currIndex) => currIndex + 1)}
+                >
+                  <Icon
+                    type={IconType.NavigateNextIcon}
+                    color="alertMedium"
+                    size="medium"
+                  />
+                </NavButton>
+              </Flex>
+            )}
+          </Alert>
+        )}
+      </Collapse>
+    </BoxWrapper>
+  );
+};

ui/components/Icon.tsx

@@ -32,6 +32,7 @@ import SearchIcon from "@material-ui/icons/Search";
 import SkipNextIcon from "@material-ui/icons/SkipNext";
 import SkipPreviousIcon from "@material-ui/icons/SkipPrevious";
 import VerifiedUser from "@material-ui/icons/VerifiedUser";
+import WarningIcon from "@material-ui/icons/Warning";
 import * as React from "react";
 import styled from "styled-components";
 import images from "../lib/images";
@@ -118,6 +119,7 @@ export enum IconType {
   VerifiedUser,
   Policy,
   FindInPage,
+  WarningIcon,
 }
 
 type Props = {
@@ -303,6 +305,9 @@ function getIcon(i: IconType) {
     case IconType.FindInPage:
       return FindInPage;
 
+    case IconType.WarningIcon:
+      return WarningIcon;
+
     default:
       break;
   }

ui/components/Page.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import styled from "styled-components";
 import useCommon from "../hooks/common";
 import { MultiRequestError, RequestError } from "../lib/types";
-import Alert from "./Alert";
+import { AlertListErrors } from "./AlertListErrors";
 import Breadcrumbs, { Breadcrumb } from "./Breadcrumbs";
 import Flex from "./Flex";
 import LoadingPage from "./LoadingPage";
@@ -62,11 +62,7 @@ export function Errors({ error }) {
   if (arr[0])
     return (
       <Flex wide column gap="4">
-        {_.map(arr, (e, i) => (
-          <Flex key={i} wide start>
-            <Alert title="Error" message={e?.message} severity="error" />
-          </Flex>
-        ))}
+        <AlertListErrors errors={arr} />
       </Flex>
     );
   return null;

ui/index.ts

@@ -1,3 +1,4 @@
+import { AlertListErrors } from "./components/AlertListErrors";
 import { ReconciledObjectsAutomation } from "./components/AutomationDetail";
 import AutomationsTable from "./components/AutomationsTable";
 import BucketDetail from "./components/BucketDetail";
@@ -140,6 +141,7 @@ import SignIn from "./pages/SignIn";
 export {
   Alert,
   AppContext,
+  AlertListErrors,
   AppContextProvider,
   Auth,
   AuthCheck,