chore: update messaging for Deploy tab (#14911)

* chore: update messaging for the Deploy tab
2022-07-11 15:40:43 +05:30 · 2022-07-11 15:40:43 +05:30 · 7c77d3fb7c
commit 7c77d3fb7c
parent 9fc8e9a216
9 changed files with 149 additions and 116 deletions
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@ -770,6 +770,8 @@ export const DISCARD_CHANGES = () => "Discard changes";
 // GIT DEPLOY begin
 export const DEPLOY = () => "Deploy";
 export const DEPLOY_YOUR_APPLICATION = () => "Deploy your application";
+export const CHANGES_SINCE_LAST_DEPLOYMENT = () =>
+  "Changes since last deployment";
 export const CHANGES_ONLY_USER = () => "Changes since last commit";
 export const CHANGES_MADE_SINCE_LAST_COMMIT = () =>
  "Changes made since last commit";
@ -777,8 +779,19 @@ export const CHANGES_ONLY_MIGRATION = () =>
  "Appsmith update changes since last commit";
 export const CHANGES_USER_AND_MIGRATION = () =>
  "Appsmith update and user changes since last commit";
+export const CURRENT_PAGE_DISCARD_WARNING = (page: string) =>
+  `Current page (${page}) is in the discard list.`;
 // GIT DEPLOY end

+// GIT CHANGE LIST begin
+export const CHANGES_FROM_APPSMITH = () =>
+  "Some changes are platform upgrades from Appsmith.";
+export const TRY_TO_PULL = () =>
+  "We will try to pull before pushing your changes.";
+export const NOT_PUSHED_YET = () =>
+  "These are the commits that haven't been pushed to remote yet.";
+// GIT CHANGE LIST end
+
 // GIT DELETE BRANCH begin
 export const DELETE = () => "Delete";
 export const LOCAL_BRANCHES = () => "Local branches";
--- a/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx
+++ b/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx
@ -69,9 +69,10 @@ import { Space, Title } from "../components/StyledComponents";
 import { Variant } from "components/ads";
 import DiscardChangesWarning from "../components/DiscardChangesWarning";
 import { changeInfoSinceLastCommit } from "../utils";
+import ScrollIndicator from "../../../../components/ads/ScrollIndicator";

 const Section = styled.div`
-  margin-top: ${(props) => props.theme.spaces[11]}px;
+  margin-top: 0;
  margin-bottom: ${(props) => props.theme.spaces[11]}px;
 `;

@ -95,7 +96,20 @@ const SectionTitle = styled.div`
 `;

 const Container = styled.div`
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }

  && ${LabelContainer} span {
    color: ${Colors.CHARCOAL};
@ -106,7 +120,7 @@ const Container = styled.div`
  }
 `;

-const INITIAL_COMMIT = "Initial Commit";
+const FIRST_COMMIT = "First Commit";
 const NO_CHANGES_TO_COMMIT = "No changes to commit";

 function SubmitWrapper(props: {
@ -149,7 +163,7 @@ function Deploy() {
  const upstreamErrorDocumentUrl = useSelector(getUpstreamErrorDocUrl);
  const discardDocUrl = useSelector(getDiscardDocUrl);
  const [commitMessage, setCommitMessage] = useState(
-    gitMetaData?.remoteUrl && lastDeployedAt ? "" : INITIAL_COMMIT,
+    gitMetaData?.remoteUrl && lastDeployedAt ? "" : FIRST_COMMIT,
  );
  const [shouldDiscard, setShouldDiscard] = useState(false);
  const [isDiscarding, setIsDiscarding] = useState(isDiscardInProgress);
@ -272,8 +286,21 @@ function Deploy() {
    setShowDiscardWarning(false);
    setShouldDiscard(false);
  };
+
+  const scrollWrapperRef = React.createRef<HTMLDivElement>();
+  useEffect(() => {
+    if (scrollWrapperRef.current) {
+      setTimeout(() => {
+        const top = scrollWrapperRef.current?.scrollHeight || 0;
+        scrollWrapperRef.current?.scrollTo({
+          top: top,
+        });
+      }, 100);
+    }
+  }, [scrollWrapperRef]);
+
  return (
-    <Container data-testid={"t--deploy-tab-container"}>
+    <Container data-testid={"t--deploy-tab-container"} ref={scrollWrapperRef}>
      <Title>{createMessage(DEPLOY_YOUR_APPLICATION)}</Title>
      <Section>
        {hasChangesToCommit && (
@ -284,7 +311,7 @@ function Deploy() {
            {changeReasonText}
          </Text>
        )}
-        <GitChangesList />
+        <GitChangesList isAutoUpdate={isAutoUpdate} />
        <Row>
          <SectionTitle>
            <span>{createMessage(COMMIT_TO)}</span>
@ -435,6 +462,7 @@ function Deploy() {
      {!pullRequired && !isConflicting && (
        <DeployPreview showSuccess={isCommitAndPushSuccessful} />
      )}
+      <ScrollIndicator containerRef={scrollWrapperRef} mode="DARK" top="37px" />
    </Container>
  );
 }
--- a/app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx
+++ b/app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx
@ -112,7 +112,7 @@ const Container = styled.div`
  }

  &::-webkit-scrollbar {
-    width: 0px;
+    width: 0;
  }
 `;

--- a/app/client/src/pages/Editor/gitSync/components/DeployPreview.tsx
+++ b/app/client/src/pages/Editor/gitSync/components/DeployPreview.tsx
@ -24,7 +24,7 @@ const Container = styled.div`
  display: flex;
  flex: 1;
  flex-direction: row;
-  width: calc(100% - 30px);
+  gap: ${(props) => props.theme.spaces[6]}px;
 `;

 const ButtonWrapper = styled.div`
@ -51,16 +51,6 @@ const IconWrapper = styled.div`
  }
 `;

-const ContentWrapper = styled.div`
-  margin-left: ${(props) => props.theme.spaces[6]}px;
-`;
-
-const CloudIconWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
 export default function DeployPreview(props: { showSuccess: boolean }) {
  const pageId = useSelector(getCurrentPageId) as string;
  const lastDeployedAt = useSelector(getApplicationLastDeployedAt);
@ -85,14 +75,14 @@ export default function DeployPreview(props: { showSuccess: boolean }) {
    : "";
  return lastDeployedAt ? (
    <Container className="t--git-deploy-preview">
-      <CloudIconWrapper>
+      <div>
        {props.showSuccess ? (
          <SuccessTick height="30px" width="30px" />
        ) : (
          <CloudyIcon />
        )}
-      </CloudIconWrapper>
-      <ContentWrapper>
+      </div>
+      <div>
        <ButtonWrapper onClick={showDeployPreview}>
          <Text
            case={Case.UPPERCASE}
@ -109,7 +99,7 @@ export default function DeployPreview(props: { showSuccess: boolean }) {
        <Text color={Colors.GREY_6} type={TextType.P3}>
          {lastDeployedAtMsg}
        </Text>
-      </ContentWrapper>
+      </div>
    </Container>
  ) : null;
 }
--- a/app/client/src/pages/Editor/gitSync/components/DiscardChangesWarning.tsx
+++ b/app/client/src/pages/Editor/gitSync/components/DiscardChangesWarning.tsx
@ -6,11 +6,15 @@ import {
 import React from "react";
 import {
  createMessage,
+  CURRENT_PAGE_DISCARD_WARNING,
  DISCARD_CHANGES_WARNING,
 } from "@appsmith/constants/messages";
 import styled from "styled-components";
 import { Colors } from "constants/Colors";
 import { Text, TextType } from "design-system";
+import { useSelector } from "react-redux";
+import { getCurrentPageName } from "selectors/editorSelectors";
+import { getGitStatus } from "selectors/gitSyncSelectors";

 function DiscardWarningMessage() {
  return (
@ -20,6 +24,22 @@ function DiscardWarningMessage() {
  );
 }

+function CurrentPageDiscardWarningMessage({
+  isCurrentPageDiscardable,
+  pageName,
+}: {
+  isCurrentPageDiscardable: boolean;
+  pageName: string;
+}) {
+  const out = isCurrentPageDiscardable ? (
+    <Text color={Colors.ERROR_600} type={TextType.P3}>
+      {createMessage(CURRENT_PAGE_DISCARD_WARNING, pageName)}
+    </Text>
+  ) : null;
+
+  return out;
+}
+
 const Container = styled.div`
  margin: 8px 0 16px;
 `;
@ -28,6 +48,15 @@ export default function DiscardChangesWarning({
  discardDocUrl,
  onCloseDiscardChangesWarning,
 }: any) {
+  const currentPageName = useSelector(getCurrentPageName) || "";
+  const modifiedPageList = useSelector(
+    getGitStatus,
+  )?.modified.map((page: string) => page.toLocaleLowerCase());
+  const isCurrentPageDiscardable =
+    modifiedPageList?.some((page: string) =>
+      page.includes(currentPageName.toLocaleLowerCase()),
+    ) || false;
+
  const notificationBannerOptions: NotificationBannerProps = {
    canClose: true,
    className: "error",
@ -39,7 +68,14 @@ export default function DiscardChangesWarning({
  return (
    <Container>
      <NotificationBanner {...notificationBannerOptions}>
-        <DiscardWarningMessage />
+        <>
+          <DiscardWarningMessage />
+          <br />
+          <CurrentPageDiscardWarningMessage
+            isCurrentPageDiscardable={isCurrentPageDiscardable}
+            pageName={currentPageName}
+          />
+        </>
      </NotificationBanner>
    </Container>
  );
--- a/app/client/src/pages/Editor/gitSync/components/GitChangesList.test.tsx
+++ b/app/client/src/pages/Editor/gitSync/components/GitChangesList.test.tsx
@ -21,64 +21,8 @@ describe("GitChangesList", () => {
      expect(Array.isArray(actual)).toBeTruthy();
      const actualJSON = JSON.stringify(actual);
      expect(actualJSON.length).toBeGreaterThan(0);
-      const expected = [
-        {
-          key: "change-status-widget",
-          ref: null,
-          props: {
-            message: "1 page modified",
-            iconName: "widget",
-            hasValue: true,
-          },
-          _owner: null,
-          _store: {},
-        },
-        {
-          key: "change-status-query",
-          ref: null,
-          props: {
-            message: "1 query modified",
-            iconName: "query",
-            hasValue: true,
-          },
-          _owner: null,
-          _store: {},
-        },
-        {
-          key: "change-status-git-commit",
-          ref: null,
-          props: {
-            message: "1 commit ahead and 1 commit behind",
-            iconName: "git-commit",
-            hasValue: true,
-          },
-          _owner: null,
-          _store: {},
-        },
-        {
-          key: "change-status-js",
-          ref: null,
-          props: {
-            message: "1 JS Object modified",
-            iconName: "js",
-            hasValue: true,
-          },
-          _owner: null,
-          _store: {},
-        },
-        {
-          key: "change-status-database-2-line",
-          ref: null,
-          props: {
-            message: "1 datasource modified",
-            iconName: "database-2-line",
-            hasValue: true,
-          },
-          _owner: null,
-          _store: {},
-        },
-      ];
-      const expectedJSON = JSON.stringify(expected);
+      const expectedJSON =
+        '[{"key":"change-status-widget","ref":null,"props":{"message":"1 page modified","iconName":"widget","hasValue":true},"_owner":null,"_store":{}},{"key":"change-status-query","ref":null,"props":{"message":"1 query modified","iconName":"query","hasValue":true},"_owner":null,"_store":{}},{"key":"change-status-js","ref":null,"props":{"message":"1 JS Object modified","iconName":"js","hasValue":true},"_owner":null,"_store":{}},{"key":"change-status-database-2-line","ref":null,"props":{"message":"1 datasource modified","iconName":"database-2-line","hasValue":true},"_owner":null,"_store":{}},{"key":"change-status-git-commit","ref":null,"props":{"message":"1 commit ahead. These are the commits that haven\'t been pushed to remote yet.","iconName":"git-commit","hasValue":true},"_owner":null,"_store":{}},{"key":"change-status-git-commit","ref":null,"props":{"message":"1 commit behind. We will try to pull before pushing your changes.","iconName":"git-commit","hasValue":true},"_owner":null,"_store":{}}]';
      expect(actualJSON).toEqual(expectedJSON);
    });
    it("returns empty array", () => {
--- a/app/client/src/pages/Editor/gitSync/components/GitChangesList.tsx
+++ b/app/client/src/pages/Editor/gitSync/components/GitChangesList.tsx
@ -1,15 +1,21 @@
 import React from "react";
 import styled from "constants/DefaultTheme";
 import { Classes } from "components/ads/common";
+import Icon, { IconSize } from "components/ads/Icon";
 import { Text, TextType } from "design-system";
 import { Colors } from "constants/Colors";
-import Icon, { IconSize } from "components/ads/Icon";
 import { useSelector } from "react-redux";
 import {
  getGitStatus,
  getIsFetchingGitStatus,
 } from "selectors/gitSyncSelectors";
 import { GitStatusData } from "reducers/uiReducers/gitSyncReducer";
+import {
+  CHANGES_FROM_APPSMITH,
+  createMessage,
+  NOT_PUSHED_YET,
+  TRY_TO_PULL,
+} from "@appsmith/constants/messages";

 const DummyChange = styled.div`
  width: 50%;
@ -43,7 +49,8 @@ const Changes = styled.div`
 `;

 export enum Kind {
-  COMMIT = "COMMIT",
+  AHEAD_COMMIT = "AHEAD_COMMIT",
+  BEHIND_COMMIT = "BEHIND_COMMIT",
  DATA_SOURCE = "DATA_SOURCE",
  JS_OBJECT = "JS_OBJECT",
  PAGE = "PAGE",
@ -61,10 +68,15 @@ type GitStatusMap = {
 };

 const STATUS_MAP: GitStatusMap = {
-  [Kind.COMMIT]: (status: GitStatusData) => ({
-    message: commitMessage(status),
+  [Kind.AHEAD_COMMIT]: (status: GitStatusData) => ({
+    message: aheadCommitMessage(status),
    iconName: "git-commit",
-    hasValue: (status?.aheadCount || 0) > 0 || (status?.behindCount || 0) > 0,
+    hasValue: (status?.aheadCount || 0) > 0,
+  }),
+  [Kind.BEHIND_COMMIT]: (status: GitStatusData) => ({
+    message: behindCommitMessage(status),
+    iconName: "git-commit",
+    hasValue: (status?.behindCount || 0) > 0,
  }),
  [Kind.DATA_SOURCE]: (status: GitStatusData) => ({
    message: `${status?.modifiedDatasources || 0} ${
@ -96,22 +108,24 @@ const STATUS_MAP: GitStatusMap = {
  }),
 };

-function commitMessage(status: GitStatusData) {
-  const aheadCount = status?.aheadCount || 0;
+function behindCommitMessage(status: GitStatusData) {
  const behindCount = status?.behindCount || 0;
-  const aheadMessage =
-    aheadCount > 0
-      ? (aheadCount || 0) === 1
-        ? `${aheadCount || 0} commit ahead`
-        : `${aheadCount || 0} commits ahead`
-      : null;
-  const behindMessage =
-    behindCount > 0
-      ? (behindCount || 0) === 1
-        ? `${behindCount || 0} commit behind`
-        : `${behindCount || 0} commits behind `
-      : null;
-  return [aheadMessage, behindMessage].filter((i) => i !== null).join(" and ");
+  let behindMessage =
+    (behindCount || 0) === 1
+      ? `${behindCount || 0} commit`
+      : `${behindCount || 0} commits`;
+  behindMessage += ` behind. ${createMessage(TRY_TO_PULL)}`;
+  return behindMessage;
+}
+
+function aheadCommitMessage(status: GitStatusData) {
+  const aheadCount = status?.aheadCount || 0;
+  let aheadMessage =
+    (aheadCount || 0) === 1
+      ? `${aheadCount || 0} commit`
+      : `${aheadCount || 0} commits`;
+  aheadMessage += ` ahead. ${createMessage(NOT_PUSHED_YET)}`;
+  return aheadMessage;
 }

 export function Change(props: Partial<GitStatusProps>) {
@ -150,9 +164,10 @@ export function gitChangeListData(
  const changeKind = [
    Kind.PAGE,
    Kind.QUERY,
-    Kind.COMMIT,
    Kind.JS_OBJECT,
    Kind.DATA_SOURCE,
+    Kind.AHEAD_COMMIT,
+    Kind.BEHIND_COMMIT,
  ];
  return changeKind
    .map((type: Kind) => STATUS_MAP[type](status))
@ -161,10 +176,24 @@ export function gitChangeListData(
    .filter((s) => !!s);
 }

-export default function GitChangesList() {
+export default function GitChangesList({
+  isAutoUpdate,
+}: {
+  isAutoUpdate: boolean;
+}) {
  const status: GitStatusData = useSelector(getGitStatus) as GitStatusData;
  const loading = useSelector(getIsFetchingGitStatus);
  const changes = gitChangeListData(status);
+  if (isAutoUpdate) {
+    changes.push(
+      <Change
+        hasValue={isAutoUpdate}
+        iconName="info"
+        key="change-status-auto-update"
+        message={createMessage(CHANGES_FROM_APPSMITH)}
+      />,
+    );
+  }
  return loading ? (
    <DummyChange data-testid={"t--git-change-loading-dummy"} />
  ) : (
--- a/app/client/src/pages/Editor/gitSync/utils.test.ts
+++ b/app/client/src/pages/Editor/gitSync/utils.test.ts
@ -224,7 +224,7 @@ describe("gitSync utils", () => {
      };
      const actual = changeInfoSinceLastCommit(applicationData);
      const expected = {
-        changeReasonText: "Changes since last commit",
+        changeReasonText: "Changes since last deployment",
        isAutoUpdate: false,
        isManualUpdate: false,
      };
@ -245,7 +245,7 @@ describe("gitSync utils", () => {
      };
      const actual = changeInfoSinceLastCommit(applicationData);
      const expected = {
-        changeReasonText: "Appsmith update changes since last commit",
+        changeReasonText: "Changes since last deployment",
        isAutoUpdate: true,
        isManualUpdate: false,
      };
@ -266,7 +266,7 @@ describe("gitSync utils", () => {
      };
      const actual = changeInfoSinceLastCommit(applicationData);
      const expected = {
-        changeReasonText: "Appsmith update and user changes since last commit",
+        changeReasonText: "Changes since last deployment",
        isAutoUpdate: true,
        isManualUpdate: true,
      };
@ -287,7 +287,7 @@ describe("gitSync utils", () => {
      };
      const actual = changeInfoSinceLastCommit(applicationData);
      const expected = {
-        changeReasonText: "Changes since last commit",
+        changeReasonText: "Changes since last deployment",
        isAutoUpdate: false,
        isManualUpdate: true,
      };
--- a/app/client/src/pages/Editor/gitSync/utils.ts
+++ b/app/client/src/pages/Editor/gitSync/utils.ts
@ -1,8 +1,6 @@
 import { ApplicationPayload } from "@appsmith/constants/ReduxActionConstants";
 import {
-  CHANGES_ONLY_MIGRATION,
-  CHANGES_ONLY_USER,
-  CHANGES_USER_AND_MIGRATION,
+  CHANGES_SINCE_LAST_DEPLOYMENT,
  createMessage,
 } from "@appsmith/constants/messages";

@ -75,11 +73,6 @@ export function changeInfoSinceLastCommit(
 ) {
  const isAutoUpdate = !!currentApplication?.isAutoUpdate;
  const isManualUpdate = !!currentApplication?.isManualUpdate;
-  const changeReason = isAutoUpdate
-    ? isManualUpdate
-      ? CHANGES_USER_AND_MIGRATION
-      : CHANGES_ONLY_MIGRATION
-    : CHANGES_ONLY_USER;
-  const changeReasonText = createMessage(changeReason);
+  const changeReasonText = createMessage(CHANGES_SINCE_LAST_DEPLOYMENT);
  return { isAutoUpdate, isManualUpdate, changeReasonText };
 }