Feat/fix base path (#284)

* v0.10.55 * update package-lock * add data library icon add noBasePath for navigation * fix footer links * fix footer links * restore default config
uc-cdis · Dec 9, 2024 · 38f36ed · 38f36ed
1 parent e289980
commit 38f36ed
Show file tree

Hide file tree

Showing 22 changed files with 282 additions and 98 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/LoginAccountButton.tsx b/packages/frontend/src/components/Login/LoginAccountButton.tsx
@@ -8,8 +8,15 @@ import {
   isAuthenticated,
   type CoreState,
 } from '@gen3/core';
+import { mergeTailwindClassnameWithDefault } from '../../utils/mergeDefaultTailwindClassnames';
 
-const LoginAccountButton = () => {
+interface LoginAccountButtonProps {
+  className?: string;
+}
+
+const LoginAccountButton = ({
+  className = undefined,
+}: LoginAccountButtonProps) => {
   const router = useRouter();
 
   const handleSelected = async () => {
@@ -23,12 +30,15 @@ const LoginAccountButton = () => {
     selectUserDetails(state),
   );
 
+  const mergedClassname = mergeTailwindClassnameWithDefault(
+    className,
+    'flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent',
+  );
+
   if (userStatus && isAuthenticated(userStatus)) {
     return (
       <UnstyledButton className="mx-2" onClick={() => handleSelected()}>
-        <div className="flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent">
-          {userInfo?.username}
-        </div>
+        <div className={mergedClassname}>{userInfo?.username}</div>
       </UnstyledButton>
     );
   }

diff --git a/packages/frontend/src/components/Login/LoginButton.tsx b/packages/frontend/src/components/Login/LoginButton.tsx
@@ -12,6 +12,7 @@ import {
 } from '@gen3/core';
 import { TooltipStyle } from '../../features/Navigation/style';
 import { LoginButtonVisibility } from './types';
+import { mergeTailwindClassnameWithDefault } from '../../utils/mergeDefaultTailwindClassnames';
 
 const handleSelected = async (
   isAuthenticated: boolean,
@@ -36,7 +37,7 @@ interface LoginButtonProps {
 const LoginButton = ({
   icon = <LoginIcon className="pl-1" size={'1.55rem'} />,
   hideText = false,
-  className = 'flex flex-nowrap items-center font-content text-secondary-contrast-lighter align-middle border-b-2 hover:border-accent border-transparent mx-2',
+  className = undefined,
   tooltip,
   visibility,
 }: LoginButtonProps) => {
@@ -56,6 +57,11 @@ const LoginButton = ({
   if (visibility === LoginButtonVisibility.LogoutOnly && !authenticated)
     return null;
 
+  const mergedClassname = mergeTailwindClassnameWithDefault(
+    className,
+    'flex flex-nowrap items-center font-content text-secondary-contrast-lighter align-middle border-b-2 hover:border-accent border-transparent mx-2',
+  );
+
   return (
     <Tooltip
       label={tooltip}
@@ -71,9 +77,7 @@ const LoginButton = ({
           handleSelected(authenticated, router, pathname, endSession)
         }
       >
-        <div
-          className={`flex items-center font-medium font-heading ${className}`}
-        >
+        <div className={mergedClassname}>
           {!hideText ? (authenticated ? 'Logout' : 'Login') : null}
           {icon}
         </div>

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/Footer/FooterColumn.tsx b/packages/frontend/src/features/Navigation/Footer/FooterColumn.tsx
@@ -9,7 +9,10 @@ import {
   FooterLinks,
   FooterSectionProps,
 } from './types';
-import { mergeDefaultTailwindClassnames } from '../../../utils/mergeDefaultTailwindClassnames';
+import {
+  mergeDefaultTailwindClassnames,
+  mergeTailwindClassnameWithDefault,
+} from '../../../utils/mergeDefaultTailwindClassnames';
 import { extractClassName } from '../utils';
 import { extractObjectKey } from '../../../utils/values';
 
@@ -53,8 +56,13 @@ const FooterRowComponent: React.FC<FooterRowComponentProps> = ({
 
     case 'Links': {
       const links = item[itemType] as FooterLinks;
+      const mergedClassname = mergeTailwindClassnameWithDefault(
+        className,
+        'flex space-x-1',
+      );
+
       return (
-        <div className={`flex flex-no-wrap space-x-4 ${className ?? ''}`}>
+        <div className={mergedClassname}>
           {links?.links.map((link, i) => {
             return (
               <React.Fragment key={link.href}>

diff --git a/packages/frontend/src/features/Navigation/Header.tsx b/packages/frontend/src/features/Navigation/Header.tsx
@@ -20,6 +20,7 @@ const Header = ({
   banners,
   type = 'original',
 }: HeaderProps) => {
+  console.log('top', top);
   return type === 'horizontal' ? (
     <div className="w-full">
       {banners?.map((banner) => <Banner {...banner} key={banner.id} />)}

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>
           );