feat(propagation): Add Documentation Propagation Settings (#11038)

datahub-web-react/src/app/settings/SettingsPage.tsx

@@ -8,6 +8,7 @@ import {
     FilterOutlined,
     TeamOutlined,
     PushpinOutlined,
+    ControlOutlined,
 } from '@ant-design/icons';
 import { Redirect, Route, useHistory, useLocation, useRouteMatch, Switch } from 'react-router';
 import styled from 'styled-components';
@@ -17,11 +18,17 @@ import { ManagePermissions } from '../permissions/ManagePermissions';
 import { useAppConfig } from '../useAppConfig';
 import { AccessTokens } from './AccessTokens';
 import { Preferences } from './Preferences';
+import { Features } from './features/Features';
 import { ManageViews } from '../entity/view/ManageViews';
 import { useUserContext } from '../context/useUserContext';
 import { ManageOwnership } from '../entity/ownership/ManageOwnership';
 import ManagePosts from './posts/ManagePosts';
 
+const MenuItem = styled(Menu.Item)`
+    display: flex;
+    align-items: center;
+`;
+
 const PageContainer = styled.div`
     display: flex;
     overflow: auto;
@@ -59,6 +66,17 @@ const ItemTitle = styled.span`
 
 const menuStyle = { width: 256, 'margin-top': 8, overflow: 'hidden auto' };
 
+const NewTag = styled.span`
+    padding: 4px 8px;
+    margin-left: 8px;
+
+    border-radius: 24px;
+    background: #f1fbfe;
+
+    color: #09739a;
+    font-size: 12px;
+`;
+
 /**
  * URL Paths for each settings page.
  */
@@ -70,6 +88,7 @@ const PATHS = [
     { path: 'views', content: <ManageViews /> },
     { path: 'ownership', content: <ManageOwnership /> },
     { path: 'posts', content: <ManagePosts /> },
+    { path: 'features', content: <Features /> },
 ];
 
 /**
@@ -80,6 +99,7 @@ const DEFAULT_PATH = PATHS[0];
 export const SettingsPage = () => {
     const { path, url } = useRouteMatch();
     const { pathname } = useLocation();
+
     const history = useHistory();
     const subRoutes = PATHS.map((p) => p.path.replace('/', ''));
     const currPathName = pathname.replace(path, '');
@@ -101,6 +121,7 @@ export const SettingsPage = () => {
     const showViews = isViewsEnabled || false;
     const showOwnershipTypes = me && me?.platformPrivileges?.manageOwnershipTypes;
     const showHomePagePosts = me && me?.platformPrivileges?.manageGlobalAnnouncements && !readOnlyModeEnabled;
+    const showFeatures = true; // TODO: Add feature flag for this
 
     return (
         <PageContainer>
@@ -143,6 +164,13 @@ export const SettingsPage = () => {
                     )}
                     {(showViews || showOwnershipTypes || showHomePagePosts) && (
                         <Menu.ItemGroup title="Manage">
+                            {showFeatures && (
+                                <MenuItem key="features">
+                                    <ControlOutlined />
+                                    <ItemTitle>Features</ItemTitle>
+                                    <NewTag>New!</NewTag>
+                                </MenuItem>
+                            )}
                             {showViews && (
                                 <Menu.Item key="views">
                                     <FilterOutlined /> <ItemTitle>My Views</ItemTitle>

datahub-web-react/src/app/settings/features/Feature.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import { Divider, Typography, Switch, Card, Button, Tooltip } from 'antd';
+import { ArrowRightOutlined } from '@ant-design/icons';
+import { ANTD_GRAY } from '../../entity/shared/constants';
+
+const Title = styled(Typography.Title)`
+    && {
+        margin-bottom: 8px;
+    }
+`;
+
+const FeatureRow = styled.div`
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+`;
+
+const FeatureOptionRow = styled.div`
+    display: flex;
+    justify-content: space-between;
+
+    &:not(:last-child) {
+        margin-bottom: 8px;
+    }
+`;
+
+const SettingsOptionRow = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+
+    &:not(:last-child) {
+        margin-bottom: 8px;
+    }
+`;
+
+const DescriptionText = styled(Typography.Text)`
+    color: ${ANTD_GRAY[7]};
+    font-size: 11px;
+`;
+
+const SettingTitle = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    margin-bottom: 4px;
+`;
+
+const OptionTitle = styled(Typography.Text)`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+`;
+
+const learnMoreLinkStyle = {
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    color: '#1890FF',
+    fontSize: '12px',
+    cursor: 'pointer',
+};
+
+const NewTag = styled.div`
+    padding: 4px 8px;
+
+    border-radius: 24px;
+    background: #f1fbfe;
+
+    color: #09739a;
+    font-size: 12px;
+`;
+
+const DataHubOnlyTag = styled.div`
+    padding: 2px 8px;
+
+    border-radius: 24px;
+    background: #c9fff2;
+
+    color: #50a494;
+    font-size: 12px;
+`;
+
+export interface FeatureType {
+    key: string;
+    title: string;
+    description: string;
+    settings: Array<{
+        key: string;
+        title: string;
+        isAvailable: boolean;
+        buttonText: string;
+        onClick?: () => void;
+    }>;
+    options: Array<{
+        key: string;
+        title: string;
+        description: string;
+        isAvailable: boolean;
+        checked: boolean;
+        onChange?: (checked: boolean) => void;
+    }>;
+    isNew: boolean;
+    learnMoreLink?: string;
+}
+
+export const Feature = ({ key, title, description, settings, options, isNew, learnMoreLink }: FeatureType) => (
+    <Card style={{ marginBottom: '1rem' }} key={key}>
+        <FeatureRow>
+            <div style={{ flex: 1 }}>
+                <SettingTitle>
+                    <Title level={5} style={{ marginBottom: 0 }}>
+                        {title}
+                    </Title>
+                    {isNew && <NewTag>New!</NewTag>}
+                </SettingTitle>
+                <div>
+                    <Typography.Paragraph type="secondary">{description}</Typography.Paragraph>
+                </div>
+            </div>
+            <div>
+                {learnMoreLink && (
+                    <a href={learnMoreLink} target="_blank" style={learnMoreLinkStyle} rel="noreferrer">
+                        Learn more <ArrowRightOutlined />
+                    </a>
+                )}
+            </div>
+        </FeatureRow>
+        <Divider style={{ margin: `8px 0 24px 0` }} />
+        {settings.map((option) => (
+            <>
+                <SettingsOptionRow key={option.key}>
+                    <span>
+                        <OptionTitle>
+                            <span>{option.title}</span>
+                        </OptionTitle>
+                    </span>
+                    <Tooltip title={option.isAvailable ? '' : 'Only available on DataHub Cloud'}>
+                        <Button onClick={option.onClick} disabled={!option.isAvailable}>
+                            {option.buttonText}
+                        </Button>
+                    </Tooltip>
+                </SettingsOptionRow>
+            </>
+        ))}
+        <Card style={{ margin: `16px auto` }}>
+            {options.map((option, index) => (
+                <>
+                    <FeatureOptionRow key={option.key}>
+                        <span>
+                            <OptionTitle>
+                                <span>{option.title}</span>
+                                {!option.isAvailable && (
+                                    <DataHubOnlyTag>Only available on DataHub Cloud</DataHubOnlyTag>
+                                )}
+                            </OptionTitle>
+                            <div>
+                                <DescriptionText>{option.description}</DescriptionText>
+                            </div>
+                        </span>
+                        <Switch
+                            checked={option.checked}
+                            onChange={(checked) => (option.onChange ? option.onChange(checked) : null)}
+                            disabled={!option.isAvailable}
+                        />
+                    </FeatureOptionRow>
+                    {index !== options.length - 1 && <Divider />}
+                </>
+            ))}
+        </Card>
+    </Card>
+);

datahub-web-react/src/app/settings/features/Features.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import { Divider, Typography } from 'antd';
+import { v4 as uuidv4 } from 'uuid';
+
+import { Feature, FeatureType } from './Feature';
+
+import { useGetDocPropagationSettings, useUpdateDocPropagationSettings } from './useDocPropagationSettings';
+
+const Page = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: center;
+`;
+
+const SourceContainer = styled.div`
+    width: 80%;
+    padding-top: 20px;
+    padding-right: 40px;
+    padding-left: 40px;
+`;
+const Container = styled.div`
+    padding-top: 0px;
+`;
+
+const Title = styled(Typography.Title)`
+    && {
+        margin-bottom: 8px;
+    }
+`;
+
+export const Features = () => {
+    /*
+     * Note: When adding new features, make sure to update the features array below
+     * and create a hook file for the new feature in the same directory
+     */
+
+    // Hooks to get and update the document propagation settings
+    const { isColPropagateChecked, setIsColPropagateChecked } = useGetDocPropagationSettings();
+    const { updateDocPropagation } = useUpdateDocPropagationSettings();
+
+    // Features to display
+    const features: FeatureType[] = [
+        {
+            key: uuidv4(),
+            title: 'Documentation Propagation',
+            description: 'Automatically propagate documentation from upstream to downstream columns and assets.',
+            settings: [
+                {
+                    key: uuidv4(),
+                    title: 'Rollback Propagation Changes',
+                    isAvailable: false,
+                    buttonText: 'Rollback',
+                },
+                {
+                    key: uuidv4(),
+                    title: 'Backfill existing documentation from upstream to downstream columns/assets',
+                    isAvailable: false,
+                    buttonText: 'Initialize',
+                },
+            ],
+            options: [
+                {
+                    key: uuidv4(),
+                    title: 'Column Level Propagation',
+                    description:
+                        'Propagate new documentation from upstream to downstream columns based on column-level lineage relationships.',
+                    isAvailable: true,
+                    checked: isColPropagateChecked,
+                    onChange: (checked: boolean) => {
+                        setIsColPropagateChecked(checked);
+                        updateDocPropagation(checked);
+                    },
+                },
+                {
+                    key: uuidv4(),
+                    title: 'Asset Level Propagation',
+                    description:
+                        'Propagate new documentation from upstream to downstream assets based on data lineage relationships.',
+                    isAvailable: false,
+                    checked: false,
+                },
+            ],
+            isNew: true,
+            learnMoreLink: 'https://datahubproject.io/docs/automations/doc-propagation',
+        },
+    ];
+
+    // Render
+    return (
+        <Page>
+            <SourceContainer>
+                <Container>
+                    <div>
+                        <Title level={2}>Features</Title>
+                        <Typography.Paragraph type="secondary">
+                            Explore and configure specific features
+                        </Typography.Paragraph>
+                    </div>
+                </Container>
+                <Divider />
+                {features.map((feature) => (
+                    <Feature {...feature} />
+                ))}
+            </SourceContainer>
+        </Page>
+    );
+};

datahub-web-react/src/app/settings/features/useDocPropagationSettings.ts

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+
+import { message } from 'antd';
+
+import {
+    useGetDocPropagationSettingsQuery,
+    useUpdateDocPropagationSettingsMutation,
+} from '../../../graphql/app.generated';
+
+// Hook to get the document propagation settings & manage state
+export const useGetDocPropagationSettings = () => {
+    const { data, refetch } = useGetDocPropagationSettingsQuery();
+    const [isColPropagateChecked, setIsColPropagateChecked] = useState<boolean>(false);
+
+    useEffect(() => {
+        const docPropSetting = data?.docPropagationSettings?.docColumnPropagation;
+        if (docPropSetting !== undefined) setIsColPropagateChecked(!!docPropSetting);
+    }, [data]);
+
+    return {
+        isColPropagateChecked,
+        setIsColPropagateChecked,
+        refetch,
+    };
+};
+
+// Hook to update the document propagation settings
+export const useUpdateDocPropagationSettings = () => {
+    const [updateDocPropagationSettings] = useUpdateDocPropagationSettingsMutation();
+    const { refetch } = useGetDocPropagationSettingsQuery();
+
+    const updateDocPropagation = async (checked: boolean) => {
+        try {
+            await updateDocPropagationSettings({
+                variables: {
+                    input: {
+                        docColumnPropagation: checked,
+                    },
+                },
+            });
+            refetch();
+            message.success('Successfully updated documentation propagation settings');
+        } catch (e) {
+            message.error('Failed to update documentation propagation settings');
+            refetch();
+        }
+    };
+
+    return { updateDocPropagation };
+};

datahub-web-react/src/graphql/app.graphql

@@ -89,6 +89,16 @@ query getGlobalViewsSettings {
     }
 }
 
+query getDocPropagationSettings {
+    docPropagationSettings {
+        docColumnPropagation
+    }
+}
+
 mutation updateGlobalViewsSettings($input: UpdateGlobalViewsSettingsInput!) {
     updateGlobalViewsSettings(input: $input)
 }
+
+mutation updateDocPropagationSettings($input: UpdateDocPropagationSettingsInput!) {
+    updateDocPropagationSettings(input: $input)
+}