feat(ui) Add banner on v1 home page to warn of v2 UI deprecation (#14131)

Author: chriscollins3456

datahub-web-react/src/app/home/DeprecationBanner.tsx

@@ -0,0 +1,35 @@
+import { Icon } from '@components';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import PageBanner from '@app/sharedV2/PageBanner';
+import { useIsThemeV2Toggleable } from '@app/useIsThemeV2';
+import { PageRoutes } from '@conf/Global';
+
+export default function DeprecationBanner() {
+    const [isThemeV2Toggleable] = useIsThemeV2Toggleable();
+
+    const linkContent = (
+        <span>
+            {String.fromCodePoint(128064)}&nbsp; DataHub has a new look! Preview it now under{' '}
+            <Link to={`${PageRoutes.SETTINGS}/preferences`}>Appearance &gt; Try New User Experience</Link> before the
+            current UI goes away with v1.3.0.
+        </span>
+    );
+    const staticContent = (
+        <>
+            {String.fromCodePoint(128064)}&nbsp; DataHub has a new look! Contact your Admin to unlock the new interface
+            before the current UI goes away with v1.3.0.
+        </>
+    );
+
+    const content = isThemeV2Toggleable ? linkContent : staticContent;
+
+    return (
+        <PageBanner
+            localStorageKey="v1UIDeprecationAnnouncement"
+            icon={<Icon icon="ExclamationMark" color="red" weight="fill" source="phosphor" />}
+            content={content}
+        />
+    );
+}

datahub-web-react/src/app/home/HomePage.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 
 import analytics, { EventType } from '@app/analytics';
+import DeprecationBanner from '@app/home/DeprecationBanner';
 import { HomePageBody } from '@app/home/HomePageBody';
 import { HomePageHeader } from '@app/home/HomePageHeader';
 import { OnboardingTour } from '@app/onboarding/OnboardingTour';
@@ -29,6 +30,7 @@ export const HomePage = () => {
                     HOME_PAGE_SEARCH_BAR_ID,
                 ]}
             />
+            <DeprecationBanner />
             <HomePageHeader />
             <HomePageBody />
         </>

datahub-web-react/src/app/sharedV2/PageBanner.tsx

@@ -0,0 +1,64 @@
+import { Button, colors } from '@components';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { FontColorOptions } from '@components/theme/config';
+
+const BannerWrapper = styled.div<{ $backgroundColor: string }>`
+    padding: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: ${({ $backgroundColor }) => $backgroundColor};
+`;
+
+const IconTextWrapper = styled.div`
+    display: flex;
+    gap: 16px;
+    align-items: center;
+`;
+
+const StyledButton = styled(Button)`
+    padding: 0;
+`;
+
+interface Props {
+    content: React.ReactNode;
+    localStorageKey: string;
+    icon?: React.ReactNode;
+    backgroundColor?: string;
+    exitColor?: FontColorOptions;
+}
+
+export default function PageBanner({
+    content,
+    localStorageKey,
+    icon,
+    backgroundColor = colors.red[0],
+    exitColor = 'red',
+}: Props) {
+    const [isBannerHidden, setIsBannerHidden] = useState(!!localStorage.getItem(localStorageKey));
+
+    function handleClose() {
+        localStorage.setItem(localStorageKey, 'true');
+        setIsBannerHidden(true);
+    }
+
+    if (isBannerHidden) return null;
+
+    return (
+        <BannerWrapper $backgroundColor={backgroundColor}>
+            <IconTextWrapper>
+                {icon}
+                {content}
+            </IconTextWrapper>
+            <StyledButton
+                icon={{ icon: 'X', color: exitColor, source: 'phosphor', size: '2xl' }}
+                variant="link"
+                onClick={handleClose}
+            />
+        </BannerWrapper>
+    );
+}