fix(client): fix double dialog BTM for commit limitation error

packages/amplication-client/src/Project/ArchitectureConsole/ApplyChangesNextSteps.tsx

@@ -22,10 +22,12 @@ const className = "apply-changes-next-steps";
 
 type Props = {
   onDisplayArchitectureClicked: () => void;
+  onCommitChangesError: () => void;
 };
 
 export const ApplyChangesNextSteps = ({
   onDisplayArchitectureClicked,
+  onCommitChangesError,
 }: Props) => {
   const history = useHistory();
   const { currentWorkspace, currentProject, isPreviewPlan } =
@@ -65,9 +67,9 @@ export const ApplyChangesNextSteps = ({
             showCommitMessage={false}
             commitMessage="Architecture redesign"
             commitBtnType={CommitBtnType.JumboButton}
+            onCommitChangesError={onCommitChangesError}
           ></Commit>
         )}
-
         <JumboButton
           onClick={handleProjectOverviewClicked}
           text="Show my updated project overview"

packages/amplication-client/src/Project/ArchitectureConsole/ModelOrganizerConfirmation.tsx

@@ -22,11 +22,20 @@ import "./ModelOrganizerConfirmation.scss";
 import { EntityNode, ModelChanges, NODE_TYPE_MODEL, Node } from "./types";
 import ActionLog from "../../VersionControl/ActionLog";
 import * as models from "../../models";
+import { useAppContext } from "../../context/appContext";
+import { useHistory } from "react-router-dom";
+import { useMutation } from "@apollo/client";
+import { COMMIT_CHANGES } from "../../VersionControl/Commit";
+import { commitPath } from "../../util/paths";
 
 type movedEntitiesData = {
   id: string;
   name: string;
 };
+
+type TData = {
+  commit: models.Commit;
+};
 export const CLASS_NAME = "model-organizer-confirmation";
 const MIN_TIME_OUT_LOADER = 2000;
 
@@ -49,9 +58,36 @@ export default function ModelOrganizerConfirmation({
   applyChangesErrorMessage,
   applyChangesData,
 }: Props) {
+  const {
+    currentWorkspace,
+    setCommitRunning,
+    resetPendingChanges,
+    currentProject,
+    commitUtils,
+  } = useAppContext();
   const [applyChangesSteps, setApplyChangesSteps] = useState<boolean>(false);
+
   const [keepLoadingChanges, setKeepLoadingChanges] = useState<boolean>(false);
 
+  const [commitChangesError, setCommitChangesError] = useState<boolean>(false);
+  const history = useHistory();
+
+  const handleCommitChangesError = useCallback(() => {
+    setCommitChangesError(true);
+  }, [setCommitChangesError]);
+
+  const bypassLimitations = useMemo(() => {
+    return (
+      currentWorkspace?.subscription?.subscriptionPlan !==
+      models.EnumSubscriptionPlan.Pro
+    );
+  }, [currentWorkspace]);
+
+  const redirectToPurchase = () => {
+    const path = `/${currentWorkspace?.id}/purchase`;
+    history.push(path, { from: { pathname: history.location.pathname } });
+  };
+
   const movedEntities = useMemo(() => {
     const movedEntities: movedEntitiesData[] = [];
     nodes
@@ -78,6 +114,32 @@ export default function ModelOrganizerConfirmation({
     setApplyChangesSteps(true);
   }, [setKeepLoadingChanges, setApplyChangesSteps]);
 
+  const [commit] = useMutation<TData>(COMMIT_CHANGES, {
+    onCompleted: (response) => {
+      setCommitRunning(false);
+      setCommitChangesError(false);
+      resetPendingChanges();
+      commitUtils.refetchCommitsData(true);
+      const path = commitPath(
+        currentWorkspace?.id,
+        currentProject?.id,
+        response.commit.id
+      );
+      return history.push(path);
+    },
+  });
+
+  const handleOnBypassClicked = useCallback(() => {
+    setCommitRunning(true);
+    commit({
+      variables: {
+        message: "Architecture redesign",
+        projectId: currentProject?.id,
+        bypassLimitations: true,
+      },
+    }).catch(console.error);
+  }, [setCommitRunning, commit, currentProject?.id]);
+
   const ActionStep = applyChangesData?.action?.steps?.length
     ? applyChangesData?.action?.steps[0]
     : null;
@@ -142,8 +204,48 @@ export default function ModelOrganizerConfirmation({
             </Button>
           </FlexItem>
         </>
-      ) : applyChangesSteps ? (
-        <ApplyChangesNextSteps onDisplayArchitectureClicked={onCancelChanges} />
+      ) : applyChangesSteps && !commitChangesError ? (
+        <ApplyChangesNextSteps
+          onDisplayArchitectureClicked={onCancelChanges}
+          onCommitChangesError={handleCommitChangesError}
+        />
+      ) : commitChangesError ? (
+        <>
+          <FlexItem
+            direction={EnumFlexDirection.Column}
+            itemsAlign={EnumItemsAlign.Center}
+            gap={EnumGapSize.Default}
+          >
+            <Text textStyle={EnumTextStyle.H3}>
+              Your workspace exceeds its resource limitation. Please contact us
+              to upgrade
+            </Text>
+            <Text textStyle={EnumTextStyle.Normal}>
+              Please contact us to upgrade
+            </Text>
+          </FlexItem>
+          <FlexItem contentAlign={EnumContentAlign.Center}>
+            <Button
+              className={`${CLASS_NAME}__upgrade_button`}
+              buttonStyle={EnumButtonStyle.Primary}
+              onClick={() => {
+                setCommitChangesError(false);
+                redirectToPurchase();
+              }}
+            >
+              Upgrade
+            </Button>
+            {bypassLimitations && (
+              <Button
+                className={`${CLASS_NAME}__upgrade_button`}
+                buttonStyle={EnumButtonStyle.Outline}
+                onClick={handleOnBypassClicked}
+              >
+                Later
+              </Button>
+            )}
+          </FlexItem>
+        </>
       ) : !applyChangesSteps ? (
         <>
           {changes?.newServices?.length > 0 && (

packages/amplication-client/src/VersionControl/Commit.tsx

@@ -42,6 +42,7 @@ type Props = {
   showCommitMessage?: boolean;
   commitMessage?: string;
   commitBtnType: CommitBtnType;
+  onCommitChangesError?: () => void;
 };
 const CLASS_NAME = "commit";
 
@@ -75,6 +76,7 @@ const Commit = ({
   commitBtnType,
   showCommitMessage = true,
   commitMessage,
+  onCommitChangesError,
 }: Props) => {
   const history = useHistory();
   const { trackEvent } = useTracking();
@@ -100,6 +102,10 @@ const Commit = ({
     onError: (error: ApolloError) => {
       setCommitRunning(false);
       setPendingChangesError(true);
+      if (onCommitChangesError) {
+        onCommitChangesError();
+        return;
+      }
 
       setOpenLimitationDialog(
         error?.graphQLErrors?.some(