From 05f5c13258ab78239d72d72fff81fed2ebc461f9 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 19 Dec 2023 15:34:09 +0100
Subject: [PATCH] bugfixes

---
 .../ComponentsDetailTemplate.tsx              |   2 +-
 .../OrganizationDetailTemplate.tsx            | 112 +++++++++---------
 .../table/TableResultTemplate.tsx             |   4 +-
 3 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
index bf943c9cc..e2fb839fb 100644
--- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
+++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -389,7 +389,7 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
               </TabList>
               <TabPanel>
                 <div className={styles.components}>
-                  {_getComponent.data.embedded?.dependsOn?.embedded.open && (
+                  {_getComponent.data.embedded?.dependsOn?.embedded?.open && (
                     <DisplaySwitch
                       buttons={displaySwitchButtons}
                       layoutClassName={styles.dependenciesDisplaySwitchButtons}
diff --git a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx
index cc9ce15e4..951be3ff0 100644
--- a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx
+++ b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx
@@ -10,7 +10,6 @@ import {
   BadgeCounter,
   Link,
 } from "@utrecht/component-library-react/dist/css-module";
-import { ComponentCardsAccordionTemplate } from "../templateParts/componentCardsAccordion/ComponentCardsAccordionTemplate";
 import { useTranslation } from "react-i18next";
 import { navigate } from "gatsby";
 import { QueryClient } from "react-query";
@@ -161,25 +160,24 @@ export const OrganizationDetailTemplate: React.FC<OrganizationDetailTemplateProp
                 <div className={styles.components}>
                   {/* <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.owns ?? []} /> */}
                   <div className={styles.componentsGrid}>
-                    {_getOrganization.data?.embedded?.owns.map(
-                      (component: any) =>
-                        <ComponentCard
-                          key={component._self.id}
-                          title={{ label: component.name, href: `/components/${component._self.id}` }}
-                          description={component?.description?.shortDescription}
-                          categories={component?.categories}
-                          tags={{
-                            status: component?.developmentStatus,
-                            installations: component?.usedBy?.length.toString() ?? "0",
-                            organization: {
-                              name: component?.url?.organisation?.name,
-                              website: component?.url?.organisation?.website,
-                            },
-                            licence: component?.legal?.license,
-                            githubLink: component?.url?.url,
-                          }}
-                        />
-                    )}
+                    {_getOrganization.data?.embedded?.owns?.map((component: any) => (
+                      <ComponentCard
+                        key={component._self.id}
+                        title={{ label: component.name, href: `/components/${component._self.id}` }}
+                        description={component?.description?.shortDescription}
+                        categories={component?.categories}
+                        tags={{
+                          status: component?.developmentStatus,
+                          installations: component?.usedBy?.length.toString() ?? "0",
+                          organization: {
+                            name: component?.url?.organisation?.name,
+                            website: component?.url?.organisation?.website,
+                          },
+                          licence: component?.legal?.license,
+                          githubLink: component?.url?.url,
+                        }}
+                      />
+                    ))}
                   </div>
                 </div>
               </TabPanel>
@@ -187,25 +185,24 @@ export const OrganizationDetailTemplate: React.FC<OrganizationDetailTemplateProp
                 <div className={styles.components}>
                   {/* <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.supports ?? []} /> */}
                   <div className={styles.componentsGrid}>
-                    {_getOrganization.data?.embedded?.supports.map(
-                      (component: any) =>
-                        <ComponentCard
-                          key={component._self.id}
-                          title={{ label: component.name, href: `/components/${component._self.id}` }}
-                          description={component?.description?.shortDescription}
-                          categories={component?.categories}
-                          tags={{
-                            status: component?.developmentStatus,
-                            installations: component?.usedBy?.length.toString() ?? "0",
-                            organization: {
-                              name: component?.url?.organisation?.name,
-                              website: component?.url?.organisation?.website,
-                            },
-                            licence: component?.legal?.license,
-                            githubLink: component?.url?.url,
-                          }}
-                        />
-                    )}
+                    {_getOrganization.data?.embedded?.supports?.map((component: any) => (
+                      <ComponentCard
+                        key={component._self.id}
+                        title={{ label: component.name, href: `/components/${component._self.id}` }}
+                        description={component?.description?.shortDescription}
+                        categories={component?.categories}
+                        tags={{
+                          status: component?.developmentStatus,
+                          installations: component?.usedBy?.length.toString() ?? "0",
+                          organization: {
+                            name: component?.url?.organisation?.name,
+                            website: component?.url?.organisation?.website,
+                          },
+                          licence: component?.legal?.license,
+                          githubLink: component?.url?.url,
+                        }}
+                      />
+                    ))}
                   </div>
                 </div>
               </TabPanel>
@@ -213,25 +210,24 @@ export const OrganizationDetailTemplate: React.FC<OrganizationDetailTemplateProp
                 <div className={styles.components}>
                   {/* <ComponentCardsAccordionTemplate components={_getOrganization.data?.embedded?.uses ?? []} /> */}
                   <div className={styles.componentsGrid}>
-                    {_getOrganization.data?.embedded?.uses.map(
-                      (component: any) =>
-                        <ComponentCard
-                          key={component._self.id}
-                          title={{ label: component.name, href: `/components/${component._self.id}` }}
-                          description={component?.description?.shortDescription}
-                          categories={component?.categories}
-                          tags={{
-                            status: component?.developmentStatus,
-                            installations: component?.usedBy?.length.toString() ?? "0",
-                            organization: {
-                              name: component?.url?.organisation?.name,
-                              website: component?.url?.organisation?.website,
-                            },
-                            licence: component?.legal?.license,
-                            githubLink: component?.url?.url,
-                          }}
-                        />
-                    )}
+                    {_getOrganization.data?.embedded?.uses?.map((component: any) => (
+                      <ComponentCard
+                        key={component._self.id}
+                        title={{ label: component.name, href: `/components/${component._self.id}` }}
+                        description={component?.description?.shortDescription}
+                        categories={component?.categories}
+                        tags={{
+                          status: component?.developmentStatus,
+                          installations: component?.usedBy?.length.toString() ?? "0",
+                          organization: {
+                            name: component?.url?.organisation?.name,
+                            website: component?.url?.organisation?.website,
+                          },
+                          licence: component?.legal?.license,
+                          githubLink: component?.url?.url,
+                        }}
+                      />
+                    ))}
                   </div>
                 </div>
               </TabPanel>
diff --git a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx
index d724e22ee..b900feb91 100644
--- a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx
+++ b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx
@@ -58,7 +58,9 @@ export const TableResultTemplate: React.FC<TableResultTemplateProps> = ({ compon
                 onClick={() => navigate(`/${getResultsUrl(component._self?.schema.ref)}/${component.id}`)}
               >
                 <TableCell>
-                  <span className={styles.name}>{component.name}</span>
+                  <span data-tooltip-id={TOOLTIP_ID} data-tooltip-content={component.name} className={styles.name}>
+                    {component.name}
+                  </span>
                 </TableCell>
                 <TableCell>{t(_.upperFirst(getTypeFromSchemaRef(component._self?.schema.ref)))}</TableCell>
                 <TableCell>