From 15278302f3dd685fc2028eb1b1cb53a680c248a9 Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Wed, 29 Nov 2023 15:37:50 +0800
Subject: [PATCH] fix(console): fix xml file reader size calculation and add
 dark mode file icon (#4991)

---
 .../src/assets/icons/file-icon-dark.svg       |  7 ++++++
 .../Connection/SamlMetadataForm/utils.ts      |  2 +-
 .../Connection/XmlFileReader/index.tsx        | 23 +++++++++----------
 3 files changed, 19 insertions(+), 13 deletions(-)
 create mode 100644 packages/console/src/assets/icons/file-icon-dark.svg

diff --git a/packages/console/src/assets/icons/file-icon-dark.svg b/packages/console/src/assets/icons/file-icon-dark.svg
new file mode 100644
index 000000000..ffb4be770
--- /dev/null
+++ b/packages/console/src/assets/icons/file-icon-dark.svg
@@ -0,0 +1,7 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M9 0C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9Z" fill="#5D34F2"/>
+<path d="M25 0L35 10H27C25.8954 10 25 9.10457 25 8V0Z" fill="#947DFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.3165 16.5516C22.8404 16.7262 23.1236 17.2926 22.949 17.8165L19.449 28.3165C19.2743 28.8404 18.708 29.1236 18.184 28.949C17.6601 28.7743 17.3769 28.208 17.5516 27.684L21.0516 17.184C21.2262 16.6601 21.7926 16.3769 22.3165 16.5516Z" fill="#AF9EFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6332 16.7261C16.0607 17.0758 16.1237 17.7058 15.774 18.1333L11.8174 22.969L15.7433 27.3311C16.1128 27.7416 16.0795 28.3739 15.669 28.7433C15.2585 29.1128 14.6262 29.0795 14.2567 28.669L9.75671 23.669C9.42642 23.302 9.4134 22.7489 9.72604 22.3668L14.226 16.8668C14.5758 16.4393 15.2058 16.3763 15.6332 16.7261Z" fill="#AF9EFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3668 16.7261C23.9393 17.0758 23.8763 17.7058 24.226 18.1333L28.1826 22.969L24.2567 27.3311C23.8872 27.7416 23.9205 28.3739 24.331 28.7433C24.7415 29.1128 25.3738 29.0795 25.7433 28.669L30.2433 23.669C30.5736 23.302 30.5866 22.7489 30.274 22.3668L25.774 16.8668C25.4242 16.4393 24.7942 16.3763 24.3668 16.7261Z" fill="#AF9EFF"/>
+</svg>
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/utils.ts b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/utils.ts
index 5142b8bc8..b6bffdcc1 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/utils.ts
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/utils.ts
@@ -1,5 +1,5 @@
 // In Bytes.
-export const getXmlFileSize = (xmlContent: string): number => {
+export const calculateXmlFileSize = (xmlContent: string): number => {
   const blob = new Blob([xmlContent], { type: 'application/xml' });
   const file = new File([blob], 'identity provider metadata.xml');
   return file.size;
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Connection/XmlFileReader/index.tsx b/packages/console/src/pages/EnterpriseSsoDetails/Connection/XmlFileReader/index.tsx
index 04f710c6c..34ddc518e 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/XmlFileReader/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/XmlFileReader/index.tsx
@@ -1,16 +1,18 @@
-import { conditional } from '@silverhand/essentials';
-import { useCallback, useState } from 'react';
+import { Theme } from '@logto/schemas';
+import { useCallback } from 'react';
 import { useDropzone, type FileRejection } from 'react-dropzone';
 import { useFormContext } from 'react-hook-form';
 
 import Delete from '@/assets/icons/delete.svg';
+import FileIconDark from '@/assets/icons/file-icon-dark.svg';
 import FileIcon from '@/assets/icons/file-icon.svg';
 import UploaderIcon from '@/assets/icons/upload.svg';
 import Button from '@/ds-components/Button';
 import IconButton from '@/ds-components/IconButton';
+import useTheme from '@/hooks/use-theme';
 
 import { type SamlGuideFormType } from '../../../EnterpriseSso/types';
-import { getXmlFileSize } from '../SamlMetadataForm/utils';
+import { calculateXmlFileSize } from '../SamlMetadataForm/utils';
 
 import * as styles from './index.module.scss';
 
@@ -24,12 +26,7 @@ type Props = {
 };
 
 function XmlFileReader({ onChange, value }: Props) {
-  /**
-   * It's ok to use 0 as a fallback file size because it will not be displayed if the value is empty.
-   */
-  const [fileSize, setFileSize] = useState<number>(
-    conditional(value && getXmlFileSize(value)) ?? 0
-  );
+  const theme = useTheme();
 
   const {
     setError,
@@ -58,7 +55,6 @@ function XmlFileReader({ onChange, value }: Props) {
       if (!acceptedFile) {
         return;
       }
-      setFileSize(acceptedFile.size);
 
       const xmlContent = await acceptedFile.text();
       onChange(xmlContent);
@@ -83,10 +79,13 @@ function XmlFileReader({ onChange, value }: Props) {
     <div>
       {value ? (
         <div className={styles.preview}>
-          <FileIcon />
+          {theme === Theme.Dark ? <FileIcon /> : <FileIconDark />}
           <div className={styles.fileInfo}>
             <span className={styles.fileName}>{xmlFileName}</span>
-            <span className={styles.fileSize}>{`${(fileSize / 1024).toFixed(2)} KB`}</span>
+            {/* Not using `File.size` since the file content (variable `value` in this case) is stored in DB in string type */}
+            <span className={styles.fileSize}>{`${(calculateXmlFileSize(value) / 1024).toFixed(
+              2
+            )} KB`}</span>
           </div>
           <IconButton
             className={styles.delete}