Merge pull request #235 from sf1tzp/click-to-edit

Allow editing `tag:value` in TagSelector

Author: jmattheis

ui/src/common/TagChip.tsx

@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 interface TagChipProps {
     label: string;
     color: string;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent) => void;
 }
 
 export const TagChip: React.FC<TagChipProps> = ({color, label, onClick}) => {

ui/src/dashboard/Entry/DashboardEntryForm.tsx

@@ -206,7 +206,6 @@ export const DashboardEntryForm: React.FC<EditPopupProps> = ({entry, onChange: s
                 }}
                 createTags={false}
                 onlySelectKeys
-                removeWhenClicked
             />
 
             <FormTagSelector

ui/src/tag/TagSelector.tsx

@@ -37,7 +37,6 @@ export interface TagSelectorProps {
     createTags?: boolean;
     allowDuplicateKeys?: boolean;
     onlySelectKeys?: boolean;
-    removeWhenClicked?: boolean;
 }
 
 export const TagSelector: React.FC<TagSelectorProps> = ({
@@ -48,7 +47,6 @@ export const TagSelector: React.FC<TagSelectorProps> = ({
     createTags = true,
     allowDuplicateKeys = false,
     onlySelectKeys = false,
-    removeWhenClicked = false,
 }) => {
     const classes = useStyles();
     const [tooltipErrorActive, tooltipError, showTooltipError] = useError(4000);
@@ -127,14 +125,21 @@ export const TagSelector: React.FC<TagSelectorProps> = ({
         return;
     };
 
-    const onTagClicked = (entry: TagSelectorEntry) => {
-        if (!removeWhenClicked) {
+    const onTagClicked = (entry: TagSelectorEntry, edit: boolean) => {
+        // Prevent overwriting text that's already being edited
+        if (currentValue && edit) {
+            showTooltipError('Input is not empty. Use ctrl+click to delete tag without editing.');
             return;
         }
-        const tagIndex = selectedEntries.indexOf(entry);
-        selectedEntries.splice(tagIndex, 1);
 
-        setSelectedEntries(selectedEntries);
+        setSelectedEntries(selectedEntries.filter((selected) => selected !== entry));
+
+        if (edit) {
+            setCurrentValueInternal(itemLabel(entry, onlySelectKeys));
+            setOpen(true);
+        }
+
+        focusInput();
     };
 
     const onKeyDown = (event: React.KeyboardEvent) => {
@@ -177,6 +182,7 @@ export const TagSelector: React.FC<TagSelectorProps> = ({
                     disableHoverListener
                     disableTouchListener
                     open={tooltipErrorActive}
+                    PopperProps={{style: {zIndex: 100000}}}
                     placement={'top'}
                     title={
                         <Typography color="inherit" style={{whiteSpace: 'pre-line'}}>
@@ -217,7 +223,10 @@ export const TagSelector: React.FC<TagSelectorProps> = ({
                 ) : null}
                 {addDialogOpen && (
                     <AddTagDialog
-                        onAdded={(tag) => trySubmit({tag, value: ''})}
+                        onAdded={(tag) => {
+                            const valuePart = currentValue.split(':')[1] || '';
+                            trySubmit({tag, value: valuePart});
+                        }}
                         open={true}
                         initialName={currentValue.split(':')[0]}
                         close={() => {
@@ -254,13 +263,17 @@ const Item: React.FC<ItemProps> = ({entry, selected, onlySelectKeys, onClick}) =
     );
 };
 
-const toChips = (entries: TagSelectorEntry[], onlySelectKeys: boolean, onClick: (entry: TagSelectorEntry) => void) => {
+const toChips = (
+    entries: TagSelectorEntry[],
+    onlySelectKeys: boolean,
+    onClick: (entry: TagSelectorEntry, edit: boolean) => void
+) => {
     return entries.map((entry) => (
         <TagChip
             key={itemLabel(entry, onlySelectKeys)}
             label={itemLabel(entry, onlySelectKeys)}
             color={entry.tag.color}
-            onClick={() => onClick(entry)}
+            onClick={(e) => onClick(entry, !e.ctrlKey)}
         />
     ));
 };