+
{currentBranch}
{!status?.isClean && "*"}
diff --git a/app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx b/app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx
index d76bd9c6ec..2ade4e6bdd 100644
--- a/app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx
+++ b/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,
diff --git a/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx b/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx
index e541d46869..ec9f92ba31 100644
--- a/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx
+++ b/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 (
-
+
{createMessage(DEPLOY_YOUR_APPLICATION)}
+
+ {changeReasonText}
+
diff --git a/app/client/src/pages/Editor/gitSync/components/GitChanged.tsx b/app/client/src/pages/Editor/gitSync/components/GitChanged.tsx
index fd741df21d..ecab2133b7 100644
--- a/app/client/src/pages/Editor/gitSync/components/GitChanged.tsx
+++ b/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 ? (
-
- ) : (
+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) {
+ const { iconName, message } = props;
+
+ return (
-
+
{message}
);
}
export default function GitChanged() {
- const gitStatus: any = useSelector(getGitStatus);
- return (
-
-
-
- {gitStatus?.aheadCount > 0 && }
-
+ 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 ? : null,
+ )
+ .filter((s) => !!s);
+ return loading ? (
+
+ ) : (
+ {statuses}
);
}
diff --git a/app/client/src/reducers/uiReducers/gitSyncReducer.ts b/app/client/src/reducers/uiReducers/gitSyncReducer.ts
index 751a1a65c7..05ca1ecff5 100644
--- a/app/client/src/reducers/uiReducers/gitSyncReducer.ts
+++ b/app/client/src/reducers/uiReducers/gitSyncReducer.ts
@@ -450,6 +450,7 @@ export type GitStatusData = {
modifiedPages: number;
modifiedQueries: number;
remoteBranch: string;
+ modifiedJSObjects: number;
};
type GitErrorPayloadType = {