eng-1247 account page (#110)

Author: eunice-chan

Diff for: src/ui/app/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route, Link, Navigate, useLocation } from "react-router-dom";
 import { Thing } from '../.';
-import { HomePage, DataPage, IntegrationsPage, IntegrationDetailsPage, WorkflowPage, WorkflowsPage, LoginPage } from '@aqueducthq/common';
+import { HomePage, DataPage, IntegrationsPage, IntegrationDetailsPage, WorkflowPage, WorkflowsPage, LoginPage, AccountPage } from '@aqueducthq/common';
 import { store } from './stores/store';
 import { Provider } from 'react-redux';
 import { useUser, UserProfile } from '@aqueducthq/common';
@@ -33,6 +33,7 @@ const App = () => {
       <Route path="/integration/:id" element={<RequireAuth user={user}><IntegrationDetailsPage user={user} /> </RequireAuth>} />
       <Route path="/workflows" element={<RequireAuth user={user}><WorkflowsPage user={user} /> </RequireAuth>} />
       <Route path="/login" element={ user && user.apiKey ? <Navigate to="/" replace /> : <LoginPage />} />
+      <Route path="/account" element={<RequireAuth user={user}><AccountPage user={user} /> </RequireAuth>} />
       <Route path="/workflow/:id" element={<RequireAuth user={user}><WorkflowPage user={user} /> </RequireAuth>} />
     </Routes>
   );

Diff for: src/ui/common/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@aqueducthq/common",
   "author": "Aqueduct <[email protected]",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "alias": {

Diff for: src/ui/common/package.json

@@ -0,0 +1,22 @@
+import React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { docco } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+
+type Props = {
+  language: string;
+  children: any;
+};
+
+export const CodeBlock: React.FC<Props> = ({ language, children }) => {
+  return (
+    <SyntaxHighlighter
+      language={language}
+      style={docco}
+      customStyle={{ borderRadius: 4, padding: '15px' }}
+    >
+      {children}
+    </SyntaxHighlighter>
+  );
+};
+
+export default CodeBlock;

Diff for: src/ui/common/src/components/layouts/codeblock.tsx

@@ -0,0 +1,58 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import React, { useEffect } from 'react';
+
+import UserProfile from '../../utils/auth';
+import { useAqueductConsts } from '../hooks/useAqueductConsts';
+import CodeBlock from '../layouts/codeblock';
+import DefaultLayout from '../layouts/default';
+
+type AccountPageProps = {
+  user: UserProfile;
+};
+
+const AccountPage: React.FC<AccountPageProps> = ({ user }) => {
+  // Set the title of the page on page load.
+  useEffect(() => {
+    document.title = 'Account | Aqueduct';
+  }, []);
+
+  const { apiAddress } = useAqueductConsts();
+  const serverAddress = apiAddress ? `${apiAddress}` : '<server address>';
+  const apiConnectionSnippet = `import aqueduct
+client = aqueduct.Client(
+    "${user.apiKey}",
+    "${serverAddress}"
+)`;
+  const maxContentWidth = '600px';
+
+  return (
+    <DefaultLayout user={user}>
+      <Typography variant="h2" gutterBottom component="div">
+        Account Overview
+      </Typography>
+
+      <Typography variant="h5" sx={{ mt: 3 }}>
+        API Key
+      </Typography>
+      <Box sx={{ my: 1 }}>
+        <code>{user.apiKey}</code>
+      </Box>
+
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: maxContentWidth,
+        }}
+      >
+        <Typography variant="body1" sx={{ fontWeight: 'bold', mr: '8px' }}>
+          Python SDK Connection Snippet
+        </Typography>
+        <CodeBlock language="python">{apiConnectionSnippet}</CodeBlock>
+      </Box>
+    </DefaultLayout>
+  );
+};
+
+export default AccountPage;

Diff for: src/ui/common/src/components/pages/AccountPage.tsx

@@ -29,6 +29,7 @@ import { RedshiftDialog } from './components/integrations/dialogs/redshiftDialog
 import { S3Dialog } from './components/integrations/dialogs/s3Dialog';
 import { SnowflakeDialog } from './components/integrations/dialogs/snowflakeDialog';
 import { Card } from './components/layouts/card';
+import CodeBlock from './components/layouts/codeblock';
 import DataPreviewer from './components/layouts/data_previewer';
 import DefaultLayout, { MenuSidebarOffset } from './components/layouts/default';
 import MenuSidebar, {
@@ -48,6 +49,7 @@ import AqueductSidebar, {
 } from './components/layouts/sidebar/AqueductSidebar';
 import { NotificationListItem } from './components/notifications/NotificationListItem';
 import NotificationsPopover from './components/notifications/NotificationsPopover';
+import AccountPage from './components/pages/AccountPage';
 import DataPage from './components/pages/data';
 import { getServerSideProps } from './components/pages/getServerSideProps';
 import HomePage from './components/pages/HomePage';
@@ -206,6 +208,7 @@ import {
 } from './utils/workflows';
 
 export {
+  AccountPage,
   AddIntegrations,
   addTable,
   AddTableDialog,
@@ -230,6 +233,7 @@ export {
   CheckLevel,
   CheckOperatorNode,
   CheckStatus,
+  CodeBlock,
   CollapsedSidebarHeightInPx,
   CollapsedSidebarWidthInPx,
   CollapsedStatusBarWidthInPx,