Add the ability to clone a template

CHANGELOG.md

@@ -14,6 +14,7 @@
 1. [12821](https://github.com/influxdata/influxdb/pull/12821): Allow variables to be re-ordered within control bar on a dashboard.
 1. [12888](https://github.com/influxdata/influxdb/pull/12888): Add the ability to delete a template
 1. [12901](https://github.com/influxdata/influxdb/pull/12901): Save user preference for variable control bar visibility and default to visible
+1. [12910](https://github.com/influxdata/influxdb/pull/12910): Add the ability to clone a template
 
 ### Bug Fixes
 

ui/package.json

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

ui/src/shared/copy/notifications.ts

@@ -855,6 +855,16 @@ export const deleteTemplateSuccess = (): Notification => ({
   message: 'Template was deleted successfully',
 })
 
+export const cloneTemplateFailed = (error: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to clone template: ${error}`,
+})
+
+export const cloneTemplateSuccess = (): Notification => ({
+  ...defaultSuccessNotification,
+  message: 'Template cloned successfully',
+})
+
 export const resourceSavedAsTemplate = (
   resourceName: string
 ): Notification => ({

ui/src/templates/actions/index.ts

@@ -22,13 +22,27 @@ export enum ActionTypes {
   SetTemplatesStatus = 'SET_TEMPLATES_STATUS',
   SetExportTemplate = 'SET_EXPORT_TEMPLATE',
   RemoveTemplateSummary = 'REMOVE_TEMPLATE_SUMMARY',
+  AddTemplateSummary = 'ADD_TEMPLATE_SUMMARY',
 }
 
 export type Actions =
   | PopulateTemplateSummaries
   | SetTemplatesStatus
   | SetExportTemplate
   | RemoveTemplateSummary
+  | AddTemplateSummary
+
+export interface AddTemplateSummary {
+  type: ActionTypes.AddTemplateSummary
+  payload: {item: TemplateSummary}
+}
+
+export const addTemplateSummary = (
+  item: TemplateSummary
+): AddTemplateSummary => ({
+  type: ActionTypes.AddTemplateSummary,
+  payload: {item},
+})
 
 export interface PopulateTemplateSummaries {
   type: ActionTypes.PopulateTemplateSummaries
@@ -68,6 +82,16 @@ export const setExportTemplate = (
   payload: {status, item, orgID},
 })
 
+interface RemoveTemplateSummary {
+  type: ActionTypes.RemoveTemplateSummary
+  payload: {templateID: string}
+}
+
+const removeTemplateSummary = (templateID: string): RemoveTemplateSummary => ({
+  type: ActionTypes.RemoveTemplateSummary,
+  payload: {templateID},
+})
+
 export const getTemplatesForOrg = (orgName: string) => async dispatch => {
   dispatch(setTemplatesStatus(RemoteDataState.Loading))
   const items = await client.templates.getAll(orgName)
@@ -104,16 +128,6 @@ export const clearExportTemplate = () => async dispatch => {
   dispatch(setExportTemplate(RemoteDataState.NotStarted, null))
 }
 
-interface RemoveTemplateSummary {
-  type: ActionTypes.RemoveTemplateSummary
-  payload: {templateID: string}
-}
-
-const removeTemplateSummary = (templateID: string): RemoveTemplateSummary => ({
-  type: ActionTypes.RemoveTemplateSummary,
-  payload: {templateID},
-})
-
 export const deleteTemplate = (templateID: string) => async (
   dispatch
 ): Promise<void> => {
@@ -126,3 +140,22 @@ export const deleteTemplate = (templateID: string) => async (
     dispatch(notify(copy.deleteTemplateFailed(e)))
   }
 }
+
+export const cloneTemplate = (templateID: string, orgID: string) => async (
+  dispatch
+): Promise<void> => {
+  try {
+    const createdTemplate = await client.templates.clone(templateID, orgID)
+
+    dispatch(
+      addTemplateSummary({
+        ...createdTemplate,
+        labels: createdTemplate.labels || [],
+      })
+    )
+    dispatch(notify(copy.cloneTemplateSuccess()))
+  } catch (e) {
+    console.error(e)
+    dispatch(notify(copy.cloneTemplateFailed(e)))
+  }
+}

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, cloneTemplate} from 'src/templates/actions'
 
 // Types
 import {TemplateSummary} from '@influxdata/influx'
@@ -23,6 +23,7 @@ interface OwnProps {
 
 interface DispatchProps {
   onDelete: typeof deleteTemplate
+  onClone: typeof cloneTemplate
 }
 
 type Props = DispatchProps & OwnProps
@@ -60,6 +61,12 @@ export class TemplateCard extends PureComponent<Props & WithRouterProps> {
     } = this.props
     return (
       <Context>
+        <Context.Menu
+          icon={IconFont.Duplicate}
+          color={ComponentColor.Secondary}
+        >
+          <Context.Item label="Clone" action={this.handleClone} value={id} />
+        </Context.Menu>
         <Context.Menu
           icon={IconFont.Trash}
           color={ComponentColor.Danger}
@@ -76,6 +83,15 @@ export class TemplateCard extends PureComponent<Props & WithRouterProps> {
     )
   }
 
+  private handleClone = () => {
+    const {
+      template: {id},
+      params: {orgID},
+      onClone,
+    } = this.props
+    onClone(id, orgID)
+  }
+
   private handleNameClick = (e: MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
     this.handleExport()
@@ -93,6 +109,7 @@ export class TemplateCard extends PureComponent<Props & WithRouterProps> {
 
 const mdtp: DispatchProps = {
   onDelete: deleteTemplate,
+  onClone: cloneTemplate,
 }
 
 export default connect<{}, DispatchProps, OwnProps>(

ui/src/templates/reducers/index.ts

@@ -69,6 +69,15 @@ const templatesReducer = (
 
         return
       }
+
+      case ActionTypes.AddTemplateSummary: {
+        const {item} = action.payload
+        const {items} = draftState
+
+        draftState.items = [...items, item]
+
+        return
+      }
     }
   })