@kenyaemr/esm-admin-app 5.4.4-pre.98 → 5.4.5-pre.16

package/src/components/global-property/workspace/global-property.workspace.tsx

@@ -0,0 +1,260 @@
+import React, { useEffect, useState } from 'react';
+import {
+  ResponsiveWrapper,
+  Workspace2,
+  showSnackbar,
+  useLayoutType,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { Button, ButtonSet, ComboBox, Form, FormGroup, InlineLoading, Stack, TextArea, TextInput } from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import classNames from 'classnames';
+
+import styles from './global-property.workspace.scss';
+import { type SystemSettings } from '../../../types';
+import { saveOrUpdateGlobalProperty } from '../hooks/useGlobalProperty';
+import {
+  createGlobalPropertyFormSchema,
+  openmrsCustomDatatypes,
+  type GlobalPropertyFormType,
+} from './global-property-form-schema';
+
+type GlobalPropertyWorkspaceProps = {
+  systemSetting?: SystemSettings | null;
+  mutateGlobalProperty: () => void;
+};
+
+const GlobalPropertyWorkspace: React.FC<Workspace2DefinitionProps<GlobalPropertyWorkspaceProps, {}, {}>> = ({
+  closeWorkspace,
+  workspaceProps: { systemSetting, mutateGlobalProperty },
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const isEditMode = Boolean(systemSetting?.uuid);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty, errors },
+  } = useForm<GlobalPropertyFormType>({
+    resolver: zodResolver(createGlobalPropertyFormSchema(t)),
+    defaultValues: {
+      property: systemSetting?.property ?? '',
+      description: systemSetting?.description ?? '',
+      datatypeClassname: systemSetting?.datatypeClassname ?? '',
+      datatypeConfig: systemSetting?.datatypeConfig ?? '',
+      preferredHandlerClassname: systemSetting?.preferredHandlerClassname ?? '',
+      handlerConfig: systemSetting?.handlerConfig ?? '',
+      value: systemSetting?.value ?? '',
+    },
+  });
+
+  useEffect(() => {
+    setHasUnsavedChanges(isDirty);
+  }, [isDirty]);
+
+  const onSubmit = async (data: GlobalPropertyFormType) => {
+    const payload = {
+      property: data.property,
+      value: data.value,
+      description: data.description,
+      datatypeClassname: data.datatypeClassname,
+      datatypeConfig: data.datatypeConfig,
+      preferredHandlerClassname: data.preferredHandlerClassname,
+      handlerConfig: data.handlerConfig,
+    };
+    try {
+      await saveOrUpdateGlobalProperty(payload, systemSetting?.uuid);
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: isEditMode
+          ? t('gpUpdated', 'Global property {{property}} was updated successfully.', { property: data.property })
+          : t('gpCreated', 'Global property {{property}} was created successfully.', { property: data.property }),
+      });
+      mutateGlobalProperty();
+      closeWorkspace({ discardUnsavedChanges: true });
+    } catch (error: any) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        kind: 'error',
+        subtitle: error?.message ?? t('gpSaveError', 'Error saving global property'),
+      });
+    }
+  };
+
+  const title = isEditMode
+    ? t('editGlobalProperty', 'Edit global property')
+    : t('addGlobalProperty', 'Add global property');
+
+  return (
+    <Workspace2 title={title} hasUnsavedChanges={hasUnsavedChanges}>
+      <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <div className={styles.formContainer}>
+          <Stack gap={4}>
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="property"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpProperty"
+                      labelText={t('property', 'Property (required)')}
+                      placeholder={t('gpPropertyPlaceholder', 'e.g. setting.name')}
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.property}
+                      invalidText={errors.property?.message}
+                      disabled={isEditMode}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="value"
+                  render={({ field }) => (
+                    <TextArea
+                      id="gpValue"
+                      labelText={t('value', 'Value (required)')}
+                      placeholder={t('gpValuePlaceholder', 'Enter value')}
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.value}
+                      invalidText={errors.value?.message}
+                      rows={3}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="description"
+                  render={({ field }) => (
+                    <TextArea
+                      id="gpDescription"
+                      labelText={t('description', 'Description')}
+                      placeholder={t('gpDescriptionPlaceholder', 'Optional description')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                      rows={2}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="datatypeClassname"
+                  render={({ field }) => (
+                    <ComboBox
+                      id="datatypeClassname"
+                      invalidText={errors.datatypeClassname?.message}
+                      items={openmrsCustomDatatypes}
+                      onChange={function Zye() {}}
+                      titleText={t('datatypeClassname', 'Datatype classname')}
+                      typeahead
+                      placeholder={t('selectDatatypeClassname', 'Select datatype classname')}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="datatypeConfig"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpDatatypeConfig"
+                      labelText={t('datatypeConfig', 'Datatype config')}
+                      placeholder={t('gpDatatypeConfigPlaceholder', 'Optional datatype configuration')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="preferredHandlerClassname"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpPreferredHandlerClassname"
+                      labelText={t('preferredHandlerClassname', 'Preferred handler classname')}
+                      placeholder={t('gpPreferredHandlerPlaceholder', 'Optional preferred handler classname')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="handlerConfig"
+                  render={({ field }) => (
+                    <TextInput
+                      id="gpHandlerConfig"
+                      labelText={t('handlerConfig', 'Handler config')}
+                      placeholder={t('gpHandlerConfigPlaceholder', 'Optional handler configuration')}
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+          </Stack>
+        </div>
+
+        <ButtonSet
+          className={classNames({
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}>
+          <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.buttonContainer} disabled={isSubmitting || !isDirty} kind="primary" type="submit">
+            {isSubmitting ? (
+              <span className={styles.inlineLoading}>
+                {t('submitting', 'Submitting...')}
+                <InlineLoading status="active" iconDescription="Loading" />
+              </span>
+            ) : (
+              t('saveAndClose', 'Save & close')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default GlobalPropertyWorkspace;

package/src/components/global-property/workspace/upload-logo.workspace.scss

@@ -0,0 +1,61 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  overflow-y: auto;
+}
+
+.previewContainer {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.previewLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.preview {
+  max-width: 100%;
+  max-height: 240px;
+  object-fit: contain;
+  border: 1px solid colors.$gray-20;
+  padding: layout.$spacing-03;
+  background-color: colors.$white;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+
+  & button {
+    max-width: 50% !important;
+  }
+}
+
+.buttonContainer {
+  max-width: 50%;
+}
+
+.inlineLoading {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}

package/src/components/global-property/workspace/upload-logo.workspace.test.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import UploadLogoWorkspace from './upload-logo.workspace';
+
+const mockShowSnackbar = vi.fn();
+const mockUploadLogo = vi.fn();
+const mockCloseWorkspace = vi.fn();
+const mockMutateGlobalProperty = vi.fn();
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (_key: string, fallback: string) => fallback }),
+}));
+
+vi.mock('@openmrs/esm-framework', () => ({
+  useLayoutType: vi.fn(() => 'desktop'),
+  showSnackbar: (...args: unknown[]) => mockShowSnackbar(...args),
+  Workspace2: ({ children, title }: { children: React.ReactNode; title: string }) => (
+    <div>
+      <h2>{title}</h2>
+      {children}
+    </div>
+  ),
+}));
+
+vi.mock('../hooks/useLogoUpload', async (importOriginal) => {
+  const original = await importOriginal<typeof import('../hooks/useLogoUpload')>();
+  return {
+    ...original,
+    uploadLogo: (...args: unknown[]) => mockUploadLogo(...args),
+  };
+});
+
+vi.mock('@carbon/react', async (importOriginal) => {
+  const original = await importOriginal<typeof import('@carbon/react')>();
+  return {
+    ...original,
+    Button: ({ children, onClick, disabled, type }: any) => (
+      <button onClick={onClick} disabled={disabled} type={type || 'button'}>
+        {children}
+      </button>
+    ),
+    FileUploader: ({ onChange, onDelete, disabled }: any) => (
+      <div>
+        <input
+          data-testid="file-input"
+          type="file"
+          disabled={disabled}
+          onChange={(e) => onChange({ target: e.target, addedFiles: Array.from(e.target.files ?? []) })}
+        />
+        <button type="button" onClick={() => onDelete?.()}>
+          remove-file
+        </button>
+      </div>
+    ),
+  };
+});
+
+const baseProps = {
+  closeWorkspace: mockCloseWorkspace,
+  workspaceProps: {
+    mutateGlobalProperty: mockMutateGlobalProperty,
+  },
+} as any;
+
+function makeFile(name: string, type: string, size?: number) {
+  const file = new File(['logo-bytes'], name, { type });
+  if (size != null) {
+    Object.defineProperty(file, 'size', { value: size });
+  }
+  return file;
+}
+
+describe('UploadLogoWorkspace', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.URL.createObjectURL = vi.fn(() => 'blob:preview');
+    global.URL.revokeObjectURL = vi.fn();
+  });
+
+  it('renders the workspace with the Upload button disabled until a file is chosen', () => {
+    render(<UploadLogoWorkspace {...baseProps} />);
+    expect(screen.getByText('Upload image')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Upload' })).toBeDisabled();
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('shows a preview and enables Upload after selecting a valid image', async () => {
+    render(<UploadLogoWorkspace {...baseProps} />);
+
+    await userEvent.upload(screen.getByTestId('file-input'), makeFile('logo.png', 'image/png'));
+
+    expect(screen.getByRole('img', { name: 'Image preview' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Upload' })).toBeEnabled();
+  });
+
+  it('rejects an unsupported file type and keeps Upload disabled', async () => {
+    render(<UploadLogoWorkspace {...baseProps} />);
+
+    await userEvent.upload(screen.getByTestId('file-input'), makeFile('notes.pdf', 'application/pdf'));
+
+    expect(screen.getByText(/Unsupported file type/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Upload' })).toBeDisabled();
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('rejects a file larger than the 2 MB limit', async () => {
+    render(<UploadLogoWorkspace {...baseProps} />);
+
+    await userEvent.upload(screen.getByTestId('file-input'), makeFile('huge.png', 'image/png', 2 * 1024 * 1024 + 1));
+
+    expect(screen.getByText(/exceeds the 2 MB maximum/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Upload' })).toBeDisabled();
+  });
+
+  it('uploads the selected image, shows a success snackbar, refreshes and closes', async () => {
+    mockUploadLogo.mockResolvedValue({ savedPath: '/srv/openmrs/prescription-logo.png', message: 'ok' });
+    render(<UploadLogoWorkspace {...baseProps} />);
+
+    const file = makeFile('logo.png', 'image/png');
+    await userEvent.upload(screen.getByTestId('file-input'), file);
+    await userEvent.click(screen.getByRole('button', { name: 'Upload' }));
+
+    await waitFor(() => {
+      expect(mockUploadLogo).toHaveBeenCalledWith(file, 'prescription');
+      expect(mockShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' }));
+      expect(mockMutateGlobalProperty).toHaveBeenCalled();
+      expect(mockCloseWorkspace).toHaveBeenCalled();
+    });
+  });
+
+  it('uploads to the receipt destination when the receipt option is selected', async () => {
+    mockUploadLogo.mockResolvedValue({ savedPath: '/srv/openmrs/receipt-logo.png', message: 'ok' });
+    render(<UploadLogoWorkspace {...baseProps} />);
+
+    await userEvent.click(screen.getByRole('radio', { name: 'Receipt logo' }));
+    const file = makeFile('mtrh-logo.png', 'image/png');
+    await userEvent.upload(screen.getByTestId('file-input'), file);
+    await userEvent.click(screen.getByRole('button', { name: 'Upload' }));
+
+    await waitFor(() => {
+      expect(mockUploadLogo).toHaveBeenCalledWith(file, 'receipt');
+    });
+  });
+
+  it('shows an error snackbar and keeps the workspace open when upload fails', async () => {
+    mockUploadLogo.mockRejectedValue(new Error('Upload failed'));
+    render(<UploadLogoWorkspace {...baseProps} />);
+
+    await userEvent.upload(screen.getByTestId('file-input'), makeFile('logo.png', 'image/png'));
+    await userEvent.click(screen.getByRole('button', { name: 'Upload' }));
+
+    await waitFor(() => {
+      expect(mockShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'error' }));
+    });
+    expect(mockMutateGlobalProperty).not.toHaveBeenCalled();
+    expect(mockCloseWorkspace).not.toHaveBeenCalled();
+  });
+
+  it('closes the workspace when Cancel is clicked', async () => {
+    render(<UploadLogoWorkspace {...baseProps} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(mockCloseWorkspace).toHaveBeenCalledTimes(1);
+    expect(mockUploadLogo).not.toHaveBeenCalled();
+  });
+
+  it('clears the preview and disables Upload when the chosen file is removed', async () => {
+    render(<UploadLogoWorkspace {...baseProps} />);
+
+    await userEvent.upload(screen.getByTestId('file-input'), makeFile('logo.png', 'image/png'));
+    expect(screen.getByRole('img', { name: 'Image preview' })).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: 'remove-file' }));
+
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Upload' })).toBeDisabled();
+  });
+});

package/src/components/global-property/workspace/upload-logo.workspace.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useState } from 'react';
+import { showSnackbar, useLayoutType, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import {
+  Button,
+  ButtonSet,
+  FileUploader,
+  Form,
+  FormGroup,
+  InlineLoading,
+  InlineNotification,
+  RadioButton,
+  RadioButtonGroup,
+  Stack,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+
+import styles from './upload-logo.workspace.scss';
+import { ALLOWED_LOGO_TYPES, MAX_LOGO_SIZE_BYTES, type LogoTarget, uploadLogo } from '../hooks/useLogoUpload';
+
+type UploadLogoWorkspaceProps = {
+  mutateGlobalProperty?: () => void;
+};
+
+const UploadLogoWorkspace: React.FC<Workspace2DefinitionProps<UploadLogoWorkspaceProps, {}, {}>> = ({
+  closeWorkspace,
+  workspaceProps,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const mutateGlobalProperty = workspaceProps?.mutateGlobalProperty;
+
+  const [target, setTarget] = useState<LogoTarget>('prescription');
+  const [file, setFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!file) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+
+  const handleFileChange = (selected: File | null) => {
+    setValidationError(null);
+    if (!selected) {
+      setFile(null);
+      return;
+    }
+    if (!ALLOWED_LOGO_TYPES.includes(selected.type)) {
+      setValidationError(t('unsupportedImageType', 'Unsupported file type. Accepted: JPEG, PNG, GIF, BMP or WebP.'));
+      setFile(null);
+      return;
+    }
+    if (selected.size > MAX_LOGO_SIZE_BYTES) {
+      setValidationError(t('imageTooLarge', 'File exceeds the 2 MB maximum size.'));
+      setFile(null);
+      return;
+    }
+    setFile(selected);
+  };
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!file) {
+      setValidationError(t('selectImageFirst', 'Please select an image to upload.'));
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const { savedPath } = await uploadLogo(file, target);
+      const fileName = savedPath?.split(/[\\/]/).pop() ?? file.name;
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: t('logoUploaded', 'Image "{{fileName}}" uploaded successfully', { fileName }),
+        timeoutInMs: 5000,
+      });
+      mutateGlobalProperty?.();
+      closeWorkspace({ discardUnsavedChanges: true });
+    } catch (error: any) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        kind: 'error',
+        subtitle: error?.message ?? t('logoUploadError', 'Error uploading image'),
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Workspace2 title={t('uploadImage', 'Upload image')} hasUnsavedChanges={Boolean(file)}>
+      <Form onSubmit={onSubmit} className={styles.form}>
+        <div className={styles.formContainer}>
+          <Stack gap={5}>
+            <InlineNotification
+              kind="info"
+              lowContrast
+              hideCloseButton
+              title={t('logoUploadTitle', 'Printed documents logo')}
+              subtitle={t(
+                'logoUploadDesc',
+                'Upload a logo used in printed documents. JPEG, PNG, GIF, BMP or WebP, up to 2 MB.',
+              )}
+            />
+
+            <FormGroup legendText={t('logoTarget', 'Logo destination')}>
+              <RadioButtonGroup
+                name="logo-target"
+                legendText=""
+                valueSelected={target}
+                onChange={(value: string) => setTarget(value as LogoTarget)}
+                disabled={isSubmitting}>
+                <RadioButton
+                  labelText={t('prescriptionLogo', 'Prescription logo')}
+                  value="prescription"
+                  id="logo-target-prescription"
+                />
+                <RadioButton labelText={t('receiptLogo', 'Receipt logo')} value="receipt" id="logo-target-receipt" />
+              </RadioButtonGroup>
+            </FormGroup>
+
+            <FormGroup legendText={t('image', 'Image')}>
+              <FileUploader
+                labelTitle=""
+                labelDescription={t('logoUploaderHint', 'Max file size is 2 MB. Supported: JPEG, PNG, GIF, BMP, WebP.')}
+                buttonLabel={t('addFile', 'Add file')}
+                buttonKind="tertiary"
+                size="md"
+                filenameStatus="edit"
+                accept={ALLOWED_LOGO_TYPES}
+                multiple={false}
+                disabled={isSubmitting}
+                onChange={(e: { target: HTMLInputElement; addedFiles?: File[] }) => {
+                  const selected = e.addedFiles?.[0] ?? e.target?.files?.[0] ?? null;
+                  handleFileChange(selected);
+                }}
+                onDelete={() => handleFileChange(null)}
+              />
+            </FormGroup>
+
+            {validationError && (
+              <InlineNotification
+                kind="error"
+                lowContrast
+                hideCloseButton
+                title={t('invalidImage', 'Invalid image')}
+                subtitle={validationError}
+              />
+            )}
+
+            {previewUrl && (
+              <div className={styles.previewContainer}>
+                <span className={styles.previewLabel}>{t('preview', 'Preview')}</span>
+                <img src={previewUrl} alt={t('imagePreview', 'Image preview')} className={styles.preview} />
+              </div>
+            )}
+          </Stack>
+        </div>
+
+        <ButtonSet
+          className={classNames({
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}>
+          <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.buttonContainer} disabled={!file || isSubmitting} kind="primary" type="submit">
+            {isSubmitting ? (
+              <span className={styles.inlineLoading}>
+                {t('uploading', 'Uploading...')}
+                <InlineLoading status="active" iconDescription="Loading" />
+              </span>
+            ) : (
+              t('upload', 'Upload')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default UploadLogoWorkspace;