Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add confirm prompt to control panel #253

Merged
merged 4 commits into from
May 11, 2022
Merged

Add confirm prompt to control panel #253

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1bcb56c
Add confirm prompt to control panel
neil-ptr May 6, 2022
ac18175
UI changes based on Srinjoy's review
neil-ptr May 6, 2022
4a00a33
update layout and styling
neil-ptr May 9, 2022
142455d
minimize width of prompt text
neil-ptr May 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions src/components/CadenceEditor/ControlPanel/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { motion } from 'framer-motion';
import styled from 'styled-components';
import theme from '../../../theme';
import Button from 'components/Button';

export const MotionBox = (props: any) => {
const { children, dragConstraints } = props;
Expand Down Expand Up @@ -230,3 +231,23 @@ export const SignersError = styled.p`
margin-right: 0.5em;
}
`;

export const Confirm = styled(Button)`
background-color: ${theme.colors.error};
color: #fff;
margin-right: 0.5rem;

&:active {
background-color: #cf3529;
}
`

export const Cancel = styled(Button)`
background-color: ${theme.colors.background};
color: ${theme.colors.text};
border: 1px solid ${theme.colors.greyBorder};

&:active {
background-color: #dedede;
}
`
63 changes: 50 additions & 13 deletions src/components/CadenceEditor/ControlPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
// External Modules
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { FaRegCheckCircle, FaRegTimesCircle, FaSpinner } from 'react-icons/fa';
import {
FaExclamationTriangle,
FaRegCheckCircle,
FaRegTimesCircle,
FaSpinner,
} from 'react-icons/fa';
import { ExecuteCommandRequest } from 'monaco-languageclient';
import {
IPosition,
Expand Down Expand Up @@ -32,7 +37,7 @@ import {
// Component Scoped Files
import { getLabel, validateByType, useTemplateType } from './utils';
import { ControlPanelProps, IValue } from './types';
import { MotionBox } from './components';
import { MotionBox, Confirm, Cancel } from './components';

// Other
import {
Expand All @@ -43,7 +48,7 @@ import {
Hints,
Signers,
} from '../../Arguments/components';

import theme from '../../../theme';
import {
ControlContainer,
HoverPanel,
Expand Down Expand Up @@ -79,6 +84,7 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
const [errors, setErrors] = useState({});
// Handles problems, hints and info for checked code
const [problemsList, setProblemsList] = useState({});
const [showPrompt, setShowPrompt] = useState(false);

// REFS -------------------------------------------------------------------
// Holds reference to constraining div for floating window
Expand Down Expand Up @@ -282,13 +288,14 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {

case EntityType.Account: {
// Ask if user wants to redeploy the contract
if (accounts[active.index] && accounts[active.index].deployedCode) {
const choiceMessage =
'Redeploying will clear the state of all accounts. Proceed?';
if (!confirm(choiceMessage)) {
setProcessingStatus(false);
return;
}
if (
accounts[active.index] &&
accounts[active.index].deployedCode &&
!showPrompt
) {
setProcessingStatus(false);
setShowPrompt(true);
return;
}
resultType = ResultType.Contract;
rawResult = await contractDeployment();
Expand All @@ -302,6 +309,7 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
rawResult = e.toString();
}

setShowPrompt(false);
setProcessingStatus(false);

// Display result in the bottom area
Expand Down Expand Up @@ -343,8 +351,25 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
};

const isOk = !haveErrors && validCode !== undefined && !!validCode;
let statusIcon = isOk ? <FaRegCheckCircle /> : <FaRegTimesCircle />;
let statusMessage = isOk ? 'Ready' : 'Fix errors';
let statusIcon;
let statusMessage;
switch (true) {
case isOk && showPrompt:
statusIcon = (
<FaExclamationTriangle style={{ color: theme.colors.warning }} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better to set color of this one here:

flow-playground/src/components/Arguments/styles.tsx

Lines 109 to 124 in d385f01

export const ControlContainer = styled.div<ControlContainerProps>`
display: flex;
align-items: center;
justify-content: space-between;
color: ${({ isOk, progress }) => {
switch (true) {
case progress:
return '#a2a2a2';
case isOk:
return '#2bb169';
default:
return '#EE431E';
}
}};
`;

);
statusMessage =
'Redeploying will clear the state of all accounts. Proceed?';
break;
case isOk:
statusIcon = <FaRegCheckCircle />;
statusMessage = 'Ready';
break;
default:
statusIcon = <FaRegTimesCircle />;
statusMessage = 'Fix errors';
break;
}

const progress = isSavingCode || processingStatus;
if (progress) {
Expand All @@ -359,6 +384,11 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
}
}, [languageClient, active]);

useEffect(() => {
// don't carry state of prompt between active editors
setShowPrompt(false);
}, [active]);

useEffect(() => {
validate(list, values);
}, [list, values]);
Expand Down Expand Up @@ -408,7 +438,14 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
{statusIcon}
<p>{statusMessage}</p>
</StatusMessage>
<ActionButton active={isOk} type={type} onClick={send} />
{showPrompt ? (
<>
<Confirm onClick={send}>Confirm</Confirm>
<Cancel onClick={() => setShowPrompt(false)}>Cancel</Cancel>
</>
) : (
<ActionButton active={isOk} type={type} onClick={send} />
)}
</ControlContainer>
</HoverPanel>
</MotionBox>
Expand Down
1 change: 1 addition & 0 deletions src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default {
border: "rgb(240, 240, 240)",
borderDark: "rgb(222, 222, 222)",
shadowColor: "rgb(222, 222, 222)",
warning: "#ffcc00",
error: "#f44336",
blue: "#0000ff",
heading: "#919191",
Expand Down