From b1e87e95ab2f1874c6dcc22026c32c7d0b38e7cf Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Wed, 22 Jun 2022 14:55:44 +0200 Subject: [PATCH 1/5] fix(gui): disable "delete all annotations" and "batch mode" when no username is set --- api-editor/gui/src/common/DeleteAllAnnotations.tsx | 9 ++++++--- api-editor/gui/src/common/MenuBar.tsx | 5 +++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/api-editor/gui/src/common/DeleteAllAnnotations.tsx b/api-editor/gui/src/common/DeleteAllAnnotations.tsx index 24a4b331a..b14d30902 100644 --- a/api-editor/gui/src/common/DeleteAllAnnotations.tsx +++ b/api-editor/gui/src/common/DeleteAllAnnotations.tsx @@ -11,11 +11,14 @@ import { VStack, } from '@chakra-ui/react'; import React, { useRef, useState } from 'react'; -import { useAppDispatch } from '../app/hooks'; -import { resetAnnotationStore } from '../features/annotations/annotationSlice'; +import {useAppDispatch, useAppSelector} from '../app/hooks'; +import {resetAnnotationStore, selectUsernameIsValid} from '../features/annotations/annotationSlice'; export const DeleteAllAnnotations = function () { const dispatch = useAppDispatch(); + + const usernameIsValid = useAppSelector(selectUsernameIsValid); + const [isOpen, setIsOpen] = useState(false); const cancelRef = useRef(null); @@ -31,7 +34,7 @@ export const DeleteAllAnnotations = function () { return ( <> - + diff --git a/api-editor/gui/src/common/MenuBar.tsx b/api-editor/gui/src/common/MenuBar.tsx index a35ee8592..a7c4dd5eb 100644 --- a/api-editor/gui/src/common/MenuBar.tsx +++ b/api-editor/gui/src/common/MenuBar.tsx @@ -18,7 +18,7 @@ import { import React from 'react'; import { FaChevronDown } from 'react-icons/fa'; import { useAppDispatch, useAppSelector } from '../app/hooks'; -import { selectAnnotationStore } from '../features/annotations/annotationSlice'; +import {selectAnnotationStore, selectUsernameIsValid} from '../features/annotations/annotationSlice'; import { BatchMode, HeatMapMode, @@ -50,6 +50,7 @@ export const MenuBar: React.FC = function ({ displayInferErrors }) const sortingMode = useAppSelector(selectSortingMode); const heatMapMode = useAppSelector(selectHeatMapMode); const showStatistics = useAppSelector(selectShowStatistics); + const usernameIsValid = useAppSelector(selectUsernameIsValid); const exportAnnotations = () => { const a = document.createElement('a'); @@ -105,7 +106,7 @@ export const MenuBar: React.FC = function ({ displayInferErrors }) - }> + } disabled={!usernameIsValid}> Batch From c7e5a201855e15f1150b851fe12f137188618226 Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Wed, 22 Jun 2022 15:00:40 +0200 Subject: [PATCH 2/5] fix(gui): hide "delete all annotations" dialog when username is invalid --- api-editor/gui/src/common/DeleteAllAnnotations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api-editor/gui/src/common/DeleteAllAnnotations.tsx b/api-editor/gui/src/common/DeleteAllAnnotations.tsx index b14d30902..9144765ba 100644 --- a/api-editor/gui/src/common/DeleteAllAnnotations.tsx +++ b/api-editor/gui/src/common/DeleteAllAnnotations.tsx @@ -36,7 +36,7 @@ export const DeleteAllAnnotations = function () { <> - + From 82f4bcc9f0d5a584adb8f6e0f36e7b4967b4c3f6 Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Wed, 22 Jun 2022 15:03:24 +0200 Subject: [PATCH 3/5] fix(gui): hide batch mode forms when username is invalid --- api-editor/gui/src/app/App.tsx | 133 +++++++++++++++++---------------- 1 file changed, 67 insertions(+), 66 deletions(-) diff --git a/api-editor/gui/src/app/App.tsx b/api-editor/gui/src/app/App.tsx index 23b8a2e1b..3b1201a64 100644 --- a/api-editor/gui/src/app/App.tsx +++ b/api-editor/gui/src/app/App.tsx @@ -11,33 +11,33 @@ import { ModalOverlay, UnorderedList, } from '@chakra-ui/react'; -import React, { useEffect, useState } from 'react'; -import { MenuBar } from '../common/MenuBar'; -import { AnnotationImportDialog } from '../features/annotations/AnnotationImportDialog'; +import React, {useEffect, useState} from 'react'; +import {MenuBar} from '../common/MenuBar'; +import {AnnotationImportDialog} from '../features/annotations/AnnotationImportDialog'; import { AnnotationStore, initializeAnnotations, persistAnnotations, selectAnnotationSlice, - selectAnnotationStore, + selectAnnotationStore, selectUsernameIsValid, } from '../features/annotations/annotationSlice'; -import { BoundaryForm } from '../features/annotations/forms/BoundaryForm'; -import { CalledAfterForm } from '../features/annotations/forms/CalledAfterForm'; -import { ConstantForm } from '../features/annotations/forms/ConstantForm'; -import { DescriptionForm } from '../features/annotations/forms/DescriptionForm'; -import { EnumForm } from '../features/annotations/forms/EnumForm'; -import { GroupForm } from '../features/annotations/forms/GroupForm'; -import { MoveForm } from '../features/annotations/forms/MoveForm'; -import { OptionalForm } from '../features/annotations/forms/OptionalForm'; -import { RenameForm } from '../features/annotations/forms/RenameForm'; -import { TodoForm } from '../features/annotations/forms/TodoForm'; -import { PackageDataImportDialog } from '../features/packageData/PackageDataImportDialog'; -import { SelectionView } from '../features/packageData/selectionView/SelectionView'; -import { TreeView } from '../features/packageData/treeView/TreeView'; -import { useAppDispatch, useAppSelector } from './hooks'; -import { PythonFunction } from '../features/packageData/model/PythonFunction'; -import { AttributeForm } from '../features/annotations/forms/AttributeForm'; -import { UsageImportDialog } from '../features/usages/UsageImportDialog'; +import {BoundaryForm} from '../features/annotations/forms/BoundaryForm'; +import {CalledAfterForm} from '../features/annotations/forms/CalledAfterForm'; +import {ConstantForm} from '../features/annotations/forms/ConstantForm'; +import {DescriptionForm} from '../features/annotations/forms/DescriptionForm'; +import {EnumForm} from '../features/annotations/forms/EnumForm'; +import {GroupForm} from '../features/annotations/forms/GroupForm'; +import {MoveForm} from '../features/annotations/forms/MoveForm'; +import {OptionalForm} from '../features/annotations/forms/OptionalForm'; +import {RenameForm} from '../features/annotations/forms/RenameForm'; +import {TodoForm} from '../features/annotations/forms/TodoForm'; +import {PackageDataImportDialog} from '../features/packageData/PackageDataImportDialog'; +import {SelectionView} from '../features/packageData/selectionView/SelectionView'; +import {TreeView} from '../features/packageData/treeView/TreeView'; +import {useAppDispatch, useAppSelector} from './hooks'; +import {PythonFunction} from '../features/packageData/model/PythonFunction'; +import {AttributeForm} from '../features/annotations/forms/AttributeForm'; +import {UsageImportDialog} from '../features/usages/UsageImportDialog'; import { BatchMode, GroupUserAction, @@ -53,24 +53,24 @@ import { selectShowAddFilterDialog, selectShowStatistics, } from '../features/ui/uiSlice'; -import { initializeUsages, persistUsages, selectUsages } from '../features/usages/usageSlice'; -import { initializePythonPackage, selectRawPythonPackage } from '../features/packageData/apiSlice'; -import { PythonClass } from '../features/packageData/model/PythonClass'; -import { PythonParameter } from '../features/packageData/model/PythonParameter'; -import { ConstantBatchForm } from '../features/annotations/batchforms/ConstantBatchForm'; -import { ActionBar } from '../features/actionBar/ActionBar'; -import { useLocation } from 'react-router-dom'; -import { RenameBatchForm } from '../features/annotations/batchforms/RenameBatchForm'; -import { RequiredBatchForm } from '../features/annotations/batchforms/RequiredBatchForm'; -import { OptionalBatchForm } from '../features/annotations/batchforms/OptionalBatchForm'; -import { RemoveBatchForm } from '../features/annotations/batchforms/RemoveBatchForm'; -import { MoveBatchForm } from '../features/annotations/batchforms/MoveBatchForm'; -import { PythonPackage } from '../features/packageData/model/PythonPackage'; -import { AbstractPythonFilter } from '../features/filter/model/AbstractPythonFilter'; -import { UsageCountStore } from '../features/usages/model/UsageCountStore'; -import { PythonDeclaration } from '../features/packageData/model/PythonDeclaration'; -import { SaveFilterDialog } from '../features/filter/SaveFilterDialog'; -import { StatisticsView } from '../features/statistics/StatisticsView'; +import {initializeUsages, persistUsages, selectUsages} from '../features/usages/usageSlice'; +import {initializePythonPackage, selectRawPythonPackage} from '../features/packageData/apiSlice'; +import {PythonClass} from '../features/packageData/model/PythonClass'; +import {PythonParameter} from '../features/packageData/model/PythonParameter'; +import {ConstantBatchForm} from '../features/annotations/batchforms/ConstantBatchForm'; +import {ActionBar} from '../features/actionBar/ActionBar'; +import {useLocation} from 'react-router-dom'; +import {RenameBatchForm} from '../features/annotations/batchforms/RenameBatchForm'; +import {RequiredBatchForm} from '../features/annotations/batchforms/RequiredBatchForm'; +import {OptionalBatchForm} from '../features/annotations/batchforms/OptionalBatchForm'; +import {RemoveBatchForm} from '../features/annotations/batchforms/RemoveBatchForm'; +import {MoveBatchForm} from '../features/annotations/batchforms/MoveBatchForm'; +import {PythonPackage} from '../features/packageData/model/PythonPackage'; +import {AbstractPythonFilter} from '../features/filter/model/AbstractPythonFilter'; +import {UsageCountStore} from '../features/usages/model/UsageCountStore'; +import {PythonDeclaration} from '../features/packageData/model/PythonDeclaration'; +import {SaveFilterDialog} from '../features/filter/SaveFilterDialog'; +import {StatisticsView} from '../features/statistics/StatisticsView'; export const App: React.FC = function () { useIndexedDB(); @@ -96,6 +96,7 @@ export const App: React.FC = function () { const batchMode = useAppSelector(selectBatchMode); const showAddFilterDialog = useAppSelector(selectShowAddFilterDialog); const showStatistics = useAppSelector(selectShowStatistics); + const isValidUsername = useAppSelector(selectUsernameIsValid); return ( <> @@ -107,7 +108,7 @@ export const App: React.FC = function () { h="100vh" > - + {currentUserAction.type === 'attribute' && ( - + )} {currentUserAction.type === 'boundary' && ( - + )} {currentUserAction.type === 'calledAfter' && userActionTarget instanceof PythonFunction && ( - + )} {currentUserAction.type === 'constant' && ( - + )} {currentUserAction.type === 'description' && (userActionTarget instanceof PythonClass || userActionTarget instanceof PythonFunction || userActionTarget instanceof PythonParameter) && ( - + )} - {currentUserAction.type === 'enum' && } + {currentUserAction.type === 'enum' && } {currentUserAction.type === 'group' && ( )} - {currentUserAction.type === 'move' && } - {currentUserAction.type === 'none' && } + {currentUserAction.type === 'move' && } + {currentUserAction.type === 'none' && } {currentUserAction.type === 'optional' && ( - + )} {currentUserAction.type === 'rename' && ( - + )} - {currentUserAction.type === 'todo' && } + {currentUserAction.type === 'todo' && } - {batchMode === BatchMode.None && } + {batchMode === BatchMode.None || !isValidUsername && } - {batchMode === BatchMode.Constant && ( + {batchMode === BatchMode.Constant && isValidUsername && ( )} - {batchMode === BatchMode.Rename && ( + {batchMode === BatchMode.Rename && isValidUsername && ( )} - {batchMode === BatchMode.Move && ( + {batchMode === BatchMode.Move && isValidUsername && ( )} - {batchMode === BatchMode.Required && ( + {batchMode === BatchMode.Required && isValidUsername && ( )} - {batchMode === BatchMode.Optional && ( + {batchMode === BatchMode.Optional && isValidUsername && ( )} - {batchMode === BatchMode.Remove && ( + {batchMode === BatchMode.Remove && isValidUsername && ( @@ -209,18 +210,18 @@ export const App: React.FC = function () { resize="horizontal" > - + )} - {currentUserAction.type === 'none' && } + {currentUserAction.type === 'none' && } - {showAnnotationImportDialog && } - {showAPIImportDialog && } - {showUsagesImportDialog && } - {showAddFilterDialog && } + {showAnnotationImportDialog && } + {showAPIImportDialog && } + {showUsagesImportDialog && } + {showAddFilterDialog && } - + Infer errors - + {inferErrors.map((error, index) => ( From 20fec4b52dce6ac0f61863d5150e2ee51e42f1fe Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Wed, 22 Jun 2022 15:05:04 +0200 Subject: [PATCH 4/5] fix(gui): selection view not showing when username is valid --- api-editor/gui/src/app/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api-editor/gui/src/app/App.tsx b/api-editor/gui/src/app/App.tsx index 3b1201a64..9e4ddbbfa 100644 --- a/api-editor/gui/src/app/App.tsx +++ b/api-editor/gui/src/app/App.tsx @@ -161,7 +161,7 @@ export const App: React.FC = function () { - {batchMode === BatchMode.None || !isValidUsername && } + {(batchMode === BatchMode.None || !isValidUsername) && } {batchMode === BatchMode.Constant && isValidUsername && ( Date: Wed, 22 Jun 2022 13:10:46 +0000 Subject: [PATCH 5/5] style: apply automatic fixes of linters --- api-editor/gui/src/app/App.tsx | 121 +++++++++--------- .../gui/src/common/DeleteAllAnnotations.tsx | 8 +- api-editor/gui/src/common/MenuBar.tsx | 2 +- 3 files changed, 67 insertions(+), 64 deletions(-) diff --git a/api-editor/gui/src/app/App.tsx b/api-editor/gui/src/app/App.tsx index 9e4ddbbfa..117789e88 100644 --- a/api-editor/gui/src/app/App.tsx +++ b/api-editor/gui/src/app/App.tsx @@ -11,33 +11,34 @@ import { ModalOverlay, UnorderedList, } from '@chakra-ui/react'; -import React, {useEffect, useState} from 'react'; -import {MenuBar} from '../common/MenuBar'; -import {AnnotationImportDialog} from '../features/annotations/AnnotationImportDialog'; +import React, { useEffect, useState } from 'react'; +import { MenuBar } from '../common/MenuBar'; +import { AnnotationImportDialog } from '../features/annotations/AnnotationImportDialog'; import { AnnotationStore, initializeAnnotations, persistAnnotations, selectAnnotationSlice, - selectAnnotationStore, selectUsernameIsValid, + selectAnnotationStore, + selectUsernameIsValid, } from '../features/annotations/annotationSlice'; -import {BoundaryForm} from '../features/annotations/forms/BoundaryForm'; -import {CalledAfterForm} from '../features/annotations/forms/CalledAfterForm'; -import {ConstantForm} from '../features/annotations/forms/ConstantForm'; -import {DescriptionForm} from '../features/annotations/forms/DescriptionForm'; -import {EnumForm} from '../features/annotations/forms/EnumForm'; -import {GroupForm} from '../features/annotations/forms/GroupForm'; -import {MoveForm} from '../features/annotations/forms/MoveForm'; -import {OptionalForm} from '../features/annotations/forms/OptionalForm'; -import {RenameForm} from '../features/annotations/forms/RenameForm'; -import {TodoForm} from '../features/annotations/forms/TodoForm'; -import {PackageDataImportDialog} from '../features/packageData/PackageDataImportDialog'; -import {SelectionView} from '../features/packageData/selectionView/SelectionView'; -import {TreeView} from '../features/packageData/treeView/TreeView'; -import {useAppDispatch, useAppSelector} from './hooks'; -import {PythonFunction} from '../features/packageData/model/PythonFunction'; -import {AttributeForm} from '../features/annotations/forms/AttributeForm'; -import {UsageImportDialog} from '../features/usages/UsageImportDialog'; +import { BoundaryForm } from '../features/annotations/forms/BoundaryForm'; +import { CalledAfterForm } from '../features/annotations/forms/CalledAfterForm'; +import { ConstantForm } from '../features/annotations/forms/ConstantForm'; +import { DescriptionForm } from '../features/annotations/forms/DescriptionForm'; +import { EnumForm } from '../features/annotations/forms/EnumForm'; +import { GroupForm } from '../features/annotations/forms/GroupForm'; +import { MoveForm } from '../features/annotations/forms/MoveForm'; +import { OptionalForm } from '../features/annotations/forms/OptionalForm'; +import { RenameForm } from '../features/annotations/forms/RenameForm'; +import { TodoForm } from '../features/annotations/forms/TodoForm'; +import { PackageDataImportDialog } from '../features/packageData/PackageDataImportDialog'; +import { SelectionView } from '../features/packageData/selectionView/SelectionView'; +import { TreeView } from '../features/packageData/treeView/TreeView'; +import { useAppDispatch, useAppSelector } from './hooks'; +import { PythonFunction } from '../features/packageData/model/PythonFunction'; +import { AttributeForm } from '../features/annotations/forms/AttributeForm'; +import { UsageImportDialog } from '../features/usages/UsageImportDialog'; import { BatchMode, GroupUserAction, @@ -53,24 +54,24 @@ import { selectShowAddFilterDialog, selectShowStatistics, } from '../features/ui/uiSlice'; -import {initializeUsages, persistUsages, selectUsages} from '../features/usages/usageSlice'; -import {initializePythonPackage, selectRawPythonPackage} from '../features/packageData/apiSlice'; -import {PythonClass} from '../features/packageData/model/PythonClass'; -import {PythonParameter} from '../features/packageData/model/PythonParameter'; -import {ConstantBatchForm} from '../features/annotations/batchforms/ConstantBatchForm'; -import {ActionBar} from '../features/actionBar/ActionBar'; -import {useLocation} from 'react-router-dom'; -import {RenameBatchForm} from '../features/annotations/batchforms/RenameBatchForm'; -import {RequiredBatchForm} from '../features/annotations/batchforms/RequiredBatchForm'; -import {OptionalBatchForm} from '../features/annotations/batchforms/OptionalBatchForm'; -import {RemoveBatchForm} from '../features/annotations/batchforms/RemoveBatchForm'; -import {MoveBatchForm} from '../features/annotations/batchforms/MoveBatchForm'; -import {PythonPackage} from '../features/packageData/model/PythonPackage'; -import {AbstractPythonFilter} from '../features/filter/model/AbstractPythonFilter'; -import {UsageCountStore} from '../features/usages/model/UsageCountStore'; -import {PythonDeclaration} from '../features/packageData/model/PythonDeclaration'; -import {SaveFilterDialog} from '../features/filter/SaveFilterDialog'; -import {StatisticsView} from '../features/statistics/StatisticsView'; +import { initializeUsages, persistUsages, selectUsages } from '../features/usages/usageSlice'; +import { initializePythonPackage, selectRawPythonPackage } from '../features/packageData/apiSlice'; +import { PythonClass } from '../features/packageData/model/PythonClass'; +import { PythonParameter } from '../features/packageData/model/PythonParameter'; +import { ConstantBatchForm } from '../features/annotations/batchforms/ConstantBatchForm'; +import { ActionBar } from '../features/actionBar/ActionBar'; +import { useLocation } from 'react-router-dom'; +import { RenameBatchForm } from '../features/annotations/batchforms/RenameBatchForm'; +import { RequiredBatchForm } from '../features/annotations/batchforms/RequiredBatchForm'; +import { OptionalBatchForm } from '../features/annotations/batchforms/OptionalBatchForm'; +import { RemoveBatchForm } from '../features/annotations/batchforms/RemoveBatchForm'; +import { MoveBatchForm } from '../features/annotations/batchforms/MoveBatchForm'; +import { PythonPackage } from '../features/packageData/model/PythonPackage'; +import { AbstractPythonFilter } from '../features/filter/model/AbstractPythonFilter'; +import { UsageCountStore } from '../features/usages/model/UsageCountStore'; +import { PythonDeclaration } from '../features/packageData/model/PythonDeclaration'; +import { SaveFilterDialog } from '../features/filter/SaveFilterDialog'; +import { StatisticsView } from '../features/statistics/StatisticsView'; export const App: React.FC = function () { useIndexedDB(); @@ -108,7 +109,7 @@ export const App: React.FC = function () { h="100vh" > - + {currentUserAction.type === 'attribute' && ( - + )} {currentUserAction.type === 'boundary' && ( - + )} {currentUserAction.type === 'calledAfter' && userActionTarget instanceof PythonFunction && ( - + )} {currentUserAction.type === 'constant' && ( - + )} {currentUserAction.type === 'description' && (userActionTarget instanceof PythonClass || userActionTarget instanceof PythonFunction || userActionTarget instanceof PythonParameter) && ( - + )} - {currentUserAction.type === 'enum' && } + {currentUserAction.type === 'enum' && } {currentUserAction.type === 'group' && ( )} - {currentUserAction.type === 'move' && } - {currentUserAction.type === 'none' && } + {currentUserAction.type === 'move' && } + {currentUserAction.type === 'none' && } {currentUserAction.type === 'optional' && ( - + )} {currentUserAction.type === 'rename' && ( - + )} - {currentUserAction.type === 'todo' && } + {currentUserAction.type === 'todo' && } - {(batchMode === BatchMode.None || !isValidUsername) && } + {(batchMode === BatchMode.None || !isValidUsername) && } {batchMode === BatchMode.Constant && isValidUsername && ( - + )} - {currentUserAction.type === 'none' && } + {currentUserAction.type === 'none' && } - {showAnnotationImportDialog && } - {showAPIImportDialog && } - {showUsagesImportDialog && } - {showAddFilterDialog && } + {showAnnotationImportDialog && } + {showAPIImportDialog && } + {showUsagesImportDialog && } + {showAddFilterDialog && } - + Infer errors - + {inferErrors.map((error, index) => ( diff --git a/api-editor/gui/src/common/DeleteAllAnnotations.tsx b/api-editor/gui/src/common/DeleteAllAnnotations.tsx index 9144765ba..1cb2b2a41 100644 --- a/api-editor/gui/src/common/DeleteAllAnnotations.tsx +++ b/api-editor/gui/src/common/DeleteAllAnnotations.tsx @@ -11,8 +11,8 @@ import { VStack, } from '@chakra-ui/react'; import React, { useRef, useState } from 'react'; -import {useAppDispatch, useAppSelector} from '../app/hooks'; -import {resetAnnotationStore, selectUsernameIsValid} from '../features/annotations/annotationSlice'; +import { useAppDispatch, useAppSelector } from '../app/hooks'; +import { resetAnnotationStore, selectUsernameIsValid } from '../features/annotations/annotationSlice'; export const DeleteAllAnnotations = function () { const dispatch = useAppDispatch(); @@ -34,7 +34,9 @@ export const DeleteAllAnnotations = function () { return ( <> - + diff --git a/api-editor/gui/src/common/MenuBar.tsx b/api-editor/gui/src/common/MenuBar.tsx index a7c4dd5eb..cac986b7b 100644 --- a/api-editor/gui/src/common/MenuBar.tsx +++ b/api-editor/gui/src/common/MenuBar.tsx @@ -18,7 +18,7 @@ import { import React from 'react'; import { FaChevronDown } from 'react-icons/fa'; import { useAppDispatch, useAppSelector } from '../app/hooks'; -import {selectAnnotationStore, selectUsernameIsValid} from '../features/annotations/annotationSlice'; +import { selectAnnotationStore, selectUsernameIsValid } from '../features/annotations/annotationSlice'; import { BatchMode, HeatMapMode,