Restyled top bar and side nav

src/app/Layout.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { Box, Toolbar, useMediaQuery, useTheme } from '@mui/material';
+import { Box, useMediaQuery, useTheme } from '@mui/material';
 
 import { useShallow } from 'zustand/react/shallow';
 
@@ -10,6 +10,7 @@ import { useLocalStorage } from 'react-use';
 
 import { Toast } from 'src/components/AgentSkills/Toast';
 import Navigation from 'src/components/navigation/Navigation';
+import Topbar from 'src/components/navigation/TopBar';
 import ErrorBoundryWrapper from 'src/components/shared/ErrorBoundryWrapper';
 import PageContainer from 'src/components/shared/PageContainer';
 import DocsSidePanel from 'src/components/sidePanelDocs/SidePanel';
@@ -55,16 +56,11 @@ function AppLayout() {
         showDocs && !belowMd && hasLength(docsURL)
     );
 
-    // We want to control the flex and not size as it seems to work better
-    //  when showing/hiding and also allows a sort of percentage view instead
-    //  of hardcoded size values
     useEffect(() => {
         setLeftPaneFlex(displaySidePanel ? 0.7 : 1.0);
         setRightPaneFlex(displaySidePanel ? 0.3 : 0.0);
     }, [displaySidePanel]);
 
-    // So the transition does not mess with a user resizing the elements
-    //  and during initial load of the app
     const resizeHandlers = {
         start: () => {
             setAnimateOpening(false);
@@ -75,38 +71,47 @@ function AppLayout() {
     };
 
     return (
-        <Box sx={{ height: '100vh' }}>
-            <Box>
-                <Navigation
-                    open={navigationOpen}
-                    width={navigationWidth}
-                    onNavigationToggle={toggleNavigationDrawer}
-                />
+        <Box
+            sx={{
+                display: 'grid',
+                gridTemplateColumns: `${navigationWidth}px 1fr`,
+                gridTemplateRows: 'auto 1fr',
+                height: '100vh',
+                transition: (t) =>
+                    `grid-template-columns ${t.transitions.duration.shortest}ms`,
+            }}
+        >
+            <Box sx={{ gridColumn: '1 / -1' }}>
+                <Topbar navigationOpen={navigationOpen} />
             </Box>
 
+            <Navigation
+                open={navigationOpen}
+                width={navigationWidth}
+                onNavigationToggle={toggleNavigationDrawer}
+            />
+
             <Toast docsPanelOpen={displaySidePanel} />
 
-            <Box
-                sx={{
-                    ml: `${navigationWidth}px`,
-                    height: '100%',
-                }}
-            >
+            <Box sx={{ overflow: 'hidden', minWidth: 0 }}>
                 <ReflexContainer orientation="vertical">
                     <ReflexElement
                         className="left-pane"
                         minSize={theme.breakpoints.values.sm / 2}
                         flex={leftPaneFlex}
                         style={{
+                            overflow: 'hidden',
                             transitionDuration: animateOpening
                                 ? `${theme.transitions.duration.shortest}ms`
                                 : undefined,
                         }}
                     >
-                        <Box className="pane-content">
+                        <Box
+                            className="pane-content"
+                            sx={{ height: '100%' }}
+                        >
                             <ErrorBoundryWrapper>
-                                <Toolbar />
-                                <PageContainer>
+                                <PageContainer navigationOpen={navigationOpen}>
                                     <Outlet />
                                 </PageContainer>
                             </ErrorBoundryWrapper>

src/components/admin/Billing/TenantOptions.tsx

@@ -1,8 +1,7 @@
 import type { SelectableTableStore } from 'src/stores/Tables/Store';
 
-import { useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
-import TenantSelector from 'src/components/shared/TenantSelector';
 import { useZustandStore } from 'src/context/Zustand/provider';
 import { useBillingStore } from 'src/stores/Billing/Store';
 import { SelectTableStoreNames } from 'src/stores/names';
@@ -11,10 +10,12 @@ import {
     useBillingTable_setHydrationErrorsExist,
 } from 'src/stores/Tables/Billing/hooks';
 import { selectableTableStoreSelectors } from 'src/stores/Tables/Store';
+import { useTenantStore } from 'src/stores/Tenant/Store';
 
-function TenantOptions() {
-    const resetBillingState = useBillingStore((state) => state.resetState);
+function useTenantChangeReset() {
+    const selectedTenant = useTenantStore((state) => state.selectedTenant);
 
+    const resetBillingState = useBillingStore((state) => state.resetState);
     const setHydrated = useBillingTable_setHydrated();
     const setHydrationErrorsExist = useBillingTable_setHydrationErrorsExist();
 
@@ -23,9 +24,8 @@ function TenantOptions() {
         SelectableTableStore['resetState']
     >(SelectTableStoreNames.BILLING, selectableTableStoreSelectors.state.reset);
 
-    const updateStoreState = useCallback(() => {
+    const resetStores = useCallback(() => {
         resetBillingState();
-
         resetBillingSelectTableState(false);
         setHydrated(false);
         setHydrationErrorsExist(false);
@@ -36,7 +36,13 @@ function TenantOptions() {
         setHydrationErrorsExist,
     ]);
 
-    return <TenantSelector updateStoreState={updateStoreState} />;
+    const previousTenant = useRef(selectedTenant);
+    useEffect(() => {
+        if (previousTenant.current !== selectedTenant) {
+            previousTenant.current = selectedTenant;
+            resetStores();
+        }
+    }, [selectedTenant, resetStores]);
 }
 
-export default TenantOptions;
+export default useTenantChangeReset;

src/components/admin/Billing/index.tsx

@@ -19,7 +19,7 @@ import BillingLoadError from 'src/components/admin/Billing/LoadError';
 import PaymentMethods from 'src/components/admin/Billing/PaymentMethods';
 import PricingTierDetails from 'src/components/admin/Billing/PricingTierDetails';
 import { INVOICE_ROW_HEIGHT } from 'src/components/admin/Billing/shared';
-import TenantOptions from 'src/components/admin/Billing/TenantOptions';
+import useTenantChangeReset from 'src/components/admin/Billing/TenantOptions';
 import AdminTabs from 'src/components/admin/Tabs';
 import GraphLoadingState from 'src/components/graphs/states/Loading';
 import GraphStateWrapper from 'src/components/graphs/states/Wrapper';
@@ -48,6 +48,8 @@ function AdminBilling({ showAddPayment }: AdminBillingProps) {
         headerLink: 'https://www.estuary.dev/pricing/',
     });
 
+    useTenantChangeReset();
+
     const intl = useIntl();
 
     const selectedTenant = useTenantStore((state) => state.selectedTenant);
@@ -142,12 +144,6 @@ function AdminBilling({ showAddPayment }: AdminBillingProps) {
                     <PricingTierDetails />
                 </Grid>
 
-                <Grid
-                    size={{ xs: 12, md: 3 }}
-                    sx={{ display: 'flex', alignItems: 'end' }}
-                >
-                    <TenantOptions />
-                </Grid>
             </Grid>
 
             <Grid container spacing={{ xs: 3, md: 2 }} sx={{ p: 2 }}>

src/components/admin/Settings/index.tsx

@@ -1,11 +1,10 @@
-import { Divider, Grid, Stack } from '@mui/material';
+import { Divider, Stack } from '@mui/material';
 
 import { authenticatedRoutes } from 'src/app/routes';
 import DataPlanes from 'src/components/admin/Settings/DataPlanes';
 import PrefixAlerts from 'src/components/admin/Settings/PrefixAlerts';
 import { StorageMappings } from 'src/components/admin/Settings/StorageMappings';
 import AdminTabs from 'src/components/admin/Tabs';
-import TenantSelector from 'src/components/shared/TenantSelector';
 import usePageTitle from 'src/hooks/usePageTitle';
 
 function Settings() {
@@ -17,19 +16,6 @@ function Settings() {
         <>
             <AdminTabs />
 
-            <Grid
-                container
-                spacing={{ xs: 3, md: 2 }}
-                sx={{ p: 2, justifyContent: 'flex-end' }}
-            >
-                <Grid
-                    size={{ xs: 12, md: 3 }}
-                    sx={{ mt: 2.5, display: 'flex', alignItems: 'end' }}
-                >
-                    <TenantSelector />
-                </Grid>
-            </Grid>
-
             <PrefixAlerts />
 
             <Stack>

src/components/graphics/CompanyLogo.tsx

@@ -12,8 +12,8 @@ function CompanyLogo() {
     return (
         <img
             src={theme.palette.mode === 'dark' ? lightLogo : darkLogo}
-            height="30px"
-            width="150px"
+            height="25px"
+            width="125px"
             alt={intl.formatMessage({ id: 'company' })}
         />
     );

src/components/graphics/CompanyMark.tsx

@@ -0,0 +1,22 @@
+import { useTheme } from '@mui/material';
+
+import { useIntl } from 'react-intl';
+
+import darkMark from 'src/images/pictorial-marks/pictorial-mark__multi-blue.png';
+import lightMark from 'src/images/pictorial-marks/pictorial-mark__white.png';
+
+function CompanyMark() {
+    const intl = useIntl();
+    const theme = useTheme();
+
+    return (
+        <img
+            src={theme.palette.mode === 'dark' ? lightMark : darkMark}
+            height="21px"
+            style={{ marginTop: '3px' }}
+            alt={intl.formatMessage({ id: 'company' })}
+        />
+    );
+}
+
+export default CompanyMark;

src/components/home/dashboard/index.tsx

@@ -1,20 +1,10 @@
-import { Box, Grid } from '@mui/material';
+import { Grid } from '@mui/material';
 
 import EntityStatOverview from 'src/components/home/dashboard/EntityStatOverview';
-import TenantSelector from 'src/components/shared/TenantSelector';
 
 export default function Dashboard() {
     return (
         <Grid container spacing={{ xs: 2 }} style={{ marginTop: 16 }}>
-            <Grid
-                size={{ xs: 12 }}
-                sx={{ display: 'flex', justifyContent: 'flex-end' }}
-            >
-                <Box style={{ width: 300 }}>
-                    <TenantSelector />
-                </Box>
-            </Grid>
-
             <EntityStatOverview />
         </Grid>
     );

src/components/home/hero/Demo.tsx

@@ -1,10 +1,10 @@
-import { Grid } from '@mui/material';
+import { Button, Grid } from '@mui/material';
 
+import { OpenNewWindow } from 'iconoir-react';
 import { FormattedMessage } from 'react-intl';
 
 import DemoButton from 'src/components/home/hero/DemoButton';
 import DemoStep from 'src/components/home/hero/Steps/Demo';
-import ExternalLink from 'src/components/shared/ExternalLink';
 
 const DEMO_URL =
     'https://docs.google.com/spreadsheets/d/1Cd_afDejaVXKeGxSTCupKaTtrb3a7ZHBghTemDNKE5I/edit#gid=0';
@@ -33,17 +33,17 @@ function HeroDemo() {
                     mt: 3,
                 }}
             >
-                <ExternalLink
-                    color="primary"
-                    sx={{
-                        py: 1,
-                        px: 3,
-                    }}
+                <Button
                     variant="contained"
-                    link={DEMO_URL}
+                    color="primary"
+                    endIcon={<OpenNewWindow style={{ fontSize: 10 }} />}
+                    href={DEMO_URL}
+                    target="_blank"
+                    rel="noopener"
+                    sx={{ py: 1, px: 3 }}
                 >
                     <FormattedMessage id="home.hero.button" />
-                </ExternalLink>
+                </Button>
             </Grid>
         </>
     );

src/components/inputs/PrefixedName/index.tsx

@@ -169,16 +169,27 @@ function PrefixedName({
                         },
                 }}
             >
-                <PrefixSelector
-                    disabled={disabled}
-                    error={Boolean(prefixError)}
-                    label={label}
-                    labelId={INPUT_ID}
-                    onChange={(newValue) => handlers.setPrefix(newValue)}
-                    options={objectRoles}
-                    value={prefix}
-                    variantString={variantString}
-                />
+                {singleOption ? (
+                    <TextField
+                        disabled
+                        fullWidth
+                        variant={variantString}
+                        label={label}
+                        value={prefix}
+                        size="small"
+                    />
+                ) : (
+                    <PrefixSelector
+                        disabled={disabled}
+                        error={Boolean(prefixError)}
+                        label={label}
+                        labelId={INPUT_ID}
+                        onChange={(newValue) => handlers.setPrefix(newValue)}
+                        options={objectRoles}
+                        value={prefix}
+                        variantString={variantString}
+                    />
+                )}
 
                 <FormHelperText
                     id={DESCRIPTION_ID}

src/components/inputs/PrefixedName/useValidatePrefix.ts

@@ -9,6 +9,7 @@ import { useIntl } from 'react-intl';
 
 import { useEntityWorkflow } from 'src/context/Workflow';
 import { useEntitiesStore_capabilities_adminable } from 'src/stores/Entities/hooks';
+import { useTenantStore } from 'src/stores/Tenant/Store';
 import { hasLength } from 'src/utils/misc-utils';
 import { validateCatalogName } from 'src/validation';
 
@@ -39,20 +40,19 @@ function useValidatePrefix({
     const objectRoles = useEntitiesStore_capabilities_adminable(
         Boolean(workflow)
     );
-    const singleOption = objectRoles.length === 1;
-
-    // Fetch for the default value
-    // const [selectedTenant, setSelectedTenant] = useTenantStore(useShallow((state) => [
-    //     state.selectedTenant,
-    //     state.setSelectedTenant,
-    // ]));
+    const selectedTenant = useTenantStore((state) => state.selectedTenant);
+    const singleOption = objectRoles.length === 1 || hasLength(selectedTenant);
 
     // Local State for editing
     const [errors, setErrors] = useState<string | null>(null);
     const [name, setName] = useState('');
     const [nameError, setNameError] = useState<PrefixedName_Errors>(null);
     const [prefix, setPrefix] = useState(
-        singleOption || defaultPrefix ? objectRoles[0] : '' //selectedTenant
+        hasLength(selectedTenant)
+            ? selectedTenant
+            : singleOption || defaultPrefix
+              ? objectRoles[0]
+              : ''
     );
     const [prefixError, setPrefixError] = useState<PrefixedName_Errors>(null);