feat(templates): add ability to update template name inline

CHANGELOG.md

@@ -30,6 +30,7 @@
 
 1. [12782](https://github.com/influxdata/influxdb/pull/12782): Move bucket selection in the query builder to the first card in the list
 1. [12850](https://github.com/influxdata/influxdb/pull/12850): Ensure editor is automatically focused in note editor
+1. [12915](https://github.com/influxdata/influxdb/pull/12915): Add ability to edit a template's name.
 
 ## v2.0.0-alpha.6 [2019-03-15]
 

ui/package.json

@@ -137,7 +137,7 @@
   },
   "dependencies": {
     "@influxdata/clockface": "0.0.8",
-    "@influxdata/influx": "0.2.52",
+    "@influxdata/influx": "0.2.53",
     "@influxdata/react-custom-scrollbars": "4.3.8",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",

ui/src/shared/copy/notifications.ts

@@ -845,6 +845,16 @@ export const createTemplateFailed = (error: string): Notification => ({
   message: `Failed to export resource as template: ${error}`,
 })
 
+export const updateTemplateSucceeded = (): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Successfully updated template.`,
+})
+
+export const updateTemplateFailed = (error: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to update template: ${error}`,
+})
+
 export const deleteTemplateFailed = (error: string): Notification => ({
   ...defaultErrorNotification,
   message: `Failed to delete template: ${error}`,

ui/src/templates/actions/index.ts

@@ -23,6 +23,7 @@ export enum ActionTypes {
   SetExportTemplate = 'SET_EXPORT_TEMPLATE',
   RemoveTemplateSummary = 'REMOVE_TEMPLATE_SUMMARY',
   AddTemplateSummary = 'ADD_TEMPLATE_SUMMARY',
+  SetTemplateSummary = 'SET_TEMPLATE_SUMMARY',
 }
 
 export type Actions =
@@ -31,6 +32,7 @@ export type Actions =
   | SetExportTemplate
   | RemoveTemplateSummary
   | AddTemplateSummary
+  | SetTemplateSummary
 
 export interface AddTemplateSummary {
   type: ActionTypes.AddTemplateSummary
@@ -108,6 +110,33 @@ export const createTemplate = (template: DocumentCreate) => async dispatch => {
   }
 }
 
+interface SetTemplateSummary {
+  type: ActionTypes.SetTemplateSummary
+  payload: {id: string; templateSummary: TemplateSummary}
+}
+
+export const setTemplateSummary = (
+  id: string,
+  templateSummary: TemplateSummary
+): SetTemplateSummary => ({
+  type: ActionTypes.SetTemplateSummary,
+  payload: {id, templateSummary},
+})
+
+export const updateTemplate = (id: string, props: TemplateSummary) => async (
+  dispatch
+): Promise<void> => {
+  try {
+    const {meta} = await client.templates.update(id, props)
+
+    dispatch(setTemplateSummary(id, {...props, meta}))
+    dispatch(notify(copy.updateTemplateSucceeded()))
+  } catch (e) {
+    console.error(e)
+    dispatch(notify(copy.updateTemplateFailed(e)))
+  }
+}
+
 export const convertToTemplate = (id: string) => async (
   dispatch
 ): Promise<void> => {

ui/src/templates/components/TemplateCard.tsx

@@ -7,7 +7,11 @@ import {withRouter, WithRouterProps} from 'react-router'
 import {ResourceList, Context, IconFont} from 'src/clockface'
 
 // Actions
-import {deleteTemplate, cloneTemplate} from 'src/templates/actions'
+import {
+  deleteTemplate,
+  cloneTemplate,
+  updateTemplate,
+} from 'src/templates/actions'
 
 // Types
 import {TemplateSummary} from '@influxdata/influx'
@@ -24,6 +28,7 @@ interface OwnProps {
 interface DispatchProps {
   onDelete: typeof deleteTemplate
   onClone: typeof cloneTemplate
+  onUpdate: typeof updateTemplate
 }
 
 type Props = DispatchProps & OwnProps
@@ -39,7 +44,7 @@ export class TemplateCard extends PureComponent<Props & WithRouterProps> {
         name={() => (
           <ResourceList.Name
             onClick={this.handleNameClick}
-            onUpdate={this.doNothing}
+            onUpdate={this.handleUpdateTemplate}
             name={template.meta.name}
             noNameString={DEFAULT_TEMPLATE_NAME}
             parentTestID="template-card--name"
@@ -51,8 +56,14 @@ export class TemplateCard extends PureComponent<Props & WithRouterProps> {
     )
   }
 
-  //TODO handle rename template
-  private doNothing = () => {}
+  private handleUpdateTemplate = (name: string) => {
+    const {template} = this.props
+
+    this.props.onUpdate(template.id, {
+      ...template,
+      meta: {...template.meta, name},
+    })
+  }
 
   private get contextMenu(): JSX.Element {
     const {
@@ -110,6 +121,7 @@ export class TemplateCard extends PureComponent<Props & WithRouterProps> {
 const mdtp: DispatchProps = {
   onDelete: deleteTemplate,
   onClone: cloneTemplate,
+  onUpdate: updateTemplate,
 }
 
 export default connect<{}, DispatchProps, OwnProps>(

ui/src/templates/reducers/index.test.ts

@@ -0,0 +1,36 @@
+import templatesReducer, {defaultState} from 'src/templates/reducers'
+import {setTemplateSummary} from 'src/templates/actions'
+
+describe('templatesReducer', () => {
+  describe('setTemplateSummary', () => {
+    it('can update the name of a template', () => {
+      const initialState = defaultState()
+      const initialTemplate = {
+        id: 'abc',
+        labels: [],
+        meta: {name: 'Belcalis', version: '1'},
+      }
+      initialState.items.push(initialTemplate)
+
+      const actual = templatesReducer(
+        initialState,
+        setTemplateSummary(initialTemplate.id, {
+          ...initialTemplate,
+          meta: {...initialTemplate.meta, name: 'Cardi B'},
+        })
+      )
+
+      const expected = {
+        ...defaultState(),
+        items: [
+          {
+            ...initialTemplate,
+            meta: {...initialTemplate.meta, name: 'Cardi B'},
+          },
+        ],
+      }
+
+      expect(actual).toEqual(expected)
+    })
+  })
+})

ui/src/templates/reducers/index.ts

@@ -9,7 +9,7 @@ export interface TemplatesState {
   exportTemplate: {status: RemoteDataState; item: DocumentCreate; orgID: string}
 }
 
-const defaultState = (): TemplatesState => ({
+export const defaultState = (): TemplatesState => ({
   status: RemoteDataState.NotStarted,
   items: [],
   exportTemplate: {
@@ -19,7 +19,7 @@ const defaultState = (): TemplatesState => ({
   },
 })
 
-const templatesReducer = (
+export const templatesReducer = (
   state: TemplatesState = defaultState(),
   action: Actions
 ): TemplatesState =>
@@ -42,6 +42,16 @@ const templatesReducer = (
         return
       }
 
+      case ActionTypes.SetTemplateSummary: {
+        const filtered = draftState.items.filter(t => {
+          return t.id !== action.payload.id
+        })
+
+        draftState.items = [...filtered, action.payload.templateSummary]
+
+        return
+      }
+
       case ActionTypes.SetExportTemplate: {
         const {status, item, orgID} = action.payload
         draftState.exportTemplate.status = status