feat: migration changes hint (#12071)

* Initial changes

* feat: adding new icon and refactoring

* feat: add text and test ids

* chore: add tests

app/client/src/assets/icons/ads/js.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.8 20.2V3.8H12H15.1686L17.4343 6.06569L19.2 7.83137V12V20.2H4.8Z" fill="#ffffff" stroke="#575757" stroke-width="1.6"/>
+  <path d="M7.25391 16.0625C7.25391 17.3672 8.10938 18.1562 9.47656 18.1562C10.8438 18.1562 11.6641 17.4297 11.6641 16.1055V12.3633H10.0078V16.0938C10.0078 16.5352 9.8125 16.7695 9.44922 16.7695C9.07422 16.7695 8.83984 16.5039 8.83984 16.0625H7.25391Z" fill="#575757"/>
+  <path d="M12.7227 16.3555C12.7305 17.4727 13.6484 18.1562 15.1445 18.1562C16.6836 18.1562 17.6055 17.4297 17.6055 16.2109C17.6055 15.2969 17.0977 14.7773 16 14.5859L15.2305 14.4531C14.6914 14.3594 14.4609 14.2031 14.4609 13.9336C14.4609 13.6211 14.7422 13.4258 15.1719 13.4258C15.6133 13.4258 15.9609 13.6836 15.9727 14.0234H17.4883C17.4766 12.9414 16.5273 12.207 15.1367 12.207C13.7266 12.207 12.8164 12.9492 12.8164 14.0977C12.8164 15.0078 13.3789 15.6016 14.4141 15.7812L15.1602 15.9141C15.7656 16.0234 15.9766 16.1484 15.9766 16.4102C15.9766 16.7266 15.668 16.9336 15.2031 16.9336C14.6719 16.9336 14.3125 16.707 14.293 16.3555H12.7227Z" fill="#575757"/>
+</svg>

app/client/src/ce/constants/messages.test.ts

@@ -1,6 +1,9 @@
 import {
   CANNOT_MERGE_DUE_TO_UNCOMMITTED_CHANGES,
   CANNOT_PULL_WITH_LOCAL_UNCOMMITTED_CHANGES,
+  CHANGES_ONLY_MIGRATION,
+  CHANGES_ONLY_USER,
+  CHANGES_USER_AND_MIGRATION,
   COMMIT_AND_PUSH,
   COMMIT_CHANGES,
   COMMIT_TO,
@@ -256,10 +259,25 @@ describe("git-sync messages", () => {
       key: "ERROR_GIT_INVALID_REMOTE",
       value: "Remote repo doesn't exist or is unreachable.",
     },
+    {
+      key: "CHANGES_ONLY_USER",
+      value: "Changes since last commit",
+    },
+    {
+      key: "CHANGES_ONLY_MIGRATION",
+      value: "Appsmith update changes since last commit",
+    },
+    {
+      key: "CHANGES_USER_AND_MIGRATION",
+      value: "Appsmith update and user changes since last commit",
+    },
   ];
   const functions = [
     CANNOT_MERGE_DUE_TO_UNCOMMITTED_CHANGES,
     CANNOT_PULL_WITH_LOCAL_UNCOMMITTED_CHANGES,
+    CHANGES_ONLY_MIGRATION,
+    CHANGES_ONLY_USER,
+    CHANGES_USER_AND_MIGRATION,
     COMMITTING_AND_PUSHING_CHANGES,
     COMMIT_AND_PUSH,
     COMMIT_CHANGES,

app/client/src/ce/constants/messages.ts

@@ -588,7 +588,6 @@ export const GIT_DISCONNECT_POPUP_MAIN_HEADING = () => `Are you sure ?`;
 
 export const GIT_CONNECTION = () => "Git Connection";
 export const GIT_IMPORT = () => "Git Import";
-export const DEPLOY = () => "Deploy";
 export const MERGE = () => "Merge";
 export const GIT_SETTINGS = () => "Git Settings";
 export const CONNECT_TO_GIT = () => "Connect to git repository";
@@ -618,7 +617,6 @@ export const CHECK_DP = () => "CHECK";
 export const DEPLOY_TO_CLOUD = () => "Deploy to cloud";
 export const DEPLOY_WITHOUT_GIT = () =>
   "Deploy your application without version control";
-export const DEPLOY_YOUR_APPLICATION = () => "Deploy your application";
 export const COMMIT_CHANGES = () => "Commit changes";
 export const COMMIT_TO = () => "Commit to";
 export const COMMIT_AND_PUSH = () => "Commit & push";
@@ -735,6 +733,16 @@ export const CONNECTING_TO_REPO_DISABLED = () =>
 export const DURING_ONBOARDING_TOUR = () => "during the onboarding tour";
 export const MERGED_SUCCESSFULLY = () => "Merged successfully";
 
+// GIT DEPLOY begin
+export const DEPLOY = () => "Deploy";
+export const DEPLOY_YOUR_APPLICATION = () => "Deploy your application";
+export const CHANGES_ONLY_USER = () => "Changes since last commit";
+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";
+// GIT DEPLOY end
+
 // GIT ERRORS begin
 export const ERROR_GIT_AUTH_FAIL = () =>
   "Please make sure that regenerated SSH key is added and has write access to the repo.";

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

@@ -70,9 +70,10 @@ import { ReactComponent as WorkspaceIcon } from "assets/icons/ads/organizationIc
 import { ReactComponent as SettingIcon } from "assets/icons/control/settings.svg";
 import { ReactComponent as DropdownIcon } from "assets/icons/ads/dropdown.svg";
 import { ReactComponent as ChatIcon } from "assets/icons/ads/app-icons/chat.svg";
+import { ReactComponent as JsIcon } from "assets/icons/ads/js.svg";
 
 import styled from "styled-components";
-import { CommonComponentProps, Classes } from "./common";
+import { Classes, CommonComponentProps } from "./common";
 import { noop } from "lodash";
 import { theme } from "constants/DefaultTheme";
 import Spinner from "./Spinner";
@@ -90,6 +91,7 @@ import CheckLineIcon from "remixicon-react/CheckLineIcon";
 import CloseLineIcon from "remixicon-react/CloseLineIcon";
 import CloseCircleIcon from "remixicon-react/CloseCircleFillIcon";
 import CommentContextMenu from "remixicon-react/More2FillIcon";
+import More2FillIcon from "remixicon-react/More2FillIcon";
 import CompassesLine from "remixicon-react/CompassesLineIcon";
 import ContextMenuIcon from "remixicon-react/MoreFillIcon";
 import CreateNewIcon from "remixicon-react/AddLineIcon";
@@ -102,8 +104,10 @@ import Download from "remixicon-react/DownloadCloud2LineIcon";
 import DuplicateIcon from "remixicon-react/FileCopyLineIcon";
 import EditIcon from "remixicon-react/PencilFillIcon";
 import EditLineIcon from "remixicon-react/EditLineIcon";
+import EditUnderlineIcon from "remixicon-react/EditLineIcon";
 import Emoji from "remixicon-react/EmotionLineIcon";
 import ExpandMore from "remixicon-react/ArrowDownSLineIcon";
+import DownArrowIcon from "remixicon-react/ArrowDownSLineIcon";
 import ExpandLess from "remixicon-react/ArrowUpSLineIcon";
 import EyeOn from "remixicon-react/EyeLineIcon";
 import EyeOff from "remixicon-react/EyeOffLineIcon";
@@ -122,7 +126,6 @@ import KeyIcon from "remixicon-react/Key2LineIcon";
 import LeftArrowIcon2 from "remixicon-react/ArrowLeftSLineIcon";
 import Link2 from "remixicon-react/LinkIcon";
 import LeftArrowIcon from "remixicon-react/ArrowLeftLineIcon";
-import More2FillIcon from "remixicon-react/More2FillIcon";
 import NewsPaperLine from "remixicon-react/NewspaperLineIcon";
 import OvalCheck from "remixicon-react/CheckboxCircleLineIcon";
 import OvalCheckFill from "remixicon-react/CheckboxCircleFillIcon";
@@ -137,10 +140,8 @@ import Trash from "remixicon-react/DeleteBinLineIcon";
 import UpArrow from "remixicon-react/ArrowUpSFillIcon";
 import WarningIcon from "remixicon-react/ErrorWarningFillIcon";
 import WarningLineIcon from "remixicon-react/ErrorWarningLineIcon";
-import EditUnderlineIcon from "remixicon-react/EditLineIcon";
 import LogoutIcon from "remixicon-react/LogoutBoxRLineIcon";
 import ShareLineIcon from "remixicon-react/ShareLineIcon";
-import DownArrowIcon from "remixicon-react/ArrowDownSLineIcon";
 import LoaderLineIcon from "remixicon-react/LoaderLineIcon";
 import WidgetIcon from "remixicon-react/FunctionLineIcon";
 import RefreshLineIcon from "remixicon-react/RefreshLineIcon";
@@ -344,6 +345,7 @@ const ICON_LOOKUP = {
   hamburger: <HamburgerIcon />,
   help: <HelpIcon />,
   info: <InfoIcon />,
+  js: <JsIcon />,
   key: <KeyIcon />,
   lightning: <LightningIcon />,
   link: <LinkIcon />,

app/client/src/constants/ReduxActionConstants.tsx

@@ -683,8 +683,8 @@ export const ReduxActionTypes = {
   SET_TEMPLATE_NOTIFICATION_SEEN: "SET_TEMPLATE_NOTIFICATION_SEEN",
   GET_TEMPLATE_NOTIFICATION_SEEN: "GET_TEMPLATE_NOTIFICATION_SEEN",
   GET_SIMILAR_TEMPLATES_INIT: "GET_SIMILAR_TEMPLATES_INIT",
-  GET_SIMILAR_TEMPLATES_SUCCESS: "GET_SIMILAR_TEMPLATES_SUCCESS",
-  /* This action constants is for identifying the status of the updates of the entities */
+  GET_SIMILAR_TEMPLATES_SUCCESS:
+    "GET_SIMILAR_TEMPLATES_SUCCESS" /* This action constants is for identifying the status of the updates of the entities */,
   ENTITY_UPDATE_STARTED: "ENTITY_UPDATE_STARTED",
   ENTITY_UPDATE_SUCCESS: "ENTITY_UPDATE_SUCCESS",
   FETCH_PLUGIN_AND_JS_ACTIONS_SUCCESS: "FETCH_PLUGIN_AND_JS_ACTIONS_SUCCESS",
@@ -925,6 +925,7 @@ export interface PromisePayload {
   reject: any;
   resolve: any;
 }
+
 export interface ReduxActionWithPromise<T> extends ReduxAction<T> {
   payload: T & PromisePayload;
 }
@@ -989,6 +990,8 @@ export interface ApplicationPayload {
   modifiedAt?: string;
   pages: ApplicationPagePayload[];
   applicationVersion: ApplicationVersion;
+  isAutoUpdate?: boolean;
+  isManualUpdate?: boolean;
 }
 
 export type OrganizationDetails = {

app/client/src/pages/Editor/gitSync/QuickGitActions/BranchButton.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "test/testUtils";
+import BranchButton from "./BranchButton";
+import React from "react";
+
+describe("BranchButton", () => {
+  it("renders properly", async () => {
+    render(<BranchButton />);
+    const buttonContainer = await screen.queryByTestId(
+      "t--branch-button-container",
+    );
+    expect(buttonContainer).not.toBeNull();
+    const currentBranch = await screen.queryByTestId(
+      "t--branch-button-currentBranch",
+    );
+    expect(currentBranch?.innerHTML).toContain("*");
+  });
+});

app/client/src/pages/Editor/gitSync/QuickGitActions/BranchButton.tsx

@@ -20,19 +20,24 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
 const ButtonContainer = styled.div`
   display: flex;
   align-items: center;
+
   & .label {
     color: ${(props) => props.theme.colors.editorBottomBar.branchBtnText};
     ${(props) => getTypographyByKey(props, "p1")};
     line-height: 18px;
   }
+
   & .icon {
     height: 24px;
   }
+
   margin: 0 ${(props) => props.theme.spaces[4]}px;
   cursor: pointer;
+
   &:hover svg path {
     fill: ${Colors.CHARCOAL};
   }
+
   & .label {
     width: 100px;
     overflow: hidden;
@@ -57,6 +62,7 @@ function BranchButton() {
   return (
     <Popover2
       content={<BranchList setIsPopupOpen={setIsOpen} />}
+      data-testid={"t--git-branch-button-popover"}
       hasBackdrop
       isOpen={isOpen}
       minimal
@@ -78,11 +84,18 @@ function BranchButton() {
         hoverOpenDelay={1}
         position={Position.TOP_LEFT}
       >
-        <ButtonContainer className="t--branch-button">
+        <ButtonContainer
+          className="t--branch-button"
+          data-testid={"t--branch-button-container"}
+        >
           <div className="icon">
             <Icon name="git-branch" size={IconSize.XXXXL} />
           </div>
-          <div className="label" ref={labelTarget}>
+          <div
+            className="label"
+            data-testid={"t--branch-button-currentBranch"}
+            ref={labelTarget}
+          >
             {currentBranch}
             {!status?.isClean && "*"}
           </div>

app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx

@@ -72,18 +72,19 @@ const QuickActionButtonContainer = styled.div<{ disabled?: boolean }>`
 
   .count {
     position: absolute;
-    width: 20px;
-    height: 20px;
+    height: ${(props) => props.theme.spaces[7]}px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: ${Colors.WHITE};
     background-color: ${Colors.BLACK};
-    top: -8px;
-    left: 18px;
-    border-radius: 50%;
+    top: ${(props) => -1 * props.theme.spaces[3]}px;
+    left: ${(props) => props.theme.spaces[8]}px;
+    border-radius: ${(props) => props.theme.spaces[3]}px;
     ${(props) => getTypographyByKey(props, "p3")};
     z-index: 1;
+    padding: ${(props) => props.theme.spaces[1]}px
+      ${(props) => props.theme.spaces[2]}px;
   }
 `;
 
@@ -91,15 +92,6 @@ const capitalizeFirstLetter = (string = " ") => {
   return string.charAt(0).toUpperCase() + string.toLowerCase().slice(1);
 };
 
-// const SpinnerContainer = styled.div`
-//   margin-left: ${(props) => props.theme.spaces[2]}px;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   width: 29px;
-//   height: 26px;
-// `;
-
 function QuickActionButton({
   className = "",
   count = 0,

app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx

@@ -1,11 +1,14 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Title } from "../components/StyledComponents";
+import { Space, Title } from "../components/StyledComponents";
 import {
-  DEPLOY_YOUR_APPLICATION,
-  COMMIT_TO,
-  createMessage,
+  CHANGES_ONLY_MIGRATION,
+  CHANGES_ONLY_USER,
+  CHANGES_USER_AND_MIGRATION,
   COMMIT_AND_PUSH,
+  COMMIT_TO,
   COMMITTING_AND_PUSHING_CHANGES,
+  createMessage,
+  DEPLOY_YOUR_APPLICATION,
   FETCH_GIT_STATUS,
   GIT_NO_UPDATED_TOOLTIP,
   GIT_UPSTREAM_CHANGES,
@@ -18,18 +21,17 @@ import Button, { Size } from "components/ads/Button";
 import { LabelContainer } from "components/ads/Checkbox";
 
 import {
+  getConflictFoundDocUrlDeploy,
+  getGitCommitAndPushError,
   getGitStatus,
-  getIsFetchingGitStatus,
+  getIsCommitSuccessful,
   getIsCommittingInProgress,
+  getIsFetchingGitStatus,
   getIsPullingProgress,
   getPullFailed,
-  getGitCommitAndPushError,
   getUpstreamErrorDocUrl,
-  getConflictFoundDocUrlDeploy,
 } from "selectors/gitSyncSelectors";
 import { useDispatch, useSelector } from "react-redux";
-
-import { Space } from "../components/StyledComponents";
 import { Colors } from "constants/Colors";
 import { getTypographyByKey, Theme } from "constants/DefaultTheme";
 
@@ -40,7 +42,6 @@ import {
   fetchGitStatusInit,
   gitPullInit,
 } from "actions/gitSyncActions";
-import { getIsCommitSuccessful } from "selectors/gitSyncSelectors";
 import StatusLoader from "../components/StatusLoader";
 import { clearCommitSuccessfulState } from "../../../../actions/gitSyncActions";
 import Statusbar, {
@@ -56,11 +57,15 @@ import Icon, { IconSize } from "components/ads/Icon";
 
 import { isMac } from "utils/helpers";
 import AnalyticsUtil from "utils/AnalyticsUtil";
-import { getApplicationLastDeployedAt } from "selectors/editorSelectors";
+import {
+  getApplicationLastDeployedAt,
+  getCurrentApplication,
+} from "selectors/editorSelectors";
 import GIT_ERROR_CODES from "constants/GitErrorCodes";
 import useAutoGrow from "utils/hooks/useAutoGrow";
 
 const Section = styled.div`
+  margin-top: ${(props) => props.theme.spaces[11]}px;
   margin-bottom: ${(props) => props.theme.spaces[11]}px;
 `;
 
@@ -132,9 +137,21 @@ function Deploy() {
   const currentBranch = gitMetaData?.branchName;
   const dispatch = useDispatch();
 
+  const currentApplication = useSelector(getCurrentApplication);
+  const isAutoUpdate = currentApplication?.isAutoUpdate || false;
+  const isManualUpdate = currentApplication?.isManualUpdate || true;
+  const changeReason = isAutoUpdate
+    ? isManualUpdate
+      ? CHANGES_USER_AND_MIGRATION
+      : CHANGES_ONLY_MIGRATION
+    : CHANGES_ONLY_USER;
+  const changeReasonText = createMessage(changeReason);
+
   const handleCommit = (doPush: boolean) => {
     AnalyticsUtil.logEvent("GS_COMMIT_AND_PUSH_BUTTON_CLICK", {
       source: "GIT_DEPLOY_MODAL",
+      isAutoUpdate,
+      isManualUpdate,
     });
     if (currentBranch) {
       dispatch(
@@ -197,9 +214,15 @@ function Deploy() {
   const autogrowHeight = useAutoGrow(commitMessageDisplay, 37);
 
   return (
-    <Container>
+    <Container data-testid={"t--deploy-tab-container"}>
       <Title>{createMessage(DEPLOY_YOUR_APPLICATION)}</Title>
       <Section>
+        <Text
+          data-testid={"t--git-deploy-change-reason-text"}
+          type={TextType.P1}
+        >
+          {changeReasonText}
+        </Text>
         <GitChanged />
         <Row>
           <SectionTitle>

app/client/src/pages/Editor/gitSync/components/GitChanged.tsx

@@ -3,97 +3,132 @@ import styled from "constants/DefaultTheme";
 import { Classes } from "components/ads/common";
 import Text, { TextType } from "components/ads/Text";
 import { Colors } from "constants/Colors";
-import Icon, { IconName, IconSize } from "components/ads/Icon";
+import Icon, { IconSize } from "components/ads/Icon";
 import { useSelector } from "react-redux";
 import {
   getGitStatus,
   getIsFetchingGitStatus,
 } from "selectors/gitSyncSelectors";
+import { GitStatusData } from "../../../../reducers/uiReducers/gitSyncReducer";
 
-const Skeleton = styled.div`
-  width: 135px;
+const DummyChange = styled.div`
+  width: 50%;
   height: ${(props) => props.theme.spaces[9]}px;
   background: linear-gradient(
     90deg,
     ${Colors.GREY_2} 0%,
     rgba(240, 240, 240, 0) 100%
   );
-  margin-right: ${(props) => props.theme.spaces[8] + 5}px;
+  margin-top: ${(props) => props.theme.spaces[7]}px;
+  margin-bottom: ${(props) => props.theme.spaces[7]}px;
 `;
 
 const Wrapper = styled.div`
-  width: 178px;
   height: ${(props) => props.theme.spaces[9]}px;
+  margin-bottom: ${(props) => props.theme.spaces[7]}px;
   display: flex;
+
   .${Classes.ICON} {
     margin-right: ${(props) => props.theme.spaces[3]}px;
   }
+
   .${Classes.TEXT} {
     padding-top: ${(props) => props.theme.spaces[1] - 2}px;
   }
 `;
 
-const GitChangedRow = styled.div`
-  display: flex;
-  align-items: center;
+const Statuses = styled.div`
+  margin-top: ${(props) => props.theme.spaces[7]}px;
   margin-bottom: ${(props) => props.theme.spaces[11]}px;
 `;
 
 export enum Kind {
-  widget = "widget",
-  query = "query",
-  commit = "commit",
-  // pullRequest = "pullRequest",
+  WIDGET = "WIDGET",
+  QUERY = "QUERY",
+  COMMIT = "COMMIT",
+  JS_OBJECT = "JS_OBJECT",
 }
 
-type GitSyncProps = {
-  type: Kind;
+type StatusProps = {
+  iconName: string;
+  message: string;
+  hasValue: boolean;
 };
 
-function GitStatus(props: GitSyncProps) {
-  const { type } = props;
-  const status: any = useSelector(getGitStatus);
-  const loading = useSelector(getIsFetchingGitStatus);
-  // const loading = true;
-  let message = "",
-    iconName: IconName;
-  switch (type) {
-    case Kind.widget:
-      message = `${status?.modifiedPages || 0} page${
-        (status?.modifiedPages || 0) === 1 ? "" : "s"
-      } updated`;
-      iconName = "widget";
-      break;
-    case Kind.query:
-      message = `${status?.modifiedQueries || 0} ${
-        (status?.modifiedQueries || 0) === 1 ? "query" : "queries"
-      } modified`;
-      iconName = "query";
-      break;
-    case Kind.commit:
-      message = `${status?.aheadCount || 0} commit${
-        (status?.aheadCount || 0) === 1 ? "" : "s"
-      } to push`;
-      iconName = "git-commit";
-      break;
-  }
-  return loading ? (
-    <Skeleton />
-  ) : (
+type StatusMap = {
+  [key in Kind]: (status: GitStatusData) => StatusProps;
+};
+
+const STATUS_MAP: StatusMap = {
+  [Kind.WIDGET]: (status: GitStatusData) => ({
+    message: `${status?.modifiedPages || 0} ${
+      (status?.modifiedPages || 0) <= 1 ? "page" : "pages"
+    } updated`,
+    iconName: "widget",
+    hasValue: (status?.modifiedPages || 0) > 0,
+  }),
+  [Kind.QUERY]: (status: GitStatusData) => ({
+    message: `${status?.modifiedQueries || 0} ${
+      (status?.modifiedQueries || 0) <= 1 ? "query" : "queries"
+    } modified`,
+    iconName: "query",
+    hasValue: (status?.modifiedQueries || 0) > 0,
+  }),
+  [Kind.COMMIT]: (status: GitStatusData) => ({
+    message: commitMessage(status),
+    iconName: "git-commit",
+    hasValue: (status?.aheadCount || 0) > 0 || (status?.behindCount || 0) > 0,
+  }),
+  [Kind.JS_OBJECT]: (status: GitStatusData) => ({
+    message: `${status?.modifiedJSObjects || 0} JS ${
+      (status?.modifiedJSObjects || 0) <= 1 ? "Object" : "Objects"
+    } modified`,
+    iconName: "js",
+    hasValue: (status?.modifiedJSObjects || 0) > 0,
+  }),
+};
+
+function commitMessage(status: GitStatusData) {
+  const aheadCount = status?.aheadCount || 0;
+  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 ");
+}
+
+function Status(props: Partial<StatusProps>) {
+  const { iconName, message } = props;
+
+  return (
     <Wrapper>
-      <Icon fillColor={Colors.GREY_10} name={iconName} size={IconSize.XXL} />
+      <Icon name={iconName} size={IconSize.XXL} />
       <Text type={TextType.P3}>{message}</Text>
     </Wrapper>
   );
 }
 
 export default function GitChanged() {
-  const gitStatus: any = useSelector(getGitStatus);
-  return (
-    <GitChangedRow>
-      <GitStatus type={Kind.widget} />
-      <GitStatus type={Kind.query} />
-      {gitStatus?.aheadCount > 0 && <GitStatus type={Kind.commit} />}
-    </GitChangedRow>
+  const status: GitStatusData = useSelector(getGitStatus) as GitStatusData;
+  const loading = useSelector(getIsFetchingGitStatus);
+  const statuses = [Kind.WIDGET, Kind.QUERY, Kind.COMMIT, Kind.JS_OBJECT]
+    .map((type: Kind) => STATUS_MAP[type](status))
+    .map((s) =>
+      s.hasValue ? <Status {...s} key={`change-status-${s.iconName}`} /> : null,
+    )
+    .filter((s) => !!s);
+  return loading ? (
+    <DummyChange data-testid={"t--git-change-loading-dummy"} />
+  ) : (
+    <Statuses data-testid={"t--git-change-statuses"}>{statuses}</Statuses>
   );
 }

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

@@ -450,6 +450,7 @@ export type GitStatusData = {
   modifiedPages: number;
   modifiedQueries: number;
   remoteBranch: string;
+  modifiedJSObjects: number;
 };
 
 type GitErrorPayloadType = {