Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -05:00
Code Issues Activity

fix(console): fix xml file reader size calculation and add dark mode file icon (#4991)

Browse source
This commit is contained in:
Darcy Ye 2023-11-29 15:37:50 +08:00 • committed by GitHub
parent 5105830e2f
commit 15278302f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/console/src/assets/icons/file-icon-dark.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

2
packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/utils.ts
View file

@ -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;

23
packages/console/src/pages/EnterpriseSsoDetails/Connection/XmlFileReader/index.tsx
View file

@ -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}