177 dashboard to reflect the logo and details of the entity

.github/workflows/pre-merge.yml

@@ -15,10 +15,11 @@ env:
   END_SESSION_URL: ${{secrets.END_SESSION_URL}}
   REFRESH_TOKEN_URL: ${{secrets.REFRESH_TOKEN_URL}}
   NEXT_PUBLIC_BACKEND_URL: ${{secrets.NEXT_PUBLIC_BACKEND_URL_DS}}
+  BACKEND_URL: ${{secrets.BACKEND_URL}}
   BACKEND_GRAPHQL_URL: ${{secrets.BACKEND_GRAPHQL_URL_DS}}
   NEXT_PUBLIC_ENABLE_ACCESSMODEL: ${{secrets.NEXT_PUBLIC_ENABLE_ACCESSMODEL_DS}}
   NEXT_PUBLIC_BACKEND_GRAPHQL_URL: ${{secrets.NEXT_PUBLIC_BACKEND_GRAPHQL_URL_DS}}
-  
+
 jobs:
   build:
     runs-on: ubuntu-latest

app/[locale]/dashboard/[entityType]/[entitySlug]/layout.tsx

@@ -3,12 +3,15 @@
 import React from 'react';
 import { notFound, useParams } from 'next/navigation';
 import { SidebarNavItem } from '@/types';
+import { useQuery } from '@tanstack/react-query';
 
+import { GraphQL } from '@/lib/api';
 import { cn } from '@/lib/utils';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import { DashboardNav } from '../../components/dashboard-nav';
 import { MobileDashboardNav } from '../../components/mobile-dashboard-nav';
 import styles from '../../components/styles.module.scss';
+import { getDataSpaceDetailsQryDoc, getOrgDetailsQryDoc } from './schema';
 
 interface DashboardLayoutProps {
   children?: React.ReactNode;
@@ -18,6 +21,17 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
   const [isOpened, setIsOpened] = React.useState(false);
   const params = useParams<{ entityType: string; entitySlug: string }>();
 
+  const EntityDetailsQryRes: { data: any; isLoading: boolean; error: any } =
+    useQuery([`entity_details_${params.entityType}`], () =>
+      GraphQL(
+        params.entityType === 'organization'
+          ? getOrgDetailsQryDoc
+          : getDataSpaceDetailsQryDoc,
+        {},
+        { filters: { slug: params.entitySlug } }
+      )
+    );
+
   if (
     process.env.NEXT_PUBLIC_DATASPACE_FEATURE_ENABLED !== 'true' &&
     params.entityType === 'dataspace'
@@ -56,7 +70,11 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
           },
           {
             href: '',
-            label: `${params.entitySlug}`,
+            label:
+              (params.entityType === 'organization'
+                ? EntityDetailsQryRes.data?.organisations[0]
+                : EntityDetailsQryRes.data?.dataspaces[0]
+              )?.name || params.entitySlug,
           },
         ]}
       />
@@ -66,7 +84,14 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
           ' bg-surfaceDefault p-4 md:flex'
         )}
       >
-        <DashboardNav items={orgSidebarNav} entitySlug={params.entitySlug} />
+        <DashboardNav
+          items={orgSidebarNav}
+          entityDetails={
+            params.entityType === 'organization'
+              ? EntityDetailsQryRes.data?.organisations[0]
+              : EntityDetailsQryRes.data?.dataspaces[0]
+          }
+        />
 
         <div className="z-1 basis-2 md:hidden">
           <MobileDashboardNav

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
+    }
+  }
+`);

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 = () => {
       </div>
       <div className="m-auto flex w-11/12 flex-col">
         <DashboardHeader currentPath={pathname} />
-        {allDataSpacesList.isLoading || allOrganizationsList.isLoading ? (
+        {allEntitiesList.isLoading ? (
           <LoadingPage />
         ) : (
           <div className={cn(styles.Main)}>
             <div className="flex flex-wrap  gap-24">
               {[
                 ...(params.entityType === 'organization'
-                  ? allOrganizationsList.data.organisations
-                  : allDataSpacesList.data.dataspaces),
-              ]?.map((orgItem) => (
-                <div
-                  key={orgItem.slug}
-                  className="flex  max-w-64 flex-col items-center gap-3 rounded-2 border-2 border-solid border-baseGraySlateSolid4 px-4 py-5 text-center"
-                >
-                  <Link
-                    href={`/dashboard/${params.entityType}/${orgItem.slug}/dataset`}
-                    id={orgItem.slug}
-                  >
-                    <div className="border-var(--border-radius-5)  rounded-2 ">
-                      <Image
-                        src={'/obi.jpg'}
-                        width={200}
-                        height={200}
-                        alt={'Organization Logo'}
-                      />
-                    </div>
-
-                    {/* <LinkButton
-                  href={`/dashboard/organization/${orgItem.slug}/dataset`}
-                >
-                  Manage Datasets
-                </LinkButton>
-                <LinkButton
-                  href={`/dashboard/organization/${orgItem.slug}/consumers`}
-                >
-                  Manage Consumers
-                </LinkButton> */}
-                  </Link>
-                  <div>
-                    <Text variant="headingMd">{orgItem.name}</Text>
-                  </div>
-                </div>
+                  ? allEntitiesList.data.organisations
+                  : allEntitiesList.data.dataspaces),
+              ]?.map((entityItem) => (
+                <EntityCard
+                  key={entityItem.slug}
+                  entityItem={entityItem}
+                  params={params}
+                />
               ))}
               <div className="flex h-72 w-56 flex-col items-center justify-center gap-3 rounded-2 bg-baseGraySlateSolid6 p-4">
                 <Icon source={Icons.plus} size={40} color="success" />
@@ -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 (
+    <div
+      key={key}
+      className="flex h-72 w-56 flex-col items-center gap-3 rounded-2 border-2 border-solid border-baseGraySlateSolid4 px-4 py-5 text-center"
+    >
+      <div className="flex h-full w-full items-center justify-center rounded-2">
+        <Link
+          href={`/dashboard/${params.entityType}/${entityItem.slug}/dataset`}
+          id={entityItem.slug}
+        >
+          <div className="border-var(--border-radius-5) rounded-2">
+            {isImageValid ? (
+              <Image
+                height={160}
+                width={160}
+                src={`${process.env.NEXT_PUBLIC_BACKEND_URL}${entityItem.logo.url}`}
+                alt={`${entityItem.name} logo`}
+                onError={() => {
+                  setIsImageValid(false);
+                }}
+                className="object-contain"
+              />
+            ) : (
+              <Image
+                height={160}
+                width={160}
+                src={'/fallback.svg'}
+                alt={`fallback logo`}
+                className="fill-current object-contain text-baseGraySlateSolid6"
+              />
+            )}
+          </div>
+        </Link>
+      </div>
+      <div>
+        <Text variant="headingMd" className="text-center">
+          {entityItem.name}
+        </Text>
+      </div>
+    </div>
+  );
+};

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({
       )}
     >
       <nav className={cn('flex flex-col gap-2')}>
-        {entitySlug && !isCollapsed ? (
+        {entityDetails && !isCollapsed ? (
           <>
             <div className="flex flex-col items-center justify-center px-4 py-8">
-              <Image
-                height={140}
-                width={140}
-                src={'/obi.jpg'}
-                alt={'Organisation ID'}
-              />
+              {isImageValid ? (
+                <Image
+                  height={140}
+                  width={140}
+                  src={`${process.env.NEXT_PUBLIC_BACKEND_URL}${entityDetails?.logo?.url}`}
+                  alt={`${entityDetails?.name} logo`}
+                  onError={() => {
+                    setIsImageValid(false);
+                  }}
+                  className="object-contain"
+                />
+              ) : (
+                <Image
+                  height={140}
+                  width={140}
+                  src={'/fallback.svg'}
+                  alt={'fallback logo'}
+                  className="fill-current bg-baseGraySlateSolid6 object-contain text-baseGraySlateSolid6"
+                />
+              )}
               <Text variant="headingMd" fontWeight="medium" className="py-2">
-                {entitySlug}
+                {entityDetails?.name}
               </Text>
               <Link href={'/dashboard'}>
                 <Text variant="headingXs" color="interactive">

app/[locale]/manage/layout.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import { useParams } from 'next/navigation';
 import { SidebarNavItem } from '@/types';
 
 import { cn } from '@/lib/utils';
@@ -18,8 +17,6 @@ interface DashboardLayoutProps {
 export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
   const [isOpened, setIsOpened] = React.useState(false);
 
-  const params = useParams<{ organizationId: string }>();
-
   const orgSidebarNav: Array<SidebarNavItem> = [
     {
       title: 'Use Cases',
@@ -28,8 +25,6 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
     },
   ];
 
-  const organizationId = params.organizationId;
-
   return (
     <React.Suspense fallback={<LoadingPage />}>
       <BreadCrumbs
@@ -47,7 +42,7 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
           ' bg-surfaceDefault p-4 md:flex'
         )}
       >
-        <DashboardNav items={orgSidebarNav} entitySlug={organizationId} />
+        <DashboardNav items={orgSidebarNav} />
 
         <div className="z-1 basis-2 md:hidden">
           <MobileDashboardNav