feat(ui) Add ability to edit global template on homepage

Author: chriscollins3456

datahub-web-react/src/alchemy-components/components/ActionsBar/ActionsBar.stories.tsx

@@ -0,0 +1,74 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import styled from 'styled-components';
+
+import { ActionsBar, ActionsBarProps } from '@components/components/ActionsBar/ActionsBar';
+import { Button } from '@components/components/Button';
+import { Drawer } from '@components/components/Drawer/Drawer';
+import { Icon } from '@components/components/Icon';
+import colors from '@components/theme/foundations/colors';
+
+// Auto Docs
+const meta = {
+    title: 'Components / ActionsBar',
+    component: ActionsBar,
+
+    // Display Properties
+    parameters: {
+        layout: 'centered',
+        badges: [BADGE.EXPERIMENTAL],
+        docs: {
+            subtitle: 'A floating actions bar on the bottom of the screen that renders its children inside.',
+        },
+    },
+
+    // Component-level argTypes
+    argTypes: {},
+
+    // Define default args
+    args: {},
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+
+// Stories
+
+type Story = StoryObj<typeof meta>;
+
+const Warning = styled.div`
+    padding: 8pxs
+    background-color: ${colors.red[0]};
+    color: ${colors.red[1000]};
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    font-size: 14px;
+    border-radius: 8px;
+`;
+
+const Wrapper = styled.div`
+    min-width: 600px;
+    height: 50px;
+`;
+
+const WrappedActionsBar = ({ ...props }: ActionsBarProps) => {
+    return (
+        <Wrapper>
+            <ActionsBar {...props}>
+                <Warning>
+                    <Icon icon="ExclamationMark" color="red" weight="fill" source="phosphor" />
+                    <span>Editing default user view</span>
+                </Warning>
+                <Button>Done</Button>
+            </ActionsBar>
+        </Wrapper>
+    );
+};
+// Basic story is what is displayed 1st in storybook
+// Pass props to this so that it can be customized via the UI props panel
+export const sandbox: Story = {
+    tags: ['dev'],
+    render: () => <WrappedActionsBar />,
+};

datahub-web-react/src/alchemy-components/components/ActionsBar/ActionsBar.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ActionsContainer = styled.div`
+    display: flex;
+    padding: 4px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    width: fit-content;
+    align-self: center;
+    border-radius: 12px;
+    box-shadow: 0px 4px 12px 0px rgba(9, 1, 61, 0.12);
+
+    background-color: white;
+    position: absolute;
+    left: 50%;
+    bottom: 2px;
+    transform: translateX(-55%);
+`;
+
+export type ActionsBarProps = {};
+
+export const ActionsBar = ({ children }: React.PropsWithChildren<ActionsBarProps>) => {
+    return <ActionsContainer>{children}</ActionsContainer>;
+};

datahub-web-react/src/alchemy-components/components/ActionsBar/index.ts

@@ -0,0 +1 @@
+export { ActionsBar } from './ActionsBar';

datahub-web-react/src/alchemy-components/index.ts

@@ -2,6 +2,7 @@
 export * from './theme';
 
 // example usage: import { Button } from '@components';
+export * from './components/ActionsBar';
 export * from './components/AutoComplete';
 export * from './components/Avatar';
 export * from './components/Badge';

datahub-web-react/src/app/homeV3/EditDefaultTemplateBar.tsx

@@ -0,0 +1,36 @@
+import { Button, Icon, Tooltip, colors } from '@components';
+import React from 'react';
+import styled from 'styled-components';
+
+import { ActionsBar } from '@components/components/ActionsBar/ActionsBar';
+
+import { usePageTemplateContext } from '@app/homeV3/context/PageTemplateContext';
+
+const Warning = styled.div`
+    padding: 8px;
+    background-color: ${colors.red[0]};
+    color: ${colors.red[1000]};
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    font-size: 14px;
+    border-radius: 8px;
+`;
+
+export default function EditDefaultTemplateBar() {
+    const { setIsEditingGlobalTemplate, isEditingGlobalTemplate } = usePageTemplateContext();
+
+    // TODO: also hide this if you don't have permissions - CH-510
+    if (!isEditingGlobalTemplate) return null;
+
+    return (
+        <ActionsBar>
+            <Warning>
+                <Icon icon="ExclamationMark" color="red" weight="fill" source="phosphor" />
+                <span>Editing default user view</span>
+            </Warning>
+            <Button onClick={() => setIsEditingGlobalTemplate(false)}>Done</Button>
+        </ActionsBar>
+    );
+}

datahub-web-react/src/app/homeV3/EditDefaultTemplateButton.tsx

@@ -0,0 +1,29 @@
+import { Button, Tooltip } from '@components';
+import React from 'react';
+import styled from 'styled-components';
+
+import { usePageTemplateContext } from '@app/homeV3/context/PageTemplateContext';
+
+const ButtonWrapper = styled.div`
+    display: flex;
+    justify-content: flex-end;
+`;
+
+export default function EditDefaultTemplateButton() {
+    const { setIsEditingGlobalTemplate, isEditingGlobalTemplate } = usePageTemplateContext();
+
+    // TODO: also hide this if you don't have permissions - CH-510
+    if (isEditingGlobalTemplate) return null;
+
+    return (
+        <ButtonWrapper>
+            <Tooltip title="Edit the home page that users see by default">
+                <Button
+                    icon={{ icon: 'PencilSimpleLine', color: 'gray', source: 'phosphor' }}
+                    variant="text"
+                    onClick={() => setIsEditingGlobalTemplate(true)}
+                />
+            </Tooltip>
+        </ButtonWrapper>
+    );
+}

datahub-web-react/src/app/homeV3/HomePageContent.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { useGlobalSettings } from '@app/context/GlobalSettingsContext';
 import { useUserContext } from '@app/context/useUserContext';
+import EditDefaultTemplateBar from '@app/homeV3/EditDefaultTemplateBar';
+import EditDefaultTemplateButton from '@app/homeV3/EditDefaultTemplateButton';
 import { Announcements } from '@app/homeV3/announcements/Announcements';
 import { PageTemplateProvider } from '@app/homeV3/context/PageTemplateContext';
 import { CenteredContainer, ContentContainer, ContentDiv } from '@app/homeV3/styledComponents';
@@ -21,8 +23,10 @@ const HomePageContent = () => {
             <ContentContainer>
                 <CenteredContainer>
                     <ContentDiv>
+                        <EditDefaultTemplateButton />
                         <Announcements />
                         <Template />
+                        <EditDefaultTemplateBar />
                     </ContentDiv>
                 </CenteredContainer>
             </ContentContainer>