Combine admin and settings (#4525)

* Add side menu component

* Add side menu to settings page. Remove admin link from sidebar

* Move NotificationPage

* Move ConfigurationPage

* Add Sources and Destinations pages to Settings. Delete Admin page

* Add MetricsPage

* Edit Notifications and Metrics pages

* Update feedback for metrics and notification pages

* Add update icons data to side menu

* Add AccountPage

Author: jamakase

airbyte-webapp/src/components/SideMenu/SideMenu.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+
+import MenuItem from "./components/MenuItem";
+
+export type SideMenuItem = {
+  id: string;
+  name: string | React.ReactNode;
+  indicatorCount?: number;
+};
+
+type SideMenuProps = {
+  data: SideMenuItem[];
+  activeItem?: string;
+  onSelect: (id: string) => void;
+};
+
+const Content = styled.nav`
+  min-width: 147px;
+`;
+
+const SideMenu: React.FC<SideMenuProps> = ({ data, onSelect, activeItem }) => {
+  return (
+    <Content>
+      {data.map((item) => (
+        <MenuItem
+          key={item.id}
+          name={item.name}
+          isActive={item.id === activeItem}
+          count={item.indicatorCount}
+          onClick={() => onSelect(item.id)}
+        />
+      ))}
+    </Content>
+  );
+};
+
+export default SideMenu;

airbyte-webapp/src/components/SideMenu/components/MenuItem.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import styled from "styled-components";
+
+type IProps = {
+  name: string | React.ReactNode;
+  isActive?: boolean;
+  count?: number;
+  onClick: () => void;
+};
+
+const Item = styled.div<{
+  isActive?: boolean;
+}>`
+  width: 100%;
+  padding: 6px 8px 7px;
+  border-radius: 4px;
+  cursor: pointer;
+  background: ${({ theme, isActive }) =>
+    isActive ? theme.primaryColor12 : "none"};
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 15px;
+  color: ${({ theme, isActive }) =>
+    isActive ? theme.primaryColor : theme.greyColor60};
+`;
+
+const Counter = styled.div`
+  min-width: 12px;
+  height: 12px;
+  padding: 0 3px;
+  text-align: center;
+  border-radius: 15px;
+  background: ${({ theme }) => theme.dangerColor};
+  font-size: 8px;
+  line-height: 13px;
+  color: ${({ theme }) => theme.whiteColor};
+  display: inline-block;
+  margin-left: 5px;
+`;
+
+const MenuItem: React.FC<IProps> = ({ name, isActive, count, onClick }) => {
+  return (
+    <Item isActive={isActive} onClick={onClick}>
+      {name}
+      {count ? <Counter>{count}</Counter> : null}
+    </Item>
+  );
+};
+
+export default MenuItem;

airbyte-webapp/src/components/SideMenu/index.tsx

@@ -0,0 +1,4 @@
+import SideMenu from "./SideMenu";
+
+export default SideMenu;
+export { SideMenu };

airbyte-webapp/src/components/hooks/services/useConnector.tsx

@@ -9,6 +9,8 @@ type ConnectorService = {
   hasNewVersions: boolean;
   hasNewSourceVersion: boolean;
   hasNewDestinationVersion: boolean;
+  countNewSourceVersion: number;
+  countNewDestinationVersion: number;
   updateAllSourceVersions: () => void;
   updateAllDestinationVersions: () => void;
 };
@@ -57,6 +59,23 @@ const useConnector = (): ConnectorService => {
     [hasNewSourceVersion, hasNewDestinationVersion]
   );
 
+  const countNewSourceVersion = useMemo(
+    () =>
+      sourceDefinitions.filter(
+        (source) => source.latestDockerImageTag !== source.dockerImageTag
+      ).length,
+    [sourceDefinitions]
+  );
+
+  const countNewDestinationVersion = useMemo(
+    () =>
+      destinationDefinitions.filter(
+        (destination) =>
+          destination.latestDockerImageTag !== destination.dockerImageTag
+      ).length,
+    [destinationDefinitions]
+  );
+
   const updateAllSourceVersions = async () => {
     const updateList = sourceDefinitions.filter(
       (source) => source.latestDockerImageTag !== source.dockerImageTag
@@ -100,6 +119,8 @@ const useConnector = (): ConnectorService => {
     hasNewDestinationVersion,
     updateAllSourceVersions,
     updateAllDestinationVersions,
+    countNewSourceVersion,
+    countNewDestinationVersion,
   };
 };
 

airbyte-webapp/src/components/hooks/services/useWorkspaceHook.tsx

@@ -78,6 +78,7 @@ const useWorkspace = (): {
         workspaceId: config.ui.workspaceId,
         initialSetupComplete: workspace.initialSetupComplete,
         displaySetupWizard: workspace.displaySetupWizard,
+        notifications: workspace.notifications,
         ...data,
       }
     );

airbyte-webapp/src/components/index.tsx

@@ -17,3 +17,4 @@ export * from "./ContentCard";
 export * from "./ImageBlock";
 export * from "./LabeledRadioButton";
 export * from "./Modal";
+export * from "./SideMenu";

airbyte-webapp/src/locales/en.json

@@ -322,6 +322,14 @@
   "settings.webhookTestText": "Testing the Webhook will send a “Hello World”. ",
   "settings.yourWebhook": "Your Webhook URL",
   "settings.test": "Test",
+  "settings.notifications": "Notifications",
+  "settings.metrics": "Metrics",
+  "settings.notificationSettings": "Notification Settings",
+  "settings.metricsSettings": "Metrics Settings",
+  "settings.emailNotifications": "Email notifications",
+  "settings.securityUpdates": "Security updates (recommended)",
+  "settings.newsletter": "Newsletter with feature updates.",
+  "settings.account": "Account",
 
   "connector.requestConnectorBlock": "+ Request a new connector",
   "connector.requestConnector": "Request a new connector",