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

Co-authored-by: david-leifker <114954101+david-leifker@users.noreply.github.com>
Co-authored-by: Chakru <161002324+chakru-r@users.noreply.github.com>

.github/workflows/build-and-test.yml

@@ -57,7 +57,7 @@ jobs:
           # We only need the timezone variation for frontend tests.
           - command: "frontend"
             timezone: "America/New_York"
-    runs-on: ${{ vars.DEPOT_PROJECT_ID != '' && 'depot-ubuntu-latest-2' || 'ubuntu-latest' }}
+    runs-on: ${{ vars.DEPOT_PROJECT_ID != '' && 'depot-ubuntu-latest-4' || 'ubuntu-latest' }}
     timeout-minutes: 60
     needs: setup
     steps:
@@ -107,14 +107,13 @@ jobs:
             -x :metadata-ingestion-modules:gx-plugin:check \
             -x :datahub-frontend:build \
             -x :datahub-web-react:build \
-            -x :metadata-integration:java:datahub-schematron:cli:test \
-            --parallel
+            -x :metadata-integration:java:datahub-schematron:cli:test
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
       - name: Gradle build (and test) for frontend
         if: ${{  matrix.command == 'frontend' && needs.setup.outputs.frontend_change == 'true' }}
         run: |
-          ./gradlew :datahub-frontend:build :datahub-web-react:build --parallel
+          ./gradlew :datahub-frontend:build :datahub-web-react:build
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
       - name: Gradle compile (jdk8) for legacy Spark

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 = { children?: React.ReactNode };
+
+export const ActionsBar = ({ children }: 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, 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>