Add Hasura DDN Banners

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/11024
GitOrigin-RevId: c9370430559e827f233851d540e71abd04f2dd06

frontend/libs/console/legacy-ce/src/index.ts

@@ -21,7 +21,7 @@ export * from './lib/utils/console-dev-tools';
 export { ControlPlane };
 
 export { App as ConsoleCeApp } from './lib/client';
-
+export { DDNBanner } from './lib/components/Main/DDNBanner';
 export type {
   Metadata,
   SetOpenTelemetryQuery,

frontend/libs/console/legacy-ce/src/lib/components/Main/DDNBanner.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { CloseCircleFilled } from '@ant-design/icons';
+import { useLocalStorage } from '../../hooks';
+import ToolTip from '../Common/Tooltip/Tooltip';
+import {
+  sendTelemetryEvent,
+  telemetryUserEventsTracker,
+} from '../../telemetry';
+import { InitializeTelemetry } from '../../features/Analytics';
+import { FiExternalLink } from 'react-icons/fi';
+
+export const DDNBanner = () => {
+  const [isDismissed, setIsDimissed] = useLocalStorage(
+    'console:dismiss-ddn-banner',
+    false
+  );
+
+  if (isDismissed) return null;
+
+  return (
+    <>
+      <InitializeTelemetry tracker={telemetryUserEventsTracker} skip={false} />
+      <div
+        style={{
+          background: '#F0F4FF',
+          border: '1px solid #C6D6FF',
+          height: '2.5rem',
+        }}
+        className="flex content-center flex-wrap"
+      >
+        <div className="w-[90%] flex justify-center">
+          <span role="img" aria-label="celebrate-emoji" className="mr-1">
+            🎉
+          </span>
+          <span>
+            Hasura DDN, our next-gen platform, is now live with new powerful
+            features such as federation, lambda connectors, and faster CI/CD!
+          </span>
+          <span className="ml-xs">
+            <button
+              className="cursor-pointer underline flex items-center gap-1"
+              style={{
+                color: '#697187',
+              }}
+              onClick={() => {
+                sendTelemetryEvent({
+                  type: 'CLICK_EVENT',
+                  data: {
+                    id: 'learn-hasura-ddn',
+                  },
+                });
+                window.open(
+                  'https://hasura.io/why-upgrade-to-hasura-ddn?utm_source=hasura-ce&utm_medium=console&plcmt=banner-ticker'
+                );
+              }}
+            >
+              Learn more <FiExternalLink />
+            </button>
+          </span>
+        </div>
+        <div
+          className="flex w-[10%] justify-end px-sm mt-[-5px]"
+          style={{ alignItems: 'center' }}
+        >
+          <ToolTip message={"Don't show me this again"} placement="bottom">
+            <CloseCircleFilled
+              style={{ color: '#5d82e0a6' }}
+              className="cursor-pointer hover:scale-110"
+              onClick={() => {
+                setIsDimissed(true);
+              }}
+            />
+          </ToolTip>
+        </div>
+      </div>
+    </>
+  );
+};

frontend/libs/console/legacy-ce/src/lib/components/Main/Main.js

@@ -61,6 +61,7 @@ import { Badge } from './../../new-components/Badge';
 import { ConsoleDevTools } from '../../utils/console-dev-tools/ConsoleDevTools';
 import { isFeatureFlagEnabled } from '../../features/FeatureFlags/hooks/useFeatureFlags';
 import { availableFeatureFlagIds } from '../../features/FeatureFlags';
+import { DDNBanner } from './DDNBanner';
 
 export const updateRequestHeaders = props => {
   const { requestHeaders, dispatch } = props;
@@ -488,6 +489,7 @@ class Main extends React.Component {
               </div>
             </div>
           </div>
+          {globals.consoleMode === 'pro-lite' && <DDNBanner />}
           <div className={styles.main + ' container-fluid'}>
             {getMainContent()}
           </div>

frontend/libs/console/legacy-ce/src/lib/features/EETrial/components/NavbarButton.tsx

@@ -8,6 +8,34 @@ import { WithEEBenefits } from './BenefitsView/WithEEBenefits';
 import { getDaysFromNow } from '../utils';
 import { EnableEEButtonWrapper } from './EnableEnterpriseButton';
 import { Analytics } from '../../Analytics';
+import { Badge } from '../../../new-components/Badge';
+import { sendTelemetryEvent } from '../../../telemetry';
+
+const TryDDNButton = () => {
+  return (
+    <Button
+      mode="default"
+      size="md"
+      className="bg-none text-current pointer-effects-none bg-transparent border-[#f0f4ff] hover:border-[#f0f4ff] text-[#f0f4ff] text-sm hover:brightness-90"
+      onClick={() => {
+        sendTelemetryEvent({
+          type: 'CLICK_EVENT',
+          data: {
+            id: 'try-hasura-ddn',
+          },
+        });
+        window.open(
+          'https://console.hasura.io?utm_source=hasura-ce&utm_medium=console&plcmt=banner-button'
+        );
+      }}
+    >
+      <div className="flex items-center">
+        <Badge className="!rounded">NEW</Badge>
+        <span className="font-normal text-lg ml-xs">Hasura DDN</span>
+      </div>
+    </Button>
+  );
+};
 
 export const NavbarButton: React.VFC<{
   className?: string;
@@ -20,6 +48,14 @@ export const NavbarButton: React.VFC<{
     return null;
   }
 
+  if (access !== 'active') {
+    return (
+      <div className={props.className}>
+        <TryDDNButton />
+      </div>
+    );
+  }
+
   return (
     <div className={props.className}>
       <EnterpriseButton accessInfo={eeLite} />

frontend/libs/console/legacy-ee/src/lib/components/Main/Main.js

@@ -95,6 +95,7 @@ import {
   ConsoleDevTools,
   isFeatureFlagEnabled,
   availableFeatureFlagIds,
+  DDNBanner,
 } from '@hasura/console-legacy-ce';
 import { getAdminSecret } from '../AppState';
 
@@ -729,6 +730,7 @@ class Main extends React.Component {
               </div>
             </div>
           </div>
+          {globals.consoleType === 'pro-lite' && <DDNBanner />}
 
           <div className={styles.main + ' container-fluid'}>
             {getMainContent()}