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

influxdata · Mar 26, 2019 · 3b0792e · 3b0792e
1 parent 119f113
commit 3b0792e
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,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]
 

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -137,7 +137,7 @@
   },
   "dependencies": {
     "@influxdata/clockface": "0.0.5",
-    "@influxdata/influx": "0.2.50",
+    "@influxdata/influx": "0.2.53",
     "@influxdata/react-custom-scrollbars": "4.3.8",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",

diff --git a/ui/src/shared/copy/notifications.ts b/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 update 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}`,

diff --git a/ui/src/templates/actions/index.ts b/ui/src/templates/actions/index.ts
@@ -22,13 +22,15 @@ export enum ActionTypes {
   SetTemplatesStatus = 'SET_TEMPLATES_STATUS',
   SetExportTemplate = 'SET_EXPORT_TEMPLATE',
   RemoveTemplateSummary = 'REMOVE_TEMPLATE_SUMMARY',
+  SetTemplateSummary = 'SET_TEMPLATE_SUMMARY',
 }
 
 export type Actions =
   | PopulateTemplateSummaries
   | SetTemplatesStatus
   | SetExportTemplate
   | RemoveTemplateSummary
+  | SetTemplateSummary
 
 export interface PopulateTemplateSummaries {
   type: ActionTypes.PopulateTemplateSummaries
@@ -84,6 +86,33 @@ export const createTemplate = (template: DocumentCreate) => async dispatch => {
   }
 }
 
+interface SetTemplateSummary {
+  type: ActionTypes.SetTemplateSummary
+  payload: {id: string; templateSummary: TemplateSummary}
+}
+
+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> => {

diff --git a/ui/src/templates/components/TemplateCard.tsx b/ui/src/templates/components/TemplateCard.tsx
@@ -7,7 +7,7 @@ import {withRouter, WithRouterProps} from 'react-router'
 import {ResourceList, Context, IconFont} from 'src/clockface'
 
 // Actions
-import {deleteTemplate} from 'src/templates/actions'
+import {deleteTemplate, updateTemplate} from 'src/templates/actions'
 
 // Types
 import {TemplateSummary} from '@influxdata/influx'
@@ -23,6 +23,7 @@ interface OwnProps {
 
 interface DispatchProps {
   onDelete: typeof deleteTemplate
+  onUpdate: typeof updateTemplate
 }
 
 type Props = DispatchProps & OwnProps
@@ -38,7 +39,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"
@@ -50,8 +51,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 {
@@ -93,6 +100,7 @@ export class TemplateCard extends PureComponent<Props & WithRouterProps> {
 
 const mdtp: DispatchProps = {
   onDelete: deleteTemplate,
+  onUpdate: updateTemplate,
 }
 
 export default connect<{}, DispatchProps, OwnProps>(

diff --git a/ui/src/templates/reducers/index.ts b/ui/src/templates/reducers/index.ts
@@ -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