fbc3bd663b
* Icon component deleted and changed the imports in refrence places * design system package version changed * import changes * Delete TextInput.tsx * Change imports * Change single named import * Update package * Update package * Delete ScrollIndicator.tsx * Change imports * Icon import completed * Event type added * Changed Button component imports * import change button * Button onclick type fix * Label with Tooltip import changes * Changed breadcrumbs import * EmojiPicker and Emoji Reaction import changes * AppIcon import change * import bug fix * Menu Item import chnages * Icon selector imports changed * Delete LabelWithTooltip.tsx * Change imports across the app * Update package version * Update version number for design-system * Delete Checkbox.tsx * Remove the exports * Add lock file for ds package update * Change imports * default import -> named * Update release version * Make arg type explicit * Updated design-system to latest release * Missing file mysteriously comes back and is updated accordingly * changes design-system package version * Add types to arguments in the onChange for text input * onBlur type fix * Search component in property pane * WDS button changes reverted * package version bumped * conflict fix * Remove Dropdown, change imports * Category import fix * fix: table icon size import * Bump version of design system package * Yarn lock Co-authored-by: Tanvi Bhakta <tanvibhakta@gmail.com>
94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { Button, Category, Size, Text, TextType } from "design-system";
|
|
import { Variant } from "components/ads/common";
|
|
import {
|
|
DELETE_CONFIRMATION_MODAL_TITLE,
|
|
DELETE_CONFIRMATION_MODAL_SUBTITLE,
|
|
} from "@appsmith/constants/messages";
|
|
import Dialog from "components/ads/DialogComponent";
|
|
import { Classes } from "@blueprintjs/core";
|
|
import { Colors } from "constants/Colors";
|
|
|
|
const StyledDialog = styled(Dialog)`
|
|
&& .${Classes.DIALOG_BODY} {
|
|
padding-top: 0px;
|
|
}
|
|
`;
|
|
|
|
const LeftContainer = styled.div`
|
|
text-align: left;
|
|
`;
|
|
|
|
const ImportButton = styled(Button)<{ disabled?: boolean }>`
|
|
height: 30px;
|
|
width: 81px;
|
|
pointer-events: ${(props) => (!!props.disabled ? "none" : "auto")};
|
|
`;
|
|
|
|
const ButtonWrapper = styled.div`
|
|
display: flex;
|
|
justify-content: end;
|
|
margin-top: 20px;
|
|
|
|
& > a {
|
|
margin: 0 4px;
|
|
}
|
|
`;
|
|
|
|
type DeleteConfirmationProps = {
|
|
username?: string | null;
|
|
name?: string | null;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
isDeletingUser: boolean;
|
|
};
|
|
|
|
function DeleteConfirmationModal(props: DeleteConfirmationProps) {
|
|
const { isDeletingUser, isOpen, name, onClose, onConfirm, username } = props;
|
|
|
|
return (
|
|
<StyledDialog
|
|
canOutsideClickClose
|
|
className={"t--member-delete-confirmation-modal"}
|
|
headerIcon={{
|
|
name: "delete",
|
|
fillColor: Colors.DANGER_SOLID,
|
|
hoverColor: Colors.DANGER_SOLID_HOVER,
|
|
}}
|
|
isOpen={isOpen}
|
|
maxHeight={"540px"}
|
|
setModalClose={onClose}
|
|
title={DELETE_CONFIRMATION_MODAL_TITLE()}
|
|
>
|
|
<LeftContainer>
|
|
<Text textAlign="center" type={TextType.P1}>
|
|
{DELETE_CONFIRMATION_MODAL_SUBTITLE(name || username)}
|
|
</Text>
|
|
<ButtonWrapper>
|
|
<ImportButton
|
|
category={Category.tertiary}
|
|
className=".button-item"
|
|
onClick={onClose}
|
|
size={Size.large}
|
|
text={"CANCEL"}
|
|
variant={Variant.danger}
|
|
/>
|
|
<ImportButton
|
|
className=".button-item"
|
|
cypressSelector={"t--workspace-leave-button"}
|
|
isLoading={isDeletingUser}
|
|
onClick={onConfirm}
|
|
size={Size.large}
|
|
text={"REMOVE"}
|
|
variant={Variant.danger}
|
|
/>
|
|
</ButtonWrapper>
|
|
</LeftContainer>
|
|
</StyledDialog>
|
|
);
|
|
}
|
|
|
|
export default DeleteConfirmationModal;
|