feat(ui/template/labels): add and remove template labels (#13331)

ui/src/shared/copy/notifications.ts

@@ -798,12 +798,12 @@ export const importFailed = (): Notification => ({
 })
 
 // Templates
-export const addTemplatLabelFailed = (): Notification => ({
+export const addTemplateLabelFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Failed to add label to template',
 })
 
-export const removedTemplateLabelFailed = (): Notification => ({
+export const removeTemplateLabelFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: 'Failed to remove label from template',
 })

ui/src/tasks/actions/index.ts

@@ -263,7 +263,7 @@ export const addTaskLabelsAsync = (taskID: string, labels: Label[]) => async (
     dispatch(updateTask(task))
   } catch (error) {
     console.error(error)
-    dispatch(copy.addTaskLabelFailed())
+    dispatch(notify(copy.addTaskLabelFailed()))
   }
 }
 
@@ -278,7 +278,7 @@ export const removeTaskLabelsAsync = (
     dispatch(updateTask(task))
   } catch (error) {
     console.error(error)
-    dispatch(copy.removeTaskLabelFailed())
+    dispatch(notify(copy.removeTaskLabelFailed()))
   }
 }
 

ui/src/telegrafs/actions/index.ts

@@ -158,7 +158,7 @@ export const addTelelgrafLabelsAsync = (
     dispatch(editTelegraf(telegraf))
   } catch (error) {
     console.error(error)
-    dispatch(addTelelgrafLabelFailed())
+    dispatch(notify(addTelelgrafLabelFailed()))
   }
 }
 
@@ -173,7 +173,7 @@ export const removeTelelgrafLabelsAsync = (
     dispatch(editTelegraf(telegraf))
   } catch (error) {
     console.error(error)
-    dispatch(removeTelelgrafLabelFailed())
+    dispatch(notify(removeTelelgrafLabelFailed()))
   }
 }
 

ui/src/templates/actions/index.ts

@@ -9,6 +9,8 @@ import {
   DocumentCreate,
   ITaskTemplate,
   TemplateType,
+  ITemplate,
+  ILabel as Label,
 } from '@influxdata/influx'
 import {
   RemoteDataState,
@@ -273,3 +275,39 @@ export const createResourceFromTemplate = (templateID: string) => async (
     dispatch(notify(copy.createResourceFromTemplateFailed(e)))
   }
 }
+
+export const addTemplateLabelsAsync = (
+  templateID: string,
+  labels: Label[]
+) => async (dispatch): Promise<void> => {
+  try {
+    await client.templates.addLabels(templateID, labels.map(l => l.id))
+    const template = await client.templates.get(templateID)
+
+    dispatch(setTemplateSummary(templateID, templateToSummary(template)))
+  } catch (error) {
+    console.error(error)
+    dispatch(notify(copy.addTemplateLabelFailed()))
+  }
+}
+
+export const removeTemplateLabelsAsync = (
+  templateID: string,
+  labels: Label[]
+) => async (dispatch): Promise<void> => {
+  try {
+    await client.templates.removeLabels(templateID, labels.map(l => l.id))
+    const template = await client.templates.get(templateID)
+
+    dispatch(setTemplateSummary(templateID, templateToSummary(template)))
+  } catch (error) {
+    console.error(error)
+    dispatch(notify(copy.removeTemplateLabelFailed()))
+  }
+}
+
+const templateToSummary = (template: ITemplate): TemplateSummary => ({
+  id: template.id,
+  meta: template.meta,
+  labels: template.labels,
+})

ui/src/templates/components/TemplateCard.tsx

@@ -12,9 +12,7 @@ import {
 
 // Components
 import {ResourceList, Context, IconFont} from 'src/clockface'
-import InlineLabels, {
-  LabelsEditMode,
-} from 'src/shared/components/inlineLabels/InlineLabels'
+import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 
 // Actions
 import {
@@ -22,7 +20,11 @@ import {
   cloneTemplate,
   updateTemplate,
   createResourceFromTemplate,
+  removeTemplateLabelsAsync,
+  addTemplateLabelsAsync,
 } from 'src/templates/actions'
+import {createLabel as createLabelAsync} from 'src/labels/actions'
+
 // Selectors
 import {viewableLabels} from 'src/labels/selectors'
 
@@ -44,6 +46,9 @@ interface DispatchProps {
   onClone: typeof cloneTemplate
   onUpdate: typeof updateTemplate
   onCreateFromTemplate: typeof createResourceFromTemplate
+  onAddTemplateLabels: typeof addTemplateLabelsAsync
+  onRemoveTemplateLabels: typeof removeTemplateLabelsAsync
+  onCreateLabel: typeof createLabelAsync
 }
 
 interface StateProps {
@@ -77,7 +82,9 @@ class TemplateCard extends PureComponent<Props & WithRouterProps> {
             selectedLabels={template.labels}
             labels={labels}
             onFilterChange={onFilterChange}
-            editMode={LabelsEditMode.Readonly}
+            onAddLabel={this.handleAddLabel}
+            onRemoveLabel={this.handleRemoveLabel}
+            onCreateLabel={this.handleCreateLabel}
           />
         )}
       />
@@ -157,6 +164,22 @@ class TemplateCard extends PureComponent<Props & WithRouterProps> {
     const {router, template, org} = this.props
     router.push(`/orgs/${org.id}/templates/${template.id}/view`)
   }
+
+  private handleAddLabel = (label: ILabel): void => {
+    const {template, onAddTemplateLabels} = this.props
+
+    onAddTemplateLabels(template.id, [label])
+  }
+
+  private handleRemoveLabel = (label: ILabel): void => {
+    const {template, onRemoveTemplateLabels} = this.props
+
+    onRemoveTemplateLabels(template.id, [label])
+  }
+
+  private handleCreateLabel = async (label: ILabel): Promise<void> => {
+    await this.props.onCreateLabel(label.name, label.properties)
+  }
 }
 
 const mstp = ({labels, orgs: {org}}: AppState): StateProps => {
@@ -171,6 +194,9 @@ const mdtp: DispatchProps = {
   onClone: cloneTemplate,
   onUpdate: updateTemplate,
   onCreateFromTemplate: createResourceFromTemplate,
+  onAddTemplateLabels: addTemplateLabelsAsync,
+  onRemoveTemplateLabels: removeTemplateLabelsAsync,
+  onCreateLabel: createLabelAsync,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(

ui/src/templates/reducers/index.ts

@@ -42,11 +42,15 @@ export const templatesReducer = (
       }
 
       case ActionTypes.SetTemplateSummary: {
-        const filtered = draftState.items.filter(t => {
-          return t.id !== action.payload.id
+        const updated = draftState.items.map(t => {
+          if (t.id === action.payload.id) {
+            return action.payload.templateSummary
+          }
+
+          return t
         })
 
-        draftState.items = [...filtered, action.payload.templateSummary]
+        draftState.items = updated
 
         return
       }

ui/src/variables/actions/index.ts

@@ -328,7 +328,7 @@ export const addVariableLabelsAsync = (
     dispatch(setVariable(variableID, RemoteDataState.Done, variable))
   } catch (error) {
     console.error(error)
-    dispatch(addVariableLabelFailed())
+    dispatch(notify(addVariableLabelFailed()))
   }
 }
 
@@ -343,6 +343,6 @@ export const removeVariableLabelsAsync = (
     dispatch(setVariable(variableID, RemoteDataState.Done, variable))
   } catch (error) {
     console.error(error)
-    dispatch(removeVariableLabelFailed())
+    dispatch(notify(removeVariableLabelFailed()))
   }
 }