@kenyaemr/esm-admin-app 5.4.4-pre.5 → 5.4.4-pre.501

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

@@ -0,0 +1,172 @@
+import React from 'react';
+import { render, screen, fireEvent, 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 GlobalPropertyWorkspace from './global-property.workspace';
+
+const mockShowSnackbar = vi.fn();
+const mockSaveOrUpdateGlobalProperty = 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),
+  ResponsiveWrapper: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  Workspace2: ({ children, title }: { children: React.ReactNode; title: string }) => (
+    <div>
+      <h2>{title}</h2>
+      {children}
+    </div>
+  ),
+}));
+
+vi.mock('../hooks/useGlobalProperty', () => ({
+  saveOrUpdateGlobalProperty: (...args: unknown[]) => mockSaveOrUpdateGlobalProperty(...args),
+}));
+
+vi.mock('@hookform/resolvers/zod', () => ({
+  zodResolver: () => async (values: unknown) => ({ values, errors: {} }),
+}));
+
+const baseProps = {
+  closeWorkspace: mockCloseWorkspace,
+  workspaceProps: {
+    systemSetting: null,
+    mutateGlobalProperty: mockMutateGlobalProperty,
+  },
+};
+
+describe('GlobalPropertyWorkspace', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('shows "Add global property" title in add mode', () => {
+    render(<GlobalPropertyWorkspace {...baseProps} />);
+    expect(screen.getByText('Add global property')).toBeInTheDocument();
+  });
+
+  it('shows "Edit global property" title when editing an existing property', () => {
+    const props = {
+      ...baseProps,
+      workspaceProps: {
+        systemSetting: { uuid: 'uuid-1', property: 'setting.one', value: 'value1' },
+        mutateGlobalProperty: mockMutateGlobalProperty,
+      },
+    };
+    render(<GlobalPropertyWorkspace {...props} />);
+    expect(screen.getByText('Edit global property')).toBeInTheDocument();
+  });
+
+  it('pre-fills form fields when editing an existing property', () => {
+    const props = {
+      ...baseProps,
+      workspaceProps: {
+        systemSetting: { uuid: 'uuid-1', property: 'my.setting', value: 'my-value' },
+        mutateGlobalProperty: mockMutateGlobalProperty,
+      },
+    };
+    render(<GlobalPropertyWorkspace {...props} />);
+    expect(screen.getByDisplayValue('my.setting')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('my-value')).toBeInTheDocument();
+  });
+
+  it('disables the property field when editing an existing property', () => {
+    const props = {
+      ...baseProps,
+      workspaceProps: {
+        systemSetting: { uuid: 'uuid-1', property: 'setting.one', value: 'value1' },
+        mutateGlobalProperty: mockMutateGlobalProperty,
+      },
+    };
+    render(<GlobalPropertyWorkspace {...props} />);
+    expect(screen.getByLabelText(/Property/i)).toBeDisabled();
+  });
+
+  it('enables the property field in add mode', () => {
+    render(<GlobalPropertyWorkspace {...baseProps} />);
+    expect(screen.getByLabelText(/Property/i)).not.toBeDisabled();
+  });
+
+  it('renders the Cancel and Save & close buttons', () => {
+    render(<GlobalPropertyWorkspace {...baseProps} />);
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Save & close')).toBeInTheDocument();
+  });
+
+  it('calls closeWorkspace when Cancel is clicked', () => {
+    render(<GlobalPropertyWorkspace {...baseProps} />);
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(mockCloseWorkspace).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows validation error when form is submitted with empty required fields', async () => {
+    render(<GlobalPropertyWorkspace {...baseProps} />);
+    const saveButton = screen.getByText('Save & close');
+    fireEvent.click(saveButton);
+    await waitFor(() => {
+      expect(mockSaveOrUpdateGlobalProperty).not.toHaveBeenCalled();
+    });
+  });
+
+  it('saves a new property with the entered values', async () => {
+    mockSaveOrUpdateGlobalProperty.mockResolvedValue(undefined);
+    render(<GlobalPropertyWorkspace {...baseProps} />);
+
+    await userEvent.type(screen.getByLabelText(/Property/i), 'new.setting');
+    await userEvent.type(screen.getByLabelText(/Value/i), 'new-value');
+
+    fireEvent.submit(screen.getByLabelText(/Property/i).closest('form')!);
+
+    await waitFor(() => {
+      expect(mockSaveOrUpdateGlobalProperty).toHaveBeenCalledWith(
+        expect.objectContaining({ property: 'new.setting', value: 'new-value' }),
+        undefined,
+      );
+    });
+  });
+
+  it('shows a success snackbar and closes workspace after saving', async () => {
+    mockSaveOrUpdateGlobalProperty.mockResolvedValue(undefined);
+    render(<GlobalPropertyWorkspace {...baseProps} />);
+
+    await userEvent.type(screen.getByLabelText(/Property/i), 'new.setting');
+    await userEvent.type(screen.getByLabelText(/Value/i), 'new-value');
+
+    fireEvent.submit(screen.getByLabelText(/Property/i).closest('form')!);
+
+    await waitFor(() => {
+      expect(mockShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' }));
+      expect(mockMutateGlobalProperty).toHaveBeenCalled();
+      expect(mockCloseWorkspace).toHaveBeenCalled();
+    });
+  });
+
+  it('shows an error snackbar when saving fails', async () => {
+    mockSaveOrUpdateGlobalProperty.mockRejectedValue(new Error('Failed to save'));
+    render(<GlobalPropertyWorkspace {...baseProps} />);
+
+    await userEvent.type(screen.getByLabelText(/Property/i), 'new.setting');
+    await userEvent.type(screen.getByLabelText(/Value/i), 'new-value');
+
+    fireEvent.submit(screen.getByLabelText(/Property/i).closest('form')!);
+
+    await waitFor(() => {
+      expect(mockShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'error' }));
+      expect(mockCloseWorkspace).not.toHaveBeenCalled();
+    });
+  });
+
+  it('renders optional fields: description, datatype config, handler config', () => {
+    render(<GlobalPropertyWorkspace {...baseProps} />);
+    expect(screen.getByLabelText(/Description/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Datatype config/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Handler config/i)).toBeInTheDocument();
+  });
+});

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();
+  });
+});