From 6b0259fe01027f95500579315264c45307c65ecd Mon Sep 17 00:00:00 2001 From: Rishabh Rathod Date: Tue, 26 Oct 2021 01:27:58 +0530 Subject: [PATCH] fix: Git sync common UI (#8768) * fix git branches and modal ui fixes * fix deploy preview UI * Add Merge API * fix: udpate key to branchName * add messages to constant/messages.ts Co-authored-by: rishabh saxena --- app/client/src/actions/gitSyncActions.ts | 16 ++++ app/client/src/api/GitSyncAPI.tsx | 20 ++++- .../src/assets/icons/ads/cloudy-line.svg | 3 + app/client/src/components/ads/Text.tsx | 37 +++++++-- app/client/src/constants/Colors.tsx | 1 + .../src/constants/ReduxActionConstants.tsx | 3 + app/client/src/constants/messages.ts | 7 ++ .../Editor/gitSync/Tabs/GitConnection.tsx | 38 ++++++--- .../src/pages/Editor/gitSync/Tabs/Merge.tsx | 66 +++++++++++++-- .../Editor/gitSync/components/BranchList.tsx | 4 +- .../gitSync/components/DeployPreview.tsx | 82 +++++++++++++------ .../src/pages/Editor/gitSync/constants.ts | 4 +- .../src/reducers/uiReducers/gitSyncReducer.ts | 2 +- app/client/src/sagas/GitSyncSagas.ts | 31 +++++++ app/client/src/selectors/gitSyncSelectors.tsx | 4 + 15 files changed, 260 insertions(+), 58 deletions(-) create mode 100644 app/client/src/assets/icons/ads/cloudy-line.svg diff --git a/app/client/src/actions/gitSyncActions.ts b/app/client/src/actions/gitSyncActions.ts index 5a3f05dd82..f439ea0eed 100644 --- a/app/client/src/actions/gitSyncActions.ts +++ b/app/client/src/actions/gitSyncActions.ts @@ -4,6 +4,7 @@ import { ReduxActionWithCallbacks } from "constants/ReduxActionConstants"; import { GitSyncModalTab, GitConfig } from "entities/GitSync"; import { GitApplicationMetadata } from "api/ApplicationApi"; import { GitStatusData } from "reducers/uiReducers/gitSyncReducer"; +import { ReduxActionErrorTypes } from "../constants/ReduxActionConstants"; // test comment @@ -178,3 +179,18 @@ export const updateBranchLocally = (payload: string) => ({ type: ReduxActionTypes.UPDATE_BRANCH_LOCALLY, payload, }); + +type MergeBranchPayload = { sourceBranch: string; destinationBranch: string }; + +export const mergeBranchInit = (payload: MergeBranchPayload) => ({ + type: ReduxActionTypes.MERGE_BRANCH_INIT, + payload, +}); + +export const mergeBranchSuccess = () => ({ + type: ReduxActionTypes.MERGE_BRANCH_SUCCESS, +}); + +export const mergeBranchFailure = () => ({ + type: ReduxActionErrorTypes.MERGE_BRANCH_ERROR, +}); diff --git a/app/client/src/api/GitSyncAPI.tsx b/app/client/src/api/GitSyncAPI.tsx index ea237eebee..3cf7e7ff38 100644 --- a/app/client/src/api/GitSyncAPI.tsx +++ b/app/client/src/api/GitSyncAPI.tsx @@ -15,6 +15,12 @@ export type PushToGitPayload = { branch: string; }; +export type MergeBranchPayload = { + applicationId: string; + sourceBranch: string; + destinationBranch: string; +}; + export type ConnectToGitPayload = { remoteUrl: string; gitProfile: { @@ -57,6 +63,16 @@ class GitSyncAPI extends Api { ); } + static merge({ + applicationId, + destinationBranch, + sourceBranch, + }: MergeBranchPayload): AxiosPromise { + return Api.post( + `${GitSyncAPI.baseURL}/merge/${applicationId}?sourceBranch=${sourceBranch}&destinationBranch=${destinationBranch}`, + ); + } + static connect(payload: ConnectToGitPayload, applicationId: string) { return Api.post(`${GitSyncAPI.baseURL}/connect/${applicationId}`, payload); } @@ -79,13 +95,13 @@ class GitSyncAPI extends Api { static checkoutBranch(applicationId: string, branch: string) { return Api.get(`${GitSyncAPI.baseURL}/checkout-branch/${applicationId}`, { - branch, + branchName: branch, }); } static createNewBranch(applicationId: string, branch: string) { return Api.post(`${GitSyncAPI.baseURL}/create-branch/${applicationId}`, { - branch, + branchName: branch, }); } diff --git a/app/client/src/assets/icons/ads/cloudy-line.svg b/app/client/src/assets/icons/ads/cloudy-line.svg new file mode 100644 index 0000000000..50f51492c2 --- /dev/null +++ b/app/client/src/assets/icons/ads/cloudy-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/components/ads/Text.tsx b/app/client/src/components/ads/Text.tsx index 735408f014..f49b5fc210 100644 --- a/app/client/src/components/ads/Text.tsx +++ b/app/client/src/components/ads/Text.tsx @@ -1,5 +1,7 @@ import styled from "styled-components"; import { ThemeProp, Classes, CommonComponentProps } from "./common"; +import { Theme } from "constants/DefaultTheme"; +import { TypographyKeys } from "../../constants/typography"; export enum TextType { P1 = "p1", @@ -31,7 +33,7 @@ export type TextProps = CommonComponentProps & { italic?: boolean; case?: Case; className?: string; - weight?: FontWeight; + weight?: FontWeight | string; highlight?: boolean; textAlign?: string; color?: string; @@ -56,6 +58,29 @@ const typeSelector = (props: TextProps & ThemeProp): string => { return color; }; +const getFontWeight = ({ + theme, + type, + weight, +}: { + theme: Theme; + weight: string | undefined; + type: TypographyKeys; +}) => { + if (weight) { + switch (weight) { + case FontWeight.BOLD: + return theme.fontWeights[2]; + case FontWeight.NORMAL: + return "normal"; + default: + return weight; + } + } else { + return theme.typography[type].fontWeight; + } +}; + const Text = styled.span.attrs((props: TextProps) => ({ className: props.className ? props.className + Classes.TEXT : Classes.TEXT, "data-cy": props.cypressSelector, @@ -63,11 +88,11 @@ const Text = styled.span.attrs((props: TextProps) => ({ text-decoration: ${(props) => (props.underline ? "underline" : "unset")}; font-style: ${(props) => (props.italic ? "italic" : "normal")}; font-weight: ${(props) => - props.weight - ? props.weight === FontWeight.BOLD - ? props.theme.fontWeights[2] - : "normal" - : props.theme.typography[props.type].fontWeight}; + getFontWeight({ + theme: props.theme, + type: props.type, + weight: props.weight, + })}; font-size: ${(props) => props.theme.typography[props.type].fontSize}px; line-height: ${(props) => props.theme.typography[props.type].lineHeight}px; letter-spacing: ${(props) => diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx index 9e617f6707..b335b999cc 100644 --- a/app/client/src/constants/Colors.tsx +++ b/app/client/src/constants/Colors.tsx @@ -135,6 +135,7 @@ export const Colors = { GREY_2: "#F0F0F0", GREY_3: "#EBEBEB", GREY_5: "#E0DEDE", + GREY_6: "#A9A7A7", GREY_7: "#858282", GREY_8: "#716E6E", GREY_9: "#4B4848", diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx index a7db847ae9..604d15ce90 100644 --- a/app/client/src/constants/ReduxActionConstants.tsx +++ b/app/client/src/constants/ReduxActionConstants.tsx @@ -11,6 +11,8 @@ export const ReduxSagaChannels = { }; export const ReduxActionTypes = { + MERGE_BRANCH_INIT: "MERGE_BRANCH_INIT", + MERGE_BRANCH_SUCCESS: "MERGE_BRANCH_SUCCESS", FETCH_GIT_STATUS_INIT: "FETCH_GIT_STATUS_INIT", FETCH_GIT_STATUS_SUCCESS: "FETCH_GIT_STATUS_SUCCESS", UPDATE_BRANCH_LOCALLY: "UPDATE_BRANCH_LOCALLY", @@ -622,6 +624,7 @@ export const ReduxActionTypes = { export type ReduxActionType = typeof ReduxActionTypes[keyof typeof ReduxActionTypes]; export const ReduxActionErrorTypes = { + MERGE_BRANCH_ERROR: "MERGE_BRANCH_ERROR", FETCH_GIT_STATUS_ERROR: "FETCH_GIT_STATUS_ERROR", CREATE_NEW_BRANCH_ERROR: "CREATE_NEW_BRANCH_ERROR", CHECKOUT_BRANCH_ERROR: "CHECKOUT_BRANCH_ERROR", diff --git a/app/client/src/constants/messages.ts b/app/client/src/constants/messages.ts index 951f48ade0..b134be4fe9 100644 --- a/app/client/src/constants/messages.ts +++ b/app/client/src/constants/messages.ts @@ -589,6 +589,13 @@ export const SUBMIT = () => "SUBMIT"; export const GIT_USER_UPDATED_SUCCESSFULLY = () => "Git user updated successfully"; export const REMOTE_URL_INPUT_PLACEHOLDER = () => "Paste Your URL here"; +export const COPIED_SSH_KEY = () => "Copied SSH Key"; +export const INVALID_USER_DETAILS_MSG = () => "Please enter valid user details"; +export const PASTE_SSH_URL_INFO = () => + "Please paste SSH URL of your repository"; +export const GENERATE_KEY = () => "Generate Key"; +export const UPDATE_CONFIG = () => "UPDATE CONFIG"; +export const CONNECT_BTN_LABEL = () => "CONNECT"; // JS Snippets export const SNIPPET_DESCRIPTION = () => diff --git a/app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx b/app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx index 8b7eab9be6..336fa2afba 100644 --- a/app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx +++ b/app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx @@ -42,6 +42,14 @@ import TooltipComponent from "components/ads/Tooltip"; import { getLocalGitConfig } from "selectors/gitSyncSelectors"; import { emailValidator } from "components/ads/TextInput"; import { isEqual } from "lodash"; +import { + UPDATE_CONFIG, + CONNECT_BTN_LABEL, + PASTE_SSH_URL_INFO, + GENERATE_KEY, + COPIED_SSH_KEY, + INVALID_USER_DETAILS_MSG, +} from "constants/messages"; import { getIsFetchingGlobalGitConfig, getIsFetchingLocalGitConfig, @@ -98,8 +106,9 @@ const Icon = styled.span<{ } `; -const DeployedKeyContainer = styled.div` - margin: 8px 0px; +const DeployedKeyContainer = styled.div<{ $marginTop: number }>` + margin-top: ${(props) => `${props.theme.spaces[props.$marginTop]}px`}; + margin-bottom: 8px; height: 50px; width: calc(100% - 30px); background-color: ${Colors.Gallery}; @@ -275,7 +284,7 @@ function GitConnection({ isImport }: Props) { stopShowingCopiedAfterDelay(); Toaster.show({ - text: "Copied SSH Key", + text: createMessage(COPIED_SSH_KEY), variant: Variant.success, }); } @@ -331,7 +340,7 @@ function GitConnection({ isImport }: Props) { } } else { Toaster.show({ - text: "Please enter valid user details", + text: createMessage(INVALID_USER_DETAILS_MSG), }); } }, [ @@ -422,9 +431,7 @@ function GitConnection({ isImport }: Props) { className="t--git-repo-input" disabled={remoteUrl === remoteUrlInStore && !!remoteUrl} errorMsg={ - isInvalidRemoteUrl - ? "Please paste SSH URL of your repository" - : "" + isInvalidRemoteUrl ? createMessage(PASTE_SSH_URL_INFO) : "" } fill onChange={remoteUrlChangeHandler} @@ -444,23 +451,23 @@ function GitConnection({ isImport }: Props) { {!SSHKeyPair ? ( remoteUrl && ( - +