feat: update the guide to indicate study data export is currently disabled by default (#4103) (#4104)

Co-authored-by: Fran McDade <franmcdade@Frans-MacBook-Pro.local>

Author: frano-m

…onents/HelpIconButton/helpIconButton.tsx …onents/HelpIconButton/helpIconButton.tsxexplorer/app/components/common/MDXContent/components/HelpIconButton/helpIconButton.tsx renamed to explorer/app/components/Layout/components/Content/components/HelpIconButton/helpIconButton.tsx explorer/app/components/common/MDXContent/components/HelpIconButton/helpIconButton.tsx renamed to explorer/app/components/Layout/components/Content/components/HelpIconButton/helpIconButton.tsx

@@ -3,16 +3,19 @@ import {
   HelpIconButtonProps as DXHelpIconButtonProps,
 } from "@databiosphere/findable-ui/lib/components/common/Button/components/HelpIconButton/helpIconButton";
 import { useConfig } from "@databiosphere/findable-ui/lib/hooks/useConfig";
-import { getURL } from "../../../../../../mdx-components";
-import { SiteConfig } from "../../../../../../site-config/common/entities";
+import { SiteConfig } from "../../../../../../../site-config/common/entities";
+import { replaceParameters } from "../Link/common/utils";
 
 export const HelpIconButton = ({
   url,
   ...props
 }: DXHelpIconButtonProps): JSX.Element => {
   const { config } = useConfig();
-  const { browserURL, portalURL } = config as SiteConfig;
+  const { browserURL, portalURL = "{portalURL}" } = config as SiteConfig;
   return (
-    <DXHelpIconButton url={getURL(url, browserURL, portalURL)} {...props} />
+    <DXHelpIconButton
+      url={replaceParameters(url, { browserURL, portalURL })}
+      {...props}
+    />
   );
 };

explorer/app/components/Layout/components/Content/components/Link/common/entities.ts

@@ -0,0 +1,3 @@
+export interface Parameter {
+  [key: string]: string;
+}

explorer/app/components/Layout/components/Content/components/Link/common/utils.ts

@@ -0,0 +1,22 @@
+import { Parameter } from "./entities";
+
+/**
+ * Replaces parameters in the given URL string e.g. {portalURL} with the corresponding value.
+ * @param str - URL string, with parameters.
+ * @param parameter - Parameter.
+ * @returns string with parameters replaced.
+ */
+export function replaceParameters(str: string, parameter: Parameter): string {
+  const decodedUrl = decodeURI(str);
+  const result = Object.entries(parameter).reduce(
+    (acc, [parameterKey, parameterValue]) => {
+      const regex = new RegExp(`\\{${parameterKey}}`, "g");
+      return acc.replace(regex, parameterValue);
+    },
+    decodedUrl
+  );
+  if (/{\w+}/.test(result)) {
+    throw new Error(`URL still contains path parameters: ${result}`);
+  }
+  return result;
+}

explorer/app/components/Layout/components/Content/components/Link/link.tsx

@@ -0,0 +1,28 @@
+import { TypographyWordBreak } from "@databiosphere/findable-ui/lib/components/common/Typography/TypographyWordBreak/TypographyWordBreak";
+import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+import { useConfig } from "@databiosphere/findable-ui/lib/hooks/useConfig";
+import { SiteConfig } from "../../../../../../../site-config/common/entities";
+import { replaceParameters } from "./common/utils";
+
+/**
+ * Basic anchor link component, used by MDX for all anchor links.
+ * Takes in children and href as props, and passes them to the DXLink component.
+ */
+
+export const Link = ({
+  ...props /* Spread props to allow for anchor link specific props e.g. "href". */
+}): JSX.Element => {
+  const { children, href, ...linkProps } = props;
+  const { config } = useConfig();
+  const { browserURL, portalURL = "{portalURL}" } = config as SiteConfig;
+  return (
+    <DXLink
+      label={<TypographyWordBreak>{children}</TypographyWordBreak>}
+      url={replaceParameters(href, {
+        browserURL,
+        portalURL,
+      })}
+      {...linkProps}
+    />
+  );
+};

explorer/app/components/Layout/components/Content/content.styles.ts

@@ -0,0 +1,124 @@
+import {
+  textBodyLarge4002Lines,
+  textBodyLarge500,
+  textHeading,
+  textHeadingLarge,
+  textHeadingSmall,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
+import { ThemeProps } from "@databiosphere/findable-ui/lib/theme/theme";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+const muiAlert = (props: ThemeProps) => css`
+  .MuiAlert-root {
+    margin: 24px 0;
+
+    &.MuiAlert-standardWarning {
+      margin: 16px 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .MuiAlert-message {
+      ${textBodyLarge4002Lines(props)};
+    }
+
+    .MuiAlert-message:first-of-type {
+      gap: 16px;
+
+      .MuiAlertTitle-root {
+        ${textHeadingSmall(props)};
+      }
+    }
+  }
+`;
+
+const muiBreadcrumbs = () => css`
+  .MuiBreadcrumbs-root {
+    margin-bottom: 8px;
+
+    .MuiBreadcrumbs-li {
+      margin: 0;
+
+      .MuiLink-root {
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      .MuiTypography-root {
+        margin: 0;
+      }
+    }
+  }
+`;
+
+export const Content = styled.div`
+  a {
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  h1 {
+    ${textHeadingLarge};
+    margin: 0 0 16px;
+  }
+
+  h2 {
+    ${textHeading};
+    margin: 32px 0 16px;
+  }
+
+  h3 {
+    ${textHeadingSmall};
+    margin: 40px 0 16px;
+  }
+
+  h4 {
+    ${textBodyLarge500};
+    margin: 16px 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &:hover {
+      a {
+        opacity: 1;
+      }
+    }
+  }
+
+  p {
+    ${textBodyLarge4002Lines};
+    margin: 0 0 16px;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  ul {
+    ${textBodyLarge4002Lines};
+    margin: 16px 0;
+    padding: 0 0 0 24px;
+
+    li {
+      margin: 8px 0;
+    }
+  }
+
+  ${muiAlert};
+  ${muiBreadcrumbs};
+`;

explorer/app/components/Layout/components/Content/content.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { Content as MDXContent } from "./content.styles";
+
+export interface ContentProps {
+  children: ReactNode | ReactNode[];
+}
+
+export const Content = ({ children }: ContentProps): JSX.Element => {
+  return <MDXContent>{children}</MDXContent>;
+};