Charles Bochet
3b2bf39565
## Summary - Move Modal UI components (`Modal`, `ModalContent`, `ModalHeader`, `ModalFooter`, `ModalBackdrop`) from `twenty-front` to `twenty-ui` as stateless, reusable components - Create `ModalStatefulWrapper` in `twenty-front` that connects Jotai state (`isModalOpenedComponentState`) to the stateless `Modal` via an `isOpen` prop - Rename `modalVariant` prop to `overlay` with clearer values: `'dark'` (default), `'light'` (in-container), `'transparent'` (invisible panel). Remove unused `'medium'` overlay - Rename `modalId` to `modalInstanceId` across the entire modal zone (~30 consumer files) - Extract `ModalProps` to its own file in `twenty-ui/types/ModalProps.ts`; extract `ModalStatefulWrapperProps` to its own file using `Pick<ModalProps, ...>` for shared props - Extract `ModalBackdrop` to its own file and export from `twenty-ui`; use it in `UserOrMetadataLoader` instead of a local styled component - Use `ModalFooter` in `StepNavigationButton` and `ModalHeader` in `SpreadsheetImportStepperContainer` instead of duplicated `styled.div` definitions - Remove unused `onClose` prop from stateless `Modal`; fix `typeof document` guard in `ModalStatefulWrapper` - Split shared types into individual files: `ModalSize.ts`, `ModalPadding.ts`, `ModalOverlay.ts` - Extract wyw profiling instrumentation from `vite.config.ts` into reusable `createWywProfilingPlugin` with parametrized threshold and improved logging - Delete old `Modal.tsx`, `Modal.styles.ts`, `ModalContent.tsx`, `ModalHeader.tsx`, `ModalFooter.tsx` from `twenty-front` - Add comprehensive Storybook stories in `twenty-ui` covering Default, Confirmation, Small, ExtraLarge, Closed, and Interactive variants
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
|
|
import { plural, t } from '@lingui/core/macro';
|
|
|
|
type SettingsAdminRetryJobsConfirmationModalProps = {
|
|
modalInstanceId: string;
|
|
jobCount: number;
|
|
onConfirm: () => void;
|
|
onClose?: () => void;
|
|
};
|
|
|
|
export const SettingsAdminRetryJobsConfirmationModal = ({
|
|
modalInstanceId,
|
|
jobCount,
|
|
onConfirm,
|
|
onClose,
|
|
}: SettingsAdminRetryJobsConfirmationModalProps) => {
|
|
const title = plural(jobCount, {
|
|
one: `Retry ${jobCount} Job`,
|
|
other: `Retry ${jobCount} Jobs`,
|
|
});
|
|
|
|
const subtitle = plural(jobCount, {
|
|
one: `This will retry the selected job. It will be re-executed from the beginning.`,
|
|
other: `This will retry the selected jobs. They will be re-executed from the beginning.`,
|
|
});
|
|
|
|
return (
|
|
<ConfirmationModal
|
|
modalInstanceId={modalInstanceId}
|
|
title={title}
|
|
subtitle={subtitle}
|
|
onConfirmClick={onConfirm}
|
|
onClose={onClose}
|
|
confirmButtonText={t`Retry`}
|
|
confirmButtonAccent="blue"
|
|
/>
|
|
);
|
|
};
|