add data library icon

add noBasePath for navigation
uc-cdis · Dec 9, 2024 · 4cd57b0 · 4cd57b0
1 parent 19e76ea
commit 4cd57b0
Show file tree

Hide file tree

Showing 12 changed files with 218 additions and 72 deletions.
diff --git a/packages/frontend/rollup.config.mjs b/packages/frontend/rollup.config.mjs
@@ -61,6 +61,8 @@ const globals = {
   'tailwind-merge': 'tailwind-merge',
   util: 'util',
   swc: 'swc',
+  'redux-persist': 'reduxPersist',
+  '@hello-pangea': 'pangea',
 };
 
 const config = [

diff --git a/packages/frontend/src/components/Content/TextContent.tsx b/packages/frontend/src/components/Content/TextContent.tsx
@@ -3,24 +3,32 @@ import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 import { hashCode } from '../../utils/hash';
+import { twMerge } from 'tailwind-merge';
+import { Anchor } from '@mantine/core';
 
 export enum ContentType {
   Text = 'text',
   TextArray = 'textArray',
   Html = 'html',
   Markdown = 'markdown',
+  TextWithEmail = 'textWithEmail',
+  TextWithLink = 'textWithLink',
+  Link = 'link',
 }
 
 export interface TextContentProps {
   readonly text: string | string[];
   readonly className?: string;
   readonly type?: ContentType;
   readonly email?: string;
+  readonly link?: string;
 }
 const TextContent = ({
   text,
   className = 'inline text-base-contrast color-red-500 font-medium margin-block-start-1 margin-block-end-1',
   type = ContentType.Text,
+  email = undefined,
+  link = undefined,
 }: TextContentProps) => {
   switch (type) {
     case ContentType.Html: {
@@ -32,62 +40,93 @@ const TextContent = ({
         />
       );
     }
-      case ContentType.TextArray: {
-        const textArray = !Array.isArray(text) ? [text] : text;
-        return (
-          <div className={className}>
-            {textArray.map((item) => (
-              <p className="my-2" key={hashCode(item)}>{item}</p>
-            ))}
-          </div>
-        );
-      }
-      case ContentType.Markdown: {
-        const textString = Array.isArray(text) ? text.join('') : text;
-        return (
-          <div>
+    case ContentType.TextArray: {
+      const textArray = !Array.isArray(text) ? [text] : text;
+      return (
+        <div className={className}>
+          {textArray.map((item) => (
+            <p className="my-2" key={hashCode(item)}>
+              {item}
+            </p>
+          ))}
+        </div>
+      );
+    }
+    case ContentType.Markdown: {
+      const textString = Array.isArray(text) ? text.join('') : text;
+      return (
+        <div>
           <Markdown
             remarkPlugins={[remarkGfm]}
             components={{
               // define some formatting for the ai response
-              p(props:any) {
+              p(props: any) {
                 const { node, ...rest } = props;
                 return (
-                  <p
-                    className="text-lg text-primary-contrast my-1"
-                    {...rest}
-                  />
+                  <p className="text-lg text-primary-contrast my-1" {...rest} />
                 );
               },
-              ol(props:any) {
+              ol(props: any) {
                 const { node, ...rest } = props;
-                return (
-                  <ol
-                    className="list-disc list-inside my-1"
-                    {...rest}
-                  />
-                );
+                return <ol className="list-disc list-inside my-1" {...rest} />;
               },
-              ul(props:any) {
+              ul(props: any) {
                 const { node, ...rest } = props;
-                return (
-                  <ul
-                    className="list-disc list-inside my-1"
-                    {...rest}
-                  />
-                );
+                return <ul className="list-disc list-inside my-1" {...rest} />;
               },
-              li(props:any) {
+              li(props: any) {
                 const { node, ...rest } = props;
                 return <li className="text-md" {...rest} />;
               },
             }}
-            >
+          >
             {textString}
           </Markdown>
-          </div>
-        );
-      }
+        </div>
+      );
+    }
+    case ContentType.TextWithEmail: {
+      const DEFAULT_STYLE =
+        'inline color-ink font-medium margin-block-start-1 margin-block-end-1';
+      const mergedClassname = className
+        ? twMerge(DEFAULT_STYLE, className)
+        : DEFAULT_STYLE;
+      const textString = Array.isArray(text) ? text.join('') : text;
+      return (
+        <div className={mergedClassname}>
+          <span>
+            {textString}
+            {email && (
+              <Anchor
+                classNames={{ root: mergedClassname }}
+                href={`mailto:${email}`}
+              >{` ${email}.`}</Anchor>
+            )}
+          </span>
+        </div>
+      );
+    }
+    case ContentType.TextWithLink: {
+      const DEFAULT_STYLE =
+        'inline color-ink font-medium margin-block-start-1 margin-block-end-1';
+      const mergedClassname = className
+        ? twMerge(DEFAULT_STYLE, className)
+        : DEFAULT_STYLE;
+      const textString = Array.isArray(text) ? text.join('') : text;
+      return (
+        <div className={mergedClassname}>
+          <span>
+            {textString}
+            {link && (
+              <Anchor
+                classNames={{ root: mergedClassname }}
+                href={link}
+              >{` ${email}.`}</Anchor>
+            )}
+          </span>
+        </div>
+      );
+    }
     case ContentType.Text:
     default:
       return (

diff --git a/packages/frontend/src/components/Login/LoginPanel.tsx b/packages/frontend/src/components/Login/LoginPanel.tsx
@@ -69,16 +69,9 @@ const LoginPanel = (loginConfig: LoginConfig) => {
             <CredentialsLogin handleLogin={handleCredentialsLogin} />
           )}
 
-        {bottomContent?.map((content, index) =>
-          content?.email ? (
-            <ContactWithEmailContent
-              {...content}
-              key={`bottomContent-${index}`}
-            />
-          ) : (
-            <TextContent {...content} key={`bottomContent-${index}`} />
-          ),
-        )}
+        {bottomContent?.map((content, index) => (
+          <TextContent {...content} key={`bottomContent-${index}`} />
+        ))}
       </div>
       <TexturedSidePanel url={image} />
     </div>

diff --git a/packages/frontend/src/features/Navigation/NavigationBar.tsx b/packages/frontend/src/features/Navigation/NavigationBar.tsx
@@ -71,6 +71,7 @@ const NavigationBar = ({
                 href={x.href}
                 name={x.name}
                 classNames={x.classNames}
+                noBasePath={x?.noBasePath}
               />
             </div>
           );

diff --git a/packages/frontend/src/features/Navigation/NavigationBarButton.tsx b/packages/frontend/src/features/Navigation/NavigationBarButton.tsx
@@ -15,6 +15,7 @@ import { TooltipStyle } from './style';
  * @param name - the name of the button
  * @param iconHeight - the height of the icon
  * @param classNames - the class names to use for root, label, icon/tooltip and arrow'
+ * @param noBasePath - set to true to avoid prepending a basePath to the link
  */
 const NavigationBarButton = ({
   tooltip,
@@ -23,14 +24,17 @@ const NavigationBarButton = ({
   name,
   iconHeight = '27px',
   classNames = {},
+  noBasePath = false,
 }: NavigationButtonProps) => {
   const classNamesDefaults = {
-    root: `flex flex-col flex-nowrap px-3 py-2 pt-4 items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100`,
+    root: 'flex flex-col flex-nowrap px-3 py-2 pt-4 items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100',
     label: 'pt-1.5 body-typo font-heading text-sm text-nowrap',
     icon: 'mt-0.5 ml-1',
     ...TooltipStyle,
   };
 
+  console.log('hasNoBasePath: ', noBasePath);
+
   const mergedClassnames = mergeDefaultTailwindClassnames(
     classNamesDefaults,
     classNames,
@@ -46,18 +50,10 @@ const NavigationBarButton = ({
         zIndex={1000}
         w={220}
       >
-        <Link
-          href={`${
-            // need this to preserve running in hybrid mode
-            process.env.NEXT_PUBLIC_PORTAL_BASENAME &&
-            process.env.NEXT_PUBLIC_PORTAL_BASENAME !== '/'
-              ? process.env.NEXT_PUBLIC_PORTAL_BASENAME
-              : ''
-          }${href}`}
-        >
-          <div
+        {noBasePath ? (
+          <a
             className={extractClassName('root', mergedClassnames)}
-            role="navigation"
+            href={`${href}`}
           >
             <Icon
               height={iconHeight}
@@ -67,8 +63,32 @@ const NavigationBarButton = ({
             <p className={extractClassName('label', mergedClassnames)}>
               {name}
             </p>
-          </div>
-        </Link>
+          </a>
+        ) : (
+          <Link
+            href={`${
+              // need this to preserve running in hybrid mode
+              process.env.NEXT_PUBLIC_PORTAL_BASENAME &&
+              process.env.NEXT_PUBLIC_PORTAL_BASENAME !== '/'
+                ? process.env.NEXT_PUBLIC_PORTAL_BASENAME
+                : ''
+            }${href}`}
+          >
+            <div
+              className={extractClassName('root', mergedClassnames)}
+              role="navigation"
+            >
+              <Icon
+                height={iconHeight}
+                icon={icon}
+                className={extractClassName('icon', mergedClassnames)}
+              />
+              <p className={extractClassName('label', mergedClassnames)}>
+                {name}
+              </p>
+            </div>
+          </Link>
+        )}
       </Tooltip>
     </React.Fragment>
   );

diff --git a/packages/frontend/src/features/Navigation/types.ts b/packages/frontend/src/features/Navigation/types.ts
@@ -4,12 +4,13 @@ import { BannerProps } from './Banner';
 import { StylingOverrideWithMergeControl } from '../../types';
 
 export interface NavigationButtonProps {
-  readonly icon: string;
-  readonly tooltip: string;
-  readonly href: string;
-  readonly name: string;
-  readonly iconHeight?: string;
-  readonly classNames?: StylingOverrideWithMergeControl;
+  icon: string;
+  tooltip: string;
+  href: string;
+  noBasePath?: boolean;
+  name: string;
+  iconHeight?: string;
+  classNames?: StylingOverrideWithMergeControl;
 }
 
 export interface NavigationBarLogo {

diff --git a/packages/sampleCommons/config/gen3/navigation.json b/packages/sampleCommons/config/gen3/navigation.json
@@ -21,6 +21,7 @@
       {
         "icon": "gen3:dictionary",
         "href": "/DataDictionary",
+        "noBasePath": true,
         "name": "Dictionary",
         "tooltip": "The Data Dictionary serves to inform the data model and is updated as new data is ingested."
       },

diff --git a/packages/sampleCommons/config/icons/color.json b/packages/sampleCommons/config/icons/color.json
@@ -1,6 +1,6 @@
 {
 	"prefix": "color",
-	"lastModified": 1732849568,
+	"lastModified": 1733715829,
 	"icons": {
 		"analysis": {
 			"body": "<g fill=\"currentColor\"><path d=\"m52 22 3.293 3.293L44 36.586l-12-12-12.707 12.707 1.414 1.414L32 27.414l12 12 12.707-12.707L60 30v-8z\"/><path d=\"M20 42a4 4 0 110-8 4 4 0 010 8m0 6a2 2 0 11-.001-3.999A2 2 0 0120 48m12-8a2 2 0 11-.001-3.999A2 2 0 0132 40m12-10a2 2 0 11-.001-3.999A2 2 0 0144 30M20 16a2 2 0 11-.001-3.999A2 2 0 0120 16m0 14a2 2 0 11-.001-3.999A2 2 0 0120 30m16-14a2 2 0 11-.001-3.999A2 2 0 0136 16m-10 6a2 2 0 11-.001-3.999A2 2 0 0126 22m12 26a2 2 0 11-.001-3.999A2 2 0 0138 48m12-2a2 2 0 11-.001-3.999A2 2 0 0150 46M32 30a4 4 0 110-8 4 4 0 010 8m12 12a4 4 0 110-8 4 4 0 010 8\"/><path d=\"M18 38a3.99 3.99 0 013-3.859A4 4 0 0020 34a4 4 0 000 8c.347 0 .679-.058 1-.141-1.722-.447-3-1.997-3-3.859m12-12a3.99 3.99 0 013-3.859A4 4 0 0032 22a4 4 0 000 8c.347 0 .679-.058 1-.141-1.722-.447-3-1.997-3-3.859m12 12a3.99 3.99 0 013-3.859A4 4 0 0044 34a4 4 0 000 8c.347 0 .679-.058 1-.141-1.722-.447-3-1.997-3-3.859\"/><path d=\"m60 54-6-6v4H12V14h4l-6-6-6 6h4v42h46v4z\"/><path d=\"M10 14H8v42h2v-4zm0-6-6 6h2l5-5zm42 12a8 8 0 110-16 8 8 0 010 16\"/><path d=\"M46 12c0-4.079 3.055-7.438 7-7.931A8 8 0 0052 4a8 8 0 000 16c.339 0 .672-.028 1-.069-3.945-.493-7-3.852-7-7.931\"/><path d=\"m52 14.707-2-2-1.646 1.647-.708-.708L50 11.293l2 2 1.646-1.647.708.708z\"/><path d=\"m52 10 4 4v-4z\"/></g>",

diff --git a/packages/sampleCommons/config/icons/dataDictionary.json b/packages/sampleCommons/config/icons/dataDictionary.json
@@ -1,6 +1,6 @@
 {
 	"prefix": "dataDictionary",
-	"lastModified": 1732849568,
+	"lastModified": 1733715829,
 	"icons": {
 		"dictionary-icon-administrative": {
 			"body": "<g fill=\"currentColor\" fill-rule=\"evenodd\"><path d=\"M5.5 4.9h.72c.013.005.026.015.038.016.261.015.522.023.782.044.466.037.93.101 1.385.253.377.126.73.322 1.018.707.038.05.057.1.057.177q-.002 3.847-.001 7.696v.107c-.018-.007-.025-.008-.031-.012q-.118-.082-.234-.17a3.8 3.8 0 00-1.973-.803c-.51-.053-1.023-.07-1.534-.101-.07-.005-.142-.001-.22-.001V5.036c0-.046-.005-.09-.007-.136m8.28 0h.72q-.005.067-.007.135v7.63l-.004.136h-.077a13 13 0 00-1.784.118 4 4 0 00-1.863.79c-.084.064-.17.123-.265.191v-.107q0-3.854.002-7.707c0-.051.02-.115.045-.15q.222-.309.509-.484c.33-.205.68-.304 1.035-.375.506-.1 1.015-.14 1.526-.158.054-.002.108-.013.162-.019\"/><path d=\"M3.5 5.9h.983v8.114h.12c.61.012 1.22.01 1.828.039.717.033 1.434.105 2.121.374.316.123.618.295.925.446.01.004.016.018.023.027h-6zm8 9c.006-.01.011-.022.019-.028.5-.36 1.027-.598 1.584-.702a10 10 0 011.686-.148l.799-.008h.093V5.9h.819v9z\"/></g>"

diff --git a/packages/sampleCommons/config/icons/gen3.json b/packages/sampleCommons/config/icons/gen3.json
@@ -1,6 +1,6 @@
 {
 	"prefix": "gen3",
-	"lastModified": 1732849568,
+	"lastModified": 1733715829,
 	"icons": {
 		"aisearch": {
 			"body": "<defs><clipPath id=\"svgID0\"><path d=\"M0 512h512V0H0z\"/></clipPath></defs><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"20\" clip-path=\"url(#svgID0)\" transform=\"matrix(1.3333 0 0 -1.3333 0 682.67)\"><path d=\"M367.48 415.54c74.959-74.447 74.959-195.15 0-269.6-74.96-74.447-196.49-74.447-271.45 0s-74.96 195.15 0 269.6 196.49 74.447 271.45 0\"/><path d=\"M331.05 182.12c-54.75-54.376-143.84-54.376-198.59 0s-54.751 142.85 0 197.23c54.75 54.376 143.84 54.376 198.59 0s54.75-142.85 0-197.23m53.71-19.02 92.938-69.012c20.22-15.016 22.341-44.346 4.488-62.077s-47.385-15.624-62.504 4.458l-69.487 92.301M125.44 17.048c9.485 9.419 9.459 24.717-.059 34.169-9.516 9.452-24.92 9.478-34.404.059s-9.458-24.718.059-34.17 24.92-9.478 34.404-.058m.4 34.626 47.064 46.742M94.036 184.42c-9.484-9.419-9.458-24.718.059-34.169 9.516-9.452 24.92-9.478 34.404-.059s9.459 24.718-.059 34.17c-9.516 9.452-24.92 9.477-34.404.058m-.401-34.62-48.772-48.439-27.192 7.223M371.01 494.95c-9.484-9.419-9.458-24.717.059-34.169s24.92-9.478 34.405-.059 9.458 24.718-.059 34.17-24.921 9.478-34.405.058m-.4-34.62-24.874-24.703\"/><path d=\"M402.41 327.58c9.484 9.419 9.458 24.718-.059 34.169-9.517 9.452-24.92 9.478-34.405.059s-9.458-24.718.059-34.17 24.921-9.477 34.405-.058m.4 34.62 48.772 48.439 27.191-7.223M182.85 238.68l26.699 69.622c.545 1.325 2.434 1.327 2.982.003l26.456-69.625m-47.807 17.34h39.619m36.261 53.28v-70.617m171.3-163.638 14.811-14.81\"/></g>",
@@ -107,6 +107,11 @@
 			"width": 44,
 			"height": 51
 		},
+		"list": {
+			"body": "<path fill=\"currentColor\" d=\"M448.18 80h-320c-17.673 0-32 14.327-32 32s14.327 32 32 32h320c17.673 0 32-14.327 32-32s-14.327-32-32-32m-384 32a32 32 0 00-9.44-22.56c-12.481-12.407-32.639-12.407-45.12 0A32 32 0 00.18 112a27.2 27.2 0 000 6.24 29 29 0 001.76 6.08 37 37 0 003.04 5.44 29.3 29.3 0 004 4.96 28.3 28.3 0 004.8 3.84 26 26 0 005.44 3.04 26.4 26.4 0 006.72 2.4 28 28 0 006.24 0 32 32 0 0022.56-9.28 29.3 29.3 0 004-4.96 37 37 0 003.04-5.44 29.7 29.7 0 002.4-6.08 27.2 27.2 0 000-6.24m0 144a27.4 27.4 0 000-6.24 26 26 0 00-2.4-5.92 32 32 0 00-3.04-5.6 23 23 0 00-4-4.8c-12.481-12.407-32.639-12.407-45.12 0A32 32 0 00.18 256a35.5 35.5 0 002.4 12.32 36 36 0 002.88 5.44 30.7 30.7 0 004.16 4.8 23.4 23.4 0 004.8 4 26 26 0 005.44 3.04 27.2 27.2 0 006.08 1.76c2.047.459 4.142.674 6.24.64 2.073.239 4.167.239 6.24 0a26 26 0 005.92-1.76 26.7 26.7 0 005.6-3.04 23.4 23.4 0 004.8-4 23.4 23.4 0 004-4.8 25.7 25.7 0 003.04-5.44 27 27 0 002.4-6.72 26.5 26.5 0 000-6.24m0 144a27.5 27.5 0 000-6.24 27.2 27.2 0 00-2.4-6.08 37 37 0 00-3.04-5.44 23.4 23.4 0 00-4-4.8c-12.481-12.407-32.639-12.407-45.12 0a23.4 23.4 0 00-4 4.8 37 37 0 00-3.04 5.44 26.2 26.2 0 00-1.76 6.08A27.5 27.5 0 00.18 400a32 32 0 009.44 22.56 23.4 23.4 0 004.8 4 26 26 0 005.44 3.04 27.2 27.2 0 006.08 1.76c2.047.459 4.142.674 6.24.64 2.073.239 4.167.239 6.24 0a26 26 0 005.92-1.76 26.7 26.7 0 005.6-3.04 23.4 23.4 0 004.8-4 23.4 23.4 0 004-4.8 25.6 25.6 0 003.04-5.44 27.2 27.2 0 002.4-6.72 26.5 26.5 0 000-6.24m416-176h-352c-17.673 0-32 14.327-32 32s14.327 32 32 32h352c17.673 0 32-14.327 32-32s-14.327-32-32-32m-144 144h-208c-17.673 0-32 14.327-32 32s14.327 32 32 32h208c17.673 0 32-14.327 32-32s-14.327-32-32-32\"/>",
+			"width": 512.18,
+			"height": 512.18
+		},
 		"loginarrowcircle": {
 			"body": "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\"><path d=\"M20.49 14.5H2.5c.25-6.67 5.75-12 12.49-12C21.9 2.5 27.5 8.1 27.5 15s-5.6 12.5-12.51 12.5c-5.18 0-9.63-3.15-11.53-7.63\"/><path d=\"m14.5 8.5 5.99 6h.01l-6 6\"/></g>",
 			"width": 30,