From cd6db61930c8134ef238d300312b719e0f3b326c Mon Sep 17 00:00:00 2001 From: Harshil Sharma Date: Fri, 27 Jan 2023 14:07:02 +0530 Subject: [PATCH] Cleanup --- webapp/src/components/centerPanel.tsx | 102 ++++++++++++++++++ .../shareBoard/shareBoardButton.tsx | 80 +------------- .../statusProperty/editStatusDialog.tsx | 14 ++- 3 files changed, 115 insertions(+), 81 deletions(-) diff --git a/webapp/src/components/centerPanel.tsx b/webapp/src/components/centerPanel.tsx index 7fa700626..c3666aa91 100644 --- a/webapp/src/components/centerPanel.tsx +++ b/webapp/src/components/centerPanel.tsx @@ -41,6 +41,14 @@ import {UserConfigPatch} from '../user' import octoClient from '../octoClient' +import CheckIcon from '../widgets/icons/checkIcon' + +import ClockOutline from '../widgets/icons/clockOutline' + +import BlackCheckboxOutline from '../widgets/icons/blackCheckboxOutline' + +import {Constants} from '../constants' + import ShareBoardButton from './shareBoard/shareBoardButton' import ShareBoardLoginButton from './shareBoard/shareBoardLoginButton' @@ -61,6 +69,65 @@ import Gallery from './gallery/gallery' import {BoardTourSteps, FINISHED, TOUR_BOARD, TOUR_CARD} from './onboardingTour' import ShareBoardTourStep from './onboardingTour/shareBoard/shareBoard' +import EditStatusPropertyDialog, {StatusCategory} from './standardProperties/statusProperty/editStatusDialog' + +// this is the sample data for a dummy status property configration dialog +// and will be removed after the PR is tested and merged +const initialValueCategoryValue: StatusCategory[] = [ + { + id: 'category_id_1', + title: 'Not Started', + options: [ + {id: 'status_id_1', value: 'Pending Design', color: 'propColorPurple'}, + {id: 'status_id_2', value: 'TODO', color: 'propColorYellow'}, + {id: 'status_id_3', value: 'Pending Specs', color: 'propColorGray'}, + ], + emptyState: { + icon: (), + color: '--sys-dnd-indicator-rgb', + text: { + id: 'statusProperty.configDialog.todo.emptyText', + defaultMessage: 'Drag statuses here to consider tasks with these statuses “Not Started”', + }, + }, + }, + { + id: 'category_id_2', + title: 'In progress', + options: [ + {id: 'status_id_4', value: 'In Progress', color: 'propColorBrown'}, + {id: 'status_id_5', value: 'In Review', color: 'propColorRed'}, + {id: 'status_id_6', value: 'In QA', color: 'propColorPink'}, + {id: 'status_id_7', value: 'Awaiting Cherrypick', color: 'propColorOrange'}, + ], + emptyState: { + icon: (), + color: '--away-indicator-rgb', + text: { + id: 'statusProperty.configDialog.inProgress.emptyText', + defaultMessage: 'Drag statuses here to consider tasks with these statuses “in progress”', + }, + }, + }, + { + id: 'category_id_3', + title: 'Completed', + options: [ + {id: 'status_id_20', value: 'Done', color: 'propColorPink'}, + {id: 'status_id_21', value: 'Branch Cut', color: 'propColorGreen'}, + {id: 'status_id_22', value: 'Released', color: 'propColorDefault'}, + ], + emptyState: { + icon: (), + color: '--online-indicator-rgb', + text: { + id: 'statusProperty.configDialog.complete.emptyText', + defaultMessage: 'Drag statuses here to consider tasks with these statuses ”Done”', + }, + }, + }, +] + type Props = { clientConfig?: ClientConfig board: Board @@ -90,6 +157,32 @@ const CenterPanel = (props: Props) => { const boardUsers = useAppSelector(getBoardUsers) const dispatch = useAppDispatch() + // STATUS PROPOERTY EDIT DIALOG TEST CODE STARTS HERE + + // SHOULD BE REMOVED AFTER MERGE + const [valueCategories, setValueCategories] = useState(initialValueCategoryValue) + const [showEditStatusPropertyDialog, setShowEditStatusPropertyDialog] = useState(false) + + const handleStatusPropertyShortcut = (e: KeyboardEvent) => { + if (Utils.cmdOrCtrlPressed(e) && e.shiftKey && Utils.isKeyPressed(e, Constants.keyCodes.I)) { + if (!e.altKey) { + e.preventDefault() + setShowEditStatusPropertyDialog((show) => !show) + } + } + } + + useEffect(() => { + document.addEventListener('keydown', handleStatusPropertyShortcut) + + // cleanup function + return () => { + document.removeEventListener('keydown', handleStatusPropertyShortcut) + } + }, []) + + // STATUS PROPOERTY EDIT DIALOG TEST CODE ENDS HERE + const clientConfig = useAppSelector(getClientConfig) // empty dependency array yields behavior like `componentDidMount`, it only runs _once_ @@ -514,6 +607,15 @@ const CenterPanel = (props: Props) => { showHiddenCardNotification={showHiddenCardCountNotification} hiddenCardCountNotificationHandler={hiddenCardCountNotifyHandler} /> + + { + showEditStatusPropertyDialog && + setShowEditStatusPropertyDialog(false)} + onUpdate={(updatedValue) => setValueCategories(updatedValue)} + /> + } ) } diff --git a/webapp/src/components/shareBoard/shareBoardButton.tsx b/webapp/src/components/shareBoard/shareBoardButton.tsx index e66d00cf3..c5fab875f 100644 --- a/webapp/src/components/shareBoard/shareBoardButton.tsx +++ b/webapp/src/components/shareBoard/shareBoardButton.tsx @@ -2,9 +2,7 @@ // See LICENSE.txt for license information. import React, {useState} from 'react' -import {FormattedMessage, IntlShape, useIntl} from 'react-intl' - -import EditStatusPropertyDialog, {StatusCategory} from '../standardProperties/statusProperty/editStatusDialog' +import {FormattedMessage} from 'react-intl' import Button from '../../widgets/buttons/button' import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../../telemetry/telemetryClient' @@ -16,77 +14,14 @@ import {BoardTypeOpen} from '../../blocks/board' import './shareBoardButton.scss' -import ClockOutline from '../../widgets/icons/clockOutline' - -import CheckIcon from '../../widgets/icons/check' - -import BlackCheckboxOutline from '../../widgets/icons/blackCheckboxOutline' - import ShareBoardDialog from './shareBoard' -const getInitialValueCategoryValue: StatusCategory[] = [ - { - id: 'category_id_1', - title: 'Not Started', - options: [ - {id: 'status_id_1', value: 'Pending Design', color: 'propColorPurple'}, - {id: 'status_id_2', value: 'TODO', color: 'propColorYellow'}, - {id: 'status_id_3', value: 'Pending Specs', color: 'propColorGray'}, - ], - emptyState: { - icon: (), - color: '--sys-dnd-indicator-rgb', - text: { - id: 'statusProperty.configDialog.todo.emptyText', - defaultMessage: 'Drag statuses here to consider tasks with these statuses “Not Started”', - }, - }, - }, - { - id: 'category_id_2', - title: 'In progress', - options: [ - {id: 'status_id_4', value: 'In Progress', color: 'propColorBrown'}, - {id: 'status_id_5', value: 'In Review', color: 'propColorRed'}, - {id: 'status_id_6', value: 'In QA', color: 'propColorPink'}, - {id: 'status_id_7', value: 'Awaiting Cherrypick', color: 'propColorOrange'}, - ], - emptyState: { - icon: (), - color: '--away-indicator-rgb', - text: { - id: 'statusProperty.configDialog.inProgress.emptyText', - defaultMessage: 'Drag statuses here to consider tasks with these statuses “in progress”', - }, - }, - }, - { - id: 'category_id_3', - title: 'Completed', - options: [ - {id: 'status_id_20', value: 'Done', color: 'propColorPink'}, - {id: 'status_id_21', value: 'Branch Cut', color: 'propColorGreen'}, - {id: 'status_id_22', value: 'Released', color: 'propColorDefault'}, - ], - emptyState: { - icon: (), - color: '--online-indicator-rgb', - text: { - id: 'statusProperty.configDialog.complete.emptyText', - defaultMessage: 'Drag statuses here to consider tasks with these statuses ”Done”', - }, - }, - }, -] - type Props = { enableSharedBoards: boolean } const ShareBoardButton = (props: Props) => { const [showShareDialog, setShowShareDialog] = useState(false) const board = useAppSelector(getCurrentBoard) - const intl = useIntl() - const [valueCategories, setValueCategories] = useState(getInitialValueCategoryValue) const iconForBoardType = () => { if (board.type === BoardTypeOpen) { @@ -112,20 +47,11 @@ const ShareBoardButton = (props: Props) => { defaultMessage='Share' /> - {/* {showShareDialog && + {showShareDialog && setShowShareDialog(false)} enableSharedBoards={props.enableSharedBoards} - />} */} - - { - showShareDialog && - setShowShareDialog(false)} - onUpdate={(updatedValue) => setValueCategories(updatedValue)} - /> - } + />} ) } diff --git a/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx b/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx index 396560efa..e0dbbc7d6 100644 --- a/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx +++ b/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx @@ -52,13 +52,18 @@ type Props = { const EditStatusPropertyDialog = (props: Props): JSX.Element => { const [valueCategories, setValueCategories] = useState([]) const [focusedValueID, setFocusedValueID] = useState() + const intl = useIntl() useEffect(() => { + // we save a deel copy of props as user actions like + // DND and adding, editing, changing coloror deleting the values + // affect this local copy first and only if the user clicks the + // "Save" button, are the changes propogated to the prop change callback function/ + // Direcxtly modifying the props value can cause the value of variable + // from the parent component to be affected as well in some cases setValueCategories(cloneDeep(props.valueCategories)) }, [props.valueCategories]) - const intl = useIntl() - const title = ( { const oldOptionvalue = updatedValueCategories[categoryIndex].options[valueIndex] if (oldOptionvalue.value === newOptionValue.value && newOptionValue.value === '') { + // if used add a new value, but then leaves it empty by, for example, + // clicking outside, we delete that value as its the fasted way for the user + // to remove an accidently added value updatedValueCategories[categoryIndex].options.splice(valueIndex, 1) } else { updatedValueCategories[categoryIndex].options[valueIndex] = newOptionValue @@ -142,12 +150,10 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => { const sourceCategoryIndex = updatedValues.findIndex((valueCategory) => valueCategory.id === source.droppableId) const destinationCategoryIndex = updatedValues.findIndex((valueCategory) => valueCategory.id === destination.droppableId) - const draggedObject = valueCategories[sourceCategoryIndex].options[source.index] updatedValues[sourceCategoryIndex].options.splice(source.index, 1) updatedValues[destinationCategoryIndex].options.splice(destination.index, 0, draggedObject) - setValueCategories(updatedValues) }