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

feat: minor bottom bar UI updates (#7456)

Browse Source
This commit is contained in:
Rishabh Saxena 2021-09-15 19:31:32 +05:30 committed by GitHub
parent 37e7a61792
commit f277fe92e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 378 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,14 @@
import { ReduxActionTypes } from "constants/ReduxActionConstants";
import { ConnectToGitPayload } from "api/GitSyncAPI";
import { ReduxActionWithCallbacks } from "../constants/ReduxActionConstants";
import { GitSyncModalTab } from "entities/GitSync";
export const setIsGitSyncModalOpen = (isOpen: boolean) => ({
export const setIsGitSyncModalOpen = (payload: {
isOpen: boolean;
tab?: GitSyncModalTab;
}) => ({
type: ReduxActionTypes.SET_IS_GIT_SYNC_MODAL_OPEN,
payload: isOpen,
payload,
});
export const commitToRepoInit = (payload: {
@ -58,3 +62,12 @@ export const createNewBranchInit = (branchName: string) => ({
type: ReduxActionTypes.CREATE_NEW_BRANCH_INIT,
payload: branchName,
});
export const setIsGitErrorPopupVisible = (payload: { isVisible: boolean }) => ({
type: ReduxActionTypes.SHOW_ERROR_POPUP,
payload,
});
export const showCreateBranchPopup = () => ({
type: ReduxActionTypes.SHOW_CREATE_GIT_BRANCH_POPUP,
});

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

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.874 13.0019C15.6516 13.8601 15.1504 14.6202 14.4493 15.1628C13.7481 15.7054 12.8866 15.9998 12 15.9998C11.1134 15.9998 10.2519 15.7054 9.55074 15.1628C8.84957 14.6202 8.34844 13.8601 8.126 13.0019H3V11.0019H8.126C8.34844 10.1436 8.84957 9.38353 9.55074 8.84092C10.2519 8.29832 11.1134 8.00391 12 8.00391C12.8866 8.00391 13.7481 8.29832 14.4493 8.84092C15.1504 9.38353 15.6516 10.1436 15.874 11.0019H21V13.0019H15.874ZM12 14.0019C12.5304 14.0019 13.0391 13.7911 13.4142 13.4161C13.7893 13.041 14 12.5323 14 12.0019C14 11.4714 13.7893 10.9627 13.4142 10.5876C13.0391 10.2126 12.5304 10.0019 12 10.0019C11.4696 10.0019 10.9609 10.2126 10.5858 10.5876C10.2107 10.9627 10 11.4714 10 12.0019C10 12.5323 10.2107 13.041 10.5858 13.4161C10.9609 13.7911 11.4696 14.0019 12 14.0019Z" fill="#A9A7A7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 906 B

52
app/client/src/components/editorComponents/Debugger/index.tsx
View File

@ -12,7 +12,7 @@ import { Colors } from "constants/Colors";
import { getTypographyByKey } from "constants/DefaultTheme";
import { Layers } from "constants/Layers";
import { stopEventPropagation } from "utils/AppsmithUtils";
import { getFilteredErrors } from "selectors/debuggerSelectors";
import { getMessageCount } from "selectors/debuggerSelectors";
import getFeatureFlags from "utils/featureFlags";
const Container = styled.div<{ errorCount: number; warningCount: number }>`
@ -59,13 +59,7 @@ const Container = styled.div<{ errorCount: number; warningCount: number }>`
function Debugger() {
const dispatch = useDispatch();
const messageCounters = useSelector((state) => {
const errorKeys = Object.keys(getFilteredErrors(state));
const warnings = errorKeys.filter((key: string) => key.includes("warning"))
.length;
const errors = errorKeys.length - warnings;
return { errors, warnings };
});
const messageCounters = useSelector(getMessageCount);
const totalMessageCount = messageCounters.errors + messageCounters.warnings;
const showDebugger = useSelector(
@ -101,10 +95,34 @@ function Debugger() {
) : null;
}
const TriggerContainer = styled.div`
const TriggerContainer = styled.div<{
errorCount: number;
warningCount: number;
}>`
position: relative;
overflow: visible;
display: flex;
align-items: center;
margin-right: ${(props) => props.theme.spaces[4]}px;
margin-right: ${(props) => props.theme.spaces[9]}px;
.debugger-count {
color: ${Colors.WHITE};
${(props) => getTypographyByKey(props, "p3")}
height: 16px;
width: 16px;
background-color: ${(props) =>
props.errorCount + props.warningCount > 0
? props.errorCount === 0
? props.theme.colors.debugger.floatingButton.warningCount
: props.theme.colors.debugger.floatingButton.errorCount
: props.theme.colors.debugger.floatingButton.noErrorCount};
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 100%;
}
`;
export function DebuggerTrigger() {
@ -113,6 +131,10 @@ export function DebuggerTrigger() {
(state: AppState) => state.ui.debugger.isOpen,
);
const messageCounters = useSelector(getMessageCount);
const totalMessageCount = messageCounters.errors + messageCounters.warnings;
const onClick = (e: any) => {
if (!showDebugger)
AnalyticsUtil.logEvent("OPEN_DEBUGGER", {
@ -123,8 +145,16 @@ export function DebuggerTrigger() {
};
return (
<TriggerContainer>
<TriggerContainer
errorCount={messageCounters.errors}
warningCount={messageCounters.warnings}
>
<Icon name="bug" onClick={onClick} size={IconSize.XL} />
{!!messageCounters.errors && (
<div className="debugger-count t--debugger-count">
{totalMessageCount > 9 ? "9+" : totalMessageCount}
</div>
)}
</TriggerContainer>
);
}

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

@ -9,6 +9,8 @@ export const ReduxSagaChannels: { [key: string]: string } = {
};
export const ReduxActionTypes = {
SHOW_CREATE_GIT_BRANCH_POPUP: "SHOW_CREATE_GIT_BRANCH_POPUP",
SHOW_ERROR_POPUP: "SHOW_ERROR_POPUP",
CONNECT_TO_GIT_INIT: "CONNECT_TO_GIT_INIT",
CONNECT_TO_GIT_SUCCESS: "CONNECT_TO_GIT_SUCCESS",
CREATE_NEW_BRANCH_INIT: "CREATE_NEW_BRANCH_INIT",

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

@ -521,6 +521,10 @@ export const PULL = () => "PULL";
export const PUSH_CHANGES_IMMEDIATELY_TO = () => "Push changes immediately to";
export const COMMIT_AND_PUSH = () => "Commit and push";
export const COMMITTED_SUCCESSFULLY = () => "Committed Successfully";
export const CONNECT_GIT = () => "Connect Git";
export const RETRY = () => "RETRY";
export const CREATE_NEW_BRANCH = () => "CREATE NEW BRANCH";
export const ERROR_WHILE_PULLING_CHANGES = () => "ERROR WHILE PULLING CHANGES";
export const SNIPPET_DESCRIPTION = () =>
`Search and Insert code snippets to perform complex actions quickly.`;

5
app/client/src/entities/GitSync.ts Normal file
View File

@ -0,0 +1,5 @@
export enum GitSyncModalTab {
GIT_CONNECTION,
DEPLOY,
MERGE,
}

2
app/client/src/pages/Editor/EditorHeader.tsx
View File

@ -225,7 +225,7 @@ export function EditorHeader(props: EditorHeaderProps) {
);
const showGitSyncModal = useCallback(() => {
dispatch(setIsGitSyncModalOpen(true));
dispatch(setIsGitSyncModalOpen({ isOpen: true }));
}, [dispatch, setIsGitSyncModalOpen]);
const handleClickDeploy = useCallback(() => {

64
app/client/src/pages/Editor/gitSync/GitSyncModal.tsx
View File

@ -1,6 +1,9 @@
import React, { useState } from "react";
import React from "react";
import Dialog from "components/ads/DialogComponent";
import { getIsGitSyncModalOpen } from "selectors/gitSyncSelectors";
import {
getActiveGitSyncModalTab,
getIsGitSyncModalOpen,
} from "selectors/gitSyncSelectors";
import { useDispatch, useSelector } from "react-redux";
import { useCallback } from "react";
import { setIsGitSyncModalOpen } from "actions/gitSyncActions";
@ -14,6 +17,8 @@ import Icon from "components/ads/Icon";
import { Colors } from "constants/Colors";
import { Classes } from "./constants";
import GitErrorPopup from "./components/GitErrorPopup";
const Container = styled.div`
height: 600px;
width: 100%;
@ -64,35 +69,44 @@ function GitSyncModal() {
const dispatch = useDispatch();
const isModalOpen = useSelector(getIsGitSyncModalOpen);
const handleClose = useCallback(() => {
dispatch(setIsGitSyncModalOpen(false));
dispatch(setIsGitSyncModalOpen({ isOpen: false }));
}, [dispatch, setIsGitSyncModalOpen]);
const [activeTabIndex, setActiveTabIndex] = useState(0);
const activeTabIndex = useSelector(getActiveGitSyncModalTab);
const setActiveTabIndex = (index: number) =>
dispatch(setIsGitSyncModalOpen({ isOpen: true, tab: index }));
const BodyComponent =
ComponentsByTab[MENU_ITEMS[activeTabIndex].key as MENU_ITEM];
return (
<Dialog
canEscapeKeyClose
canOutsideClickClose
className={Classes.GIT_SYNC_MODAL}
isOpen={isModalOpen}
maxWidth={"900px"}
onClose={handleClose}
width={"550px"}
>
<Container>
<MenuContainer>
<Menu activeTabIndex={activeTabIndex} onSelect={setActiveTabIndex} />
</MenuContainer>
<BodyContainer>
<BodyComponent setActiveMenuIndex={setActiveTabIndex} />
</BodyContainer>
<CloseBtnContainer onClick={handleClose}>
<Icon fillColor={Colors.THUNDER_ALT} name="close-modal" />
</CloseBtnContainer>
</Container>
</Dialog>
<>
<Dialog
canEscapeKeyClose
canOutsideClickClose
className={Classes.GIT_SYNC_MODAL}
isOpen={isModalOpen}
maxWidth={"900px"}
onClose={handleClose}
width={"550px"}
>
<Container>
<MenuContainer>
<Menu
activeTabIndex={activeTabIndex}
onSelect={setActiveTabIndex}
/>
</MenuContainer>
<BodyContainer>
<BodyComponent setActiveMenuIndex={setActiveTabIndex} />
</BodyContainer>
<CloseBtnContainer onClick={handleClose}>
<Icon fillColor={Colors.THUNDER_ALT} name="close-modal" />
</CloseBtnContainer>
</Container>
</Dialog>
<GitErrorPopup />
</>
);
}

113
app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx
View File

@ -8,10 +8,28 @@ import { ReactComponent as DownArrow } from "assets/icons/ads/down-arrow.svg";
import { ReactComponent as Plus } from "assets/icons/ads/plus.svg";
import { ReactComponent as GitBranch } from "assets/icons/ads/git-branch.svg";
import { COMMIT, PUSH, PULL, MERGE, createMessage } from "constants/messages";
import {
COMMIT,
PUSH,
PULL,
MERGE,
CONNECT_GIT,
createMessage,
} from "constants/messages";
import { noop } from "lodash";
import Tooltip from "components/ads/Tooltip";
import { Colors } from "constants/Colors";
import { getTypographyByKey } from "constants/DefaultTheme";
import { getIsGitRepoSetup } from "selectors/gitSyncSelectors";
import { useDispatch, useSelector } from "react-redux";
import { ReactComponent as GitCommitLine } from "assets/icons/ads/git-commit-line.svg";
import Button, { Category, Size } from "components/ads/Button";
import { setIsGitSyncModalOpen } from "actions/gitSyncActions";
import { GitSyncModalTab } from "entities/GitSync";
type QuickActionButtonProps = {
count?: number;
icon: React.ReactNode;
onClick: () => void;
tooltipText: string;
@ -26,17 +44,41 @@ const QuickActionButtonContainer = styled.div`
background-color: ${(props) =>
props.theme.colors.editorBottomBar.buttonBackgroundHover};
}
position: relative;
overflow: visible;
z-index: 0; /* fix z-index on hover */
.count {
position: absolute;
width: 18px;
height: 18px;
display: flex;
justify-content: center;
align-items: center;
color: ${Colors.WHITE};
background-color: ${Colors.BLACK};
top: -3px;
left: 15px;
border-radius: 50%;
${(props) => getTypographyByKey(props, "p3")};
z-index: 1;
}
`;
function QuickActionButton({
count = 0,
icon,
onClick,
}: // tooltipText,
QuickActionButtonProps) {
tooltipText,
}: QuickActionButtonProps) {
return (
<QuickActionButtonContainer onClick={onClick}>
{icon}
</QuickActionButtonContainer>
<Tooltip content={tooltipText} hoverOpenDelay={1000}>
<QuickActionButtonContainer onClick={onClick}>
{icon}
{count > 0 && (
<span className="count">{count > 9 ? `${9}+` : count}</span>
)}
</QuickActionButtonContainer>
</Tooltip>
);
}
@ -79,19 +121,56 @@ const Container = styled.div`
align-items: center;
`;
export default function QuickGitActions() {
const quickActionButtons = getQuickActionButtons({
commit: noop,
push: noop,
pull: noop,
merge: noop,
});
function ConnectGitPlaceholder() {
const dispatch = useDispatch();
return (
<Container>
<BranchButton />
{quickActionButtons.map((button) => (
<QuickActionButton key={button.tooltipText} {...button} />
))}
<GitCommitLine />
<Button
category={Category.tertiary}
onClick={() => {
dispatch(setIsGitSyncModalOpen({ isOpen: true }));
}}
size={Size.small}
text={createMessage(CONNECT_GIT)}
/>
</Container>
);
}
export default function QuickGitActions() {
const isGitRepoSetup = useSelector(getIsGitRepoSetup);
const dispatch = useDispatch();
const quickActionButtons = getQuickActionButtons({
commit: () => {
dispatch(
setIsGitSyncModalOpen({
isOpen: true,
tab: GitSyncModalTab.GIT_CONNECTION,
}),
);
},
push: noop,
pull: noop,
merge: () => {
dispatch(
setIsGitSyncModalOpen({
isOpen: true,
tab: GitSyncModalTab.MERGE,
}),
);
},
});
return isGitRepoSetup ? (
<Container>
<BranchButton />
{quickActionButtons.map((button) => (
<QuickActionButton key={button.tooltipText} {...button} count={0} />
))}
</Container>
) : (
<ConnectGitPlaceholder />
);
}

124
app/client/src/pages/Editor/gitSync/components/GitErrorPopup.tsx Normal file
View File

@ -0,0 +1,124 @@
import React from "react";
import styled from "styled-components";
import { Overlay, Classes } from "@blueprintjs/core";
import { useDispatch, useSelector } from "react-redux";
import {
setIsGitErrorPopupVisible,
showCreateBranchPopup,
} from "actions/gitSyncActions";
import {
getGitError,
getIsGitErrorPopupVisible,
} from "selectors/gitSyncSelectors";
import Icon from "components/ads/Icon";
import {
createMessage,
RETRY,
CREATE_NEW_BRANCH,
ERROR_WHILE_PULLING_CHANGES,
} from "constants/messages";
import Button, { Category, Size } from "components/ads/Button";
import { Space } from "./StyledComponents";
import { debug } from "loglevel";
import { Colors } from "constants/Colors";
import { getTypographyByKey } from "constants/DefaultTheme";
const StyledGitErrorPopup = styled.div`
& {
.${Classes.OVERLAY} {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
.${Classes.OVERLAY_CONTENT} {
overflow: hidden;
bottom: ${(props) =>
`calc(${props.theme.bottomBarHeight} + ${props.theme.spaces[3]}px)`};
left: ${(props) => props.theme.spaces[3]}px;
background-color: ${Colors.WHITE};
}
}
.git-error-popup {
width: 364px;
min-height: 164px;
padding: ${(props) => props.theme.spaces[7]}px;
display: flex;
flex-direction: column;
}
}
`;
const CloseBtnContainer = styled.div`
position: absolute;
right: ${(props) => props.theme.spaces[6]}px;
top: ${(props) => props.theme.spaces[6]}px;
`;
const Title = styled.div`
${(props) => getTypographyByKey(props, "btnMedium")};
color: ${Colors.POMEGRANATE2};
`;
const Error = styled.div`
flex: 1;
overflow-wrap: anywhere;
word-break: break-word;
overflow-y: auto;
`;
function GitErrorPopup() {
const dispatch = useDispatch();
const isGitErrorPopupVisible = useSelector(getIsGitErrorPopupVisible);
const hidePopup = () => {
dispatch(setIsGitErrorPopupVisible({ isVisible: false }));
};
const gitError = useSelector(getGitError);
return (
<StyledGitErrorPopup>
<Overlay
hasBackdrop
isOpen={isGitErrorPopupVisible}
onClose={hidePopup}
transitionDuration={25}
usePortal={false}
>
<div className={Classes.OVERLAY_CONTENT}>
<div className="git-error-popup">
<Title>{createMessage(ERROR_WHILE_PULLING_CHANGES)}</Title>
<Space size={7} />
<Error>{gitError}</Error>
<div style={{ display: "flex" }}>
<Button
category={Category.tertiary}
onClick={() => {
debug("retry GIT operation");
}}
size={Size.medium}
tag="button"
text={createMessage(RETRY)}
/>
<Space horizontal size={2} />
<Button
category={Category.primary}
onClick={() => dispatch(showCreateBranchPopup())}
size={Size.medium}
tag="button"
text={createMessage(CREATE_NEW_BRANCH)}
/>
</div>
<CloseBtnContainer>
<Icon name="close-modal" onClick={hidePopup} />
</CloseBtnContainer>
</div>
</div>
</Overlay>
</StyledGitErrorPopup>
);
}
export default GitErrorPopup;

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

@ -4,20 +4,35 @@ import {
ReduxActionErrorTypes,
ReduxActionTypes,
} from "constants/ReduxActionConstants";
import { GitSyncModalTab } from "entities/GitSync";
const initialState: GitSyncReducerState = {
isGitSyncModalOpen: false,
isCommitting: false,
activeGitSyncModalTab: GitSyncModalTab.GIT_CONNECTION,
isErrorPopupVisible: false,
gitError: `
README.md app/client/cypress/support/commands.js
app/client/src/comments/CommentsShowcaseCarousel/CommentsCarouselModal.tsx
`,
};
const gitSyncReducer = createReducer(initialState, {
[ReduxActionTypes.SET_IS_GIT_SYNC_MODAL_OPEN]: (
state: GitSyncReducerState,
action: ReduxAction<boolean>,
) => ({
...state,
isGitSyncModalOpen: action.payload,
}),
action: ReduxAction<{
isOpen: boolean;
tab: GitSyncModalTab;
}>,
) => {
const activeGitSyncModalTab =
action.payload.tab || state.activeGitSyncModalTab;
return {
...state,
isGitSyncModalOpen: action.payload.isOpen,
activeGitSyncModalTab,
};
},
[ReduxActionTypes.COMMIT_TO_GIT_REPO_INIT]: (state: GitSyncReducerState) => ({
...state,
isCommitting: true,
@ -34,11 +49,21 @@ const gitSyncReducer = createReducer(initialState, {
...state,
isCommitting: false,
}),
[ReduxActionTypes.SHOW_ERROR_POPUP]: (
state: GitSyncReducerState,
action: ReduxAction<{ isVisible: boolean }>,
) => ({
...state,
isErrorPopupVisible: action.payload.isVisible,
}),
});
export type GitSyncReducerState = {
isGitSyncModalOpen: boolean;
isCommitting: boolean;
activeGitSyncModalTab: GitSyncModalTab;
isErrorPopupVisible: boolean;
gitError: string;
};
export default gitSyncReducer;

9
app/client/src/selectors/debuggerSelectors.tsx
View File

@ -11,3 +11,12 @@ export const getFilteredErrors = createSelector(
return errors;
},
);
export const getMessageCount = createSelector(getFilteredErrors, (errors) => {
const errorKeys = Object.keys(errors);
const warningsCount = errorKeys.filter((key: string) =>
key.includes("warning"),
).length;
const errorsCount = errorKeys.length - warningsCount;
return { errors: errorsCount, warnings: warningsCount };
});

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

@ -3,9 +3,17 @@ import { AppState } from "reducers";
export const getIsGitSyncModalOpen = (state: AppState) =>
state.ui.gitSync.isGitSyncModalOpen;
export const getIsGitRepoSetup = () => false;
export const getIsGitRepoSetup = () => true;
export const getCurrentGitBranch = () => "master";
export const getIsCommittingInProgress = (state: AppState) =>
state.ui.gitSync.isCommitting;
export const getActiveGitSyncModalTab = (state: AppState) =>
state.ui.gitSync.activeGitSyncModalTab;
export const getIsGitErrorPopupVisible = (state: AppState) =>
state.ui.gitSync.isErrorPopupVisible;
export const getGitError = (state: AppState) => state.ui.gitSync.gitError;