feat: add banner to dev to indicate it is a dev site (#3147)

components/Layout/components/Header/content/developmentModeBanner.mdx

@@ -0,0 +1,3 @@
+<Banner {...props}>
+  <span>This is a development site. To view the production site, please visit https://anvilproject.org/.</span>
+</Banner>

components/Layout/components/Header/content/index.tsx

@@ -0,0 +1 @@
+export { default as DevelopmentModeBanner } from "./developmentModeBanner.mdx";

components/index.tsx

@@ -1,5 +1,6 @@
 export { Alert } from "@databiosphere/findable-ui/lib/components/common/Alert/alert";
 export { AnchorLink } from "@databiosphere/findable-ui/lib/components/common/AnchorLink/anchorLink";
+export { Banner } from "@databiosphere/findable-ui/lib/components/common/Banner/banner";
 export { Breadcrumbs } from "@databiosphere/findable-ui/lib/components/common/Breadcrumbs/breadcrumbs";
 export { CallToActionButton } from "@databiosphere/findable-ui/lib/components/common/Button/components/CallToActionButton/callToActionButton";
 export { Card } from "@databiosphere/findable-ui/lib/components/common/Card/card";

mdx-components.tsx

@@ -0,0 +1,11 @@
+import { MDXComponents } from "mdx/types";
+import * as C from "./components";
+import { Link } from "./components/common/Link/link";
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+    Banner: C.Banner,
+    a: Link,
+  };
+}

package.json

@@ -25,7 +25,6 @@
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
     "@next/mdx": "^14.1.0",
-    "@types/mdx": "^2.0.11",
     "copy-to-clipboard": "3.3.1",
     "echarts": "^5.3.3",
     "echarts-for-react": "^3.0.2",
@@ -45,6 +44,7 @@
     "@mui/types": "^7.2.18",
     "@next/eslint-plugin-next": "^14.1.0",
     "@types/jest": "^29.4.0",
+    "@types/mdx": "^2.0.11",
     "@types/node": "^20.10.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",

site-config/anvil-portal/dev/announcements/announcements.ts

@@ -0,0 +1,15 @@
+import { ALERT_PROPS } from "@databiosphere/findable-ui/lib/components/common/Banner/constants";
+import {
+  ComponentConfig,
+  ComponentsConfig,
+} from "@databiosphere/findable-ui/lib/config/entities";
+import * as MDX from "../../../../components/Layout/components/Header/content";
+
+export const announcements: ComponentsConfig = [
+  {
+    component: MDX.DevelopmentModeBanner,
+    props: {
+      ...ALERT_PROPS,
+    },
+  } as ComponentConfig<typeof MDX.DevelopmentModeBanner>,
+];

site-config/anvil-portal/dev/config.ts

@@ -4,6 +4,7 @@ import * as C from "../../../components";
 import { ROUTES } from "../../../routes/constants";
 import { FLATTEN, VISIBLE } from "../../common/constants";
 import { SiteConfig } from "../../common/entities";
+import { announcements } from "./announcements/announcements";
 import { buildMenuItems } from "./common/utils";
 import { CONSORTIA } from "./navigation/consortia";
 import { FAQ } from "./navigation/faq";
@@ -47,6 +48,7 @@ export function makeConfig(browserUrl: string, portalUrl: string): SiteConfig {
         socials: socialMedia.socials,
       },
       header: {
+        announcements,
         authenticationEnabled: false,
         logo: C.Logo({
           alt: APP_TITLE,

site-config/anvil-portal/prod/config.ts

@@ -13,4 +13,8 @@ const config: SiteConfig = {
   },
 };
 
+if (config.layout.header.announcements) {
+  config.layout.header.announcements = undefined;
+}
+
 export default config;