diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 55b37a48ce..05b96af8a8 100644 --- 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"; diff --git a/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx b/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx index 1cd7d435e2..19856e67ef 100644 --- 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(); + useEffect(() => { + if (scrollWrapperRef.current) { + setTimeout(() => { + const top = scrollWrapperRef.current?.scrollHeight || 0; + scrollWrapperRef.current?.scrollTo({ + top: top, + }); + }, 100); + } + }, [scrollWrapperRef]); + return ( - + {createMessage(DEPLOY_YOUR_APPLICATION)}
{hasChangesToCommit && ( @@ -284,7 +311,7 @@ function Deploy() { {changeReasonText} )} - + {createMessage(COMMIT_TO)} @@ -435,6 +462,7 @@ function Deploy() { {!pullRequired && !isConflicting && ( )} + ); } diff --git a/app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx b/app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx index 4cf6075ba5..2068b0754f 100644 --- 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; } `; diff --git a/app/client/src/pages/Editor/gitSync/components/DeployPreview.tsx b/app/client/src/pages/Editor/gitSync/components/DeployPreview.tsx index 9e7fd81c27..5443bcd6c8 100644 --- 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 ? ( - +
{props.showSuccess ? ( ) : ( )} - - +
+
{lastDeployedAtMsg} - +
) : null; } diff --git a/app/client/src/pages/Editor/gitSync/components/DiscardChangesWarning.tsx b/app/client/src/pages/Editor/gitSync/components/DiscardChangesWarning.tsx index 1fcb4c559e..6ee047cdd7 100644 --- 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 ? ( + + {createMessage(CURRENT_PAGE_DISCARD_WARNING, pageName)} + + ) : 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 ( - + <> + +
+ + ); diff --git a/app/client/src/pages/Editor/gitSync/components/GitChangesList.test.tsx b/app/client/src/pages/Editor/gitSync/components/GitChangesList.test.tsx index 1d7025000f..61e76e66c4 100644 --- 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", () => { diff --git a/app/client/src/pages/Editor/gitSync/components/GitChangesList.tsx b/app/client/src/pages/Editor/gitSync/components/GitChangesList.tsx index 88147b8c1d..1a13cdc084 100644 --- 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) { @@ -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( + , + ); + } return loading ? ( ) : ( diff --git a/app/client/src/pages/Editor/gitSync/utils.test.ts b/app/client/src/pages/Editor/gitSync/utils.test.ts index 172ffa5870..9c661536c1 100644 --- 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, }; diff --git a/app/client/src/pages/Editor/gitSync/utils.ts b/app/client/src/pages/Editor/gitSync/utils.ts index 7d56d8a035..6bee7cc8ca 100644 --- 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 }; }