style: improve install image list (#2777)

**Changes:** This PR enhances the ImageInstallModal component by: 1. Importing Typography from antd. 2. Improving the layout and styling of the image list: - Removed border from the List component. Because previous list looks like input field. - Set width to 100% for better responsiveness. - Added pagination with 5 items per page. 3. Using Typography.Text to make list items bold. 4. Combining description texts into a single Typography.Text component. **Rationale:** These changes improve the visual presentation and user experience of the image installation modal. The pagination feature helps manage long lists of images more effectively, while the styling changes create a cleaner, more modern look. **Effects:** Users will experience a more polished and user-friendly interface when installing images. The paginated list makes it easier to navigate through multiple images, and the bold text for image names improves readability. **Screenshots:** ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/b1f141fd-c717-4164-8382-cc02d6bbca08.png) **Checklist:** - [ ] Documentation - [ ] Test case(s) to demonstrate the difference of before/after
lablup · Oct 28, 2024 · b28d645 · b28d645
1 parent 58c5aac
commit b28d645
Show file tree

Hide file tree

Showing 22 changed files with 66 additions and 27 deletions.
diff --git a/react/src/components/ImageInstallModal.tsx b/react/src/components/ImageInstallModal.tsx
@@ -4,7 +4,7 @@ import { usePainKiller } from '../hooks/usePainKiller';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import Flex from './Flex';
 import { EnvironmentImage } from './ImageList';
-import { List } from 'antd';
+import { List, Typography } from 'antd';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -153,18 +153,36 @@ const ImageInstallModal: React.FC<ImageInstallModalInterface> = ({
     >
       <Flex direction="column" gap="md" align="start">
         {hasInstalledImage ? t('environment.InstalledImagesAreExcluded') : null}
-        <Flex direction="column" align="start">
+        <Flex
+          direction="column"
+          align="start"
+          style={{
+            width: '100%',
+          }}
+        >
           <List
             size="small"
-            bordered
             dataSource={imagesToInstall.map(
               (image) => `${image?.registry}/${image?.name}/${image?.tag}`,
             )}
-            renderItem={(item) => <List.Item>{item}</List.Item>}
+            style={{
+              width: '100%',
+            }}
+            renderItem={(item) => (
+              <List.Item>
+                <Typography.Text strong>{item}</Typography.Text>
+              </List.Item>
+            )}
+            pagination={{
+              pageSize: 5,
+              showTotal: (total) => t('general.TotalItems', { total }),
+            }}
           />
         </Flex>
-        {t('environment.DescSignificantInstallTime')}
-        {t('dialog.ask.DoYouWantToProceed')}
+        <Typography.Text>
+          {t('environment.DescSignificantInstallTime')}&nbsp;
+          {t('dialog.ask.DoYouWantToProceed')}
+        </Typography.Text>
       </Flex>
     </BAIModal>
   );

diff --git a/resources/i18n/de.json b/resources/i18n/de.json
@@ -515,7 +515,8 @@
     "Extend": "Verlängern",
     "RemainingLoginSessionTime": "Zeit bis zur automatischen Abmeldung",
     "Change": "Ändern Sie",
-    "MaxValueNotification": "{{name}} muss maximal {{max}} sein"
+    "MaxValueNotification": "{{name}} muss maximal {{max}} sein",
+    "TotalItems": "Insgesamt {{Gesamt}} Artikel"
   },
   "credential": {
     "Permission": "Genehmigung",

diff --git a/resources/i18n/el.json b/resources/i18n/el.json
@@ -515,7 +515,8 @@
     "Extend": "Επεκτείνω",
     "RemainingLoginSessionTime": "Χρόνος μέχρι την αυτόματη αποσύνδεση",
     "Change": "Αλλαγή",
-    "MaxValueNotification": "{{name}} πρέπει να είναι το μέγιστο {{max}}"
+    "MaxValueNotification": "{{name}} πρέπει να είναι το μέγιστο {{max}}",
+    "TotalItems": "Σύνολο {{total}} στοιχείων"
   },
   "credential": {
     "Permission": "Αδεια",

diff --git a/resources/i18n/en.json b/resources/i18n/en.json
@@ -643,7 +643,8 @@
     "Extend": "Extend",
     "RemainingLoginSessionTime": "Time until auto logout",
     "Change": "Change",
-    "MaxValueNotification": "{{name}} must be maximum {{max}}"
+    "MaxValueNotification": "{{name}} must be maximum {{max}}",
+    "TotalItems": "Total {{total}} items"
   },
   "credential": {
     "Permission": "Permission",

diff --git a/resources/i18n/es.json b/resources/i18n/es.json
@@ -566,7 +566,8 @@
     "Extend": "Extender",
     "RemainingLoginSessionTime": "Tiempo hasta el cierre de sesión automático",
     "Change": "Cambia",
-    "MaxValueNotification": "{{name}} debe ser máximo {{max}}"
+    "MaxValueNotification": "{{name}} debe ser máximo {{max}}",
+    "TotalItems": "Total {{total}} artículos"
   },
   "import": {
     "CleanUpImportTask": "Tarea de importación de limpieza...",

diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
@@ -566,7 +566,8 @@
     "Extend": "Laajenna",
     "RemainingLoginSessionTime": "Aika automaattiseen uloskirjautumiseen asti",
     "Change": "Muuta",
-    "MaxValueNotification": "{{name}} on oltava maksimi {{max}}"
+    "MaxValueNotification": "{{name}} on oltava maksimi {{max}}",
+    "TotalItems": "Yhteensä {{total}} kohteita"
   },
   "import": {
     "CleanUpImportTask": "Tuontitehtävän siivous...",

diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
@@ -515,7 +515,8 @@
     "Extend": "Étendre",
     "RemainingLoginSessionTime": "Délai avant déconnexion automatique",
     "Change": "Changer",
-    "MaxValueNotification": "{{nom}} doit être maximum {{max}}"
+    "MaxValueNotification": "{{nom}} doit être maximum {{max}}",
+    "TotalItems": "Total des éléments {{total}}"
   },
   "credential": {
     "Permission": "Autorisation",

diff --git a/resources/i18n/id.json b/resources/i18n/id.json
@@ -516,7 +516,8 @@
     "Extend": "Memperpanjang",
     "RemainingLoginSessionTime": "Waktu Hingga Keluar Otomatis",
     "Change": "Perubahan",
-    "MaxValueNotification": "{{nama}} harus maksimal {{max}}"
+    "MaxValueNotification": "{{nama}} harus maksimal {{max}}",
+    "TotalItems": "Total item {{total}}"
   },
   "credential": {
     "Permission": "Izin",

diff --git a/resources/i18n/it.json b/resources/i18n/it.json
@@ -516,7 +516,8 @@
     "Extend": "Estendere",
     "RemainingLoginSessionTime": "Tempo fino alla disconnessione automatica",
     "Change": "Cambiamento",
-    "MaxValueNotification": "{{nome}} deve essere massimo {{max}}"
+    "MaxValueNotification": "{{nome}} deve essere massimo {{max}}",
+    "TotalItems": "Totale articoli {{totale}}"
   },
   "credential": {
     "Permission": "Autorizzazione",

diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
@@ -515,7 +515,8 @@
     "Extend": "伸ばす",
     "RemainingLoginSessionTime": "自動ログアウトまでの時間",
     "Change": "変更",
-    "MaxValueNotification": "{{ name }}最大値は{{ max }}です"
+    "MaxValueNotification": "{{ name }}最大値は{{ max }}です",
+    "TotalItems": "合計{{total}}項目"
   },
   "credential": {
     "Permission": "許可",

diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
@@ -631,7 +631,8 @@
     "Extend": "연장",
     "RemainingLoginSessionTime": "자동 로그아웃까지 남은 시간",
     "Change": "변경",
-    "MaxValueNotification": "{{ name }} 최대 값은 {{ max }}입니다"
+    "MaxValueNotification": "{{ name }} 최대 값은 {{ max }}입니다",
+    "TotalItems": "총 {{ total }}개"
   },
   "credential": {
     "Permission": "권한",

diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
@@ -517,7 +517,8 @@
     "Extend": "Сунгах",
     "RemainingLoginSessionTime": "Автоматаар гарах хүртэл хугацаа",
     "Change": "Өөрчлөх",
-    "MaxValueNotification": "{{name}} хамгийн ихдээ {{max}} байх ёстой"
+    "MaxValueNotification": "{{name}} хамгийн ихдээ {{max}} байх ёстой",
+    "TotalItems": "Нийт {{total}} зүйл"
   },
   "credential": {
     "Permission": "Зөвшөөрөл",

diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
@@ -514,7 +514,8 @@
     "NSelected": "{{count}} item yang dipilih",
     "Extend": "Panjangkan",
     "Change": "Berubah",
-    "MaxValueNotification": "{{nama}} mestilah maksimum {{maks}}"
+    "MaxValueNotification": "{{nama}} mestilah maksimum {{maks}}",
+    "TotalItems": "Jumlah {{total}} item"
   },
   "credential": {
     "Permission": "Kebenaran",

diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
@@ -515,7 +515,8 @@
     "Extend": "Rozszerzyć",
     "RemainingLoginSessionTime": "Czas do automatycznego wylogowania",
     "Change": "Zmiana",
-    "MaxValueNotification": "{{name}} musi być maksymalna {{max}}."
+    "MaxValueNotification": "{{name}} musi być maksymalna {{max}}.",
+    "TotalItems": "Łącznie {{total}} pozycji"
   },
   "credential": {
     "Permission": "Pozwolenie",

diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
@@ -515,7 +515,8 @@
     "Extend": "Ampliar",
     "RemainingLoginSessionTime": "Tempo até ao encerramento automático da sessão",
     "Change": "Alterar",
-    "MaxValueNotification": "{{nome}} deve ser o máximo {{max}}"
+    "MaxValueNotification": "{{nome}} deve ser o máximo {{max}}",
+    "TotalItems": "Total de itens {{total}}"
   },
   "credential": {
     "Permission": "Permissão",

diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
@@ -515,7 +515,8 @@
     "Extend": "Ampliar",
     "RemainingLoginSessionTime": "Tempo até ao encerramento automático da sessão",
     "Change": "Alterar",
-    "MaxValueNotification": "{{nome}} deve ser o máximo {{max}}"
+    "MaxValueNotification": "{{nome}} deve ser o máximo {{max}}",
+    "TotalItems": "Total de itens {{total}}"
   },
   "credential": {
     "Permission": "Permissão",

diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
@@ -515,7 +515,8 @@
     "Extend": "Продлевать",
     "RemainingLoginSessionTime": "Время до автоматического выхода из системы",
     "Change": "Изменить",
-    "MaxValueNotification": "{{name}} должен быть максимальным {{max}}"
+    "MaxValueNotification": "{{name}} должен быть максимальным {{max}}",
+    "TotalItems": "Всего {{total}} предметов"
   },
   "credential": {
     "Permission": "Разрешение",

diff --git a/resources/i18n/th.json b/resources/i18n/th.json
@@ -641,7 +641,8 @@
     "Extend": "ขยาย",
     "RemainingLoginSessionTime": "เวลาจนกระทั่งออกจากระบบอัตโนมัติ",
     "Change": "เปลี่ยน",
-    "MaxValueNotification": "{{name}} ต้องมีค่าสูงสุด {{max}}"
+    "MaxValueNotification": "{{name}} ต้องมีค่าสูงสุด {{max}}",
+    "TotalItems": "รวม {{total}} รายการ"
   },
   "credential": {
     "Permission": "สิทธิ์",

diff --git a/resources/i18n/tr.json b/resources/i18n/tr.json
@@ -515,7 +515,8 @@
     "Extend": "Uzatmak",
     "RemainingLoginSessionTime": "Otomatik Çıkışa Kadar Geçen Süre",
     "Change": "Değişim",
-    "MaxValueNotification": "{{name}} maksimum {{max}} olmalıdır"
+    "MaxValueNotification": "{{name}} maksimum {{max}} olmalıdır",
+    "TotalItems": "Toplam {{toplam}} öğe"
   },
   "credential": {
     "Permission": "izin",

diff --git a/resources/i18n/vi.json b/resources/i18n/vi.json
@@ -515,7 +515,8 @@
     "Extend": "Mở rộng",
     "RemainingLoginSessionTime": "Thời gian cho đến khi tự động đăng xuất",
     "Change": "Thay đổi",
-    "MaxValueNotification": "{{name}} phải tối đa {{max}}"
+    "MaxValueNotification": "{{name}} phải tối đa {{max}}",
+    "TotalItems": "Tổng số {{total}} mặt hàng"
   },
   "credential": {
     "Permission": "Sự cho phép",

diff --git a/resources/i18n/zh-CN.json b/resources/i18n/zh-CN.json
@@ -515,7 +515,8 @@
     "Extend": "延长",
     "RemainingLoginSessionTime": "自动注销前的时间",
     "Change": "改变",
-    "MaxValueNotification": "{{name}} 必须是最大值 {{max}}"
+    "MaxValueNotification": "{{name}} 必须是最大值 {{max}}",
+    "TotalItems": "{{总计}}项目总数"
   },
   "credential": {
     "Permission": "允许",

diff --git a/resources/i18n/zh-TW.json b/resources/i18n/zh-TW.json
@@ -515,7 +515,8 @@
     "Extend": "延長",
     "RemainingLoginSessionTime": "自动注销前的时间",
     "Change": "改变",
-    "MaxValueNotification": "{{name}} 必须是最大值 {{max}}"
+    "MaxValueNotification": "{{name}} 必须是最大值 {{max}}",
+    "TotalItems": "{{总计}}项目总数"
   },
   "credential": {
     "Permission": "允許",