ENG-1407 Allow UI page sidebars to be passed in as prop. (#242)

* Refactors sidebar and layout handling to allow sidebar layout to be passed into page components.

src/ui/common/src/components/pages/AccountPage.tsx

@@ -6,12 +6,17 @@ import { CopyBlock, github } from 'react-code-blocks';
 import UserProfile from '../../utils/auth';
 import { useAqueductConsts } from '../hooks/useAqueductConsts';
 import DefaultLayout from '../layouts/default';
+import { LayoutProps } from './types';
 
 type AccountPageProps = {
   user: UserProfile;
+  Layout?: React.FC<LayoutProps>;
 };
 
-const AccountPage: React.FC<AccountPageProps> = ({ user }) => {
+const AccountPage: React.FC<AccountPageProps> = ({
+  user,
+  Layout = DefaultLayout,
+}) => {
   // Set the title of the page on page load.
   useEffect(() => {
     document.title = 'Account | Aqueduct';
@@ -27,7 +32,7 @@ client = aqueduct.Client(
   const maxContentWidth = '600px';
 
   return (
-    <DefaultLayout user={user}>
+    <Layout user={user}>
       <Typography variant="h2" gutterBottom component="div">
         Account Overview
       </Typography>
@@ -62,7 +67,7 @@ client = aqueduct.Client(
           />
         </Box>
       </Box>
-    </DefaultLayout>
+    </Layout>
   );
 };
 

src/ui/common/src/components/pages/HomePage.tsx

@@ -3,22 +3,27 @@ import React, { useEffect } from 'react';
 import UserProfile from '../../utils/auth';
 import GettingStartedTutorial from '../cards/GettingStartedTutorial';
 import DefaultLayout from '../layouts/default';
+import { LayoutProps } from './types';
 
 type HomePageProps = {
   user: UserProfile;
+  Layout?: React.FC<LayoutProps>;
 };
 
-const HomePage: React.FC<HomePageProps> = ({ user }) => {
+const HomePage: React.FC<HomePageProps> = ({
+  user,
+  Layout = DefaultLayout,
+}) => {
   // Set the title of the page on page load.
   useEffect(() => {
     document.title = 'Home | Aqueduct';
   }, []);
 
   return (
-    <DefaultLayout user={user}>
+    <Layout user={user}>
       <div />
       <GettingStartedTutorial user={user} />
-    </DefaultLayout>
+    </Layout>
   );
 };
 

src/ui/common/src/components/pages/data/index.tsx

@@ -15,9 +15,11 @@ import { DataPreviewInfo } from '../../../utils/data';
 import { DataCard, dataCardName } from '../../integrations/cards/card';
 import { Card } from '../../layouts/card';
 import DefaultLayout from '../../layouts/default';
+import { LayoutProps } from '../types';
 
 type Props = {
   user: UserProfile;
+  Layout?: React.FC<LayoutProps>;
 };
 
 const SearchBar = (
@@ -88,7 +90,7 @@ const SearchBar = (
   );
 };
 
-const DataPage: React.FC<Props> = ({ user }) => {
+const DataPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
   const apiKey = user.apiKey;
   const dispatch: AppDispatch = useDispatch();
 
@@ -125,7 +127,7 @@ const DataPage: React.FC<Props> = ({ user }) => {
   }, []);
 
   return (
-    <DefaultLayout user={user}>
+    <Layout user={user}>
       <div />
       <Box>
         <Typography variant="h2" gutterBottom component="div">
@@ -148,7 +150,7 @@ const DataPage: React.FC<Props> = ({ user }) => {
           </Box>
         </Box>
       </Box>
-    </DefaultLayout>
+    </Layout>
   );
 };
 

src/ui/common/src/components/pages/integration/id/index.tsx

@@ -28,13 +28,16 @@ import UserProfile from '../../../../utils/auth';
 import { Integration } from '../../../../utils/integrations';
 import ExecutionStatus from '../../../../utils/shared';
 import { Button } from '../../../primitives/Button.styles';
+import { LayoutProps } from '../../types';
 
 type IntegrationDetailsPageProps = {
   user: UserProfile;
+  Layout?: React.FC<LayoutProps>;
 };
 
 const IntegrationDetailsPage: React.FC<IntegrationDetailsPageProps> = ({
   user,
+  Layout = DefaultLayout,
 }) => {
   const dispatch: AppDispatch = useDispatch();
   const integrationId: string = useParams().id;
@@ -269,7 +272,7 @@ const IntegrationDetailsPage: React.FC<IntegrationDetailsPageProps> = ({
   }
 
   return (
-    <DefaultLayout user={user}>
+    <Layout user={user}>
       <Box>
         <Typography variant="h2" gutterBottom component="div">
           Integration Details
@@ -294,7 +297,7 @@ const IntegrationDetailsPage: React.FC<IntegrationDetailsPageProps> = ({
         )}
       </Box>
       {preview}
-    </DefaultLayout>
+    </Layout>
   );
 };
 

src/ui/common/src/components/pages/integrations/index.tsx

@@ -8,18 +8,23 @@ import { SupportedIntegrations } from '../../../utils/integrations';
 import AddIntegrations from '../../integrations/addIntegrations';
 import { ConnectedIntegrations } from '../../integrations/connectedIntegrations';
 import DefaultLayout from '../../layouts/default';
+import { LayoutProps } from '../types';
 
 type Props = {
   user: UserProfile;
+  Layout?: React.FC<LayoutProps>;
 };
 
-const IntegrationsPage: React.FC<Props> = ({ user }) => {
+const IntegrationsPage: React.FC<Props> = ({
+  user,
+  Layout = DefaultLayout,
+}) => {
   useEffect(() => {
     document.title = 'Integrations | Aqueduct';
   }, []);
 
   return (
-    <DefaultLayout user={user}>
+    <Layout user={user}>
       <Box>
         <Typography variant="h2" gutterBottom component="div">
           Integrations
@@ -40,7 +45,7 @@ const IntegrationsPage: React.FC<Props> = ({ user }) => {
           <ConnectedIntegrations user={user} />
         </Box>
       </Box>
-    </DefaultLayout>
+    </Layout>
   );
 };
 

src/ui/common/src/components/pages/types.d.ts

@@ -0,0 +1,5 @@
+export type LayoutProps = {
+  user: UserProfile;
+  contentWidth?: string;
+  children: React.ReactElement | React.ReactElement[];
+};

src/ui/common/src/components/pages/workflow/id/index.tsx

@@ -43,12 +43,17 @@ import { Button } from '../../../primitives/Button.styles';
 import ReactFlowCanvas from '../../../workflows/ReactFlowCanvas';
 import WorkflowStatusBar from '../../../workflows/StatusBar';
 import WorkflowHeader from '../../../workflows/workflowHeader';
+import { LayoutProps } from '../../types';
 
 type WorkflowPageProps = {
   user: UserProfile;
+  Layout?: React.FC<LayoutProps>;
 };
 
-const WorkflowPage: React.FC<WorkflowPageProps> = ({ user }) => {
+const WorkflowPage: React.FC<WorkflowPageProps> = ({
+  user,
+  Layout = DefaultLayout,
+}) => {
   const navigate = useNavigate();
   const dispatch: AppDispatch = useDispatch();
   const workflowId = useParams().id;
@@ -274,7 +279,7 @@ const WorkflowPage: React.FC<WorkflowPageProps> = ({ user }) => {
   };
 
   return (
-    <DefaultLayout user={user}>
+    <Layout user={user}>
       <Box
         sx={{
           display: 'flex',
@@ -321,7 +326,7 @@ const WorkflowPage: React.FC<WorkflowPageProps> = ({ user }) => {
       )}
 
       <WorkflowStatusBar user={user} />
-    </DefaultLayout>
+    </Layout>
   );
 };
 

src/ui/common/src/components/pages/workflows/index.tsx

@@ -10,12 +10,14 @@ import UserProfile from '../../../utils/auth';
 import { LoadingStatusEnum } from '../../../utils/shared';
 import DefaultLayout from '../../layouts/default';
 import WorkflowCard from '../../workflows/workflowCard';
+import { LayoutProps } from '../types';
 
 type Props = {
   user: UserProfile;
+  Layout?: React.FC<LayoutProps>;
 };
 
-const WorkflowsPage: React.FC<Props> = ({ user }) => {
+const WorkflowsPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
   const dispatch: AppDispatch = useDispatch();
   useEffect(() => {
     document.title = 'Workflows | Aqueduct';
@@ -72,13 +74,12 @@ const WorkflowsPage: React.FC<Props> = ({ user }) => {
     );
 
   return (
-    <DefaultLayout user={user}>
-      <></>
+    <Layout user={user}>
       <Box p={2}>
         {heading}
         {workflowList}
       </Box>
-    </DefaultLayout>
+    </Layout>
   );
 };