From 807fb424cc00c4ae78f4428b7476a699be0571f9 Mon Sep 17 00:00:00 2001
From: Failchon <slay3r12@gmail.com>
Date: Sat, 25 Jan 2025 22:33:31 +0200
Subject: [PATCH] Refactor code

---
 .../assets/locales/en/artifact.json           |  2 +-
 .../src/components/artifact/ArtifactCard.tsx  | 21 ++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/libs/gi/localization/assets/locales/en/artifact.json b/libs/gi/localization/assets/locales/en/artifact.json
index 233be90400..9ad97bdab5 100644
--- a/libs/gi/localization/assets/locales/en/artifact.json
+++ b/libs/gi/localization/assets/locales/en/artifact.json
@@ -124,5 +124,5 @@
   },
   "builds_one": "{{count}} Build",
   "builds_other": "{{count}} Builds",
-  "usage": "Used in: "
+  "artifactUsage": "Artifact is used in the following builds: "
 }
diff --git a/libs/gi/ui/src/components/artifact/ArtifactCard.tsx b/libs/gi/ui/src/components/artifact/ArtifactCard.tsx
index c8afe2871e..2c8c7fc12a 100644
--- a/libs/gi/ui/src/components/artifact/ArtifactCard.tsx
+++ b/libs/gi/ui/src/components/artifact/ArtifactCard.tsx
@@ -45,8 +45,10 @@ import {
   CardContent,
   CardHeader,
   Chip,
-  Divider,
   IconButton,
+  List,
+  ListItem,
+  ListItemText,
   Skeleton,
   SvgIcon,
   Typography,
@@ -196,7 +198,8 @@ export function ArtifactCardObj({
         <ArtifactBuildUsageModal
           show={showUsage}
           onHide={onHideUsage}
-          buildNames={t('artifact:usage') + buildNames.join(', ')}
+          buildNames={buildNames}
+          usageText={t('artifact:artifactUsage')}
         />
       </Suspense>
       <CardThemed
@@ -532,10 +535,12 @@ function ArtifactBuildUsageModal({
   show,
   onHide,
   buildNames,
+  usageText,
 }: {
   show: boolean
   onHide: () => void
-  buildNames: string
+  buildNames: string[]
+  usageText: string
 }) {
   return (
     <ModalWrapper open={show} onClose={onHide}>
@@ -548,7 +553,7 @@ function ArtifactBuildUsageModal({
               display="flex"
               alignItems="center"
             >
-              {buildNames}
+              {usageText}
             </Typography>
           }
           action={
@@ -557,7 +562,13 @@ function ArtifactBuildUsageModal({
             </IconButton>
           }
         />
-        <Divider />
+        <List>
+          {buildNames.map((name, index) => (
+            <ListItem key={index}>
+              <ListItemText primary={name} />
+            </ListItem>
+          ))}
+        </List>
       </CardThemed>
     </ModalWrapper>
   )