feat: markdown in entity description #4170 (#4342)

Co-authored-by: Fran McDade <[email protected]>

Author: MillenniumFalconMechanic

app/components/Detail/components/MDX/components/Description/common/constants.ts

@@ -0,0 +1,17 @@
+import { Link } from "../../../../../../Layout/components/Content/components/Link/link";
+import { Table } from "../../Table/table";
+import { H1, H2, H3, H4, P } from "./../description.styles";
+
+/**
+ * Components used when rendering MDX content in Description. Note when
+ * generalizing this constant, description styles also need to be generalized.
+ */
+export const MDX_COMPONENTS = {
+  a: Link,
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  p: P,
+  table: Table,
+};

app/components/Detail/components/MDX/components/Description/description.styles.ts

@@ -0,0 +1,52 @@
+import {
+  textBodyLarge500,
+  textHeadingLarge,
+  textHeadingSmall,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
+import styled from "@emotion/styled";
+
+/**
+ * H1 styled component. Matches H1 in the Portal.
+ */
+export const H1 = styled.h1`
+  ${textHeadingLarge};
+  font-size: 30px;
+  letter-spacing: -0.8px;
+  line-height: 40px;
+  margin: 0 0 16px; /* Matching margin-bottom of H1 in docs */
+`;
+
+/**
+ * H2 styled component. Removed textHeadingLarge mixin to prevent `font-size: 30px`
+ * for tablet+ (to match H2's in the Portal).
+ */
+export const H2 = styled.h2`
+  font-size: 24px;
+  font-weight: 500;
+  letter-spacing: -0.4px;
+  line-height: 32px;
+  margin: 32px 0 16px; /* Matching margin-bottom of H2 in docs */
+`;
+
+/**
+ * H3 styled component.
+ */
+export const H3 = styled.h3`
+  ${textHeadingSmall}
+  margin: 40px 0 16px; /* Matching margin-bottom of H3 in docs */
+`;
+
+/*
+ * H4 styled component.
+ */
+export const H4 = styled.h4`
+  ${textBodyLarge500}
+  margin: 16px 0; /* Matching margin-bottom of H4 in docs */
+`;
+
+/**
+ * P styled component.
+ */
+export const P = styled.p`
+  margin: 0 0 16px; /* Matching margin-bottom of P in docs */
+`;

app/components/Detail/components/MDX/components/Description/description.tsx

@@ -0,0 +1,35 @@
+import { CollapsableSection } from "@databiosphere/findable-ui/lib/components/common/Section/components/CollapsableSection/collapsableSection";
+import type { EvaluateOptions } from "@mdx-js/mdx";
+import { evaluate } from "@mdx-js/mdx";
+import type { MDXProps } from "mdx/types";
+import { ReactNode, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import remarkGfm from "remark-gfm";
+import { MDX_COMPONENTS } from "./common/constants";
+import { DescriptionProps } from "./types";
+
+type ReactMDXContent = (props: MDXProps) => ReactNode;
+type Runtime = Pick<EvaluateOptions, "jsx" | "jsxs" | "Fragment">;
+
+const runtime = { Fragment, jsx, jsxs } as Runtime;
+
+export const Description = ({ content }: DescriptionProps): JSX.Element => {
+  const [MdxContent, setMdxContent] = useState<ReactMDXContent>(
+    () => (): null => null
+  );
+
+  useEffect(() => {
+    evaluate(content, { ...runtime, remarkPlugins: [remarkGfm] }).then((r) =>
+      setMdxContent(() => r.default)
+    );
+  }, [content]);
+
+  // Wrapping <MdxContent> with <div> to force `display: block`
+  return (
+    <CollapsableSection collapsable={false} title="Description">
+      <div>
+        {MdxContent ? <MdxContent components={MDX_COMPONENTS} /> : null}
+      </div>
+    </CollapsableSection>
+  );
+};

app/components/Detail/components/MDX/components/Description/types.ts

@@ -0,0 +1,3 @@
+export interface DescriptionProps {
+  content: string;
+}

app/components/Detail/components/MDX/components/Table/table.styles.ts

@@ -0,0 +1,47 @@
+import { smokeMain } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import {
+  textBody400,
+  textBody500,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
+import styled from "@emotion/styled";
+import { TableContainer as MTableContainer } from "@mui/material";
+
+/**
+ * Table style component. TODO De-dupe with Table component in the Portal.
+ */
+export const TableContainer = styled(MTableContainer)`
+  margin: 24px 0;
+
+  .MuiTable-root {
+    min-width: calc(390px - 32px);
+
+    tr {
+      td,
+      th {
+        border-bottom: 1px solid ${smokeMain};
+        padding: 12px;
+        text-align: left;
+
+        &:first-of-type {
+          padding-left: 0;
+        }
+
+        &:last-of-type {
+          padding-right: 0;
+        }
+      }
+
+      th {
+        ${textBody500};
+
+        &:empty {
+          padding: 0;
+        }
+      }
+
+      td {
+        ${textBody400};
+      }
+    }
+  }
+`;

app/components/Detail/components/MDX/components/Table/table.tsx

@@ -0,0 +1,10 @@
+import { Table as MTable } from "@mui/material";
+import { TableContainer } from "./table.styles";
+
+export const Table = ({ ...props }): JSX.Element => {
+  return (
+    <TableContainer>
+      <MTable>{props.children}</MTable>
+    </TableContainer>
+  );
+};

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

@@ -103,6 +103,7 @@ import {
 } from "../../../../apis/azul/common/utils";
 import * as C from "../../../../components";
 import * as MDX from "../../../../components/common/MDXContent/anvil-cmg";
+import { Description } from "../../../../components/Detail/components/MDX/components/Description/description";
 import { ExportMethod } from "../../../../components/Export/components/AnVILExplorer/ExportMethod/exportMethod";
 import { METADATA_KEY } from "../../../../components/Index/common/entities";
 import { getPluralizedMetadataLabel } from "../../../../components/Index/common/indexTransformer";
@@ -318,13 +319,13 @@ export function buildDatasetAccessibilityBadge(
 }
 
 /**
- * Build props for Markdown component from the given entity response.
+ * Build props for Description component from the given entity response.
  * @param datasetsResponse - Response model return from datasets API.
- * @returns model to be used as props for the Markdown component.
+ * @returns model to be used as props for the Description component.
  */
 export const buildDatasetDescription = (
   datasetsResponse: DatasetsResponse
-): React.ComponentProps<typeof C.Markdown> => {
+): React.ComponentProps<typeof Description> => {
   return {
     content:
       processEntityValue(