Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

fix: Git sync common UI (#8768)

Browse Source 
* 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 <rishabh.robben@gmail.com>
This commit is contained in:
Rishabh Rathod 2021-10-26 01:27:58 +05:30 committed by GitHub
parent 8e10c4678f
commit 6b0259fe01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 260 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/client/src/actions/gitSyncActions.ts
View File

@ -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,
});

20
app/client/src/api/GitSyncAPI.tsx
View File

@ -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<ApiResponse> {
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,
});
}

3
app/client/src/assets/icons/ads/cloudy-line.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6666 7.9987C10.368 7.9987 8.16363 8.91179 6.53831 10.5371C4.91299 12.1624 3.9999 14.3668 3.9999 16.6654C3.9999 18.9639 4.91299 21.1683 6.53831 22.7936C8.16363 24.4189 10.368 25.332 12.6666 25.332H21.9999C22.8415 25.3312 23.6735 25.1534 24.4418 24.8101C25.2102 24.4667 25.8977 23.9656 26.4598 23.3393C27.0218 22.7129 27.4459 21.9753 27.7043 21.1744C27.9627 20.3735 28.0497 19.5272 27.9597 18.6904C27.8697 17.8537 27.6047 17.0452 27.1819 16.3176C26.7591 15.5899 26.1879 14.9594 25.5055 14.4668C24.8231 13.9743 24.0448 13.6309 23.221 13.4588C22.3972 13.2867 21.5464 13.2899 20.7239 13.468C20.083 11.8544 18.9723 10.4703 17.5357 9.49514C16.0992 8.51998 14.4029 7.99866 12.6666 7.9987ZM21.9999 27.9987H12.6666C10.6935 27.9982 8.75483 27.4827 7.04218 26.5031C5.32954 25.5234 3.9023 24.1137 2.90165 22.4132C1.90101 20.7128 1.36161 18.7806 1.33683 16.8077C1.31205 14.8348 1.80274 12.8897 2.76036 11.1646C3.71798 9.43961 5.10935 7.99444 6.79685 6.97211C8.48435 5.94978 10.4095 5.38571 12.3819 5.33568C14.3543 5.28565 16.3056 5.7514 18.0427 6.68686C19.7799 7.62233 21.2427 8.99509 22.2866 10.6694C24.5635 10.7383 26.7217 11.7008 28.2944 13.3488C29.867 14.9969 30.7276 17.1978 30.6899 19.4754C30.6522 21.7531 29.7193 23.9243 28.093 25.5194C26.4668 27.1145 24.2779 28.0051 21.9999 27.9987Z" fill="#858282"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

37
app/client/src/components/ads/Text.tsx
View File

@ -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) =>

1
app/client/src/constants/Colors.tsx
View File

@ -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",

3
app/client/src/constants/ReduxActionConstants.tsx
View File

@ -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",

7
app/client/src/constants/messages.ts
View File

@ -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 = () =>

38
app/client/src/pages/Editor/gitSync/Tabs/GitConnection.tsx
View File

@ -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 && (
<ButtonContainer topMargin={!isInvalidRemoteUrl ? 10 : 14}>
<ButtonContainer topMargin={10}>
<Button
category={Category.secondary}
category={Category.primary}
className="t--submit-repo-url-button"
disabled={!remoteUrl || isInvalidRemoteUrl}
isLoading={generatingSSHKey || fetchingSSHKeyPair}
onClick={() => generateSSHKey()}
size={Size.medium}
size={Size.large}
tag="button"
text="Generate SSH Key"
text={createMessage(GENERATE_KEY)}
/>
</ButtonContainer>
)
) : (
<>
<FlexRow>
<DeployedKeyContainer>
<DeployedKeyContainer $marginTop={8}>
<FlexRow>
<Flex>
<KeySvg />
@ -521,13 +528,18 @@ function GitConnection({ isImport }: Props) {
/>
<ButtonContainer topMargin={11}>
<Button
category={isGitConnected ? Category.secondary : Category.primary}
className="t--connect-submit-btn"
disabled={submitButtonDisabled}
isLoading={submitButtonIsLoading}
onClick={onSubmit}
size={Size.large}
tag="button"
text={isGitConnected ? "UPDATE CONFIG" : "CONNECT"}
text={
isGitConnected
? createMessage(UPDATE_CONFIG)
: createMessage(CONNECT_BTN_LABEL)
}
/>
</ButtonContainer>
</>

66
app/client/src/pages/Editor/gitSync/Tabs/Merge.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useMemo, useState, useCallback } from "react";
import { Title, Caption, Space } from "../components/StyledComponents";
import Dropdown from "components/ads/Dropdown";
@ -11,10 +11,13 @@ import { ReactComponent as MergeIcon } from "assets/icons/ads/git-merge.svg";
import { ReactComponent as LeftArrow } from "assets/icons/ads/arrow-left-1.svg";
import styled from "styled-components";
import * as log from "loglevel";
// import * as log from "loglevel";
import Button, { Size } from "components/ads/Button";
import { useSelector } from "react-redux";
import { useSelector, useDispatch } from "react-redux";
import { getCurrentAppGitMetaData } from "selectors/applicationSelectors";
import { getGitBranches } from "selectors/gitSyncSelectors";
import { DropdownOptions } from "../../GeneratePage/components/constants";
import { mergeBranchInit } from "../../../../actions/gitSyncActions";
const Row = styled.div`
display: flex;
@ -23,22 +26,68 @@ const Row = styled.div`
// mock data
const listOfBranchesExceptCurrentBranch = [
{ label: "Master", value: "master" },
{
label: "Feature/new",
value: "Feature/new",
},
{
label: "FeatureA",
value: "FeatureA",
},
{
label: "FeatureB",
value: "FeatureB",
},
{
label: "FeatureC",
value: "FeatureC",
},
];
export default function Merge() {
const gitMetaData = useSelector(getCurrentAppGitMetaData);
const gitBranches = useSelector(getGitBranches);
const dispatch = useDispatch();
const currentBranch = gitMetaData?.branchName;
const [selectedBranch, setSelectedBranch] = useState(currentBranch);
const branchList = useMemo(() => {
const listOfBranches: DropdownOptions = [];
gitBranches.map((branchObj) => {
if (currentBranch !== branchObj.branchName) {
if (!branchObj.default) {
listOfBranches.push({
label: branchObj.branchName,
data: { idDefault: branchObj.default },
});
} else {
listOfBranches.unshift({
label: branchObj.branchName,
data: { idDefault: branchObj.default },
});
}
}
});
return listOfBranches;
}, [gitBranches]);
const currentBranchDropdownOption = {
label: currentBranch || "",
value: currentBranch || "",
};
const mergeHandler = useCallback(() => {
if (currentBranch && selectedBranch) {
dispatch(
mergeBranchInit({
sourceBranch: currentBranch,
destinationBranch: selectedBranch,
}),
);
}
}, [currentBranch, selectedBranch, dispatch]);
return (
<>
<Title>{createMessage(MERGE_CHANGES)}</Title>
@ -50,11 +99,11 @@ export default function Merge() {
<Space horizontal size={3} />
<Dropdown
fillOptions
onSelect={() => {
log.debug("selected");
onSelect={(value?: string) => {
setSelectedBranch(value);
}}
options={listOfBranchesExceptCurrentBranch}
selected={{ label: "Master", value: "master" }}
options={listOfBranchesExceptCurrentBranch || branchList}
selected={{ label: selectedBranch, value: selectedBranch }}
showLabelOnly
width={"220px"}
/>
@ -72,6 +121,7 @@ export default function Merge() {
</Row>
<Space size={10} />
<Button
onClick={mergeHandler}
size={Size.medium}
text={createMessage(MERGE_CHANGES)}
width="max-content"

4
app/client/src/pages/Editor/gitSync/components/BranchList.tsx
View File

@ -15,7 +15,7 @@ import {
import {
getCurrentGitBranch,
getFetchingBranches,
getGitBranches,
getGitBranchNames,
} from "selectors/gitSyncSelectors";
import Skeleton from "components/utils/Skeleton";
@ -111,7 +111,7 @@ export default function BranchList(props: {
setIsPopupOpen?: (flag: boolean) => void;
setShowCreateNewBranchForm?: (flag: boolean) => void;
}) {
const branches = useSelector(getGitBranches);
const branches = useSelector(getGitBranchNames);
const [activeHoverIndex, setActiveHoverIndexInState] = useState(0);
useEffect(() => {

82
app/client/src/pages/Editor/gitSync/components/DeployPreview.tsx
View File

@ -1,10 +1,8 @@
import React from "react";
import {
Subtitle,
Title,
} from "pages/Editor/gitSync/components/StyledComponents";
import styled from "styled-components";
import Button, { Category, Size } from "components/ads/Button";
import { ReactComponent as CloudyIcon } from "assets/icons/ads/cloudy-line.svg";
import { ReactComponent as RightArrow } from "assets/icons/ads/arrow-right-line.svg";
// import AnalyticsUtil from "utils/AnalyticsUtil";
import { getApplicationViewerPageURL } from "constants/routes";
@ -14,34 +12,59 @@ import {
getCurrentPageId,
} from "selectors/editorSelectors";
import {
CHECK_DP,
LATEST_DP_TITLE,
LATEST_DP_SUBTITLE,
createMessage,
} from "constants/messages";
import Text, { TextType, Case } from "components/ads/Text";
import { Colors } from "constants/Colors";
const Container = styled.div`
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
flex-direction: row;
position: absolute;
justify-content: flex-end;
/* bottom: ${(props) => `${props.theme.spaces[8]}px`}; */
bottom: 30px;
width: calc(100% - 30px);
position: absolute;
`;
const Separator = styled.div`
height: 1px;
width: 85%;
background-color: ${(props) => props.theme.colors.gitSyncModal.separator};
const ButtonWrapper = styled.div`
display: flex;
flex-direction: row;
padding-top: 2px;
cursor: pointer;
`;
const IconWrapper = styled.div`
margin-left: 2px;
justify-content: center;
align-items: center;
display: flex;
svg {
path {
fill: ${Colors.GREY_9};
}
}
`;
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() {
const applicationId = useSelector(getCurrentApplicationId);
const pageId = useSelector(getCurrentPageId);
const showDeployPreview = () => {
const path = getApplicationViewerPageURL({ applicationId, pageId });
window.open(path, "_blank");
@ -49,16 +72,27 @@ export default function DeployPreview() {
return (
<Container>
<Separator />
<Title>{createMessage(LATEST_DP_TITLE)}</Title>
<Subtitle>{createMessage(LATEST_DP_SUBTITLE)}</Subtitle>
<Button
category={Category.tertiary}
onClick={showDeployPreview}
size={Size.medium}
text={createMessage(CHECK_DP)}
width="max-content"
/>
<CloudIconWrapper>
<CloudyIcon />
</CloudIconWrapper>
<ContentWrapper>
<ButtonWrapper onClick={showDeployPreview}>
<Text
case={Case.UPPERCASE}
color={Colors.GREY_9}
type={TextType.P1}
weight="600"
>
{createMessage(LATEST_DP_TITLE)}
</Text>
<IconWrapper>
<RightArrow width={20} />
</IconWrapper>
</ButtonWrapper>
<Text color={Colors.GREY_6} type={TextType.P3}>
{createMessage(LATEST_DP_SUBTITLE)}
</Text>
</ContentWrapper>
</Container>
);
}

4
app/client/src/pages/Editor/gitSync/constants.ts
View File

@ -2,7 +2,7 @@ import {
createMessage,
GIT_CONNECTION,
DEPLOY,
// MERGE,
MERGE,
} from "constants/messages";
export enum MENU_ITEM {
@ -17,7 +17,7 @@ export const MENU_ITEMS_MAP = {
title: createMessage(GIT_CONNECTION),
},
[MENU_ITEM.DEPLOY]: { key: MENU_ITEM.DEPLOY, title: createMessage(DEPLOY) },
// [MENU_ITEM.MERGE]: { key: MENU_ITEM.MERGE, title: createMessage(MERGE) },
[MENU_ITEM.MERGE]: { key: MENU_ITEM.MERGE, title: createMessage(MERGE) },
// Hide Merge Tab till basic functionality is not ready
};

2
app/client/src/reducers/uiReducers/gitSyncReducer.ts
View File

@ -261,7 +261,7 @@ export type GitSyncReducerState = {
isDisconnectingGit: boolean;
branches: string[];
branches: Array<{ branchName: string; default: boolean }>;
fetchingBranches: boolean;
isFetchingLocalGitConfig?: boolean;
isFetchingGitStatus: boolean;

31
app/client/src/sagas/GitSyncSagas.ts
View File

@ -44,6 +44,11 @@ import { fetchApplication } from "../actions/applicationActions";
import { APP_MODE } from "entities/App";
import history from "utils/history";
import { addBranchParam } from "constants/routes";
import { MergeBranchPayload } from "../api/GitSyncAPI";
import {
mergeBranchSuccess,
mergeBranchFailure,
} from "../actions/gitSyncActions";
function* commitToGitRepoSaga(
action: ReduxAction<{
@ -331,6 +336,31 @@ function* fetchGitStatusSaga() {
}
}
function* mergeBranchSaga(action: ReduxAction<MergeBranchPayload>) {
try {
const applicationId: string = yield select(getCurrentApplicationId);
const { destinationBranch, sourceBranch } = action.payload;
const response: ApiResponse = yield GitSyncAPI.merge({
applicationId,
sourceBranch,
destinationBranch,
});
const isValidResponse: boolean = yield validateResponse(response);
if (isValidResponse) {
yield put(mergeBranchSuccess());
Toaster.show({
text: "Merge Successful",
variant: Variant.success,
});
}
} catch (error) {
yield put(mergeBranchFailure());
}
}
export default function* gitSyncSagas() {
yield all([
takeLatest(ReduxActionTypes.COMMIT_TO_GIT_REPO_INIT, commitToGitRepoSaga),
@ -361,5 +391,6 @@ export default function* gitSyncSagas() {
updateLocalGitConfig,
),
takeLatest(ReduxActionTypes.FETCH_GIT_STATUS_INIT, fetchGitStatusSaga),
takeLatest(ReduxActionTypes.MERGE_BRANCH_INIT, mergeBranchSaga),
]);
}

4
app/client/src/selectors/gitSyncSelectors.tsx
View File

@ -70,6 +70,10 @@ export const getIsGitConnected = createSelector(
);
export const getGitBranches = (state: AppState) => state.ui.gitSync.branches;
export const getGitBranchNames = createSelector(getGitBranches, (branches) =>
branches.map((branchObj) => branchObj.branchName),
);
export const getFetchingBranches = (state: AppState) =>
state.ui.gitSync.fetchingBranches;