From 38f36edc290acad72e35cbd937b25ceeb40cc596 Mon Sep 17 00:00:00 2001 From: Craig Barnes Date: Mon, 9 Dec 2024 15:03:19 -0500 Subject: [PATCH] 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 --- packages/frontend/rollup.config.mjs | 2 + .../src/components/Content/TextContent.tsx | 115 ++++++++++++------ .../components/Login/LoginAccountButton.tsx | 18 ++- .../src/components/Login/LoginButton.tsx | 12 +- .../src/components/Login/LoginPanel.tsx | 13 +- .../Navigation/Footer/FooterColumn.tsx | 12 +- .../src/features/Navigation/Header.tsx | 1 + .../src/features/Navigation/NavigationBar.tsx | 1 + .../Navigation/NavigationBarButton.tsx | 67 ++++++---- .../features/Navigation/NavigationLogo.tsx | 2 +- .../src/features/Navigation/TopBar.tsx | 11 +- .../frontend/src/features/Navigation/types.ts | 13 +- .../utils/mergeDefaultTailwindClassnames.ts | 5 + .../sampleCommons/config/gen3/footer.json | 2 +- .../sampleCommons/config/gen3/navigation.json | 1 + .../config/gen3/themeColors.json | 2 +- .../sampleCommons/config/icons/color.json | 2 +- .../config/icons/dataDictionary.json | 2 +- packages/sampleCommons/config/icons/gen3.json | 7 +- .../sampleCommons/config/icons/gen3/list.svg | 84 +++++++++++++ .../sampleCommons/config/icons/workspace.json | 2 +- packages/sampleCommons/tailwind.config.js | 6 +- 22 files changed, 282 insertions(+), 98 deletions(-) create mode 100644 packages/sampleCommons/config/icons/gen3/list.svg diff --git a/packages/frontend/rollup.config.mjs b/packages/frontend/rollup.config.mjs index 125c85d6..559270cb 100644 --- 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 index a8c3e980..e4918ee8 100644 --- a/packages/frontend/src/components/Content/TextContent.tsx +++ b/packages/frontend/src/components/Content/TextContent.tsx @@ -3,12 +3,17 @@ 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 { @@ -16,11 +21,14 @@ export interface TextContentProps { 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 ( -
- {textArray.map((item) => ( -

{item}

- ))} -
- ); - } - case ContentType.Markdown: { - const textString = Array.isArray(text) ? text.join('') : text; - return ( -
+ case ContentType.TextArray: { + const textArray = !Array.isArray(text) ? [text] : text; + return ( +
+ {textArray.map((item) => ( +

+ {item} +

+ ))} +
+ ); + } + case ContentType.Markdown: { + const textString = Array.isArray(text) ? text.join('') : text; + return ( +
+

); }, - ol(props:any) { + ol(props: any) { const { node, ...rest } = props; - return ( -

    - ); + return
      ; }, - ul(props:any) { + ul(props: any) { const { node, ...rest } = props; - return ( -
        - ); + return
          ; }, - li(props:any) { + li(props: any) { const { node, ...rest } = props; return
        • ; }, }} - > + > {textString} -
- ); - } +
+ ); + } + 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 ( +
+ + {textString} + {email && ( + {` ${email}.`} + )} + +
+ ); + } + 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 ( +
+ + {textString} + {link && ( + {` ${email}.`} + )} + +
+ ); + } case ContentType.Text: default: return ( diff --git a/packages/frontend/src/components/Login/LoginAccountButton.tsx b/packages/frontend/src/components/Login/LoginAccountButton.tsx index 7483e198..13d5ba85 100644 --- 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 ( handleSelected()}> -
- {userInfo?.username} -
+
{userInfo?.username}
 ); } diff --git a/packages/frontend/src/components/Login/LoginButton.tsx b/packages/frontend/src/components/Login/LoginButton.tsx index 9cb66280..dfc972ab 100644 --- 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 = , 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 ( -
+
{!hideText ? (authenticated ? 'Logout' : 'Login') : null} {icon}
diff --git a/packages/frontend/src/components/Login/LoginPanel.tsx b/packages/frontend/src/components/Login/LoginPanel.tsx index 0260f9b3..daf85c35 100644 --- a/packages/frontend/src/components/Login/LoginPanel.tsx +++ b/packages/frontend/src/components/Login/LoginPanel.tsx @@ -69,16 +69,9 @@ const LoginPanel = (loginConfig: LoginConfig) => { )} - {bottomContent?.map((content, index) => - content?.email ? ( - - ) : ( - - ), - )} + {bottomContent?.map((content, index) => ( + + ))}
diff --git a/packages/frontend/src/features/Navigation/Footer/FooterColumn.tsx b/packages/frontend/src/features/Navigation/Footer/FooterColumn.tsx index 52928c74..1dd05c11 100644 --- 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 = ({ case 'Links': { const links = item[itemType] as FooterLinks; + const mergedClassname = mergeTailwindClassnameWithDefault( + className, + 'flex space-x-1', + ); + return ( -
+
{links?.links.map((link, i) => { return ( diff --git a/packages/frontend/src/features/Navigation/Header.tsx b/packages/frontend/src/features/Navigation/Header.tsx index e2c13fa2..567b62eb 100644 --- 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' ? (
{banners?.map((banner) => )} diff --git a/packages/frontend/src/features/Navigation/NavigationBar.tsx b/packages/frontend/src/features/Navigation/NavigationBar.tsx index d2e25799..5048a470 100644 --- 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} />
); diff --git a/packages/frontend/src/features/Navigation/NavigationBarButton.tsx b/packages/frontend/src/features/Navigation/NavigationBarButton.tsx index f20bc54a..d923b11a 100644 --- 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,9 +24,10 @@ 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, @@ -39,6 +41,7 @@ const NavigationBarButton = ({ - -
+
+ +

+ {name} +

+
+ + ) : ( + - -

- {name} -

-
- +
+ +

+ {name} +

+
+ + )} ); diff --git a/packages/frontend/src/features/Navigation/NavigationLogo.tsx b/packages/frontend/src/features/Navigation/NavigationLogo.tsx index 20924698..b67b0e17 100644 --- a/packages/frontend/src/features/Navigation/NavigationLogo.tsx +++ b/packages/frontend/src/features/Navigation/NavigationLogo.tsx @@ -16,7 +16,7 @@ const NavigationLogo = ({ classNames = {}, }: NavigationBarLogo) => { const classNamesDefaults = { - root: 'relative flex py-2 justify-start items-center align-middle font-heading font-bold tracking-wide text-xl ml-[5px] mr-[20px]', + root: 'relative flex py-0 justify-start items-center align-middle font-heading font-bold tracking-wide text-xl ml-[5px] mr-[20px]', link: 'relative object-contain', logo: 'px-3', title: 'border-solid border-base-darker ml-1 mr-3', diff --git a/packages/frontend/src/features/Navigation/TopBar.tsx b/packages/frontend/src/features/Navigation/TopBar.tsx index b1467724..317af0c7 100644 --- a/packages/frontend/src/features/Navigation/TopBar.tsx +++ b/packages/frontend/src/features/Navigation/TopBar.tsx @@ -107,12 +107,14 @@ const TopBar = ({ }: TopBarProps) => { const classNamesDefaults = { root: 'flex justify-end items-center align-middle w-100 bg-secondary-lighter', + login: 'font-content hover:border-accent', }; const mergedClassnames = mergeDefaultTailwindClassnames( classNamesDefaults, classNames, ); + return (
@@ -126,10 +128,15 @@ const TopBar = ({ loginButtonVisibility === LoginButtonVisibility.Visible, )} {loginButtonVisibility != LoginButtonVisibility.Hidden ? ( - + ) : null} {loginButtonVisibility != LoginButtonVisibility.Hidden ? ( - + ) : null}
diff --git a/packages/frontend/src/features/Navigation/types.ts b/packages/frontend/src/features/Navigation/types.ts index b67b165b..6a8787a7 100644 --- 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/frontend/src/utils/mergeDefaultTailwindClassnames.ts b/packages/frontend/src/utils/mergeDefaultTailwindClassnames.ts index 189c2690..c14033b4 100644 --- a/packages/frontend/src/utils/mergeDefaultTailwindClassnames.ts +++ b/packages/frontend/src/utils/mergeDefaultTailwindClassnames.ts @@ -36,3 +36,8 @@ export const mergeDefaultTailwindClassnames = ( return mergedValues; }; + +export const mergeTailwindClassnameWithDefault = ( + userValues: string | undefined, + defaultValues: string, +): string => (userValues ? twMerge(defaultValues, userValues) : defaultValues); diff --git a/packages/sampleCommons/config/gen3/footer.json b/packages/sampleCommons/config/gen3/footer.json index 4dd0f190..4e6a9a32 100644 --- a/packages/sampleCommons/config/gen3/footer.json +++ b/packages/sampleCommons/config/gen3/footer.json @@ -1,6 +1,6 @@ { "classNames": { - "root": "bg-base-darker", + "root": "bg-base-min", "layout": "flex items-center justify-end" }, "rightSection": { diff --git a/packages/sampleCommons/config/gen3/navigation.json b/packages/sampleCommons/config/gen3/navigation.json index 777ed058..99678c45 100644 --- 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/gen3/themeColors.json b/packages/sampleCommons/config/gen3/themeColors.json index 8d965295..895b107e 100644 --- a/packages/sampleCommons/config/gen3/themeColors.json +++ b/packages/sampleCommons/config/gen3/themeColors.json @@ -216,7 +216,7 @@ "min": "#fefefe" }, "navigation": { - "footer": "#373A3C", + "footer": "#000000", "topbar_hover": "#FFFFFF", "light": "#111111", "DEFAULT": "#111111", diff --git a/packages/sampleCommons/config/icons/color.json b/packages/sampleCommons/config/icons/color.json index 52bbde6e..7549a001 100644 --- 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": "", diff --git a/packages/sampleCommons/config/icons/dataDictionary.json b/packages/sampleCommons/config/icons/dataDictionary.json index d15973aa..bc92c9e4 100644 --- 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": "" diff --git a/packages/sampleCommons/config/icons/gen3.json b/packages/sampleCommons/config/icons/gen3.json index 161f98ed..86d25a8b 100644 --- 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": "", @@ -107,6 +107,11 @@ "width": 44, "height": 51 }, + "list": { + "body": "", + "width": 512.18, + "height": 512.18 + }, "loginarrowcircle": { "body": "", "width": 30, diff --git a/packages/sampleCommons/config/icons/gen3/list.svg b/packages/sampleCommons/config/icons/gen3/list.svg new file mode 100644 index 00000000..0147005c --- /dev/null +++ b/packages/sampleCommons/config/icons/gen3/list.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/sampleCommons/config/icons/workspace.json b/packages/sampleCommons/config/icons/workspace.json index c19f95ac..4353a28b 100644 --- a/packages/sampleCommons/config/icons/workspace.json +++ b/packages/sampleCommons/config/icons/workspace.json @@ -1,6 +1,6 @@ { "prefix": "workspace", - "lastModified": 1732849568, + "lastModified": 1733715829, "icons": { "galaxy": { "body": "", diff --git a/packages/sampleCommons/tailwind.config.js b/packages/sampleCommons/tailwind.config.js index 30574118..03118a59 100644 --- a/packages/sampleCommons/tailwind.config.js +++ b/packages/sampleCommons/tailwind.config.js @@ -63,6 +63,8 @@ module.exports = { content: themeFonts.content, }, fontSize: { + xxxs: '0.4rem', + xxs: '0.5rem', tiny: '0.625rem', }, borderWidth: { @@ -168,6 +170,6 @@ module.exports = { }); }), ], - // Add any colors used in a json config file here - safelist: [], + // Add any colors. fontSize, height used in a json config file here + safelist: ['text-tiny', 'text-xxs', 'text-xxxs', 'h-20'], };