refactor(console): allow undefined in image uploader

2024-12-16 20:26:19 -05:00 · 2024-07-06 22:51:29 +08:00 · 2024-07-06 22:51:29 +08:00 · 50cb1bc8ef
commit 50cb1bc8ef
parent 1fa9f85e14
25 changed files with 30 additions and 46 deletions
--- a/packages/console/src/ds-components/Uploader/FileUploader/index.module.scss
+++ b/packages/console/src/ds-components/Uploader/FileUploader/index.module.scss
@ -4,6 +4,9 @@
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: _.unit(3.25);
+  transition-property: outline, border;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;

  > input {
    display: none;
@ -18,6 +21,9 @@
      width: 20px;
      height: 20px;
      color: var(--color-text-secondary);
+      transition-property: color;
+      transition-timing-function: ease-in-out;
+      transition-duration: 0.2s;
    }

    .uploadingIcon {
@ -60,4 +66,3 @@
    border-color: var(--color-error);
  }
 }
-
--- a/packages/console/src/ds-components/Uploader/ImageUploader/index.tsx
+++ b/packages/console/src/ds-components/Uploader/ImageUploader/index.tsx
@ -14,7 +14,7 @@ import * as styles from './index.module.scss';
 export type Props = Omit<FileUploaderProps, 'maxSize' | 'allowedMimeTypes'> & {
  readonly allowedMimeTypes?: AllowedUploadMimeType[];
  readonly name: string;
-  readonly value: string;
+  readonly value?: string;
  readonly onDelete: () => void;
  readonly className?: string;
 };
--- a/packages/console/src/ds-components/Uploader/ImageUploaderField/index.tsx
+++ b/packages/console/src/ds-components/Uploader/ImageUploaderField/index.tsx
@ -10,7 +10,7 @@ import type { Props as ImageUploaderProps } from '../ImageUploader';
 import * as styles from './index.module.scss';

 type Props = Omit<ImageUploaderProps, 'onDelete' | 'onCompleted' | 'onUploadErrorChange'> & {
-  readonly onChange: (value: string) => void;
+  readonly onChange: (value?: string) => void;
  readonly allowedMimeTypes?: UserAssetsServiceStatus['allowUploadMimeTypes'];
 };

@ -26,7 +26,7 @@ function ImageUploaderField({ onChange, allowedMimeTypes: mimeTypes, ...rest }:
        onCompleted={onChange}
        onUploadErrorChange={setUploadError}
        onDelete={() => {
-          onChange('');
+          onChange();
        }}
        {...rest}
      />
--- a/packages/console/src/onboarding/pages/SignInExperience/index.tsx
+++ b/packages/console/src/onboarding/pages/SignInExperience/index.tsx
@ -175,7 +175,7 @@ function SignInExperience() {
                    name="logo"
                    control={control}
                    render={({ field: { onChange, value, name } }) => (
-                      <ImageUploaderField name={name} value={value ?? ''} onChange={onChange} />
+                      <ImageUploaderField name={name} value={value} onChange={onChange} />
                    )}
                  />
                ) : (
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/LogoUploader.tsx
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/LogoUploader.tsx
@ -30,12 +30,12 @@ function LogoUploader({ isDarkModeEnabled }: Props) {
            <ImageUploader
              className={isDarkModeEnabled ? styles.multiColumn : undefined}
              name={name}
-              value={value ?? ''}
+              value={value}
              actionDescription={t('sign_in_exp.branding.logo_image_url')}
              onCompleted={onChange}
              onUploadErrorChange={setUploadLogoError}
              onDelete={() => {
-                onChange('');
+                onChange();
              }}
            />
          )}
@ -48,13 +48,13 @@ function LogoUploader({ isDarkModeEnabled }: Props) {
            render={({ field: { onChange, value, name } }) => (
              <ImageUploader
                name={name}
-                value={value ?? ''}
+                value={value}
                className={value ? styles.darkMode : undefined}
                actionDescription={t('sign_in_exp.branding.dark_logo_image_url')}
                onCompleted={onChange}
                onUploadErrorChange={setUploadDarkLogoError}
                onDelete={() => {
-                  onChange('');
+                  onChange();
                }}
              />
            )}
--- a/packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Experience/LogosUploader/index.tsx
@ -37,7 +37,7 @@ function LogosUploader({ isDarkModeEnabled }: Props) {
                  isDarkModeEnabled && styles.frame,
                  isDarkModeEnabled && value && styles.frameBackground
                )}
-                value={value ?? ''}
+                value={value}
                actionDescription={t(
                  isDarkModeEnabled
                    ? 'enterprise_sso_details.branding_light_logo_context'
@ -47,7 +47,7 @@ function LogosUploader({ isDarkModeEnabled }: Props) {
                onCompleted={onChange}
                onUploadErrorChange={setUploadLogoError}
                onDelete={() => {
-                  onChange('');
+                  onChange();
                }}
              />
            )}
@ -62,13 +62,13 @@ function LogosUploader({ isDarkModeEnabled }: Props) {
                <ImageUploader
                  name={name}
                  className={classNames(styles.frameDark, value && styles.frameDarkBackground)}
-                  value={value ?? ''}
+                  value={value}
                  actionDescription={t('enterprise_sso_details.branding_dark_logo_context')}
                  allowedMimeTypes={allowedMimeTypes}
                  onCompleted={onChange}
                  onUploadErrorChange={setUploadDarkLogoError}
                  onDelete={() => {
-                    onChange('');
+                    onChange();
                  }}
                />
              )}
--- a/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/LogoAndFaviconUploader/index.tsx
+++ b/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/LogoAndFaviconUploader/index.tsx
@ -27,12 +27,12 @@ function LogoAndFaviconUploader() {
            render={({ field: { onChange, value, name } }) => (
              <ImageUploader
                name={name}
-                value={value ?? ''}
+                value={value}
                actionDescription={t('sign_in_exp.branding.logo_image')}
                onCompleted={onChange}
                onUploadErrorChange={setUploadLogoError}
                onDelete={() => {
-                  onChange('');
+                  onChange();
                }}
              />
            )}
@ -45,12 +45,12 @@ function LogoAndFaviconUploader() {
            render={({ field: { onChange, value, name } }) => (
              <ImageUploader
                name={name}
-                value={value ?? ''}
+                value={value}
                actionDescription={t('sign_in_exp.branding.favicon')}
                onCompleted={onChange}
                onUploadErrorChange={setUploadFaviconError}
                onDelete={() => {
-                  onChange('');
+                  onChange();
                }}
              />
            )}
--- a/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.tsx
+++ b/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.tsx
@ -139,7 +139,7 @@ function BrandingForm() {
                render={({ field: { onChange, value, name } }) => (
                  <ImageUploaderField
                    name={name}
-                    value={value ?? ''}
+                    value={value}
                    actionDescription={t('sign_in_exp.branding.dark_logo_image')}
                    onChange={onChange}
                  />
--- a/packages/console/src/utils/validator.ts
+++ b/packages/console/src/utils/validator.ts
@ -1,7 +1,7 @@
-export const uriValidator = (value: string) => {
+export const uriValidator = (value?: string) => {
  try {
    // eslint-disable-next-line no-new
-    new URL(value);
+    new URL(value ?? '');
  } catch {
    return false;
  }
--- a/packages/phrases/src/locales/de/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: 'Ziehen und Ablegen oder Datei auswählen',
    uploading: 'Wird hochgeladen...',
-    image_limit:
-      'Lade ein Bild unter {{size, number}}KB hoch, nur {{extensions, list(style: narrow; type: conjunction;)}}.',
    error_upload: 'Etwas ist schiefgelaufen. Dateiupload fehlgeschlagen.',
    error_file_size: 'Dateigröße ist zu groß. Bitte lade eine Datei unter {{size, number}}KB hoch.',
    error_file_type:
--- a/packages/phrases/src/locales/en/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/components.ts
@ -3,7 +3,7 @@ const components = {
    action_description: 'Drag and drop or browse',
    uploading: 'Uploading...',
    image_limit:
-      'Upload image under {{size, number}}KB, {{extensions, list(style: narrow; type: conjunction;)}} only.',
+      'Upload image under {{size, number}}KB. {{extensions, list(style: narrow; type: conjunction;)}} only.',
    error_upload: 'Something went wrong. File upload failed.',
    error_file_size: 'File size is too large. Please upload a file under {{size, number}}KB.',
    error_file_type:
--- a/packages/phrases/src/locales/en/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/general.ts
@ -69,6 +69,7 @@ const general = {
  delete_field: 'Delete {{field}}',
  coming_soon: 'Coming soon',
  or: 'Or',
+  select_a_color: 'Select a color',
 };

 export default Object.freeze(general);
--- a/packages/phrases/src/locales/es/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: 'Arrastra y suelta o busca',
    uploading: 'Subiendo...',
-    image_limit:
-      'Sube imágenes de menos de {{size, number}}KB, solo {{extensions, list(style: narrow; type: conjunction;)}}.',
    error_upload: 'Algo salió mal. La subida de archivos falló.',
    error_file_size:
      'El archivo es demasiado grande. Por favor, sube un archivo de menos de {{size, number}}KB.',
--- a/packages/phrases/src/locales/fr/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: 'Glissez-déposez ou parcourez',
    uploading: 'Téléchargement...',
-    image_limit:
-      'Téléchargez une image de moins de {{size, number}} Ko, uniquement {{extensions, list(style: narrow; type: conjunction;)}}.',
    error_upload: "Quelque chose s'est mal passé. La téléchargement de fichier a échoué.",
    error_file_size:
      'La taille du fichier est trop grande. Veuillez télécharger un fichier de moins de {{size, number}}Ko.',
--- a/packages/phrases/src/locales/it/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: 'Trascina e rilascia o cerca',
    uploading: 'Caricamento in corso...',
-    image_limit:
-      'Carica immagini sotto i {{size, number}}KB, solo {{extensions, list(style: narrow; type: conjunction;)}}.',
    error_upload: 'Qualcosa è andato storto. Caricamento fallito.',
    error_file_size: 'Il file è troppo grande. Carica un file sotto i {{size, number}}KB.',
    error_file_type:
--- a/packages/phrases/src/locales/ja/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: 'ドラッグアンドドロップまたはブラウズ',
    uploading: 'アップロード中...',
-    image_limit:
-      '{{size, number}}KB以下のイメージをアップロードし、{{extensions, list(style: narrow; type: conjunction;)}}のみ許可します。',
    error_upload: 'エラーが発生しました。ファイルのアップロードに失敗しました。',
    error_file_size: '{{size, number}}KB以下のファイルをアップロードしてください。',
    error_file_type:
--- a/packages/phrases/src/locales/ko/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: '드래그 앤 드롭 또는 탐색하기',
    uploading: '업로드 중...',
-    image_limit:
-      '{{size, number}}KB 미만의 {{extensions, list(style: narrow; type: conjunction;)}} 파일만 업로드하세요.',
    error_upload: '오류가 발생했습니다. 파일 업로드에 실패하였습니다.',
    error_file_size: '파일 크기가 너무 커요. {{size, number}}KB 미만의 파일을 업로드해 주세요.',
    error_file_type:
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: 'Przeciągnij i upuść lub przeszukaj',
    uploading: 'Wysyłanie...',
-    image_limit:
-      'Wyślij obraz o rozmiarze mniejszym niż {{size, number}}KB, tylko w formacie {{extensions, list(style: narrow; type: conjunction;)}}.',
    error_upload: 'Coś poszło nie tak. Nie udało się wysłać pliku.',
    error_file_size:
      'Plik jest zbyt duży. Wyślij plik o rozmiarze mniejszym niż {{size, number}}KB.',
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: 'Arraste e solte ou procure',
    uploading: 'Enviando...',
-    image_limit:
-      'Carregue imagens abaixo de {{size, number}}KB, apenas {{extensions, list(style: narrow; type: conjunction;)}}.',
    error_upload: 'Algo deu errado. Falha ao enviar arquivo.',
    error_file_size:
      'Tamanho do arquivo é muito grande. Por favor, envie um arquivo abaixo de {{size, number}}KB.',
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: 'Arraste e solte ou navegue',
    uploading: 'A enviar...',
-    image_limit:
-      'Carregue imagens com menos de {{size, number}}KB, só {{extensions, list(style: narrow; type: conjunction;)}}.',
    error_upload: 'Algo correu mal. O carregamento do ficheiro falhou.',
    error_file_size:
      'O ficheiro é demasiado grande. Por favor carregue um ficheiro com menos de {{size, number}}KB.',
--- a/packages/phrases/src/locales/ru/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: 'Перетащите или выберите файл',
    uploading: 'Загрузка...',
-    image_limit:
-      'Загрузите изображение размером менее {{size, number}} КБ, только {{extensions, list(style: narrow; type: conjunction;)}}.',
    error_upload: 'Что-то пошло не так. Загрузка файла не удалась.',
    error_file_size:
      'Размер файла слишком большой. Пожалуйста, загрузите файл размером менее {{size, number}} КБ.',
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/components.ts
@ -2,8 +2,6 @@ const components = {
  uploader: {
    action_description: 'Sürükle ve bırak veya gözat',
    uploading: 'Yükleniyor...',
-    image_limit:
-      '{{size, number}}KB altındaki resimleri yükleyin, yalnızca {{extensions, list(style: narrow; type: conjunction;)}} dosyaları kabul edilir.',
    error_upload: 'Bir şeyler yanlış gitti. Dosya yüklenemedi.',
    error_file_size:
      'Dosya boyutu çok büyük. Lütfen {{size, number}}KB altında bir dosya yükleyin.',
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/components.ts
@ -3,7 +3,7 @@ const components = {
    action_description: '拖放或浏览上传',
    uploading: '上传中...',
    image_limit:
-      '上传图片大小不能超过 {{size, number}}KB，只支持 {{extensions, list(style: narrow; type: conjunction;)}} 格式的文件。',
+      '上传图片大小不能超过 {{size, number}}KB。只支持 {{extensions, list(style: narrow; type: conjunction;)}} 格式的文件。',
    error_upload: '哎呀，出了些问题。文件上传失败。',
    error_file_size: '文件太大了，请上传小于 {{size, number}}KB 的文件。',
    error_file_type:
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/components.ts
@ -3,7 +3,7 @@ const components = {
    action_description: '拖放或瀏覽上傳',
    uploading: '上傳中...',
    image_limit:
-      '上傳圖片大小不能超過 {{size, number}}KB，只支援 {{extensions, list(style: narrow; type: conjunction;)}} 格式的檔案。',
+      '上傳圖片大小不能超過 {{size, number}}KB。只支援 {{extensions, list(style: narrow; type: conjunction;)}} 格式的檔案。',
    error_upload: '哎呀，出了些問題。檔案上傳失敗。',
    error_file_size: '檔案太大了，請上傳小於 {{size, number}}KB 的檔案。',
    error_file_type:
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/components.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/components.ts
@ -3,7 +3,7 @@ const components = {
    action_description: '拖放或瀏覽上傳',
    uploading: '上傳中...',
    image_limit:
-      '上傳圖片大小不能超過 {{size, number}}KB，只支持 {{extensions, list(style: narrow; type: conjunction;)}} 格式的文件。',
+      '上傳圖片大小不能超過 {{size, number}}KB。只支持 {{extensions, list(style: narrow; type: conjunction;)}} 格式的文件。',
    error_upload: '哎呀，出了些問題。文件上傳失敗。',
    error_file_size: '文件太大了，請上傳小於 {{size, number}}KB 的文件。',
    error_file_type: