chore: upgrade findable to 35.1.0 (#4502) (#4505)

* chore: upgrade findable to 35.1.0 (#4502)

* fix: added services provider (#4502)

Author: frano-m

app/components/Detail/components/AnVILCMG/components/RequestAccess/requestAccess.styles.ts

@@ -27,6 +27,7 @@ export const StyledButton = styled(Button, {
 
   .MuiButton-endIcon {
     margin-left: -6px;
+    margin-right: 0;
   }
 
   ${({ open }) =>

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

@@ -1,42 +1,12 @@
 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 { MarkdownRenderer } from "@databiosphere/findable-ui/lib/components/MarkdownRenderer/markdownRenderer";
 import { DescriptionProps } from "./types";
-import DOMPurify from "isomorphic-dompurify";
-
-type ReactMDXContent = (props: MDXProps) => ReactNode;
-type Runtime = Pick<EvaluateOptions, "jsx" | "jsxs" | "Fragment">;
-
-const runtime = { Fragment, jsx, jsxs } as Runtime;
+import { MDX_COMPONENTS } from "./common/constants";
 
 export const Description = ({ content }: DescriptionProps): JSX.Element => {
-  const [MdxContent, setMdxContent] = useState<ReactMDXContent>(
-    () => (): null => null
-  );
-
-  useEffect(() => {
-    const sanitizedContent = DOMPurify.sanitize(content)
-      // escape curly braces
-      .replace(/{/g, "&lcub;")
-      .replace(/}/g, "&rcub;")
-      // escape backticks
-      .replace(/`/g, "&#96;");
-    evaluate(sanitizedContent, { ...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>
+      <MarkdownRenderer components={MDX_COMPONENTS} value={content} />
     </CollapsableSection>
   );
 };

app/config/utils.ts

@@ -1,12 +1,4 @@
-import {
-  Attribute,
-  AttributeValueTypes,
-  DataDictionaryColumnDef,
-  SelectCategoryValue,
-} from "@databiosphere/findable-ui/lib/common/entities";
-import { CellContext, ColumnDef } from "@tanstack/react-table";
-import { BasicCell } from "@databiosphere/findable-ui/lib/components/DataDictionary/components/Table/components/BasicCell/basicCell";
-import { GridTrackSize } from "@databiosphere/findable-ui/lib/config/entities";
+import { SelectCategoryValue } from "@databiosphere/findable-ui/lib/common/entities";
 
 /**
  * Returns select category value with formatted label.
@@ -23,29 +15,3 @@ export function mapSelectCategoryValue(
     };
   };
 }
-
-/**
- * Returns an array of column defs, built from column def configurations, to
- * use when displaying the data dictionary.
- * @param columnDefConfigs - Array of column def configurations.
- * @returns Array of column defs.
- */
-export function buildColumnDefs(
-  columnDefConfigs: DataDictionaryColumnDef[]
-): ColumnDef<Attribute, AttributeValueTypes>[] {
-  return columnDefConfigs.map((columnDefConfig) => {
-    const {
-      attributeDisplayName: header,
-      attributeSlotName: key,
-      width,
-    } = columnDefConfig;
-    return {
-      accessorFn: (row) => row[key as keyof Attribute],
-      cell: (props: CellContext<Attribute, AttributeValueTypes>) =>
-        BasicCell({ ...props }),
-      header: `${header}`,
-      id: key,
-      meta: { width: width as GridTrackSize },
-    };
-  });
-}

app/utils/tsvParser.ts

@@ -10,8 +10,6 @@ import fs from "fs";
 
 type ReturnType = string | number | boolean;
 
-type FieldKey = string;
-
 /**
  * Returns the file contents parsed into a model shaped by FIELD, or as row arrays if FIELD is omitted.
  *
@@ -24,8 +22,8 @@ type FieldKey = string;
 export const parseContentRows = async function parseContentRows<T>(
   content: Buffer | string,
   delimiter = ",",
-  FIELD: { [key: FieldKey]: string },
-  FIELD_TYPE: { [key: FieldKey]: string }
+  FIELD: { [key: string]: string },
+  FIELD_TYPE: { [key: string]: string }
 ): Promise<T[]> {
   if (!FIELD) return parseCsv(content, { delimiter, relax_quotes: true });
   const keyTypes = Object.fromEntries(

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

@@ -0,0 +1,46 @@
+import { MarkdownCell } from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell";
+import { Attribute } from "@databiosphere/findable-ui/lib/common/entities";
+import { ColumnDef } from "@tanstack/react-table";
+
+export const COLUMN_DEFS: ColumnDef<Attribute>[] = [
+  {
+    accessorKey: "classKey",
+    enableColumnFilter: false,
+    header: "Class Key",
+    id: "classKey",
+  },
+  {
+    accessorKey: "title",
+    enableColumnFilter: false,
+    header: "Title",
+    meta: {
+      width: {
+        max: "1fr",
+        min: "200px",
+      },
+    },
+  },
+  {
+    accessorFn: (row: Attribute) => ({ values: row.description }),
+    cell: MarkdownCell,
+    enableColumnFilter: false,
+    header: "Description",
+    meta: {
+      width: {
+        max: "2fr",
+        min: "480px",
+      },
+    },
+  },
+  {
+    accessorKey: "name",
+    enableColumnFilter: false,
+    header: "Name",
+    meta: {
+      width: {
+        max: "1fr",
+        min: "180px",
+      },
+    },
+  },
+];

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

@@ -0,0 +1,27 @@
+import {
+  Attribute,
+  DataDictionary,
+} from "@databiosphere/findable-ui/lib/common/entities";
+
+/**
+ * Returns a data dictionary built from the given data dictionary.
+ * @param dataDictionary - The data dictionary.
+ * @returns The built data dictionary.
+ */
+export function buildDataDictionary(
+  dataDictionary: DataDictionary
+): DataDictionary<Attribute> {
+  return {
+    ...dataDictionary,
+    classes: dataDictionary.classes.map((classData) => {
+      return {
+        ...classData,
+        attributes: classData.attributes.map((attribute) => {
+          return {
+            ...attribute,
+          };
+        }),
+      };
+    }),
+  };
+}

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

@@ -0,0 +1,13 @@
+import { TableOptions } from "@tanstack/react-table";
+import { Attribute } from "@databiosphere/findable-ui/lib/common/entities";
+
+export const TABLE_OPTIONS: Omit<
+  TableOptions<Attribute>,
+  "columns" | "data" | "getCoreRowModel"
+> = {
+  initialState: {
+    columnVisibility: { classKey: false },
+    expanded: true,
+    grouping: ["classKey"],
+  },
+};