feat: Change dialogue component import to design system repository (#17302)

* feat: Change dialogue component import to design system repository

* design system version changed

app/client/src/components/ads/DialogComponent.tsx

@@ -1,200 +0,0 @@
-import React, { ReactNode, useState, useEffect } from "react";
-import styled from "styled-components";
-import { Dialog, Classes } from "@blueprintjs/core";
-import { Colors } from "constants/Colors";
-import { Icon, IconName, IconSize } from "design-system";
-
-const StyledDialog = styled(Dialog)<{
-  setMaxWidth?: boolean;
-  width?: string;
-  maxHeight?: string;
-  maxWidth?: string;
-  showHeaderUnderline?: boolean;
-  noModalBodyMarginTop?: boolean;
-}>`
-  && {
-    border-radius: 0;
-    padding: 24px;
-    background: ${(props) => props.theme.colors.modal.bg};
-    ${(props) => (props.maxHeight ? `max-height: ${props.maxHeight};` : "")}
-    width: ${(props) => props.width || "640px"};
-    ${(props) => props.setMaxWidth && `width: 100vh;`}
-    ${(props) => props.maxWidth && `max-width: ${props.maxWidth};`}
-
-    & .${Classes.DIALOG_HEADER} {
-      position: relative;
-      padding: 0;
-      background: ${(props) => props.theme.colors.modal.bg};
-      box-shadow: none;
-      min-height: unset;
-      svg {
-        color: ${Colors.GREY_800};
-      }
-
-      .${Classes.BUTTON}.${Classes.MINIMAL}:hover {
-        background-color: ${(props) => props.theme.colors.modal.bg};
-      }
-    }
-
-    .${Classes.HEADING} {
-      color: ${(props) => props.theme.colors.modal.headerText};
-      font-weight: ${(props) => props.theme.typography.h1.fontWeight};
-      font-size: ${(props) => props.theme.typography.h1.fontSize}px;
-      line-height: unset;
-      letter-spacing: ${(props) => props.theme.typography.h1.letterSpacing};
-    }
-
-    .${Classes.DIALOG_CLOSE_BUTTON} {
-      color: ${Colors.SCORPION};
-      min-width: 0;
-      padding: 0;
-
-      svg {
-        fill: ${Colors.SCORPION};
-        width: 24px;
-        height: 24px;
-
-        &:hover {
-          fill: ${Colors.COD_GRAY};
-        }
-      }
-    }
-
-    ${(props) =>
-      props.showHeaderUnderline
-        ? `
-        & .${Classes.DIALOG_HEADER}:after {
-          content: "";
-          width: calc(100% - 40px);
-          height: 1px;
-          position: absolute;
-          background: white;
-          left: 50%;
-          bottom: 0;
-          transform: translateX(-50%);
-          background-color: ${props.theme.colors.modal.separator};
-        }
-
-        .${Classes.HEADING} {
-          margin-bottom: ${props.theme.spaces[7]}px;
-        }
-      `
-        : ""}
-
-    & .${Classes.DIALOG_BODY} {
-      margin: 0;
-      margin-top: ${(props) => (props.noModalBodyMarginTop ? "0px" : "16px")};
-      overflow: auto;
-    }
-
-    & .${Classes.DIALOG_FOOTER_ACTIONS} {
-      display: block;
-    }
-  }
-`;
-
-const HeaderIconWrapper = styled.div<{ bgColor?: string }>`
-  padding: 5px;
-  border-radius: 50%;
-  margin-right: 10px;
-  background: ${(props) => props.bgColor || props.theme.colors.modal.iconBg};
-  cursor: default;
-  .cs-icon svg {
-    cursor: default;
-  }
-`;
-
-type DialogComponentProps = {
-  isOpen?: boolean;
-  canOutsideClickClose?: boolean;
-  title?: string;
-  headerIcon?: {
-    clickable?: boolean;
-    name: IconName;
-    fillColor?: string;
-    hoverColor?: string;
-    bgColor?: string;
-  };
-  trigger?: ReactNode;
-  setMaxWidth?: boolean;
-  children: ReactNode;
-  width?: string;
-  maxHeight?: string;
-  onOpening?: () => void;
-  onClose?: () => void;
-  setModalClose?: (close: boolean) => void;
-  triggerZIndex?: number;
-  showHeaderUnderline?: boolean;
-  getHeader?: () => ReactNode;
-  canEscapeKeyClose?: boolean;
-  className?: string;
-  maxWidth?: string;
-  noModalBodyMarginTop?: boolean;
-};
-
-export function DialogComponent(props: DialogComponentProps) {
-  const [isOpen, setIsOpen] = useState(!!props.isOpen);
-
-  const { onClose: onCloseProp, setModalClose } = props;
-  const onClose = () => {
-    setModalClose ? setModalClose(false) : null;
-    setIsOpen(false);
-    onCloseProp && onCloseProp();
-  };
-
-  useEffect(() => {
-    setIsOpen(!!props.isOpen);
-  }, [props.isOpen]);
-
-  const getHeader = props.getHeader;
-  const headerIcon = props.headerIcon ? (
-    <HeaderIconWrapper bgColor={props.headerIcon.bgColor}>
-      <Icon
-        clickable={props.headerIcon?.clickable}
-        fillColor={props.headerIcon.fillColor}
-        hoverFillColor={props.headerIcon.hoverColor}
-        name={props.headerIcon.name}
-        size={IconSize.XL}
-      />
-    </HeaderIconWrapper>
-  ) : null;
-
-  return (
-    <>
-      {props.trigger && (
-        <div
-          className="ads-dialog-trigger"
-          onClick={() => {
-            setIsOpen(true);
-          }}
-          style={{ zIndex: props.triggerZIndex }}
-        >
-          {props.trigger}
-        </div>
-      )}
-      <StyledDialog
-        canEscapeKeyClose={!!props.canEscapeKeyClose}
-        canOutsideClickClose={!!props.canOutsideClickClose}
-        className={props.className}
-        icon={headerIcon}
-        isOpen={isOpen}
-        maxHeight={props.maxHeight}
-        maxWidth={props.maxWidth}
-        noModalBodyMarginTop={props.noModalBodyMarginTop}
-        onClose={onClose}
-        onOpening={props.onOpening}
-        setMaxWidth={props.setMaxWidth}
-        showHeaderUnderline={props.showHeaderUnderline}
-        title={props.title}
-        width={props.width}
-      >
-        {getHeader && getHeader()}
-        <div className={Classes.DIALOG_BODY} data-testid="t--dialog-component">
-          {props.children}
-        </div>
-      </StyledDialog>
-    </>
-  );
-}
-
-export default DialogComponent;

app/client/src/components/ads/index.ts

@@ -3,9 +3,6 @@ export * from "./Callout";
 
 export * from "./common";
 
-export { default as DialogComponent } from "./DialogComponent";
-export * from "./DialogComponent";
-
 export { default as EditableText } from "./EditableText";
 export * from "./EditableText";
 

app/client/src/components/editorComponents/form/FormDialogComponent.tsx

@@ -1,10 +1,14 @@
 import React, { ReactNode, useState, useEffect } from "react";
 import { isPermitted } from "pages/Applications/permissionHelpers";
-import Dialog from "components/ads/DialogComponent";
 import { useDispatch } from "react-redux";
 import { setShowAppInviteUsersDialog } from "actions/applicationActions";
 import { TabComponent, TabProp } from "components/ads/Tabs";
-import { Text, TextType, IconName } from "design-system";
+import {
+  DialogComponent as Dialog,
+  Text,
+  TextType,
+  IconName,
+} from "design-system";
 import styled from "styled-components";
 import { Colors } from "constants/Colors";
 import { INVITE_USERS_TO_WORKSPACE_FORM } from "@appsmith/constants/forms";

app/client/src/components/formControls/FilePickerControl.tsx

@@ -13,7 +13,7 @@ import {
   WrappedFieldInputProps,
   WrappedFieldMetaProps,
 } from "redux-form";
-import DialogComponent from "components/ads/DialogComponent";
+import { DialogComponent } from "design-system";
 import { useEffect, useCallback } from "react";
 import { replayHighlightClass } from "globalStyles/portals";
 

app/client/src/pages/Applications/ForkModalStyles.ts

@@ -1,7 +1,10 @@
 import styled from "styled-components";
-import { Button, RadioComponent } from "design-system";
+import {
+  Button,
+  DialogComponent as Dialog,
+  RadioComponent,
+} from "design-system";
 import { getTypographyByKey } from "constants/DefaultTheme";
-import Dialog from "components/ads/DialogComponent";
 import { Classes } from "@blueprintjs/core";
 
 const TriggerButton = styled(Button)`

app/client/src/pages/Applications/ImportApplicationModal.tsx

@@ -20,14 +20,18 @@ import {
 } from "@appsmith/constants/messages";
 import FilePickerV2 from "components/ads/FilePickerV2";
 import { Colors } from "constants/Colors";
-import { Text, TextType } from "design-system";
+import {
-import { Icon, IconSize } from "design-system";
+  DialogComponent as Dialog,
+  Icon,
+  IconSize,
+  Text,
+  TextType,
+} from "design-system";
 import { Theme } from "constants/DefaultTheme";
 import { setIsGitSyncModalOpen } from "actions/gitSyncActions";
 import { GitSyncModalTab } from "entities/GitSync";
 import { getIsImportingApplication } from "selectors/applicationSelectors";
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
-import Dialog from "components/ads/DialogComponent";
 import { Classes } from "@blueprintjs/core";
 import { selectFeatureFlags } from "selectors/usersSelectors";
 import Statusbar from "pages/Editor/gitSync/components/Statusbar";

app/client/src/pages/Applications/ProductUpdatesModal/index.tsx

@@ -2,14 +2,13 @@ import React, { useState, useCallback, useContext, useRef } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import styled from "styled-components";
 import "@github/g-emoji-element";
-import Dialog from "components/ads/DialogComponent";
 import UpdatesButton from "./UpdatesButton";
 import { AppState } from "@appsmith/reducers";
 import { LayersContext } from "constants/Layers";
 import ReleasesAPI from "api/ReleasesAPI";
 import { resetReleasesCount } from "actions/releasesActions";
 import ReleaseComponent, { Release } from "./ReleaseComponent";
-import { ScrollIndicator } from "design-system";
+import { DialogComponent as Dialog, ScrollIndicator } from "design-system";
 
 const StyledDialog = styled(Dialog)`
   .bp3-dialog-body {

app/client/src/pages/Applications/index.tsx

@@ -38,7 +38,6 @@ import ApplicationCard from "./ApplicationCard";
 import WorkspaceInviteUsersForm from "@appsmith/pages/workspace/WorkspaceInviteUsersForm";
 import { isPermitted, PERMISSION_TYPE } from "./permissionHelpers";
 import FormDialogComponent from "components/editorComponents/form/FormDialogComponent";
-import Dialog from "components/ads/DialogComponent";
 import { User } from "constants/userConstants";
 import { getCurrentUser, selectFeatureFlags } from "selectors/usersSelectors";
 import { CREATE_WORKSPACE_FORM_NAME } from "@appsmith/constants/forms";
@@ -50,6 +49,7 @@ import {
   AppIconCollection,
   Button,
   Category,
+  DialogComponent as Dialog,
   Icon,
   IconName,
   IconSize,

app/client/src/pages/Editor/GeneratePage/components/CrudInfoModal.tsx

@@ -3,12 +3,18 @@ import styled from "styled-components";
 import { connect, useDispatch } from "react-redux";
 import { AppState } from "@appsmith/reducers";
 import AnalyticsUtil from "utils/AnalyticsUtil";
-import { Button, Category, Size, Text, TextType } from "design-system";
+import {
+  Button,
+  Category,
+  DialogComponent as Dialog,
+  Size,
+  Text,
+  TextType,
+} from "design-system";
 import { getCrudInfoModalData } from "selectors/crudInfoModalSelectors";
 import { setCrudInfoModalData } from "actions/crudInfoModalActions";
 import { Colors } from "constants/Colors";
 
-import Dialog from "components/ads/DialogComponent";
 import { GenerateCRUDSuccessInfoData } from "reducers/uiReducers/crudInfoModalReducer";
 import {
   GEN_CRUD_INFO_DIALOG_SUBTITLE,

app/client/src/pages/Editor/GuidedTour/DeviationModal.tsx

@@ -3,8 +3,7 @@ import {
   toggleShowDeviationDialog,
   toggleShowEndTourDialog,
 } from "actions/onboardingActions";
-import { Button, Category, Size } from "design-system";
+import { Button, Category, DialogComponent, Size } from "design-system";
-import DialogComponent from "components/ads/DialogComponent";
 import {
   CANCEL_DIALOG,
   createMessage,

app/client/src/pages/Editor/IntegrationEditor/UnsupportedPluginDialog.tsx

@@ -3,10 +3,10 @@ import { HelpIcons } from "icons/HelpIcons";
 import { withTheme } from "styled-components";
 import styled from "styled-components";
 import { Color } from "constants/Colors";
-import Dialog from "components/ads/DialogComponent";
 import {
   Button,
   Category,
+  DialogComponent as Dialog,
   Icon,
   IconSize,
   Size,

app/client/src/pages/Editor/RequestConfirmationModal.tsx

@@ -7,7 +7,7 @@ import {
   cancelActionConfirmationModal,
   acceptActionConfirmationModal,
 } from "actions/pluginActionActions";
-import DialogComponent from "components/ads/DialogComponent";
+import { DialogComponent } from "design-system";
 import styled from "styled-components";
 import { Button, Category, Size } from "design-system";
 import {

app/client/src/pages/Editor/ThemePropertyPane/DeleteThemeModal.tsx

@@ -7,8 +7,12 @@ import {
   DELETE_CONFIRMATION_MODAL_TITLE,
 } from "@appsmith/constants/messages";
 import { Colors } from "constants/Colors";
-import Dialog from "components/ads/DialogComponent";
+import {
-import { Button, Category, Size } from "design-system";
+  Button,
+  Category,
+  DialogComponent as Dialog,
+  Size,
+} from "design-system";
 
 interface DeleteThemeModalProps {
   isOpen: boolean;

app/client/src/pages/Editor/ThemePropertyPane/SaveThemeModal.tsx

@@ -2,9 +2,13 @@ import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import AnalyticsUtil from "utils/AnalyticsUtil";
-import { TextInput } from "design-system";
+import {
-import Dialog from "components/ads/DialogComponent";
+  Button,
-import { Button, Category, Size } from "design-system";
+  Category,
+  DialogComponent as Dialog,
+  Size,
+  TextInput,
+} from "design-system";
 import { saveSelectedThemeAction } from "actions/appThemingActions";
 import { getCurrentApplicationId } from "selectors/editorSelectors";
 import { getAppThemes } from "selectors/appThemingSelectors";

app/client/src/pages/Editor/gitSync/DisconnectGitModal.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useState } from "react";
-import Dialog from "components/ads/DialogComponent";
 import {
   getDisconnectDocUrl,
   getDisconnectingGitApplication,
@@ -14,6 +13,7 @@ import { Classes, MENU_HEIGHT } from "./constants";
 import {
   Button,
   Category,
+  DialogComponent as Dialog,
   Icon,
   IconSize,
   Size,

app/client/src/pages/Editor/gitSync/GitSyncModal.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect } from "react";
-import Dialog from "components/ads/DialogComponent";
 import {
   getActiveGitSyncModalTab,
   getIsGitConnected,
@@ -13,7 +12,7 @@ import { Classes, MENU_HEIGHT, MENU_ITEM, MENU_ITEMS_MAP } from "./constants";
 import Deploy from "./Tabs/Deploy";
 import Merge from "./Tabs/Merge";
 import GitConnection from "./Tabs/GitConnection";
-import { Icon, IconSize } from "design-system";
+import { DialogComponent as Dialog, Icon, IconSize } from "design-system";
 
 import GitErrorPopup from "./components/GitErrorPopup";
 import styled, { useTheme } from "styled-components";

app/client/src/pages/Editor/gitSync/ImportedAppSuccessModal.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import Dialog from "components/ads/DialogComponent";
 import styled, { useTheme } from "styled-components";
-import { Text, TextType } from "design-system";
+import { DialogComponent as Dialog, Text, TextType } from "design-system";
 import { Colors } from "constants/Colors";
 import {
   createMessage,

app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState } from "react";
-import Dialog from "components/ads/DialogComponent";
 
 import {
   getImportedApplication,
@@ -15,6 +14,7 @@ import { Classes, MENU_HEIGHT } from "./constants";
 import {
   Button,
   Category,
+  DialogComponent as Dialog,
   Icon,
   IconSize,
   Size,

app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Dialog from "components/ads/DialogComponent";
 import {
   getDisconnectDocUrl,
   getShowRepoLimitErrorModal,
@@ -14,6 +13,7 @@ import styled, { useTheme } from "styled-components";
 import {
   Button,
   Category,
+  DialogComponent as Dialog,
   Icon,
   IconSize,
   Size,

app/client/src/pages/Templates/ForkTemplate.tsx

@@ -1,6 +1,11 @@
 import React, { ReactNode, useState } from "react";
-import Dialog from "components/ads/DialogComponent";
+import {
-import { Button, Category, Dropdown, Size } from "design-system";
+  Button,
+  Category,
+  DialogComponent as Dialog,
+  Dropdown,
+  Size,
+} from "design-system";
 import { useDispatch, useSelector } from "react-redux";
 import { noop } from "lodash";
 import {

app/client/src/pages/Templates/TemplatesModal/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import DialogComponent from "components/ads/DialogComponent";
+import { DialogComponent } from "design-system";
 import { useDispatch, useSelector } from "react-redux";
 import {
   templateModalOpenSelector,

app/client/src/pages/workspace/DeleteConfirmationModal.tsx

@@ -1,12 +1,18 @@
 import React from "react";
 import styled from "styled-components";
-import { Button, Category, Size, Text, TextType } from "design-system";
+import {
+  Button,
+  Category,
+  DialogComponent as Dialog,
+  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";