feat: Show Crud Info Modal data from backend

app/client/src/actions/crudInfoModalActions.ts

@@ -1,6 +1,14 @@
 import { ReduxActionTypes } from "constants/ReduxActionConstants";
 
-export const setCrudInfoModalOpen = (payload: boolean) => {
+export type SetCrudInfoModalOpenPayload = {
+  open: boolean;
+  generateCRUDSuccessInfo?: {
+    successImageUrl: string;
+    successMessage: string;
+  };
+};
+
+export const setCrudInfoModalData = (payload: SetCrudInfoModalOpenPayload) => {
   return {
     type: ReduxActionTypes.SET_CRUD_INFO_MODAL_OPEN,
     payload,

app/client/src/actions/pageActions.tsx

@@ -319,25 +319,20 @@ export interface ReduxActionWithExtraParams<T> extends ReduxAction<T> {
   extraParams: Record<any, any>;
 }
 
-export const generateTemplateSuccess = ({
-  isNewPage,
-  layoutId,
-  pageId,
-  pageName,
-}: {
-  layoutId: string;
-  pageId: string;
-  pageName: string;
+export type GenerateCRUDSuccess = {
+  page: {
+    layouts: Array<any>;
+    id: string;
+    name: string;
+    isDefault?: boolean;
+  };
   isNewPage: boolean;
-}) => {
+};
+
+export const generateTemplateSuccess = (payload: GenerateCRUDSuccess) => {
   return {
     type: ReduxActionTypes.GENERATE_TEMPLATE_PAGE_SUCCESS,
-    payload: {
-      layoutId,
-      pageId,
-      pageName,
-      isNewPage,
-    },
+    payload,
   };
 };
 

app/client/src/constants/messages.ts

@@ -395,11 +395,13 @@ export const GENERATE_PAGE_ACTION_SUBTITLE = () =>
 
 export const GENERATE_PAGE_FORM_TITLE = () => "Generate from Data";
 
-export const GEN_CRUD_INFO_DIALOG_HEADING = () =>
+export const GEN_CRUD_SUCCESS_MESSAGE = () =>
   "Hurray! Your application is ready to use.";
+export const GEN_CRUD_SUCCESS_DESC = () =>
+  "Search through your data in the table and update it using the form";
 export const GEN_CRUD_INFO_DIALOG_TITLE = () => "How it works?";
 export const GEN_CRUD_INFO_DIALOG_SUBTITLE = () =>
-  "Search through your data in the table and update it using the form.";
+  "CRUD page is generated from selected datasource. You can use the Form to modify the data. Since all your data is already connected you can add more queries and modify the bindings";
 
 // Actions Right pane
 export const SEE_CONNECTED_ENTITIES = () => "See all connected entities";

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

@@ -1,47 +1,43 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { connect, useDispatch } from "react-redux";
 import { AppState } from "reducers";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import Button, { Category, Size } from "components/ads/Button";
 import Text, { TextType } from "components/ads/Text";
-import { getCrudInfoModalOpen } from "selectors/crudInfoModalSelectors";
-import { setCrudInfoModalOpen } from "actions/crudInfoModalActions";
+import { getCrudInfoModalData } from "selectors/crudInfoModalSelectors";
+import { setCrudInfoModalData } from "actions/crudInfoModalActions";
 import { Colors } from "constants/Colors";
 import { S3_BUCKET_URL } from "constants/ThirdPartyConstants";
 
 import Dialog from "components/ads/DialogComponent";
-import { GEN_CRUD_INFO_DIALOG_HEADING } from "../../../../constants/messages";
+import { GenerateCRUDSuccessInfoData } from "../../../../reducers/uiReducers/crudInfoModalReducer";
 import {
   GEN_CRUD_INFO_DIALOG_SUBTITLE,
-  GEN_CRUD_INFO_DIALOG_TITLE,
+  GEN_CRUD_SUCCESS_MESSAGE,
+  GEN_CRUD_SUCCESS_DESC,
+  createMessage,
 } from "constants/messages";
+import { getTypographyByKey } from "constants/DefaultTheme";
 
 type Props = {
   crudInfoModalOpen: boolean;
+  generateCRUDSuccessInfo: GenerateCRUDSuccessInfoData | null;
 };
 
-const HeaderContents = styled.div`
-  padding: ${(props) => props.theme.spaces[9]}px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-bottom: ${(props) => props.theme.spaces[7]}px;
-  background-color: ${Colors.FOAM};
-`;
+const getSuccessGIF = () => `${S3_BUCKET_URL}/crud/check_mark_verified.gif`;
 
 const Heading = styled.div`
-  color: ${(props) => props.theme.colors.modal.headerText};
+  color: ${Colors.CODE_GRAY};
   display: flex;
   justify-content: center;
   font-size: 20px;
   line-height: 24px;
-  color: ${(props) => props.theme.colors.success.dark};
 `;
 
 const ActionButtonWrapper = styled.div`
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   margin: 30px 0px 0px;
 `;
 
@@ -63,17 +59,22 @@ const Content = styled.div`
   flex-direction: column;
 `;
 
+const Desc = styled.p`
+  ${(props) => getTypographyByKey(props, "p1")}
+  color: ${Colors.DOVE_GRAY2};
+  margin-top: 8px;
+`;
+
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-
-  .info-title {
-    font-weight: bold;
-  }
+  max-height: 700px;
+  min-height: 500px;
 
   .info-subtitle {
     padding-top: 5px;
+    text-align: center;
   }
 `;
 
@@ -89,27 +90,83 @@ const ImageWrapper = styled.div`
   justify-content: center;
 `;
 
-function Header() {
+const SuccessContentWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+`;
+
+const SuccessImage = styled.img`
+  margin: ${(props) => props.theme.spaces[6]}px;
+`;
+
+const STEP = {
+  SHOW_SUCCESS_GIF: "show_success_gif",
+  SHOW_INFO: "show_info",
+};
+
+function InfoContent({
+  onClose,
+  successMessage,
+}: {
+  onClose: () => void;
+  successMessage: string;
+}) {
   return (
-    <HeaderContents>
-      <Heading> {GEN_CRUD_INFO_DIALOG_HEADING()}</Heading>
-    </HeaderContents>
+    <>
+      <Content>
+        <Text
+          className="info-subtitle"
+          dangerouslySetInnerHTML={{
+            __html: successMessage,
+          }}
+          type={TextType.P1}
+        />
+        <ImageWrapper>
+          <InfoImage alt="CRUD Info" src={getInfoImage()} />
+        </ImageWrapper>
+      </Content>
+
+      <ActionButtonWrapper>
+        <ActionButton
+          category={Category.primary}
+          onClick={() => {
+            onClose();
+          }}
+          size={Size.medium}
+          text="GOT IT"
+        />
+      </ActionButtonWrapper>
+    </>
   );
 }
-
 const getInfoImage = (): string =>
   `${S3_BUCKET_URL}/crud/working-flow-chart.png`;
 
 function GenCRUDSuccessModal(props: Props) {
-  const { crudInfoModalOpen } = props;
+  const { crudInfoModalOpen, generateCRUDSuccessInfo } = props;
 
   const dispatch = useDispatch();
+  const [step, setStep] = useState(STEP.SHOW_SUCCESS_GIF);
 
   const onClose = () => {
     AnalyticsUtil.logEvent("CLOSE_GEN_PAGE_INFO_MODAL");
-    dispatch(setCrudInfoModalOpen(false));
+    dispatch(setCrudInfoModalData({ open: false }));
   };
 
+  const successMessage =
+    (generateCRUDSuccessInfo && generateCRUDSuccessInfo.successMessage) ||
+    createMessage(GEN_CRUD_INFO_DIALOG_SUBTITLE);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setStep(STEP.SHOW_INFO);
+    }, 2000);
+  }, [setStep]);
+
   return (
     <Dialog
       canEscapeKeyClose
@@ -118,37 +175,24 @@ function GenCRUDSuccessModal(props: Props) {
       setModalClose={onClose}
     >
       <Wrapper>
-        <Header />
-        <Content>
-          <Text className="info-title" type={TextType.H4}>
-            {GEN_CRUD_INFO_DIALOG_TITLE()}
-          </Text>
-
-          <Text className="info-subtitle" type={TextType.P1}>
-            {GEN_CRUD_INFO_DIALOG_SUBTITLE()}
-          </Text>
-          <ImageWrapper>
-            <InfoImage alt="CRUD Info" src={getInfoImage()} />
-          </ImageWrapper>
-        </Content>
-
-        <ActionButtonWrapper>
-          <ActionButton
-            category={Category.primary}
-            onClick={() => {
-              onClose();
-            }}
-            size={Size.medium}
-            text="GOT IT"
-          />
-        </ActionButtonWrapper>
+        {step === STEP.SHOW_SUCCESS_GIF ? (
+          <SuccessContentWrapper>
+            <SuccessImage alt="Success" src={getSuccessGIF()} width="50px" />
+            <Heading> {createMessage(GEN_CRUD_SUCCESS_MESSAGE)}</Heading>
+            <Desc>{createMessage(GEN_CRUD_SUCCESS_DESC)}</Desc>
+          </SuccessContentWrapper>
+        ) : null}
+        {step === STEP.SHOW_INFO ? (
+          <InfoContent onClose={onClose} successMessage={successMessage} />
+        ) : null}
       </Wrapper>
     </Dialog>
   );
 }
 
 const mapStateToProps = (state: AppState) => ({
-  crudInfoModalOpen: getCrudInfoModalOpen(state),
+  crudInfoModalOpen: getCrudInfoModalData(state).crudInfoModalOpen,
+  generateCRUDSuccessInfo: getCrudInfoModalData(state).generateCRUDSuccessInfo,
 });
 
 export default connect(mapStateToProps)(GenCRUDSuccessModal);

app/client/src/reducers/entityReducers/pageListReducer.tsx

@@ -7,6 +7,7 @@ import {
   ReduxActionErrorTypes,
 } from "constants/ReduxActionConstants";
 import { createReducer } from "utils/AppsmithUtils";
+import { GenerateCRUDSuccess } from "actions/pageActions";
 
 const initialState: PageListReduxState = {
   pages: [],
@@ -114,27 +115,24 @@ export const pageListReducer = createReducer(initialState, {
   },
   [ReduxActionTypes.GENERATE_TEMPLATE_PAGE_SUCCESS]: (
     state: PageListReduxState,
-    action: ReduxAction<{
-      pageName: string;
-      pageId: string;
-      layoutId: string;
-      isDefault: boolean;
-      isNewPage: boolean;
-    }>,
+    action: ReduxAction<GenerateCRUDSuccess>,
   ) => {
     const _state = state;
     if (action.payload.isNewPage) {
       _state.pages = state.pages.map((page) => ({ ...page, latest: false }));
       const newPage = {
-        pageName: action.payload.pageName,
-        pageId: action.payload.pageId,
-        layoutId: action.payload.layoutId,
-        isDefault: action.payload.isDefault,
+        pageName: action.payload.page.name,
+        pageId: action.payload.page.id,
+        layoutId: action.payload.page.layouts[0].id,
+        isDefault: !!action.payload.page.isDefault,
       };
       _state.pages.push({ ...newPage, latest: true });
     }
 
-    return { ..._state, isGeneratingTemplatePage: false };
+    return {
+      ..._state,
+      isGeneratingTemplatePage: false,
+    };
   },
   [ReduxActionErrorTypes.GENERATE_TEMPLATE_PAGE_ERROR]: (
     state: PageListReduxState,

app/client/src/reducers/uiReducers/crudInfoModalReducer.ts

@@ -1,21 +1,33 @@
 import { createReducer } from "utils/AppsmithUtils";
 import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
+import { SetCrudInfoModalOpenPayload } from "actions/crudInfoModalActions";
 
 const initialState: CrudInfoModalReduxState = {
   crudInfoModalOpen: false,
+  generateCRUDSuccessInfo: null,
 };
 
 const crudInfoModalReducer = createReducer(initialState, {
   [ReduxActionTypes.SET_CRUD_INFO_MODAL_OPEN]: (
     state: CrudInfoModalReduxState,
-    action: ReduxAction<boolean>,
+    action: ReduxAction<SetCrudInfoModalOpenPayload>,
   ) => {
-    return { ...state, crudInfoModalOpen: action.payload };
+    return {
+      ...state,
+      crudInfoModalOpen: action.payload.open,
+      generateCRUDSuccessInfo: action.payload.generateCRUDSuccessInfo,
+    };
   },
 });
 
+export type GenerateCRUDSuccessInfoData = {
+  successImageUrl: string;
+  successMessage: string;
+};
+
 export interface CrudInfoModalReduxState {
   crudInfoModalOpen: boolean;
+  generateCRUDSuccessInfo: GenerateCRUDSuccessInfoData | null;
 }
 
 export default crudInfoModalReducer;