H-1660: Expose integrations page in the HASH App (#3904)

hashintel · Jan 19, 2024 · ccbd63a · ccbd63a
1 parent 2aa9e57
commit ccbd63a
Show file tree

Hide file tree

Showing 13 changed files with 211 additions and 77 deletions.
diff --git a/apps/hash-frontend/src/pages/settings/integrations.page.tsx b/apps/hash-frontend/src/pages/settings/integrations.page.tsx
@@ -1,12 +1,15 @@
 import { apiOrigin } from "@local/hash-isomorphic-utils/environment";
-import { Box, Container, Paper, Typography } from "@mui/material";
+import { Box, Paper, Typography } from "@mui/material";
 import { FunctionComponent, useContext } from "react";
 
+import { isProduction } from "../../lib/config";
 import { extractOwnedById } from "../../lib/user-and-org";
 import { NextPageWithLayout } from "../../shared/layout";
+import { Link } from "../../shared/ui";
 import { Button } from "../../shared/ui/button";
 import { WorkspaceContext } from "../shared/workspace-context";
 import { getSettingsLayout } from "./shared/settings-layout";
+import { SettingsPageContainer } from "./shared/settings-page-container";
 
 const AddNewIntegrations: FunctionComponent = () => {
   const { activeWorkspace } = useContext(WorkspaceContext);
@@ -56,14 +59,27 @@ const AddNewIntegrations: FunctionComponent = () => {
 
 const IntegrationsPage: NextPageWithLayout = () => {
   return (
-    <Container>
-      <Box sx={{ paddingLeft: 4 }}>
-        <Typography variant="h1" mt={10} mb={4} fontWeight="bold">
-          Integrations
-        </Typography>
+    <SettingsPageContainer
+      heading="Integrations"
+      subHeading="Connected to your user account"
+      disableContentWrapper
+    >
+      {/* @todo: add ability to setup integrations in production */}
+      {isProduction ? (
+        <>
+          <Typography gutterBottom>
+            No integrations are currently available to your account.
+          </Typography>
+          <Typography>
+            Please <Link href="https://hash.ai/contact">contact us</Link> if
+            you'd like to suggest a new integration, or request access to an
+            existing one.
+          </Typography>
+        </>
+      ) : (
         <AddNewIntegrations />
-      </Box>
-    </Container>
+      )}
+    </SettingsPageContainer>
   );
 };
 

diff --git a/apps/hash-frontend/src/pages/settings/organizations/[shortname]/general.page.tsx b/apps/hash-frontend/src/pages/settings/organizations/[shortname]/general.page.tsx
@@ -10,8 +10,8 @@ import { NextPageWithLayout } from "../../../../shared/layout";
 import { useUserPermissionsOnEntity } from "../../../../shared/use-user-permissions-on-entity";
 import { useAuthenticatedUser } from "../../../shared/auth-info-context";
 import { getSettingsLayout } from "../../shared/settings-layout";
+import { SettingsPageContainer } from "../../shared/settings-page-container";
 import { OrgForm, OrgFormData } from "../shared/org-form";
-import { OrgSettingsContainer } from "../shared/org-settings-container";
 
 const OrgGeneralSettingsPage: NextPageWithLayout = () => {
   const router = useRouter();
@@ -81,8 +81,8 @@ const OrgGeneralSettingsPage: NextPageWithLayout = () => {
     <>
       <NextSeo title={`${org.name} | Settings`} />
 
-      <OrgSettingsContainer
-        header={org.name}
+      <SettingsPageContainer
+        heading={org.name}
         sectionLabel="General"
         ref={topRef}
       >
@@ -93,7 +93,7 @@ const OrgGeneralSettingsPage: NextPageWithLayout = () => {
           readonly={!userPermissions?.edit}
           submitLabel="Update organization profile"
         />
-      </OrgSettingsContainer>
+      </SettingsPageContainer>
     </>
   );
 };

diff --git a/apps/hash-frontend/src/pages/settings/organizations/[shortname]/members.page.tsx b/apps/hash-frontend/src/pages/settings/organizations/[shortname]/members.page.tsx
@@ -15,8 +15,8 @@ import { NextPageWithLayout } from "../../../../shared/layout";
 import { useUserPermissionsOnEntity } from "../../../../shared/use-user-permissions-on-entity";
 import { useAuthenticatedUser } from "../../../shared/auth-info-context";
 import { getSettingsLayout } from "../../shared/settings-layout";
+import { SettingsPageContainer } from "../../shared/settings-page-container";
 import { Cell } from "../shared/cell";
-import { OrgSettingsContainer } from "../shared/org-settings-container";
 import { OrgTable } from "../shared/org-table";
 import { AddMemberForm } from "./members.page/add-member-form";
 import { MemberRow } from "./members.page/member-row";
@@ -65,8 +65,8 @@ const OrgMembersPage: NextPageWithLayout = () => {
     <>
       <NextSeo title={`${org.name} | Members`} />
 
-      <OrgSettingsContainer
-        header={org.name}
+      <SettingsPageContainer
+        heading={org.name}
         sectionLabel="Members"
         ref={topRef}
       >
@@ -125,7 +125,7 @@ const OrgMembersPage: NextPageWithLayout = () => {
             </TableRow>
           </TableFooter>
         </OrgTable>
-      </OrgSettingsContainer>
+      </SettingsPageContainer>
     </>
   );
 };

diff --git a/apps/hash-frontend/src/pages/settings/organizations/index.page.tsx b/apps/hash-frontend/src/pages/settings/organizations/index.page.tsx
@@ -9,9 +9,9 @@ import { NextPageWithLayout } from "../../../shared/layout";
 import { Button } from "../../../shared/ui/button";
 import { useAuthenticatedUser } from "../../shared/auth-info-context";
 import { getSettingsLayout } from "../shared/settings-layout";
+import { SettingsPageContainer } from "../shared/settings-page-container";
 import { OrgRow } from "./index.page/org-row";
 import { Cell } from "./shared/cell";
-import { OrgSettingsContainer } from "./shared/org-settings-container";
 import { OrgTable } from "./shared/org-table";
 
 const OrganizationListPage: NextPageWithLayout = () => {
@@ -30,7 +30,7 @@ const OrganizationListPage: NextPageWithLayout = () => {
     <>
       <NextSeo title="Organizations" />
 
-      <OrgSettingsContainer
+      <SettingsPageContainer
         topRightElement={
           <Button
             href="/settings/organizations/new"
@@ -44,7 +44,7 @@ const OrganizationListPage: NextPageWithLayout = () => {
             />
           </Button>
         }
-        header={<>Organizations</>}
+        heading={<>Organizations</>}
         ref={topRef}
       >
         <OrgTable>
@@ -63,7 +63,7 @@ const OrganizationListPage: NextPageWithLayout = () => {
               ))}
           </TableBody>
         </OrgTable>
-      </OrgSettingsContainer>
+      </SettingsPageContainer>
     </>
   );
 };

diff --git a/apps/hash-frontend/src/pages/settings/organizations/new/index.page.tsx b/apps/hash-frontend/src/pages/settings/organizations/new/index.page.tsx
@@ -2,17 +2,17 @@ import { NextSeo } from "next-seo";
 
 import { NextPageWithLayout } from "../../../../shared/layout";
 import { getSettingsLayout } from "../../shared/settings-layout";
-import { OrgSettingsContainer } from "../shared/org-settings-container";
+import { SettingsPageContainer } from "../../shared/settings-page-container";
 import { CreateOrgForm } from "./index.page/create-org-form";
 
 const Page: NextPageWithLayout = () => {
   return (
     <>
       <NextSeo title="Create Organization" />
 
-      <OrgSettingsContainer header={<>Create new organization</>}>
+      <SettingsPageContainer heading={<>Create new organization</>}>
         <CreateOrgForm />
-      </OrgSettingsContainer>
+      </SettingsPageContainer>
     </>
   );
 };

diff --git a/apps/hash-frontend/src/pages/settings/organizations/shared/org-settings-container.tsx b/apps/hash-frontend/src/pages/settings/organizations/shared/org-settings-container.tsx
diff --git a/apps/hash-frontend/src/pages/settings/shared/settings-layout.tsx b/apps/hash-frontend/src/pages/settings/shared/settings-layout.tsx
@@ -4,6 +4,7 @@ import { PropsWithChildren, ReactElement, useMemo } from "react";
 
 import { Org } from "../../../lib/user-and-org";
 import { PeopleGroupIcon } from "../../../shared/icons/people-group-icon";
+import { PlugSolidIcon } from "../../../shared/icons/plug-solid-icon";
 import { LayoutWithSidebar } from "../../../shared/layout/layout-with-sidebar";
 import { useAuthenticatedUser } from "../../shared/auth-info-context";
 import { TopContextBar } from "../../shared/top-context-bar";
@@ -45,6 +46,11 @@ const generateMenuLinks = (
       icon: PeopleGroupIcon,
     },
     ...organizationItems,
+    {
+      label: "Integrations",
+      href: "/settings/integrations",
+      icon: <PlugSolidIcon sx={{ fontSize: 12 }} />,
+    },
   ];
 
   for (const item of menuItems) {

diff --git a/apps/hash-frontend/src/pages/settings/shared/settings-layout/settings-sidebar.tsx b/apps/hash-frontend/src/pages/settings/shared/settings-layout/settings-sidebar.tsx
@@ -9,7 +9,13 @@ import {
   useTheme,
 } from "@mui/material";
 import { useRouter } from "next/router";
-import { FunctionComponent, useCallback, useEffect, useState } from "react";
+import {
+  FunctionComponent,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 
 import { Link } from "../../../../shared/ui/link";
 
@@ -19,7 +25,7 @@ export type SidebarItemData = {
   children?: SidebarItemData[];
   label: string;
   href: string;
-  icon?: FunctionComponent<SvgIconProps>;
+  icon?: FunctionComponent<SvgIconProps> | ReactNode;
   parentHref?: string;
 };
 
@@ -102,17 +108,28 @@ const SidebarItem = ({
           position: "relative",
         }}
       >
-        {item.icon ? (
-          <item.icon
-            sx={{
+        <Box
+          sx={{
+            paddingRight: 1.2,
+            width: "1rem",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            svg: {
               fill: itemColor,
-              width: "1rem",
-              mr: 1.2,
-            }}
-          />
-        ) : (
-          <Box width="1rem" minWidth="1rem" mr={1.2} />
-        )}
+            },
+          }}
+        >
+          {item.icon ? (
+            typeof item.icon === "function" ? (
+              <item.icon sx={{ width: "1rem" }} />
+            ) : (
+              item.icon
+            )
+          ) : (
+            <Box width="1rem" minWidth="1rem" mr={1.2} />
+          )}
+        </Box>
         {level === 3 && active ? (
           <Box
             sx={({ palette }) => ({

diff --git a/apps/hash-frontend/src/pages/settings/shared/settings-page-container.tsx b/apps/hash-frontend/src/pages/settings/shared/settings-page-container.tsx
@@ -0,0 +1,73 @@
+import { Box, Stack, Typography } from "@mui/material";
+import { forwardRef, PropsWithChildren, ReactNode } from "react";
+
+export const SettingsPageContainer = forwardRef<
+  HTMLSpanElement,
+  PropsWithChildren<{
+    topRightElement?: ReactNode;
+    heading: ReactNode;
+    subHeading?: ReactNode;
+    disableContentWrapper?: boolean;
+    sectionLabel?: string;
+  }>
+>(
+  (
+    {
+      topRightElement,
+      children,
+      heading,
+      subHeading,
+      disableContentWrapper,
+      sectionLabel,
+    },
+    ref,
+  ) => {
+    return (
+      <>
+        <Box marginBottom={4}>
+          <Stack
+            direction="row"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Typography ref={ref} variant="h2" mt={-1} fontWeight="bold">
+              {heading}
+            </Typography>
+            {topRightElement}
+          </Stack>
+          {subHeading ? (
+            <Typography
+              variant="h3"
+              sx={{
+                marginTop: 1,
+                fontSize: 24,
+                color: ({ palette }) => palette.gray[60],
+                fontWeight: 400,
+              }}
+            >
+              {subHeading}
+            </Typography>
+          ) : null}
+        </Box>
+        {sectionLabel && (
+          <Typography component="h4" variant="mediumCaps" mb={2}>
+            {sectionLabel}
+          </Typography>
+        )}
+        {disableContentWrapper ? (
+          children
+        ) : (
+          <Box
+            sx={({ palette }) => ({
+              background: palette.common.white,
+              borderRadius: 1.5,
+              boxShadow: "0px 1px 5px 0px rgba(27, 33, 40, 0.07)",
+            })}
+          >
+            {children}
+          </Box>
+        )}
+      </>
+    );
+  },
+);
diff --git a/apps/hash-frontend/src/shared/icons/infinity-solid-icon.tsx b/apps/hash-frontend/src/shared/icons/infinity-solid-icon.tsx
@@ -0,0 +1,16 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import { FunctionComponent } from "react";
+
+export const InfinitySolidIcon: FunctionComponent<SvgIconProps> = (props) => {
+  return (
+    <SvgIcon
+      {...props}
+      height="16"
+      width="20"
+      viewBox="0 0 640 512"
+      fill="none"
+    >
+      <path d="M0 241.1C0 161 65 96 145.1 96c38.5 0 75.4 15.3 102.6 42.5L320 210.7l72.2-72.2C419.5 111.3 456.4 96 494.9 96C575 96 640 161 640 241.1v29.7C640 351 575 416 494.9 416c-38.5 0-75.4-15.3-102.6-42.5L320 301.3l-72.2 72.2C220.5 400.7 183.6 416 145.1 416C65 416 0 351 0 270.9V241.1zM274.7 256l-72.2-72.2c-15.2-15.2-35.9-23.8-57.4-23.8C100.3 160 64 196.3 64 241.1v29.7c0 44.8 36.3 81.1 81.1 81.1c21.5 0 42.2-8.5 57.4-23.8L274.7 256zm90.5 0l72.2 72.2c15.2 15.2 35.9 23.8 57.4 23.8c44.8 0 81.1-36.3 81.1-81.1V241.1c0-44.8-36.3-81.1-81.1-81.1c-21.5 0-42.2 8.5-57.4 23.8L365.3 256z" />{" "}
+    </SvgIcon>
+  );
+};