feat(#71): add accordion item content

dashboard/src/components/Accordion/Accordion.tsx

@@ -1,9 +1,11 @@
-import { ReactElement, ReactNode, useMemo } from 'react';
+import { ReactElement, useMemo } from 'react';
 
 import { MdCheck, MdClose } from 'react-icons/md';
 
 import { FormattedMessage } from 'react-intl';
 
+import { AccordionItemBuilds } from '@/types/tree/TreeDetails';
+
 import { TableBody, TableCell, TableRow } from '../ui/table';
 import BaseTable from '../Table/BaseTable';
 import {
@@ -14,31 +16,23 @@ import {
 import ColoredCircle from '../ColoredCircle/ColoredCircle';
 import { ItemType } from '../ListingItem/ListingItem';
 
+import AccordionBuildContent from './BuildAccordionContent';
+
 export interface IAccordion {
   headers?: ReactElement[];
   items: IAccordionItems[];
   type: 'build' | 'test';
 }
 
 export interface IAccordionItems {
-  trigger: AccordionItemBuildsTrigger | AccordionItemTestsTrigger;
-  content?: ReactNode;
+  accordionData: AccordionItemBuilds | AccordionItemTestsTrigger;
 }
 
 interface ICustomAccordionTableBody {
   items: IAccordionItems[];
   type: 'build' | 'test';
 }
 
-export type AccordionItemBuildsTrigger = {
-  config?: string;
-  compiler?: string;
-  date?: string;
-  buildErrors?: number;
-  buildTime?: string;
-  status?: 'valid' | 'invalid';
-};
-
 export type AccordionItemTestsTrigger = {
   testPlans?: string;
   testSuccessfull?: number;
@@ -81,13 +75,21 @@ const AccordionTableBody = ({
             <CollapsibleTrigger asChild>
               <TableRow>
                 {type === 'build' ? (
-                  <AccordionBuildsTrigger trigger={item.trigger} />
+                  <AccordionBuildsTrigger accordionData={item.accordionData} />
                 ) : (
-                  <AccordionTestsTrigger trigger={item.trigger} />
+                  <AccordionTestsTrigger accordionData={item.accordionData} />
                 )}
               </TableRow>
             </CollapsibleTrigger>
-            <CollapsibleContent>{item.content}</CollapsibleContent>
+            <CollapsibleContent>
+              <div className="h-fit w-f p-8">
+                {type === 'build' ? (
+                  <AccordionBuildContent accordionData={item.accordionData} />
+                ) : (
+                  <></>
+                )}
+              </div>
+            </CollapsibleContent>
           </>
         </Collapsible>
       )),
@@ -97,8 +99,10 @@ const AccordionTableBody = ({
   return <TableBody>{accordionItems}</TableBody>;
 };
 
-const AccordionBuildsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
-  const triggerInfo = trigger as AccordionItemBuildsTrigger;
+const AccordionBuildsTrigger = ({
+  accordionData,
+}: IAccordionItems): JSX.Element => {
+  const triggerInfo = accordionData as AccordionItemBuilds;
   return (
     <>
       <TableCell>{triggerInfo.config}</TableCell>
@@ -123,8 +127,10 @@ const AccordionBuildsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
   );
 };
 
-const AccordionTestsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
-  const triggerInfo = trigger as AccordionItemTestsTrigger;
+const AccordionTestsTrigger = ({
+  accordionData,
+}: IAccordionItems): JSX.Element => {
+  const triggerInfo = accordionData as AccordionItemTestsTrigger;
   return (
     <>
       <TableCell>{triggerInfo.testPlans}</TableCell>

dashboard/src/components/Accordion/BuildAccordionContent.tsx

@@ -0,0 +1,156 @@
+import { MdFolderOpen } from 'react-icons/md';
+
+import { useMemo } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { AccordionItemBuilds } from '@/types/tree/TreeDetails';
+
+import StatusChartMemoized, { Colors } from '../StatusChart/StatusCharts';
+
+import LinksGroup from '../LinkGroup/LinkGroup';
+
+import { IAccordionItems } from './Accordion';
+
+export interface IBuildAccordionContent {
+  testStatus: {
+    failTests: number;
+    errorTests: number;
+    passTests: number;
+    skipTests: number;
+  };
+  kernelImage?: string;
+  buildLogs?: string;
+  kernelConfig?: string;
+  dtb?: string;
+  systemMap?: string;
+  modules?: string;
+}
+
+export interface ILinksGroup {
+  kernelImage?: string;
+  buildLogs?: string;
+  kernelConfig?: string;
+  dtb?: string;
+  systemMap?: string;
+  modules?: string;
+}
+
+const AccordionBuildContent = ({
+  accordionData,
+}: IAccordionItems): JSX.Element => {
+  const contentData = accordionData as AccordionItemBuilds;
+  const chartElements = useMemo(() => {
+    return contentData.testStatus?.passTests ||
+      contentData.testStatus?.skipTests ||
+      contentData.testStatus?.errorTests ||
+      contentData.testStatus?.failTests
+      ? [
+          {
+            value: contentData.testStatus?.passTests ?? 0,
+            label: <FormattedMessage id="buildAccordion.testSuccess" />,
+            color: Colors.Green,
+          },
+          {
+            value:
+              (contentData.testStatus?.failTests ?? 0) +
+              (contentData.testStatus?.errorTests ?? 0),
+            label: <FormattedMessage id="buildAccordion.testFailed" />,
+            color: Colors.Red,
+          },
+          {
+            value: contentData.testStatus?.skipTests ?? 0,
+            label: <FormattedMessage id="buildAccordion.testSkiped" />,
+            color: Colors.Gray,
+          },
+        ]
+      : [
+          {
+            value: 1,
+            label: <FormattedMessage id="global.none" />,
+            color: Colors.Gray,
+            showValue: false,
+          },
+        ];
+  }, [
+    contentData.testStatus?.errorTests,
+    contentData.testStatus?.failTests,
+    contentData.testStatus?.passTests,
+    contentData.testStatus?.skipTests,
+  ]);
+
+  const links = useMemo(
+    () => [
+      contentData.kernelImage
+        ? {
+            title: <FormattedMessage id="buildAccordion.kernelImage" />,
+            icon: <MdFolderOpen className="text-lightBlue" />,
+            linkText: <span>{`kernel/${contentData.kernelImage}`}</span>,
+          }
+        : undefined,
+      contentData.kernelConfig
+        ? {
+            title: <FormattedMessage id="buildAccordion.kernelConfig" />,
+            icon: <MdFolderOpen className="text-lightBlue" />,
+            link: contentData.kernelConfig,
+            linkText: <FormattedMessage id="buildAccordion.kernelConfigPath" />,
+          }
+        : undefined,
+      contentData.dtb
+        ? {
+            title: <FormattedMessage id="buildAccordion.dtb" />,
+            icon: <MdFolderOpen className="text-lightBlue" />,
+            link: contentData.dtb,
+            linkText: <FormattedMessage id="buildAccordion.dtbs" />,
+          }
+        : undefined,
+      contentData.buildLogs
+        ? {
+            title: <FormattedMessage id="buildAccordion.buildLogs" />,
+            icon: <MdFolderOpen className="text-lightBlue" />,
+            link: contentData.buildLogs,
+            linkText: <FormattedMessage id="buildAccordion.logs" />,
+          }
+        : undefined,
+      contentData.systemMap
+        ? {
+            title: <FormattedMessage id="buildAccordion.systemMap" />,
+            icon: <MdFolderOpen className="text-lightBlue" />,
+            link: contentData.systemMap,
+            linkText: <FormattedMessage id="buildAccordion.systemMapPath" />,
+          }
+        : undefined,
+      contentData.modules
+        ? {
+            title: <FormattedMessage id="buildAccordion.modules" />,
+            icon: <MdFolderOpen className="text-lightBlue" />,
+            link: contentData.modules,
+            linkText: <FormattedMessage id="buildAccordion.modulesZip" />,
+          }
+        : undefined,
+    ],
+    [
+      contentData.buildLogs,
+      contentData.dtb,
+      contentData.kernelConfig,
+      contentData.kernelImage,
+      contentData.modules,
+      contentData.systemMap,
+    ],
+  );
+
+  return (
+    <div className="flex flex-row justify-between">
+      <div className="min-w-[400px]">
+        <StatusChartMemoized
+          type="chart"
+          title={<FormattedMessage id="buildAccordion.testStatus" />}
+          elements={chartElements}
+        />
+      </div>
+      <LinksGroup links={links} />
+    </div>
+  );
+};
+
+export default AccordionBuildContent;

dashboard/src/components/CardsGroup/CardsGroup.tsx

@@ -19,8 +19,8 @@ const CardsGroup = ({ cards }: ICardsGroup): JSX.Element => {
   const cardsList = useMemo(() => {
     return cards.map(card => (
       <BaseCard
-        key={card.title.key}
-        title={card.title}
+        key={card.title?.key}
+        title={<span>{card.title}</span> ?? ''}
         content={<CardContent card={card} />}
       />
     ));
@@ -40,7 +40,8 @@ const CardContent = ({ card }: ICardContent): JSX.Element => {
       />
     );
   } else if (card.type === 'chart') {
-    return <StatusChartMemoized {...card} />;
+    const chartData = { ...card, title: undefined };
+    return <StatusChartMemoized {...chartData} />;
   } else {
     return <></>;
   }

dashboard/src/components/LinkGroup/LinkGroup.tsx

@@ -0,0 +1,35 @@
+import { ReactElement, useMemo } from 'react';
+
+import LinkWithIcon from '../LinkWithIcon/LinkWithIcon';
+
+interface ILinkGroup {
+  links: (ILink | undefined)[];
+}
+
+interface ILink {
+  linkText: JSX.Element;
+  title?: ReactElement;
+  link?: string;
+  icon?: ReactElement;
+}
+
+const LinksGroup = ({ links }: ILinkGroup): JSX.Element => {
+  const linkGroup = useMemo(() => {
+    return links?.map(
+      link =>
+        link && (
+          <LinkWithIcon
+            title={link.title}
+            icon={link.icon}
+            linkText={link.linkText}
+            key={link.link}
+          />
+        ),
+    );
+  }, [links]);
+  return (
+    <div className="grid grid-cols-3 gap-4 min-w-[350px]">{linkGroup}</div>
+  );
+};
+
+export default LinksGroup;

dashboard/src/components/LinkWithIcon/LinkWithIcon.tsx

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+
+interface ILinkWithIcon {
+  title?: string | ReactElement;
+  linkText?: string | ReactElement;
+  link?: string;
+  icon?: ReactElement;
+}
+
+const LinkWithIcon = ({
+  title,
+  linkText,
+  icon,
+  link,
+}: ILinkWithIcon): JSX.Element => {
+  return (
+    <div className="flex flex-col gap-2">
+      <span className="font-bold">{title}</span>
+      <a className="flex flex-row gap-1 items-center" href={link}>
+        {linkText}
+        {icon}
+      </a>
+    </div>
+  );
+};
+
+export default LinkWithIcon;