[feat] Add the ability to edit tags on the Run Page

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Enhancements:
+
+- Add the ability to attach/remove tags on the Run Page (roubkar)
+
 ## 3.13.0 Aug 21, 2022
 
 ### Enhancements:

aim/web/ui/src/App.scss

@@ -6,6 +6,7 @@
 
 body {
   -webkit-font-smoothing: antialiased;
+  overscroll-behavior: none;
 }
 
 #root {

aim/web/ui/src/components/AttachedTagsList/AttachedTagsList.scss

@@ -23,28 +23,30 @@
   &__tags {
     display: flex;
     flex-wrap: wrap;
+    overflow: auto;
 
     .Badge {
       margin-bottom: 0.5rem;
       margin-right: 0.5rem;
+      max-width: unset;
     }
   }
 
   &__ControlPopover__anchor {
+
     .icon-edit {
       width: 24px;
       height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
-    }
-
-    .icon-edit:hover {
-      color: $primary-color;
+      color: $pico-50;
     }
 
     &.active {
-      color: $primary-color;
+      .icon-edit {
+        color: $pico-70;
+      }
     }
   }
 

aim/web/ui/src/components/AttachedTagsList/AttachedTagsList.tsx

@@ -15,9 +15,16 @@ import { IAttachedTagsListProps } from 'types/components/AttachedTagsList/Attach
 
 import './AttachedTagsList.scss';
 
-function AttachedTagsList({ runHash }: IAttachedTagsListProps) {
+function AttachedTagsList({
+  runHash,
+  initialTags,
+  headerRenderer,
+  onTagsChange,
+}: IAttachedTagsListProps) {
   const [tags, setTags] = React.useState<ITagInfo[]>([]);
-  const [attachedTags, setAttachedTags] = React.useState<ITagInfo[]>([]);
+  const [attachedTags, setAttachedTags] = React.useState<ITagInfo[]>(
+    initialTags ?? [],
+  );
   const getRunInfoRef = React.useRef<any>(null);
   const getTagsRef = React.useRef<any>(null);
   const createRunsTagRef = React.useRef<any>(null);
@@ -42,24 +49,31 @@ function AttachedTagsList({ runHash }: IAttachedTagsListProps) {
       { tag_name: tag.name },
       run_id,
     );
-    createRunsTagRef.current.call().then(() => {
-      setAttachedTags((prevState) => [...prevState, tag]);
-    });
+    createRunsTagRef.current
+      .call()
+      .then()
+      .catch((ex: unknown) => {
+        setAttachedTags((prevState) => [
+          ...prevState.filter((t) => tag.id !== t.id),
+        ]);
+      });
   }
 
-  function deleteRunsTag(run_id: string, tag_id: string) {
-    deleteRunsTagRef.current = runsService?.deleteRunsTag(run_id, tag_id);
-    deleteRunsTagRef.current.call().then(() => {
-      setAttachedTags((prevState) => [
-        ...prevState.filter((tag) => tag.id !== tag_id),
-      ]);
-    });
+  function deleteRunsTag(run_id: string, tag: ITagInfo) {
+    deleteRunsTagRef.current = runsService?.deleteRunsTag(run_id, tag.id);
+    deleteRunsTagRef.current
+      .call()
+      .then()
+      .catch((ex: unknown) => {
+        setAttachedTags((prevState) => [...prevState, tag]);
+      });
   }
 
   function onAttachedTagAdd(tag_id: string): void {
     if (!attachedTags.find((tag) => tag.id === tag_id)) {
       const tag = tags.find((tag) => tag.id === tag_id);
       if (tag) {
+        setAttachedTags((prevState) => [...prevState, tag]);
         createRunsTag(tag, runHash);
       }
     }
@@ -68,28 +82,45 @@ function AttachedTagsList({ runHash }: IAttachedTagsListProps) {
   function onAttachedTagDelete(label: string): void {
     const tag = tags.find((tag) => tag.name === label);
     if (tag) {
-      deleteRunsTag(runHash, tag.id);
+      setAttachedTags((prevState) => [
+        ...prevState.filter((t) => tag.id !== t.id),
+      ]);
+      deleteRunsTag(runHash, tag);
     }
   }
 
   React.useEffect(() => {
     if (runHash) {
+      if (!initialTags) {
+        getRunInfo(runHash);
+      }
       getAllTags();
-      getRunInfo(runHash);
     }
     return () => {
       getRunInfoRef.current?.abort();
       getTagsRef.current?.abort();
     };
   }, [runHash]);
 
+  React.useEffect(() => {
+    if (onTagsChange) {
+      onTagsChange(attachedTags);
+    }
+  }, [attachedTags, onTagsChange]);
+
   return (
     <ErrorBoundary>
       <div>
-        <Text className='AttachedTagsList__title'>Tags</Text>
+        {typeof headerRenderer === 'function' ? (
+          headerRenderer(attachedTags?.length)
+        ) : (
+          <Text className='AttachedTagsList__title'>
+            Tags {attachedTags?.length > 0 ? `(${attachedTags.length})` : null}
+          </Text>
+        )}
         <Box className='AttachedTagsList'>
           {attachedTags?.length > 0 ? (
-            <div className='AttachedTagsList__tags'>
+            <div className='AttachedTagsList__tags ScrollBar__hidden'>
               {attachedTags.map((tag: ITagInfo) => (
                 <Badge
                   key={tag.id}
@@ -127,7 +158,9 @@ function AttachedTagsList({ runHash }: IAttachedTagsListProps) {
                   }`}
                 >
                   {attachedTags?.length > 0 ? (
-                    <Icon name='edit' />
+                    <Button withOnlyIcon size='small' color='secondary'>
+                      <Icon name='edit'></Icon>
+                    </Button>
                   ) : (
                     <Button
                       size='xSmall'

aim/web/ui/src/components/SelectTag/SelectTag.scss

@@ -5,9 +5,11 @@
 
   &__tags {
     padding: 0 1rem;
+    overflow: auto;
 
     .Badge {
       margin: 0;
+      max-width: unset;
       cursor: pointer;
     }
 

aim/web/ui/src/pages/RunDetail/RunOverviewTab/components/RunOverviewSidebar/RunOverviewSidebar.tsx

@@ -5,7 +5,10 @@ import moment from 'moment';
 
 import { Divider } from '@material-ui/core';
 
-import { Badge, Button, Icon, Text } from 'components/kit';
+import { Button, Icon, Text } from 'components/kit';
+import AttachedTagsList from 'components/AttachedTagsList/AttachedTagsList';
+
+import runDetailAppModel from 'services/models/runs/runDetailAppModel';
 
 import { processDurationTime } from 'utils/processDurationTime';
 
@@ -143,6 +146,13 @@ function RunOverviewSidebar({
             <Text tint={70}>{runHash}</Text>
           </div>
         </div>
+        <div className='RunOverviewSidebar__section RunOverviewSidebar__section__tags'>
+          <AttachedTagsList
+            runHash={runHash}
+            initialTags={info.tags}
+            onTagsChange={runDetailAppModel.editTags}
+          />
+        </div>
         <Divider className='RunOverviewSidebar__section__Divider' />
         <div className='RunOverviewSidebar__section RunOverviewSidebar__section__descriptionBox'>
           <div className='RunOverviewSidebar__section__descriptionBox__header'>
@@ -181,21 +191,6 @@ function RunOverviewSidebar({
             </div>
           )}
         </div>
-        {info.tags.length ? (
-          <div className='RunOverviewSidebar__section RunOverviewSidebar__section__tags'>
-            <Text weight={600} size={18} tint={100} component='h3'>
-              Tags{' '}
-              <Text component='span' tint={70} weight={400} size={18}>
-                ({info.tags.length})
-              </Text>
-            </Text>
-            <div className='RunOverviewSidebar__section__tags-list ScrollBar__hidden'>
-              {info.tags.map((tag) => (
-                <Badge color={tag.color} label={tag.name} key={tag.name} />
-              ))}
-            </div>
-          </div>
-        ) : null}
         <Divider className='RunOverviewSidebar__section__Divider' />
         <div className='RunOverviewSidebar__section RunOverviewSidebar__section__insights'>
           <Text weight={600} size={18} tint={100} component='h3'>

aim/web/ui/src/services/models/runs/runDetailAppModel.ts

@@ -7,6 +7,7 @@ import * as analytics from 'services/analytics';
 
 import { INotification } from 'types/components/NotificationContainer/NotificationContainer';
 import { IApiRequest } from 'types/services/services';
+import { ITagInfo } from 'types/pages/tags/Tags';
 
 import exceptionHandler from 'utils/app/exceptionHandler';
 import { encode } from 'utils/encoder/encoder';
@@ -354,6 +355,18 @@ function editRunNameAndDescription(
   }
 }
 
+function editTags(tags: ITagInfo[]) {
+  const state = model.getState();
+
+  model.setState({
+    ...state,
+    runInfo: {
+      ...state?.runInfo,
+      tags,
+    },
+  });
+}
+
 function onNotificationDelete(id: number) {
   let notifyData: INotification[] | [] = model.getState()?.notifyData || [];
   notifyData = [...notifyData].filter((i) => i.id !== id);
@@ -382,6 +395,7 @@ const runDetailAppModel = {
   onNotificationAdd,
   onNotificationDelete,
   editRunNameAndDescription,
+  editTags,
 };
 
 export default runDetailAppModel;

aim/web/ui/src/types/components/AttachedTagsList/AttachedTagsList.d.ts

@@ -1,3 +1,9 @@
+import * as React from 'react';
+import { ITagInfo } from 'types/pages/tags/Tags';
+
 export interface IAttachedTagsListProps {
   runHash: string;
+  initialTags?: ITagInfo[];
+  headerRenderer?: (tagsLength: number) => React.ReactNode;
+  onTagsChange?: (tags: ITagInfo[]) => void;
 }