From af1b11913b7697d2ca75a8458acd073f5fc4afe9 Mon Sep 17 00:00:00 2001 From: bhavabhuthi Date: Thu, 31 Oct 2024 10:46:52 +0530 Subject: [PATCH 01/10] Add images to the next config --- next.config.mjs | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/next.config.mjs b/next.config.mjs index 48b1b7ae..33e56092 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -9,12 +9,15 @@ jiti('./env'); const backendUrl = new URL(process.env.NEXT_PUBLIC_BACKEND_URL); - const withNextIntl = createNextIntlPlugin(); const nextConfig = withNextIntl({ transpilePackages: ['opub-ui'], images: { remotePatterns: [ + { + protocol: new URL(process.env.BACKEND_URL).protocol.slice(0, -1), + hostname: new URL(process.env.BACKEND_URL).hostname, + }, { protocol: 'https', hostname: backendUrl.hostname, @@ -46,7 +49,7 @@ export default withSentryConfig( // This can increase your server load as well as your hosting bill. // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client- // side errors will fail. - tunnelRoute: '/api/sentry-monitoring', + // tunnelRoute: "/monitoring", // Hides source maps from generated client bundles hideSourceMaps: true, @@ -58,7 +61,7 @@ export default withSentryConfig( // See the following for more information: // https://docs.sentry.io/product/crons/ // https://vercel.com/docs/cron-jobs - // automaticVercelMonitors: true, + automaticVercelMonitors: true, }, process.env.SENTRY_FEATURE_ENABLED ); From d33f528e87bf07976b85f19d85d4ce79f3a327aa Mon Sep 17 00:00:00 2001 From: bhavabhuthi Date: Thu, 31 Oct 2024 11:11:51 +0530 Subject: [PATCH 02/10] Add a fallback image dashboard to replace entity logo in case of error --- public/fallback.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 public/fallback.svg diff --git a/public/fallback.svg b/public/fallback.svg new file mode 100644 index 00000000..2e7bc807 --- /dev/null +++ b/public/fallback.svg @@ -0,0 +1 @@ + \ No newline at end of file From 0151963bfbe47960519e271a6139272adaae5660 Mon Sep 17 00:00:00 2001 From: bhavabhuthi Date: Thu, 31 Oct 2024 11:13:23 +0530 Subject: [PATCH 03/10] Move entity card to new function to enable fallback image Also combine entity queries --- app/[locale]/dashboard/[entityType]/page.tsx | 126 +++++++++---------- 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/app/[locale]/dashboard/[entityType]/page.tsx b/app/[locale]/dashboard/[entityType]/page.tsx index 05154b5c..0b0d4db3 100644 --- a/app/[locale]/dashboard/[entityType]/page.tsx +++ b/app/[locale]/dashboard/[entityType]/page.tsx @@ -1,5 +1,6 @@ 'use client'; +import { useState } from 'react'; import Image from 'next/image'; import Link from 'next/link'; import { notFound, useParams, usePathname } from 'next/navigation'; @@ -20,41 +21,20 @@ const Page = () => { const params = useParams<{ entityType: string }>(); - const allOrganizationsList: { + const allEntitiesList: { data: any; isLoading: boolean; error: any; isError: boolean; - } = useQuery([`all_organizations_list_page`], () => + } = useQuery([`all_enitites_list_${params.entityType}`], () => GraphQL( - allOrganizationsListingDoc, + params.entityType === 'organization' + ? allOrganizationsListingDoc + : allDataSpacesListingDoc, { // Entity Headers if present }, - { - options: { - skip: params.entityType !== 'organization', - }, - } - ) - ); - - const allDataSpacesList: { - data: any; - isLoading: boolean; - error: any; - isError: boolean; - } = useQuery([`all_dataspaces_list_page`], () => - GraphQL( - allDataSpacesListingDoc, - { - // Entity Headers if present - }, - { - options: { - skip: params.entityType !== 'dataspace', - }, - } + [] ) ); @@ -88,48 +68,21 @@ const Page = () => {
- {allDataSpacesList.isLoading || allOrganizationsList.isLoading ? ( + {allEntitiesList.isLoading ? ( ) : (
{[ ...(params.entityType === 'organization' - ? allOrganizationsList.data.organisations - : allDataSpacesList.data.dataspaces), - ]?.map((orgItem) => ( -
- -
- {'Organization -
- - {/* - Manage Datasets - - - Manage Consumers - */} - -
- {orgItem.name} -
-
+ ? allEntitiesList.data.organisations + : allEntitiesList.data.dataspaces), + ]?.map((entityItem) => ( + ))}
@@ -146,3 +99,50 @@ const Page = () => { }; export default Page; + +const EntityCard = ({ key, entityItem, params }: any) => { + const [isImageValid, setIsImageValid] = useState(() => { + return entityItem.logo ? true : false; + }); + return ( +
+
+ +
+ {isImageValid ? ( + {`${entityItem.name} { + setIsImageValid(false); + }} + className="object-contain" + /> + ) : ( + {`fallback + )} +
+ +
+
+ + {entityItem.name} + +
+
+ ); +}; From 97a56d4f99a809d340deffdd13599343b618dcb4 Mon Sep 17 00:00:00 2001 From: bhavabhuthi Date: Thu, 31 Oct 2024 11:14:41 +0530 Subject: [PATCH 04/10] Add query docs for entity details query in entity dashboard --- .../[entityType]/[entitySlug]/schema.ts | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 app/[locale]/dashboard/[entityType]/[entitySlug]/schema.ts diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/schema.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/schema.ts new file mode 100644 index 00000000..1efc7801 --- /dev/null +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/schema.ts @@ -0,0 +1,37 @@ +import { graphql } from '@/gql'; + +export const getOrgDetailsQryDoc: any = graphql(` + query getOrgDetailsQry($filters: OrganizationFilter) { + organisations(filters: $filters) { + id + name + logo { + name + path + size + url + width + height + } + slug + } + } +`); + +export const getDataSpaceDetailsQryDoc: any = graphql(` + query getDataSpaceDetailsQry($filters: DataSpaceFilter) { + dataspaces(filters: $filters) { + id + name + logo { + name + path + size + url + width + height + } + slug + } + } +`); From 01df61bca7d509552654c358b0458f7553781ae9 Mon Sep 17 00:00:00 2001 From: bhavabhuthi Date: Thu, 31 Oct 2024 11:18:01 +0530 Subject: [PATCH 05/10] Replace entity slug with entity details object in dashboard navbar --- .../dashboard/components/dashboard-nav.tsx | 53 ++++++++++++++----- 1 file changed, 41 insertions(+), 12 deletions(-) diff --git a/app/[locale]/dashboard/components/dashboard-nav.tsx b/app/[locale]/dashboard/components/dashboard-nav.tsx index c8b8cf41..a242d693 100644 --- a/app/[locale]/dashboard/components/dashboard-nav.tsx +++ b/app/[locale]/dashboard/components/dashboard-nav.tsx @@ -1,6 +1,6 @@ 'use client'; -import React from 'react'; +import { useEffect, useState } from 'react'; import Image from 'next/image'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; @@ -17,11 +17,26 @@ interface DashboardNavProps { } export function DashboardNav({ items, - entitySlug, -}: DashboardNavProps & { entitySlug?: string }) { - const [isCollapsed, setIsCollapsed] = React.useState(false); + entityDetails, +}: DashboardNavProps & { entityDetails?: any }) { + const [isCollapsed, setIsCollapsed] = useState(false); + + const [isImageValid, setIsImageValid] = useState(() => { + return entityDetails?.logo ? true : false; + }); const path = usePathname(); + useEffect(() => { + if ( + entityDetails && + (typeof entityDetails.logo === 'undefined' || entityDetails.logo === null) + ) { + setIsImageValid(false); + } else { + setIsImageValid(true); + } + }, [entityDetails]); + useMetaKeyPress('b', () => setIsCollapsed((e) => !e)); if (items && !items.length) { @@ -39,17 +54,31 @@ export function DashboardNav({ )} >