Add Tag Modal Enhancements (#1187)

Author: ajlai-orkes

ui-next/src/components/features/tags/AddTagDialog.tsx

@@ -17,6 +17,7 @@ import { TagDto } from "types/Tag";
 import { useActionWithPath, useTags } from "utils/query";
 import { getErrorMessage } from "utils/utils";
 import ReplaceTagsInput from "components/features/tags/ReplaceTagsInput";
+import { isValidTag } from "components/features/tags/tagUtils";
 
 export type TagDialogProps = {
   open: boolean;
@@ -56,6 +57,7 @@ export default function AddTagDialog({
   const [newTags, setNewTags] = useState<string[]>(
     tags.map((tag: TagDto) => tag && `${tag.key}:${tag.value}`),
   );
+  const [pendingInput, setPendingInput] = useState("");
   // Only fetch all tags when the dialog is open (avoids slow /metadata/tags on every page that mounts this dialog).
   const { data: existingTags } = useTags<TagDto[]>({ enabled: open });
 
@@ -78,6 +80,9 @@ export default function AddTagDialog({
   const hasNoChanges =
     _differenceWith(tags, parsedTags(newTags), isTagEqual).length === 0 &&
     newTags.length === tags.length;
+  const hasInvalidTags = newTags.some((tag) => !isValidTag(tag));
+  const isSaveDisabled =
+    hasNoChanges || pendingInput.trim().length > 0 || hasInvalidTags;
 
   function replaceTags(newTags: any) {
     for (const tag of newTags) {
@@ -137,6 +142,9 @@ export default function AddTagDialog({
             onChange={(tags) => {
               setNewTags(_uniq(tags));
             }}
+            onInputChange={(value) => {
+              setPendingInput(value);
+            }}
           />
         </Box>
       </DialogContent>
@@ -155,7 +163,7 @@ export default function AddTagDialog({
           variant="contained"
           color="primary"
           progress={loading}
-          disabled={hasNoChanges}
+          disabled={isSaveDisabled}
           onClick={() => replaceTags(newTags)}
           startIcon={<SaveIcon />}
         >

ui-next/src/components/features/tags/ReplaceTagsInput.tsx

@@ -9,17 +9,21 @@ import { TagDto } from "types/Tag";
 
 type ReplaceTagsInputProps = {
   onChange?: (tags: string[]) => void | null;
+  onInputChange?: (value: string) => void;
   label?: ReactNode;
   tags: TagDto[];
   options: TagDto[];
 };
 type SuggestValueType = { title: string; inputValue: string };
 
+import { isValidTag } from "components/features/tags/tagUtils";
+
 const filter = createFilterOptions<SuggestValueType>();
 
 const ReplaceTagsInput = ({
   label = "Tags",
   onChange = () => null,
+  onInputChange,
   tags = [],
   options = [],
 }: ReplaceTagsInputProps) => {
@@ -50,11 +54,13 @@ const ReplaceTagsInput = ({
             option?.inputValue ? option.inputValue : option
           ) as string;
           const { key, ...otherTagProps } = getTagProps({ index });
+          const invalid = !isValidTag(label);
           return (
             <TagChip
               key={key}
               id={`${label}-tag-chip`}
               label={label}
+              color={invalid ? "error" : undefined}
               {...otherTagProps}
               sx={{
                 "& .MuiSvgIcon-root": {
@@ -96,6 +102,9 @@ const ReplaceTagsInput = ({
 
         return filtered;
       }}
+      onInputChange={(_event, value) => {
+        onInputChange?.(value);
+      }}
       onChange={(_event, newValue: (string | SuggestValueType)[]) => {
         onChange(
           newValue.map((val: string | SuggestValueType) =>

ui-next/src/components/features/tags/tagUtils.ts

@@ -0,0 +1 @@
+export const isValidTag = (value: string) => /^[^:]+:[^:]+$/.test(value.trim());

ui-next/src/components/ui/TagChip.tsx

@@ -10,10 +10,18 @@ const customStyles = {
   fontSize: "12px",
 };
 
+const sharedStyles = {
+  fontWeight: customStyles.fontWeight,
+  borderRadius: customStyles.borderRadius,
+  fontSize: customStyles.fontSize,
+};
+
 const TagChip = forwardRef<HTMLDivElement, ChipProps>(
-  ({ style = {}, ...props }, ref) => {
-    const combinedStyles = { ...customStyles, ...style };
-    return <Chip ref={ref} style={combinedStyles} {...props} />;
+  ({ style = {}, color, ...props }, ref) => {
+    const combinedStyles = color
+      ? { ...sharedStyles, ...style }
+      : { ...customStyles, ...style };
+    return <Chip ref={ref} style={combinedStyles} color={color} {...props} />;
   },
 );