Recommended fixes/changes to organizations

src/components/ErrorNotification/ErrorNotification.tsx

@@ -0,0 +1,51 @@
+import { FC } from 'react';
+
+import { notification } from 'antd';
+
+interface Props {
+  error: {
+    message: string;
+  };
+  message: string;
+}
+
+const ErrorNotification: FC<Props> = ({ error, message }) => {
+  //   const [api, contextHolder] = notification.useNotification({ maxCount: 1 });
+
+  //   const openNotification = () => {
+  //     api['error']({
+  //       message: message,
+  //       description: description,
+  //       placement: 'top',
+  //       duration: 0,
+  //       style: { width: '500px' },
+  //     });
+  //   };
+
+  //   return (
+  //     <>
+  //       {contextHolder}
+
+  //       {openNotification()}
+  //     </>
+  //   );
+  const [api, contextHolder] = notification.useNotification({ maxCount: 1 });
+
+  const openNotificationWithIcon = (message: string, description: string) => {
+    api['error']({
+      message: message,
+      description: description,
+      placement: 'top',
+      duration: 0,
+      style: { width: '500px' },
+    });
+  };
+  return (
+    <>
+      {contextHolder}
+      {error && openNotificationWithIcon(message, error.message)}
+    </>
+  );
+};
+
+export default ErrorNotification;

src/components/Header/StyledHeader.tsx

@@ -1,10 +1,14 @@
 import { color } from 'lib/variables';
 import styled from 'styled-components';
 
-export const StyledHeader = styled.header`
+export const StyledHeader = styled.header<{ isOrganizationsPath: boolean }>`
   background: ${color.brightBlue} ${color.lightBlue};
   background: ${color.lightBlue};
-  background: ${props => props.theme.gradients.headerFooterGradient};
+  background: ${props =>
+    props.isOrganizationsPath
+      ? props.theme.gradients.organizationsHeaderGradient
+      : props.theme.gradients.headerFooterGradient};
+
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='${color.brightBlue}', endColorstr='${color.lightBlue}',GradientType=1 );
   display: flex;
   justify-content: space-between;
@@ -38,7 +42,10 @@ export const StyledHeader = styled.header`
     }
     &.navitem {
       align-items: center;
-      border-left: 1px solid ${color.blue};
+      border-left: 1px solid ${props =>
+    props.isOrganizationsPath
+      ? "transparent"
+      : color.blue};
       cursor: pointer;
       display: flex;
       &::before {

src/components/Header/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import getConfig from 'next/config';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 import lagoonLogo from '!svg-inline-loader?classPrefix!./lagoon.svg';
 import HeaderMenu from 'components/HeaderMenu';
@@ -16,45 +17,51 @@ const { publicRuntimeConfig } = getConfig();
 /**
  * Displays the header using the provided logo.
  */
-const Header = ({ logo }) => (
-  <StyledHeader>
-    <Link href="/">
-      <a className="home">
-        <img
-          alt="Home"
-          src={
-            logo
-              ? logo
-              : `data:image/svg+xml;utf8,${
-                  publicRuntimeConfig.LAGOON_UI_ICON
-                    ? publicRuntimeConfig.LAGOON_UI_ICON
-                    : encodeURIComponent(lagoonLogo)
-                }`
+const Header = ({ logo }) => {
+  const { asPath } = useRouter();
+
+  const isOrganizationsPath = asPath.includes('/organizations');  
+
+  return (
+    <StyledHeader isOrganizationsPath={isOrganizationsPath}>
+      <Link href="/">
+        <a className="home">
+          <img
+            alt="Home"
+            src={
+              logo
+                ? logo
+                : `data:image/svg+xml;utf8,${
+                    publicRuntimeConfig.LAGOON_UI_ICON
+                      ? publicRuntimeConfig.LAGOON_UI_ICON
+                      : encodeURIComponent(lagoonLogo)
+                  }`
+            }
+          />
+        </a>
+      </Link>
+      <ControlButtons>
+        <TourControlBtn />
+        <ThemeToggler />
+      </ControlButtons>
+      <AuthContext.Consumer>
+        {auth => {
+          if (auth.authenticated) {
+            return (
+              <div className="authContainer">
+                <Link href="/alldeployments" prefetch>
+                  <a className="navitem">Deployments</a>
+                </Link>
+                <HeaderMenu isOrganizationsPath={isOrganizationsPath} auth={auth}></HeaderMenu>
+              </div>
+            );
           }
-        />
-      </a>
-    </Link>
-    <ControlButtons>
-      <TourControlBtn />
-      <ThemeToggler />
-    </ControlButtons>
-    <AuthContext.Consumer>
-      {auth => {
-        if (auth.authenticated) {
-          return (
-            <div className="authContainer">
-              <Link href="/alldeployments" prefetch>
-                <a className="navitem">Deployments</a>
-              </Link>
-              <HeaderMenu auth={auth}></HeaderMenu>
-            </div>
-          );
-        }
-
-        return null;
-      }}
-    </AuthContext.Consumer>
-  </StyledHeader>
-);
+
+          return null;
+        }}
+      </AuthContext.Consumer>
+    </StyledHeader>
+  );
+};
 
 export default Header;

src/components/HeaderMenu/StyledHeaderMenu.tsx

@@ -25,8 +25,8 @@ export const DropdownButton = styled.a`
   }
 `;
 
-export const StyledDropdown = styled.div`
-  border-left: 1px solid ${color.blue};
+export const StyledDropdown = styled.div<{ isOrganizationsPath: boolean }>`
+  border-left: 1px solid ${props => (props.isOrganizationsPath ? 'transparent' : color.blue)};
   cursor: pointer;
   padding: 10px 20px;
   hr {

src/components/HeaderMenu/index.js

@@ -29,7 +29,7 @@ const useOutsideClick = callback => {
   return ref;
 };
 
-const HeaderMenu = ({ auth }) => {
+const HeaderMenu = ({ auth, isOrganizationsPath }) => {
   const [open, setOpen] = React.useState(false);
 
   const handleClickOutside = () => {
@@ -55,6 +55,7 @@ const HeaderMenu = ({ auth }) => {
   return (
     <>
       <Dropdown
+        isOrganizationsPath={isOrganizationsPath}
         open={open}
         trigger={
           <DropdownButton ref={ref} onClick={handleOpen}>
@@ -96,10 +97,10 @@ const HeaderMenu = ({ auth }) => {
   );
 };
 
-const Dropdown = ({ open, trigger, menu }) => {
+const Dropdown = ({ open, trigger, menu, isOrganizationsPath }) => {
   return (
     <>
-      <StyledDropdown>
+      <StyledDropdown isOrganizationsPath={isOrganizationsPath}>
         {trigger}
         {open ? (
           <DropdownMenu>

src/components/NewEnvironment/index.js

@@ -118,7 +118,7 @@ const NewEnvironment = ({
                                 id="branchName"
                                 className="inputBranch"
                                 type="text"
-                                placeholder="e.g. main or develop"
+                                placeholder="Enter branch name"
                                 value={inputBranchName}
                                 onChange={setBranchName}
                                 onBlur={() => toggleShowEnvType()}

src/components/Organizations/AddGroupToProject/index.js

@@ -10,6 +10,7 @@ import gql from 'graphql-tag';
 
 import { RoleSelect } from '../AddUserToGroup/Styles';
 import { AddButtonContent, Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';
+import { Tooltip } from 'antd';
 
 const ADD_GROUP_PROJECT_MUTATION = gql`
   mutation addProjectToGroup($groupName: String!, $projectName: String!) {
@@ -41,12 +42,13 @@ export const AddGroupToProject = ({
   return (
     <StyledNotificationWrapper>
       <div className="margins">
-        <Button action={openModal}>
-          <AddButtonContent>
-            <span>+</span>
-            <span>Group</span>
-          </AddButtonContent>
-        </Button>
+        <Tooltip overlayClassName="orgTooltip" placement="bottom" title="Link a group to this project">
+          <>
+            <Button action={openModal}>
+              <AddButtonContent>Link Group</AddButtonContent>
+            </Button>
+          </>
+        </Tooltip>
       </div>
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
         <React.Fragment>
@@ -60,7 +62,7 @@ export const AddGroupToProject = ({
               }
               return (
                 <StyledNotification>
-                  <h4>Add Group</h4>
+                  <h4>Link Group</h4>
                   <label>
                     Group
                     <RoleSelect>

src/components/Organizations/AddNotificationToProject/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Mutation } from 'react-apollo';
 import ReactSelect from 'react-select';
 
+import { Tooltip } from 'antd';
 import Button from 'components/Button';
 import Modal from 'components/Modal';
 // @TODO: add this once the logic exists
@@ -47,12 +48,13 @@ export const AddNotificationToProject = ({
   return (
     <StyledNotificationWrapper>
       <div className="margins">
-        <Button action={openModal}>
-          <AddButtonContent>
-            <span>+</span>
-            <span>Notification</span>
-          </AddButtonContent>
-        </Button>
+        <Tooltip overlayClassName="orgTooltip" placement="bottom" title="Link a notification to this project">
+          <>
+            <Button action={openModal}>
+              <AddButtonContent>Link Notification</AddButtonContent>
+            </Button>
+          </>
+        </Tooltip>
       </div>
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
         <React.Fragment>
@@ -79,7 +81,7 @@ export const AddNotificationToProject = ({
               });
               return (
                 <StyledNotification>
-                  <h4>Add Notification</h4>
+                  <h4>Link Notification</h4>
                   <label>
                     Notification
                     <RoleSelect>

src/components/Organizations/CustomIcons/DashboardIcon.tsx

@@ -0,0 +1,11 @@
+export const DashboardIcon = () => (
+  <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.1398 7.62501L10.957 10.1622L19.0396 14.876V5.49268L15.1398 7.62501Z" fill="#3B67C6" />
+    <path
+      d="M6.36599 12.5272L0.00306702 16.486L9.52645 21.9803L19.0376 16.4869L9.52022 10.9887L6.36599 12.5272Z"
+      fill="#3B67C6"
+    />
+    <path d="M0 5.49007L0.00297163 16.4863L9.52013 10.9891V0.000488281L0 5.49007Z" fill="#3B67C6" />
+    <path d="M10.9571 10.1616L19.0396 5.49205L10.957 0.827637L10.9571 10.1616Z" fill="#3B67C6" />
+  </svg>
+);

src/components/Organizations/CustomIcons/OrganizationIcons.tsx

@@ -0,0 +1,11 @@
+import Icon, { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+import { DashboardIcon } from './DashboardIcon';
+
+/**
+ * A place where svgs get turned into custom antd icons
+ */
+
+export const IconDashboard = (props: Partial<CustomIconComponentProps>) => (
+  <Icon component={DashboardIcon} {...props} />
+);