H-344: Implement "Settings" pages layout (#2884)

Co-authored-by: Ben Werner <[email protected]>

apps/hash-api/src/integrations/linear/webhook.ts

@@ -54,8 +54,8 @@ export const linearWebhook: RequestHandler<{}, string, string> = async (
   }
 
   if (
-    tupleIncludes(["create", "update"] as const, payload.action) &&
-    tupleIncludes(["Issue", "User"] as const, payload.type)
+    tupleIncludes(["create", "update"], payload.action) &&
+    tupleIncludes(["Issue", "User"], payload.type)
   ) {
     if (!payload.data) {
       res

apps/hash-external-services/kratos/kratos.dev.yml

@@ -87,7 +87,7 @@ selfservice:
 
     settings:
       # Set through SELFSERVICE_FLOWS_SETTINGS_UI_URL
-      ui_url: http://localhost:3000/settings
+      ui_url: http://localhost:3000/change-password
 
 log:
   level: debug

apps/hash-frontend/next.config.js

@@ -71,6 +71,15 @@ module.exports = withSentryConfig(
     withTM(
       /** @type {import('next').NextConfig} */
       {
+        redirects() {
+          return [
+            {
+              source: "/settings/organizations/:shortname",
+              destination: "/settings/organizations/:shortname/general",
+              permanent: true,
+            },
+          ];
+        },
         async headers() {
           return [
             {

apps/hash-frontend/src/components/page-error-state.tsx

@@ -7,7 +7,7 @@ import { Link } from "../shared/ui";
 export const PageErrorState = () => {
   return (
     <Container>
-      <Typography mt={10} variant="h1">
+      <Typography pt={10} variant="h1">
         Error loading page
       </Typography>
 

apps/hash-frontend/src/pages/[shortname]/[page-slug].page.tsx

@@ -626,6 +626,7 @@ const Page: NextPageWithLayout<PageProps> = ({
 Page.getLayout = (page) =>
   getLayoutWithSidebar(page, {
     fullWidth: true,
+    grayBackground: false,
   });
 
 export default Page;

apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-page-wrapper/entity-page-header.tsx

@@ -37,7 +37,6 @@ export const EntityPageHeader = ({
         crumbs={[
           {
             title: "Entities",
-            href: `/@${shortname}/entities`,
             id: "entities",
           },
           {
@@ -52,7 +51,10 @@ export const EntityPageHeader = ({
 
       {editBar}
 
-      <Box py={3.75}>
+      <Box
+        py={3.75}
+        sx={({ palette }) => ({ background: palette.common.white })}
+      >
         <Container>
           {chip}
           <Stack

apps/hash-frontend/src/pages/[shortname]/index.page.tsx

@@ -92,12 +92,11 @@ const Page: NextPageWithLayout = () => {
               </Box>
               {profile ? (
                 <Typography
-                  sx={{
-                    /** @todo: add this color to the MUI theme system */
-                    color: "#0775E3",
+                  sx={({ palette }) => ({
+                    color: palette.blue[70],
                     fontSize: 20,
                     fontWeight: 600,
-                  }}
+                  })}
                 >
                   @{profile.shortname}
                 </Typography>

apps/hash-frontend/src/pages/[shortname]/types/entity-type/[...slug-maybe-version].page.tsx

@@ -235,12 +235,10 @@ const Page: NextPageWithLayout = () => {
                   crumbs={[
                     {
                       title: "Types",
-                      href: "#",
                       id: "types",
                     },
                     {
                       title: `${entityTypeIsLink ? "Link" : "Entity"} Types`,
-                      href: "#",
                       id: "entity-types",
                     },
                     {

apps/hash-frontend/src/pages/_app.page.tsx

@@ -37,6 +37,7 @@ import {
 } from "../lib/user-and-org";
 import { EntityTypesContextProvider } from "../shared/entity-types-context/provider";
 import { getPlainLayout, NextPageWithLayout } from "../shared/layout";
+import { SidebarContextProvider } from "../shared/layout/layout-with-sidebar/sidebar-context";
 import {
   RoutePageInfoProvider,
   RouteWorkspaceInfoProvider,
@@ -142,7 +143,9 @@ const App: FunctionComponent<AppProps> = ({
                   <WorkspaceContextProvider>
                     <SnackbarProvider maxSnack={3}>
                       <EntityTypesContextProvider>
-                        {getLayout(<Component {...pageProps} />)}
+                        <SidebarContextProvider>
+                          {getLayout(<Component {...pageProps} />)}
+                        </SidebarContextProvider>
                       </EntityTypesContextProvider>
                     </SnackbarProvider>
                   </WorkspaceContextProvider>