feat: add login nag when not logged in (#3624) (#3629)

Author: frano-m

explorer/app/content/anvil-cmg/index.tsx

@@ -3,6 +3,7 @@ export { Section } from "../../components/common/MDXMarkdown/components/Section/
 export { default as ExportToTerraStart } from "../common/exportToTerraStart.mdx";
 export { default as ExportToTerraSuccess } from "../common/exportToTerraSuccess.mdx";
 export { default as DataReleasePolicy } from "./dataReleasePolicy.mdx";
+export { default as LoginReminder } from "./loginReminder.mdx";
 export { default as LoginTermsOfService } from "./loginTermsOfService.mdx";
 export { default as LoginText } from "./loginText.mdx";
 export { default as LoginWarning } from "./loginWarning.mdx";

explorer/app/content/anvil-cmg/loginReminder.mdx

@@ -0,0 +1,6 @@
+import { Link } from "@clevercanary/data-explorer-ui/lib/components/Links/components/Link/link";
+
+<span>
+  Access to data explorer is limited for unauthorized users.To view all
+  available data please <Link label="Sign In" url="/login" />
+</span>

explorer/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.ts

@@ -256,6 +256,21 @@ export const buildDatasetIds = (
   };
 };
 
+/**
+ * Build dataset list view list hero warning.
+ * Warning serves as a reminder for users to log in.
+ * @returns model to be used as props for Alert component.
+ */
+export const buildDatasetListViewListHeroWarning = (): React.ComponentProps<
+  typeof C.Alert
+> => {
+  return {
+    severity: "warning",
+    title: MDX.RenderComponent({ Component: MDX.LoginReminder }),
+    variant: "banner",
+  };
+};
+
 /**
  * Build props for StatusBadge component from the given datasets response.
  * @param datasetsResponse - Response model return from datasets API.
@@ -827,6 +842,24 @@ function mapCurrentQuery(
   ];
 }
 
+/**
+ * Renders configuration component children when the given authentication state is not authorized.
+ * @param _ - Unused.
+ * @param viewContext - View context.
+ * @returns model to be used as props for the ConditionalComponent component.
+ */
+export const renderWhenUnAuthorized = (
+  _: DatasetsResponse,
+  viewContext: ViewContext
+): React.ComponentProps<typeof C.ConditionalComponent> => {
+  const {
+    authState: { isAuthorized },
+  } = viewContext;
+  return {
+    isIn: !isAuthorized,
+  };
+};
+
 /**
  * Renders entity related export when the given datasests response is accessible.
  * @param datasetsResponse - Response model return from datasets API.

explorer/site-config/anvil-cmg/dev/index/datasetsEntityConfig.ts

@@ -16,6 +16,7 @@ import { mainColumn as exportMainColumn } from "../detail/dataset/exportMainColu
 import { mainColumn } from "../detail/dataset/overviewMainColumn";
 import { sideColumn } from "../detail/dataset/overviewSideColumn";
 import { top } from "../detail/dataset/top";
+import { listHero } from "../listView/datasetsListHero";
 
 /**
  * Entity config object responsible for config related to the /explore/datasets route.
@@ -134,6 +135,9 @@ export const datasetsEntityConfig: EntityConfig<DatasetsResponse> = {
       id: ANVIL_CMG_CATEGORY_KEY.DATASET_TITLE,
     },
   } as ListConfig<DatasetsResponse>,
+  listView: {
+    listHero,
+  },
   route: "datasets",
   staticLoad: false,
 };

explorer/site-config/anvil-cmg/dev/listView/datasetsListHero.ts

@@ -0,0 +1,20 @@
+import {
+  ComponentConfig,
+  ComponentsConfig,
+} from "@clevercanary/data-explorer-ui/lib/config/entities";
+import { DatasetsResponse } from "../../../../app/apis/azul/anvil-cmg/common/responses";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders";
+
+export const listHero: ComponentsConfig = [
+  {
+    children: [
+      {
+        component: C.Alert,
+        viewBuilder: V.buildDatasetListViewListHeroWarning,
+      } as ComponentConfig<typeof C.Alert>,
+    ],
+    component: C.ConditionalComponent,
+    viewBuilder: V.renderWhenUnAuthorized,
+  } as ComponentConfig<typeof C.ConditionalComponent, DatasetsResponse>,
+];

explorer/site-config/anvil-cmg/dev/listView/listHero.ts

@@ -3,11 +3,11 @@ import {
   ComponentsConfig,
 } from "@clevercanary/data-explorer-ui/lib/config/entities";
 import * as C from "../../../../app/components";
-import * as T from "../../../../app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders";
+import * as V from "../../../../app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders";
 
 export const listHero: ComponentsConfig = [
   {
     component: C.Alert,
-    viewBuilder: T.buildListWarning,
+    viewBuilder: V.buildListWarning,
   } as ComponentConfig<typeof C.Alert>,
 ];