Improve Tag Selectors

ui/src/common/TagChip.tsx

@@ -2,24 +2,36 @@ import Chip from '@material-ui/core/Chip';
 import * as React from 'react';
 // @ts-ignore
 import bestContrast from 'get-best-contrast-color';
+import {makeStyles, Theme} from '@material-ui/core';
 
-export const TagChip = ({color, label}: {label: string; color: string}) => {
+const useStyles = makeStyles((theme: Theme) => ({
+    chip: {
+        margin: theme.spacing(0.5, 0.6),
+        cursor: 'text',
+        minHeight: '32px',
+        height: 'fit-content',
+        whiteSpace: 'normal',
+        wordBreak: 'break-word',
+    },
+}));
+
+interface TagChipProps {
+    label: string;
+    color: string;
+    onClick?: () => void;
+}
+
+export const TagChip: React.FC<TagChipProps> = ({color, label, onClick}) => {
+    const classes = useStyles();
     const textColor = bestContrast(color, ['#fff', '#000']);
     return (
         <Chip
             tabIndex={-1}
             variant="outlined"
-            style={{
-                background: color,
-                margin: '5px',
-                color: textColor,
-                cursor: 'text',
-                minHeight: '32px',
-                height: 'fit-content',
-                whiteSpace: 'normal',
-                wordBreak: 'break-word',
-            }}
+            className={classes.chip}
+            style={{background: color, color: textColor}}
             label={label}
+            onClick={onClick}
         />
     );
 };

ui/src/dashboard/Entry/DashboardEntryForm.tsx

@@ -3,8 +3,12 @@ import TextField from '@material-ui/core/TextField';
 import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/NativeSelect/NativeSelect';
+import {useQuery} from 'react-apollo';
+import {Tags} from '../../gql/__generated__/Tags';
+import * as gqlTags from '../../gql/tags';
 import {EntryType, StatsInterval} from '../../gql/__generated__/globalTypes';
-import {TagKeySelector} from '../../tag/TagKeySelector';
+import {toTagSelectorEntry} from '../../tag/tagSelectorEntry';
+import {FormTagSelector} from '../../tag/FormTagSelector';
 import {Dashboards_dashboards_items, Dashboards_dashboards_items_statsSelection_range} from '../../gql/__generated__/Dashboards';
 import {RelativeDateTimeSelector} from '../../common/RelativeDateTimeSelector';
 import {parseRelativeTime} from '../../utils/time';
@@ -31,6 +35,14 @@ export const isValidDashboardEntry = (item: Dashboards_dashboards_items): boolea
 export const DashboardEntryForm: React.FC<EditPopupProps> = ({entry, onChange: setEntry, disabled = false, ranges}) => {
     const [staticRange, setStaticRange] = React.useState(!entry.statsSelection.rangeId);
 
+    const tagsResult = useQuery<Tags>(gqlTags.Tags);
+
+    let tagKeys;
+    if (!tagsResult.error && !tagsResult.loading && tagsResult.data && tagsResult.data.tags) {
+        const keyInputTags = (entry.statsSelection.tags || []).map((key) => ({key, value: ''}));
+        tagKeys = toTagSelectorEntry(tagsResult.data.tags, keyInputTags);
+    }
+
     const range: Dashboards_dashboards_items_statsSelection_range = entry.statsSelection.range
         ? entry.statsSelection.range
         : {
@@ -181,13 +193,16 @@ export const DashboardEntryForm: React.FC<EditPopupProps> = ({entry, onChange: s
             ) : (
                 undefined
             )}
-            <TagKeySelector
-                value={entry.statsSelection.tags || []}
-                disabled={disabled}
-                onChange={(tags) => {
-                    entry.statsSelection.tags = tags;
+            <FormTagSelector
+                label="Tags"
+                selectedEntries={tagKeys || []}
+                onSelectedEntriesChanged={(tags) => {
+                    entry.statsSelection.tags = tags.map((tag) => tag.tag.key);
                     setEntry(entry);
                 }}
+                createTags={false}
+                onlySelectKeys
+                removeWhenClicked
             />
         </>
     );

ui/src/tag/FormTagSelector.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormControl from '@material-ui/core/FormControl';
+import Box from '@material-ui/core/Box';
+import InputLabel from '@material-ui/core/InputLabel';
+import {TagSelector, TagSelectorProps} from './TagSelector';
+
+interface FormTagSelectorProps extends TagSelectorProps {
+    label: string;
+    required?: boolean;
+}
+
+export const FormTagSelector = ({label, required = false, ...props}: FormTagSelectorProps) => {
+    return (
+        <Box mt={1}>
+            <FormControl fullWidth required>
+                <Box pt={2}>
+                    <InputLabel shrink> {label} </InputLabel>
+                    <Box className="MuiInput-underline">
+                        <TagSelector {...props} />
+                    </Box>
+                </Box>
+            </FormControl>
+        </Box>
+    );
+};