From 6847ba626e2183d894bede2aee0d12a86b9e5506 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Thu, 8 May 2025 09:28:02 -0400 Subject: [PATCH 01/21] TASK-220 Add data dictionary page and link it from homepage button --- .env.schema | 30 --------------------- components/DataDictionaryButton.tsx | 42 +++++++++++++++++++++++++++++ components/NavBar.tsx | 3 +++ global/utils/constants.ts | 1 + pages/data-dictionary/index.tsx | 17 ++++++++++++ 5 files changed, 63 insertions(+), 30 deletions(-) delete mode 100644 .env.schema create mode 100644 components/DataDictionaryButton.tsx create mode 100644 pages/data-dictionary/index.tsx diff --git a/.env.schema b/.env.schema deleted file mode 100644 index da56f5a4..00000000 --- a/.env.schema +++ /dev/null @@ -1,30 +0,0 @@ -######### Ego -# Base url for Ego API -NEXT_PUBLIC_EGO_API_ROOT=http://localhost:8088 -# Ego registered app id -NEXT_PUBLIC_EGO_CLIENT_ID=dms-ui-dev - -######### Arranger -NEXT_PUBLIC_ARRANGER_DOCUMENT_TYPE= -NEXT_PUBLIC_ARRANGER_INDEX= -NEXT_PUBLIC_ARRANGER_API_URL= -# Columns are field names separated by commas, with or without quotes -NEXT_PUBLIC_ARRANGER_MANIFEST_COLUMNS=fieldName, "fieldName", 'fieldName' - -######### DMS -NEXT_PUBLIC_SSO_PROVIDERS= - -# ######## Optional features/functionalities -NEXT_PUBLIC_DEBUG=true - -# Auth provider: ego or keycloak -NEXT_PUBLIC_AUTH_PROVIDER=ego -ACCESSTOKEN_ENCRYPTION_SECRET=super_secret -SESSION_ENCRYPTION_SECRET=this_is_a_super_secret_secret - -# keycloak (needed when AUTH_PROVIDER is keycloak) -NEXT_PUBLIC_KEYCLOAK_HOST=http://localhost -NEXT_PUBLIC_KEYCLOAK_REALM=myrealm -NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=webclient -KEYCLOAK_CLIENT_SECRET=client_secret -NEXT_PUBLIC_KEYCLOAK_PERMISSION_AUDIENCE=song diff --git a/components/DataDictionaryButton.tsx b/components/DataDictionaryButton.tsx new file mode 100644 index 00000000..2bd9bc32 --- /dev/null +++ b/components/DataDictionaryButton.tsx @@ -0,0 +1,42 @@ +import { css } from '@emotion/react'; + +import { DATA_DICTIONARY_PATH } from '../global/utils/constants'; +import { InternalLink as Link } from './Link'; + +const DataDictionaryButton:React.ComponentType = () => { + return ( +
css` + display: flex; + align-items: center; + justify-content: center; + width: 144px; + background-color: ${theme.colors.white}; + height: 100%; + &:hover { + background-color: ${theme.colors.grey_2}; + } + border-right: 2px solid ${theme.colors.white}; + `} + > + + css` + display: flex; + flex: 1; + height: 100%; + justify-content: center; + align-items: center; + text-decoration: none; + color: ${theme.colors.accent_dark}; + cursor: pointer; + `} + > + Data Dictionary + + +
+ ); +}; + +export default DataDictionaryButton; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index ddb58236..4ae534e6 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -30,6 +30,7 @@ import useAuthContext from '../global/hooks/useAuthContext'; import { StyledLinkAsButton, InternalLink as Link } from './Link'; import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; import { getConfig } from '../global/config'; +import DataDictionaryButton from './DataDictionaryButton'; const NavBar: React.ComponentType = () => { const { user } = useAuthContext(); @@ -141,6 +142,8 @@ const NavBar: React.ComponentType = () => { + + {NEXT_PUBLIC_AUTH_PROVIDER && (user ? (
{}, + isPublic: true, +})(() => { + return ( +
+ Welcome to the Data Dictionary page! +

+ This is where all the data will be! +

+
+ ) +}); + +export default DataDictionary; \ No newline at end of file From efe17da90bf1737e53daf9e89c7e8d163a56df66 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Thu, 8 May 2025 09:55:36 -0400 Subject: [PATCH 02/21] TASK-220 Add data dictionary page component with header and footer for consistency --- components/DataDictionaryButton.tsx | 4 ++-- components/pages/data-dictionary/index.tsx | 23 ++++++++++++++++++++++ pages/data-dictionary/index.tsx | 14 ++++--------- 3 files changed, 29 insertions(+), 12 deletions(-) create mode 100644 components/pages/data-dictionary/index.tsx diff --git a/components/DataDictionaryButton.tsx b/components/DataDictionaryButton.tsx index 2bd9bc32..d15c3801 100644 --- a/components/DataDictionaryButton.tsx +++ b/components/DataDictionaryButton.tsx @@ -3,7 +3,7 @@ import { css } from '@emotion/react'; import { DATA_DICTIONARY_PATH } from '../global/utils/constants'; import { InternalLink as Link } from './Link'; -const DataDictionaryButton:React.ComponentType = () => { +const DataDictionaryButton: React.ComponentType = () => { return (
css` @@ -32,7 +32,7 @@ const DataDictionaryButton:React.ComponentType = () => { cursor: pointer; `} > - Data Dictionary + Data Dictionary
diff --git a/components/pages/data-dictionary/index.tsx b/components/pages/data-dictionary/index.tsx new file mode 100644 index 00000000..000647cf --- /dev/null +++ b/components/pages/data-dictionary/index.tsx @@ -0,0 +1,23 @@ +import PageLayout from '../../PageLayout'; +import { css } from '@emotion/react'; + +const DataDictionaryPage = () => { + return ( + +
css` + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background-color: ${theme.colors.white}; + border-radius: 8px; + padding: 20px; + `} + >Welcome to the Data Dictionary page!
+ + ); +}; + +export default DataDictionaryPage; diff --git a/pages/data-dictionary/index.tsx b/pages/data-dictionary/index.tsx index b6b1457c..3a51738c 100644 --- a/pages/data-dictionary/index.tsx +++ b/pages/data-dictionary/index.tsx @@ -1,17 +1,11 @@ import { createPage } from '../../global/utils/pages'; +import DataDictionaryPage from '@/components/pages/data-dictionary'; -const DataDictionary = createPage({ +const DataDictionary = createPage({ getInitialProps: async () => {}, isPublic: true, })(() => { - return ( -
- Welcome to the Data Dictionary page! -

- This is where all the data will be! -

-
- ) + return ; }); -export default DataDictionary; \ No newline at end of file +export default DataDictionary; From 167d4cef06996f3a42af456462761e0fd4513ef2 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Thu, 8 May 2025 11:21:58 -0400 Subject: [PATCH 03/21] TASK-220 Add active state to Data Dictionary Button --- components/DataDictionaryButton.tsx | 12 ++++++++++-- components/pages/data-dictionary/index.tsx | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/components/DataDictionaryButton.tsx b/components/DataDictionaryButton.tsx index d15c3801..4f65e95c 100644 --- a/components/DataDictionaryButton.tsx +++ b/components/DataDictionaryButton.tsx @@ -1,9 +1,16 @@ -import { css } from '@emotion/react'; - +import { css, useTheme } from '@emotion/react'; +import { useRouter } from 'next/router'; import { DATA_DICTIONARY_PATH } from '../global/utils/constants'; import { InternalLink as Link } from './Link'; +import defaultTheme from './theme'; const DataDictionaryButton: React.ComponentType = () => { + const router = useRouter(); + const theme: typeof defaultTheme = useTheme(); + const activeLinkStyle = ` + background-color: ${theme.colors.grey_2}; + color: ${theme.colors.accent2_dark}; + `; return (
css` @@ -30,6 +37,7 @@ const DataDictionaryButton: React.ComponentType = () => { text-decoration: none; color: ${theme.colors.accent_dark}; cursor: pointer; + ${router.pathname === DATA_DICTIONARY_PATH ? activeLinkStyle : ''} `} > Data Dictionary diff --git a/components/pages/data-dictionary/index.tsx b/components/pages/data-dictionary/index.tsx index 000647cf..947f29bc 100644 --- a/components/pages/data-dictionary/index.tsx +++ b/components/pages/data-dictionary/index.tsx @@ -1,5 +1,5 @@ -import PageLayout from '../../PageLayout'; import { css } from '@emotion/react'; +import PageLayout from '../../PageLayout'; const DataDictionaryPage = () => { return ( From a0c38dae4b0470ca1fb26e779cfb22439d67e19a Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Thu, 8 May 2025 11:32:21 -0400 Subject: [PATCH 04/21] add appropriate licensing comments --- components/DataDictionaryButton.tsx | 21 +++++++++++++++++++++ components/pages/data-dictionary/index.tsx | 21 +++++++++++++++++++++ pages/data-dictionary/index.tsx | 21 +++++++++++++++++++++ 3 files changed, 63 insertions(+) diff --git a/components/DataDictionaryButton.tsx b/components/DataDictionaryButton.tsx index 4f65e95c..3bb92f5b 100644 --- a/components/DataDictionaryButton.tsx +++ b/components/DataDictionaryButton.tsx @@ -1,3 +1,24 @@ +/* + * + * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved + * + * This program and the accompanying materials are made available under the terms of + * the GNU Affero General Public License v3.0. You should have received a copy of the + * GNU Affero General Public License along with this program. + * If not, see . + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY + * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES + * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT + * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, + * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED + * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; + * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER + * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN + * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + * + */ + import { css, useTheme } from '@emotion/react'; import { useRouter } from 'next/router'; import { DATA_DICTIONARY_PATH } from '../global/utils/constants'; diff --git a/components/pages/data-dictionary/index.tsx b/components/pages/data-dictionary/index.tsx index 947f29bc..75621f67 100644 --- a/components/pages/data-dictionary/index.tsx +++ b/components/pages/data-dictionary/index.tsx @@ -1,3 +1,24 @@ +/* + * + * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved + * + * This program and the accompanying materials are made available under the terms of + * the GNU Affero General Public License v3.0. You should have received a copy of the + * GNU Affero General Public License along with this program. + * If not, see . + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY + * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES + * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT + * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, + * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED + * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; + * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER + * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN + * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + * + */ + import { css } from '@emotion/react'; import PageLayout from '../../PageLayout'; diff --git a/pages/data-dictionary/index.tsx b/pages/data-dictionary/index.tsx index 3a51738c..ef79cd3f 100644 --- a/pages/data-dictionary/index.tsx +++ b/pages/data-dictionary/index.tsx @@ -1,3 +1,24 @@ +/* + * + * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved + * + * This program and the accompanying materials are made available under the terms of + * the GNU Affero General Public License v3.0. You should have received a copy of the + * GNU Affero General Public License along with this program. + * If not, see . + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY + * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES + * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT + * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, + * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED + * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; + * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER + * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN + * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + * + */ + import { createPage } from '../../global/utils/pages'; import DataDictionaryPage from '@/components/pages/data-dictionary'; From eb8c05156786c1e86931d32e8bf2483a22740072 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Fri, 9 May 2025 09:54:25 -0400 Subject: [PATCH 05/21] TASK-220 Add back .env.schema file, according to PR Review --- .env.schema | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 .env.schema diff --git a/.env.schema b/.env.schema new file mode 100644 index 00000000..54d95489 --- /dev/null +++ b/.env.schema @@ -0,0 +1,30 @@ +######### Ego +# Base url for Ego API +NEXT_PUBLIC_EGO_API_ROOT=http://localhost:8088 +# Ego registered app id +NEXT_PUBLIC_EGO_CLIENT_ID=dms-ui-dev + +######### Arranger +NEXT_PUBLIC_ARRANGER_DOCUMENT_TYPE= +NEXT_PUBLIC_ARRANGER_INDEX= +NEXT_PUBLIC_ARRANGER_API_URL= +# Columns are field names separated by commas, with or without quotes +NEXT_PUBLIC_ARRANGER_MANIFEST_COLUMNS=fieldName, "fieldName", 'fieldName' + +######### DMS +NEXT_PUBLIC_SSO_PROVIDERS= + +# ######## Optional features/functionalities +NEXT_PUBLIC_DEBUG=true + +# Auth provider: ego or keycloak +NEXT_PUBLIC_AUTH_PROVIDER=ego +ACCESSTOKEN_ENCRYPTION_SECRET=super_secret +SESSION_ENCRYPTION_SECRET=this_is_a_super_secret_secret + +# keycloak (needed when AUTH_PROVIDER is keycloak) +NEXT_PUBLIC_KEYCLOAK_HOST=http://localhost +NEXT_PUBLIC_KEYCLOAK_REALM=myrealm +NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=webclient +KEYCLOAK_CLIENT_SECRET=client_secret +NEXT_PUBLIC_KEYCLOAK_PERMISSION_AUDIENCE=song \ No newline at end of file From f0554418cc7f9095d2388b7c9271e08a8e722073 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf <121772695+SaqAsh@users.noreply.github.com> Date: Fri, 9 May 2025 09:56:52 -0400 Subject: [PATCH 06/21] TASK-220 Update pages/data-dictionary/index.tsx with absolute imports Co-authored-by: Anders Richardsson <2107110+justincorrigible@users.noreply.github.com> --- pages/data-dictionary/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/data-dictionary/index.tsx b/pages/data-dictionary/index.tsx index ef79cd3f..0e6082ad 100644 --- a/pages/data-dictionary/index.tsx +++ b/pages/data-dictionary/index.tsx @@ -19,7 +19,7 @@ * */ -import { createPage } from '../../global/utils/pages'; +import { createPage } from '@/global/utils/pages'; import DataDictionaryPage from '@/components/pages/data-dictionary'; const DataDictionary = createPage({ From b773bc05ddd39408ff17e9f529e9f3fe1f6243a7 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf <121772695+SaqAsh@users.noreply.github.com> Date: Fri, 9 May 2025 09:57:40 -0400 Subject: [PATCH 07/21] TASK-220 Update components/pages/data-dictionary/index.tsx with absolute import Co-authored-by: Anders Richardsson <2107110+justincorrigible@users.noreply.github.com> --- components/pages/data-dictionary/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/pages/data-dictionary/index.tsx b/components/pages/data-dictionary/index.tsx index 75621f67..b464a71c 100644 --- a/components/pages/data-dictionary/index.tsx +++ b/components/pages/data-dictionary/index.tsx @@ -20,7 +20,7 @@ */ import { css } from '@emotion/react'; -import PageLayout from '../../PageLayout'; +import PageLayout from '@/components/PageLayout'; const DataDictionaryPage = () => { return ( From df37e4deb311f944507a0fa5fe055e990a1bb075 Mon Sep 17 00:00:00 2001 From: Anders Richardsson <2107110+justincorrigible@users.noreply.github.com> Date: Fri, 9 May 2025 10:17:41 -0400 Subject: [PATCH 08/21] restore blank endline in .env.schema --- .env.schema | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.schema b/.env.schema index 54d95489..da56f5a4 100644 --- a/.env.schema +++ b/.env.schema @@ -27,4 +27,4 @@ NEXT_PUBLIC_KEYCLOAK_HOST=http://localhost NEXT_PUBLIC_KEYCLOAK_REALM=myrealm NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=webclient KEYCLOAK_CLIENT_SECRET=client_secret -NEXT_PUBLIC_KEYCLOAK_PERMISSION_AUDIENCE=song \ No newline at end of file +NEXT_PUBLIC_KEYCLOAK_PERMISSION_AUDIENCE=song From db64bbf440db06c2b55327609fa5e343b29326e0 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Fri, 9 May 2025 10:27:33 -0400 Subject: [PATCH 09/21] TASK-220 rename DataDictionaryButton.tsx to LinkToDataDictionary.tsx for clarity --- .../{DataDictionaryButton.tsx => LinkToDataDictionary.tsx} | 4 ++-- components/NavBar.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) rename components/{DataDictionaryButton.tsx => LinkToDataDictionary.tsx} (96%) diff --git a/components/DataDictionaryButton.tsx b/components/LinkToDataDictionary.tsx similarity index 96% rename from components/DataDictionaryButton.tsx rename to components/LinkToDataDictionary.tsx index 3bb92f5b..5ce3b1dc 100644 --- a/components/DataDictionaryButton.tsx +++ b/components/LinkToDataDictionary.tsx @@ -25,7 +25,7 @@ import { DATA_DICTIONARY_PATH } from '../global/utils/constants'; import { InternalLink as Link } from './Link'; import defaultTheme from './theme'; -const DataDictionaryButton: React.ComponentType = () => { +const LinkToDataDictionary: React.ComponentType = () => { const router = useRouter(); const theme: typeof defaultTheme = useTheme(); const activeLinkStyle = ` @@ -68,4 +68,4 @@ const DataDictionaryButton: React.ComponentType = () => { ); }; -export default DataDictionaryButton; +export default LinkToDataDictionary; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 4ae534e6..2c389810 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -30,7 +30,7 @@ import useAuthContext from '../global/hooks/useAuthContext'; import { StyledLinkAsButton, InternalLink as Link } from './Link'; import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; import { getConfig } from '../global/config'; -import DataDictionaryButton from './DataDictionaryButton'; +import LinkToDataDictionary from './LinkToDataDictionary'; const NavBar: React.ComponentType = () => { const { user } = useAuthContext(); @@ -47,7 +47,7 @@ const NavBar: React.ComponentType = () => { const activeLinkStyle = ` background-color: ${theme.colors.grey_2}; color: ${theme.colors.accent2_dark}; - `; +`; const labIcon = NEXT_PUBLIC_LOGO_FILENAME ? ( {
- + {NEXT_PUBLIC_AUTH_PROVIDER && (user ? ( From 8a80412b9b7870a63ba03d36176c3b9ea46b9f8d Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Fri, 9 May 2025 12:44:51 -0400 Subject: [PATCH 10/21] change copyright from 2022 to 2025 and use prettier for formatting code --- components/LinkToDataDictionary.tsx | 2 +- components/NavBar.tsx | 10 +++------ components/pages/data-dictionary/index.tsx | 26 ++++++++++++---------- pages/data-dictionary/index.tsx | 2 +- 4 files changed, 19 insertions(+), 21 deletions(-) diff --git a/components/LinkToDataDictionary.tsx b/components/LinkToDataDictionary.tsx index 5ce3b1dc..719d422b 100644 --- a/components/LinkToDataDictionary.tsx +++ b/components/LinkToDataDictionary.tsx @@ -1,6 +1,6 @@ /* * - * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved + * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved * * This program and the accompanying materials are made available under the terms of * the GNU Affero General Public License v3.0. You should have received a copy of the diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 2c389810..2484ff21 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -37,12 +37,8 @@ const NavBar: React.ComponentType = () => { const router = useRouter(); const theme: typeof defaultTheme = useTheme(); - const { - NEXT_PUBLIC_AUTH_PROVIDER, - NEXT_PUBLIC_LAB_NAME, - NEXT_PUBLIC_LOGO_FILENAME, - NEXT_PUBLIC_BASE_PATH, - } = getConfig(); + const { NEXT_PUBLIC_AUTH_PROVIDER, NEXT_PUBLIC_LAB_NAME, NEXT_PUBLIC_LOGO_FILENAME, NEXT_PUBLIC_BASE_PATH } = + getConfig(); const activeLinkStyle = ` background-color: ${theme.colors.grey_2}; @@ -142,7 +138,7 @@ const NavBar: React.ComponentType = () => {
- + {NEXT_PUBLIC_AUTH_PROVIDER && (user ? ( diff --git a/components/pages/data-dictionary/index.tsx b/components/pages/data-dictionary/index.tsx index b464a71c..f04301cc 100644 --- a/components/pages/data-dictionary/index.tsx +++ b/components/pages/data-dictionary/index.tsx @@ -1,6 +1,6 @@ /* * - * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved + * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved * * This program and the accompanying materials are made available under the terms of * the GNU Affero General Public License v3.0. You should have received a copy of the @@ -26,17 +26,19 @@ const DataDictionaryPage = () => { return (
css` - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - background-color: ${theme.colors.white}; - border-radius: 8px; - padding: 20px; - `} - >Welcome to the Data Dictionary page!
+ css={(theme) => css` + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background-color: ${theme.colors.white}; + border-radius: 8px; + padding: 20px; + `} + > + Welcome to the Data Dictionary page! + ); }; diff --git a/pages/data-dictionary/index.tsx b/pages/data-dictionary/index.tsx index 0e6082ad..afd246d3 100644 --- a/pages/data-dictionary/index.tsx +++ b/pages/data-dictionary/index.tsx @@ -1,6 +1,6 @@ /* * - * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved + * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved * * This program and the accompanying materials are made available under the terms of * the GNU Affero General Public License v3.0. You should have received a copy of the From cf31fcec5808ff7216263006694132a203e1e54b Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Fri, 16 May 2025 12:12:42 -0400 Subject: [PATCH 11/21] refactor navbar link buttons such that they are in one component --- components/NavBar.tsx | 40 ++----------------- ...ataDictionary.tsx => NavbarLinkButton.tsx} | 16 +++++--- 2 files changed, 14 insertions(+), 42 deletions(-) rename components/{LinkToDataDictionary.tsx => NavbarLinkButton.tsx} (88%) diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 2484ff21..5cbc7207 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -28,9 +28,9 @@ import defaultTheme from './theme'; import { OvertureLogo } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { StyledLinkAsButton, InternalLink as Link } from './Link'; -import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; +import { DATA_DICTIONARY_PATH, EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; import { getConfig } from '../global/config'; -import LinkToDataDictionary from './LinkToDataDictionary'; +import NavbarLinkButton from './NavbarLinkButton'; const NavBar: React.ComponentType = () => { const { user } = useAuthContext(); @@ -105,40 +105,8 @@ const NavBar: React.ComponentType = () => { align-items: center; `} > -
css` - display: flex; - align-items: center; - justify-content: center; - width: 144px; - background-color: ${theme.colors.white}; - height: 100%; - &:hover { - background-color: ${theme.colors.grey_2}; - } - border-right: 2px solid ${theme.colors.white}; - `} - > - - css` - display: flex; - flex: 1; - height: 100%; - justify-content: center; - align-items: center; - text-decoration: none; - color: ${theme.colors.accent_dark}; - cursor: pointer; - ${router.pathname === EXPLORER_PATH ? activeLinkStyle : ''} - `} - > - Data Explorer - - -
- - + + {NEXT_PUBLIC_AUTH_PROVIDER && (user ? ( diff --git a/components/LinkToDataDictionary.tsx b/components/NavbarLinkButton.tsx similarity index 88% rename from components/LinkToDataDictionary.tsx rename to components/NavbarLinkButton.tsx index 719d422b..a3c44a9e 100644 --- a/components/LinkToDataDictionary.tsx +++ b/components/NavbarLinkButton.tsx @@ -21,11 +21,15 @@ import { css, useTheme } from '@emotion/react'; import { useRouter } from 'next/router'; -import { DATA_DICTIONARY_PATH } from '../global/utils/constants'; import { InternalLink as Link } from './Link'; import defaultTheme from './theme'; -const LinkToDataDictionary: React.ComponentType = () => { +type NavbarLinkProps = { + path: string; + label: string; +}; + +const NavbarLinkButton: React.FC = ({ path, label }) => { const router = useRouter(); const theme: typeof defaultTheme = useTheme(); const activeLinkStyle = ` @@ -47,7 +51,7 @@ const LinkToDataDictionary: React.ComponentType = () => { border-right: 2px solid ${theme.colors.white}; `} > - + css` display: flex; @@ -58,14 +62,14 @@ const LinkToDataDictionary: React.ComponentType = () => { text-decoration: none; color: ${theme.colors.accent_dark}; cursor: pointer; - ${router.pathname === DATA_DICTIONARY_PATH ? activeLinkStyle : ''} + ${router.pathname === path ? activeLinkStyle : ''} `} > - Data Dictionary + {label} ); }; -export default LinkToDataDictionary; +export default NavbarLinkButton; From aaca04bef15e64815d01f243e08ebafae5843968 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Wed, 21 May 2025 09:14:46 -0400 Subject: [PATCH 12/21] make css changes to move link buttons to the left hand side of the navbar --- components/NavBar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 5cbc7207..6606a874 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -76,6 +76,7 @@ const NavBar: React.ComponentType = () => { align-items: center; margin-left: 16px; cursor: pointer; + gap: 10px; `} > @@ -98,6 +99,8 @@ const NavBar: React.ComponentType = () => { + +
{ align-items: center; `} > - - - {NEXT_PUBLIC_AUTH_PROVIDER && (user ? (
Date: Thu, 22 May 2025 14:50:31 -0400 Subject: [PATCH 13/21] initial commit, repurpose dropdown for user to be used in the navbar, need to add functionality to mimic prelude --- components/Button.tsx | 19 +++--- components/NavBar.tsx | 10 +++ components/NavbarDropDown.tsx | 113 ++++++++++++++++++++++++++++++++++ components/UserDropdown.tsx | 42 ++++++------- global/types.ts | 9 ++- global/utils/constants.ts | 14 ++--- 6 files changed, 167 insertions(+), 40 deletions(-) create mode 100644 components/NavbarDropDown.tsx diff --git a/components/Button.tsx b/components/Button.tsx index 4d5eae99..7e9aa996 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -67,14 +67,7 @@ const Button = React.forwardRef< } >( ( - { - children, - onClick = (e) => {}, - disabled = false, - isAsync = false, - className, - isLoading: controlledLoadingState, - }, + { children, onClick = (e) => {}, disabled = false, isAsync = false, className, isLoading: controlledLoadingState }, ref = React.createRef(), ) => { const [isLoading, setLoading] = React.useState(false); @@ -117,5 +110,15 @@ const Button = React.forwardRef< ); }, ); +export const TransparentButton = styled(ButtonElement)` + background: none; + border: none; + justify-content: flex-start; + text-align: left; + &:focus, + &:hover { + background: none; + } +`; export default Button; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 6606a874..37600a7b 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -31,6 +31,7 @@ import { StyledLinkAsButton, InternalLink as Link } from './Link'; import { DATA_DICTIONARY_PATH, EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; import { getConfig } from '../global/config'; import NavbarLinkButton from './NavbarLinkButton'; +import NavbarDropDown from './NavbarDropDown'; const NavBar: React.ComponentType = () => { const { user } = useAuthContext(); @@ -101,6 +102,15 @@ const NavBar: React.ComponentType = () => { +
css` + display: flex; + align-items: center; + width: 100%; + padding: 6px 12px; + font-size: 16px; + color: ${theme.colors.black}; + background-color: ${theme.colors.white}; + border: 1px solid ${theme.colors.grey_3}; + text-decoration: none; + cursor: pointer; + + &:hover { + background-color: ${theme.colors.grey_1}; + } + `} +`; + +const NavbarDropDown: ComponentType = ({ MenuItemMap = new Map(), title, disabled }) => { + const [open, setOpen] = useState(false); + const dropdownRef = useRef(null); + const theme = useTheme(); + const IterableMenuMap = Array.from(MenuItemMap.entries()); + + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setOpen(false); + } + }; + + useEffect(() => { + if (open) { + document.addEventListener('mousedown', handleClickOutside); + } + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [open]); + + return ( + setOpen(!open)} + > + + {title} + + + + {!disabled && open && ( +
    + {IterableMenuMap.map(([title, link]) => ( +
  • + {title} +
    • + ))} +
+ )} + + ); +}; + +export default NavbarDropDown; diff --git a/components/UserDropdown.tsx b/components/UserDropdown.tsx index 028feff3..f1b9d64f 100644 --- a/components/UserDropdown.tsx +++ b/components/UserDropdown.tsx @@ -75,23 +75,23 @@ const CurrentUser = () => { const StyledListLink = styled('a')` ${({ theme }) => css` - text-decoration: none; - height: 40px; - display: flex; - align-items: center; - background: ${theme.colors.white}; - padding: 6px 12px; - color: ${theme.colors.black}; - background-color: ${theme.colors.white}; - border: 1px solid ${theme.colors.grey_3}; - outline: none; - font-size: 16px; - cursor: pointer; - width: 100%; - &:hover { - background-color: ${theme.colors.grey_1}; - } - `} + text-decoration: none; + height: 40px; + display: flex; + align-items: center; + background: ${theme.colors.white}; + padding: 6px 12px; + color: ${theme.colors.black}; + background-color: ${theme.colors.white}; + border: 1px solid ${theme.colors.grey_3}; + outline: none; + font-size: 16px; + cursor: pointer; + width: 100%; + &:hover { + background-color: ${theme.colors.grey_1}; + } + `} `; const UserDropdown = () => { @@ -120,14 +120,10 @@ const UserDropdown = () => { }; }, [open]); - const fillColor = - router.pathname === USER_PATH ? theme.colors.accent2_dark : theme.colors.accent_dark; + const fillColor = router.pathname === USER_PATH ? theme.colors.accent2_dark : theme.colors.accent_dark; const handleLogout = () => { - if ( - NEXT_PUBLIC_AUTH_PROVIDER === AUTH_PROVIDER.EGO || - NEXT_PUBLIC_AUTH_PROVIDER === AUTH_PROVIDER.KEYCLOAK - ) { + if (NEXT_PUBLIC_AUTH_PROVIDER === AUTH_PROVIDER.EGO || NEXT_PUBLIC_AUTH_PROVIDER === AUTH_PROVIDER.KEYCLOAK) { signOut(); } }; diff --git a/global/types.ts b/global/types.ts index 95633112..14c377dd 100644 --- a/global/types.ts +++ b/global/types.ts @@ -1,3 +1,5 @@ +import { ReactChildren, ReactNode, SyntheticEvent } from 'react'; + /* * * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved @@ -18,7 +20,12 @@ * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * */ - +export type NavbarDropDownProps = { + MenuItemMap?: Map; + title: string; + disabled?: boolean; + children?: ReactNode | ReactChildren; +}; export enum UserStatus { APPROVED = 'APPROVED', DISABLED = 'DISABLED', diff --git a/global/utils/constants.ts b/global/utils/constants.ts index 4ec61012..46ebe535 100644 --- a/global/utils/constants.ts +++ b/global/utils/constants.ts @@ -23,8 +23,7 @@ import urlJoin from 'url-join'; import { getConfig } from '../config'; -const { NEXT_PUBLIC_EGO_API_ROOT, NEXT_PUBLIC_KEYCLOAK_HOST, NEXT_PUBLIC_KEYCLOAK_REALM } = - getConfig(); +const { NEXT_PUBLIC_EGO_API_ROOT, NEXT_PUBLIC_KEYCLOAK_HOST, NEXT_PUBLIC_KEYCLOAK_REALM } = getConfig(); export const EGO_JWT_KEY = 'EGO_JWT'; export const EGO_API_KEY_ENDPOINT = `${NEXT_PUBLIC_EGO_API_ROOT}/o/api_key`; @@ -35,16 +34,15 @@ export const USER_PATH = '/user'; export const LOGIN_PATH = '/login'; export const DATA_DICTIONARY_PATH = '/data-dictionary'; +// paths +export const INTERNAL_PATHS = [EXPLORER_PATH, DATA_DICTIONARY_PATH, LOGIN_PATH, USER_PATH]; + // external docs links -export const HELP_URL = 'https://github.com/overture-stack/stage/issues/new/choose' +export const HELP_URL = 'https://github.com/overture-stack/stage/issues/new/choose'; export const EMAIL_SETTING_URL = 'admin@example.com'; // keycloak -export const KEYCLOAK_URL_ISSUER = urlJoin( - NEXT_PUBLIC_KEYCLOAK_HOST, - 'realms', - NEXT_PUBLIC_KEYCLOAK_REALM, -); +export const KEYCLOAK_URL_ISSUER = urlJoin(NEXT_PUBLIC_KEYCLOAK_HOST, 'realms', NEXT_PUBLIC_KEYCLOAK_REALM); export const KEYCLOAK_URL_TOKEN = urlJoin(KEYCLOAK_URL_ISSUER, 'protocol/openid-connect/token'); export const KEYCLOAK_API_KEY_ENDPOINT = urlJoin(KEYCLOAK_URL_ISSUER, 'apikey/api_key'); From 8acc3b0cad4d14c6943a074cae93f94c0d133173 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Wed, 30 Jul 2025 15:18:44 -0400 Subject: [PATCH 14/21] undo constants change and delete data dictionary page --- global/utils/constants.ts | 4 ---- pages/data-dictionary/index.tsx | 32 -------------------------------- 2 files changed, 36 deletions(-) delete mode 100644 pages/data-dictionary/index.tsx diff --git a/global/utils/constants.ts b/global/utils/constants.ts index 46ebe535..edb29629 100644 --- a/global/utils/constants.ts +++ b/global/utils/constants.ts @@ -32,10 +32,6 @@ export const EGO_SCOPES_ENDPOINT = `${NEXT_PUBLIC_EGO_API_ROOT}/o/scopes`; export const EXPLORER_PATH = '/explorer'; export const USER_PATH = '/user'; export const LOGIN_PATH = '/login'; -export const DATA_DICTIONARY_PATH = '/data-dictionary'; - -// paths -export const INTERNAL_PATHS = [EXPLORER_PATH, DATA_DICTIONARY_PATH, LOGIN_PATH, USER_PATH]; // external docs links export const HELP_URL = 'https://github.com/overture-stack/stage/issues/new/choose'; diff --git a/pages/data-dictionary/index.tsx b/pages/data-dictionary/index.tsx deleted file mode 100644 index afd246d3..00000000 --- a/pages/data-dictionary/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/* - * - * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved - * - * This program and the accompanying materials are made available under the terms of - * the GNU Affero General Public License v3.0. You should have received a copy of the - * GNU Affero General Public License along with this program. - * If not, see . - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY - * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES - * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT - * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, - * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED - * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; - * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER - * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN - * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - */ - -import { createPage } from '@/global/utils/pages'; -import DataDictionaryPage from '@/components/pages/data-dictionary'; - -const DataDictionary = createPage({ - getInitialProps: async () => {}, - isPublic: true, -})(() => { - return ; -}); - -export default DataDictionary; From b5e932fb567c45d186200162a491c4211c64f61b Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Wed, 30 Jul 2025 15:24:06 -0400 Subject: [PATCH 15/21] some cleanup --- components/Button.tsx | 17 +---- components/NavBar.tsx | 24 ++------ components/NavbarDropDown.tsx | 113 ---------------------------------- 3 files changed, 9 insertions(+), 145 deletions(-) delete mode 100644 components/NavbarDropDown.tsx diff --git a/components/Button.tsx b/components/Button.tsx index 7e9aa996..22e1e090 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -19,9 +19,9 @@ * */ -import React, { ReactNode, ReactNodeArray } from 'react'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import React, { ReactNode } from 'react'; import defaultTheme from './theme'; import { Spinner } from './theme/icons'; @@ -56,7 +56,7 @@ const ButtonElement = styled('button')` const Button = React.forwardRef< HTMLButtonElement, { - children?: ReactNode | ReactNodeArray; + children?: ReactNode; disabled?: boolean; onClick?: ( e: React.SyntheticEvent, @@ -98,7 +98,7 @@ const Button = React.forwardRef< {children} css` + css={css` position: absolute; visibility: ${shouldShowLoading ? 'visible' : 'hidden'}; bottom: 1px; @@ -110,15 +110,4 @@ const Button = React.forwardRef< ); }, ); -export const TransparentButton = styled(ButtonElement)` - background: none; - border: none; - justify-content: flex-start; - text-align: left; - - &:focus, - &:hover { - background: none; - } -`; export default Button; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 37600a7b..925d8d35 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -19,19 +19,17 @@ * */ -import React from 'react'; +import { getConfig } from '@/global/config'; import { css, useTheme } from '@emotion/react'; import { useRouter } from 'next/router'; - +import React from 'react'; +import useAuthContext from '../global/hooks/useAuthContext'; +import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; +import { InternalLink as Link, StyledLinkAsButton } from './Link'; +import NavbarLinkButton from './NavbarLinkButton'; import UserDropdown from './UserDropdown'; import defaultTheme from './theme'; import { OvertureLogo } from './theme/icons'; -import useAuthContext from '../global/hooks/useAuthContext'; -import { StyledLinkAsButton, InternalLink as Link } from './Link'; -import { DATA_DICTIONARY_PATH, EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; -import { getConfig } from '../global/config'; -import NavbarLinkButton from './NavbarLinkButton'; -import NavbarDropDown from './NavbarDropDown'; const NavBar: React.ComponentType = () => { const { user } = useAuthContext(); @@ -101,16 +99,6 @@ const NavBar: React.ComponentType = () => { - -
css` - display: flex; - align-items: center; - width: 100%; - padding: 6px 12px; - font-size: 16px; - color: ${theme.colors.black}; - background-color: ${theme.colors.white}; - border: 1px solid ${theme.colors.grey_3}; - text-decoration: none; - cursor: pointer; - - &:hover { - background-color: ${theme.colors.grey_1}; - } - `} -`; - -const NavbarDropDown: ComponentType = ({ MenuItemMap = new Map(), title, disabled }) => { - const [open, setOpen] = useState(false); - const dropdownRef = useRef(null); - const theme = useTheme(); - const IterableMenuMap = Array.from(MenuItemMap.entries()); - - const handleClickOutside = (event: MouseEvent) => { - if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { - setOpen(false); - } - }; - - useEffect(() => { - if (open) { - document.addEventListener('mousedown', handleClickOutside); - } - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [open]); - - return ( - setOpen(!open)} - > - - {title} - - - - {!disabled && open && ( -
    - {IterableMenuMap.map(([title, link]) => ( -
  • - {title} -
    • - ))} -
- )} - - ); -}; - -export default NavbarDropDown; From 071c5fae17fe836dd23035c0d48523a5eb7f32c0 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Wed, 30 Jul 2025 15:24:55 -0400 Subject: [PATCH 16/21] revert types --- global/types.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/global/types.ts b/global/types.ts index 14c377dd..95633112 100644 --- a/global/types.ts +++ b/global/types.ts @@ -1,5 +1,3 @@ -import { ReactChildren, ReactNode, SyntheticEvent } from 'react'; - /* * * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved @@ -20,12 +18,7 @@ import { ReactChildren, ReactNode, SyntheticEvent } from 'react'; * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * */ -export type NavbarDropDownProps = { - MenuItemMap?: Map; - title: string; - disabled?: boolean; - children?: ReactNode | ReactChildren; -}; + export enum UserStatus { APPROVED = 'APPROVED', DISABLED = 'DISABLED', From 012dc507fe860266006cb3c8cae80bc3922746a2 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Wed, 30 Jul 2025 15:25:45 -0400 Subject: [PATCH 17/21] get rid of data dictionary page again --- components/pages/data-dictionary/index.tsx | 46 ---------------------- 1 file changed, 46 deletions(-) delete mode 100644 components/pages/data-dictionary/index.tsx diff --git a/components/pages/data-dictionary/index.tsx b/components/pages/data-dictionary/index.tsx deleted file mode 100644 index f04301cc..00000000 --- a/components/pages/data-dictionary/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/* - * - * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved - * - * This program and the accompanying materials are made available under the terms of - * the GNU Affero General Public License v3.0. You should have received a copy of the - * GNU Affero General Public License along with this program. - * If not, see . - * - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY - * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES - * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT - * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, - * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED - * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; - * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER - * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN - * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - */ - -import { css } from '@emotion/react'; -import PageLayout from '@/components/PageLayout'; - -const DataDictionaryPage = () => { - return ( - -
css` - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - background-color: ${theme.colors.white}; - border-radius: 8px; - padding: 20px; - `} - > - Welcome to the Data Dictionary page! -
- - ); -}; - -export default DataDictionaryPage; From d1546de0317fc0486743230f2d51225039ca19cf Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Wed, 30 Jul 2025 15:31:04 -0400 Subject: [PATCH 18/21] revert button since it is a scary place --- components/Button.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/Button.tsx b/components/Button.tsx index 22e1e090..41aab7cf 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -19,9 +19,9 @@ * */ +import React, { ReactNode, ReactNodeArray } from 'react'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import React, { ReactNode } from 'react'; import defaultTheme from './theme'; import { Spinner } from './theme/icons'; @@ -56,7 +56,7 @@ const ButtonElement = styled('button')` const Button = React.forwardRef< HTMLButtonElement, { - children?: ReactNode; + children?: ReactNode | ReactNodeArray; disabled?: boolean; onClick?: ( e: React.SyntheticEvent, @@ -98,7 +98,7 @@ const Button = React.forwardRef< {children} css` position: absolute; visibility: ${shouldShowLoading ? 'visible' : 'hidden'}; bottom: 1px; @@ -110,4 +110,5 @@ const Button = React.forwardRef< ); }, ); + export default Button; From 80167c3cb10380ac6679f6fe7599da2ab842ce61 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Wed, 30 Jul 2025 15:34:56 -0400 Subject: [PATCH 19/21] navbar link refactor --- components/NavbarLinkButton.tsx | 80 +++++++++++++++++---------------- 1 file changed, 41 insertions(+), 39 deletions(-) diff --git a/components/NavbarLinkButton.tsx b/components/NavbarLinkButton.tsx index a3c44a9e..d1048aa5 100644 --- a/components/NavbarLinkButton.tsx +++ b/components/NavbarLinkButton.tsx @@ -19,55 +19,57 @@ * */ -import { css, useTheme } from '@emotion/react'; +import { css, Theme, useTheme } from '@emotion/react'; import { useRouter } from 'next/router'; -import { InternalLink as Link } from './Link'; -import defaultTheme from './theme'; + +import { InternalLink } from '@/components/Link'; +import defaultTheme from '@/components/theme'; type NavbarLinkProps = { path: string; label: string; }; -const NavbarLinkButton: React.FC = ({ path, label }) => { +const getContainerStyles = (theme: typeof defaultTheme) => css` + display: flex; + align-items: center; + justify-content: center; + width: 144px; + background-color: ${theme.colors.white}; + height: 100%; + &:hover { + background-color: ${theme.colors.grey_2}; + } + border-right: 2px solid ${theme.colors.white}; +`; + +const getLinkStyles = (theme: Theme, isActive: boolean) => css` + display: flex; + flex: 1; + height: 100%; + justify-content: center; + align-items: center; + text-decoration: none; + color: ${theme.colors.accent_dark}; + cursor: pointer; + ${isActive + ? ` + background-color: ${theme.colors.grey_2}; + color: ${theme.colors.accent2_dark}; + ` + : ''} +`; + +const NavbarLinkButton = ({ path, label }: NavbarLinkProps) => { const router = useRouter(); const theme: typeof defaultTheme = useTheme(); - const activeLinkStyle = ` - background-color: ${theme.colors.grey_2}; - color: ${theme.colors.accent2_dark}; - `; + const isActive = router.pathname === path; + return ( -
css` - display: flex; - align-items: center; - justify-content: center; - width: 144px; - background-color: ${theme.colors.white}; - height: 100%; - &:hover { - background-color: ${theme.colors.grey_2}; - } - border-right: 2px solid ${theme.colors.white}; - `} - > - - css` - display: flex; - flex: 1; - height: 100%; - justify-content: center; - align-items: center; - text-decoration: none; - color: ${theme.colors.accent_dark}; - cursor: pointer; - ${router.pathname === path ? activeLinkStyle : ''} - `} - > - {label} - - +
+ + {label} +
); }; From ab8af2ed7c1c65cc77b0ed40c570986cb31774f4 Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Wed, 30 Jul 2025 15:38:31 -0400 Subject: [PATCH 20/21] slight navbar cleanup --- components/NavBar.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 925d8d35..11ac3baa 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -1,6 +1,6 @@ /* * - * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved + * Copyright (c) 2025 The Ontario Institute for Cancer Research. All rights reserved * * This program and the accompanying materials are made available under the terms of * the GNU Affero General Public License v3.0. You should have received a copy of the @@ -23,13 +23,15 @@ import { getConfig } from '@/global/config'; import { css, useTheme } from '@emotion/react'; import { useRouter } from 'next/router'; import React from 'react'; -import useAuthContext from '../global/hooks/useAuthContext'; -import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; -import { InternalLink as Link, StyledLinkAsButton } from './Link'; -import NavbarLinkButton from './NavbarLinkButton'; -import UserDropdown from './UserDropdown'; -import defaultTheme from './theme'; -import { OvertureLogo } from './theme/icons'; + +import useAuthContext from '@/global/hooks/useAuthContext'; +import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '@/global/utils/constants'; + +import { InternalLink, StyledLinkAsButton } from '@/components/Link'; +import NavbarLinkButton from '@/components/NavbarLinkButton'; +import UserDropdown from '@/components/UserDropdown'; +import defaultTheme from '@/components/theme'; +import { OvertureLogo } from '@/components/theme/icons'; const NavBar: React.ComponentType = () => { const { user } = useAuthContext(); @@ -78,7 +80,7 @@ const NavBar: React.ComponentType = () => { gap: 10px; `} > - + css` display: flex; @@ -97,7 +99,7 @@ const NavBar: React.ComponentType = () => { {NEXT_PUBLIC_LAB_NAME} - +
{ justify-content: center; `} > - + css` width: 70px; @@ -140,7 +142,7 @@ const NavBar: React.ComponentType = () => { > Log in - +
))}
From fca479cf56c2b19e7f3b8dc16a92670af73709dc Mon Sep 17 00:00:00 2001 From: Saqib Ashraf Date: Thu, 31 Jul 2025 08:32:01 -0400 Subject: [PATCH 21/21] add ts doc into the NavbarLinkButton --- components/NavbarLinkButton.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/components/NavbarLinkButton.tsx b/components/NavbarLinkButton.tsx index d1048aa5..3b2bac20 100644 --- a/components/NavbarLinkButton.tsx +++ b/components/NavbarLinkButton.tsx @@ -60,6 +60,12 @@ const getLinkStyles = (theme: Theme, isActive: boolean) => css` : ''} `; +/** + * @param {NavbarLinkProps} props - The properties for the NavbarLinkButton component. + * @param {string} props.path - The path for the link. + * @param {string} props.label - The label for the link. + * @return JSX.Element - A styled link button for the navigation bar. + */ const NavbarLinkButton = ({ path, label }: NavbarLinkProps) => { const router = useRouter(); const theme: typeof defaultTheme = useTheme();