Reset templates state on Component unmount

ui/src/organizations/components/OrgTemplatesList.tsx

@@ -51,12 +51,6 @@ export default class OrgTemplatesList extends PureComponent<Props, State> {
               sort={sortKey === headerKeys[0] ? sortDirection : Sort.None}
               onClick={this.handleClickColumn}
             />
-            <ResourceList.Sorter
-              name="Type"
-              sortKey={headerKeys[1]}
-              sort={sortKey === headerKeys[1] ? sortDirection : Sort.None}
-              onClick={this.handleClickColumn}
-            />
           </ResourceList.Header>
           <ResourceList.Body
             emptyState={

ui/src/organizations/containers/OrgTemplatesIndex.tsx

@@ -12,9 +12,13 @@ import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSecti
 import OrgTemplateFetcher from 'src/organizations/components/OrgTemplateFetcher'
 import OrgTemplatesPage from 'src/organizations/components/OrgTemplatesPage'
 
+//Actions
+import {setTemplatesStatus as setTemplatesStatusAction} from 'src/templates/actions/index'
+
 // Types
 import {Organization, TemplateSummary} from '@influxdata/influx'
 import {AppState} from 'src/types/v2'
+import {RemoteDataState} from 'src/types'
 
 interface RouterProps {
   params: {
@@ -27,10 +31,19 @@ interface StateProps {
   templates: TemplateSummary[]
 }
 
-type Props = WithRouterProps & RouterProps & StateProps
+interface DispatchProps {
+  setTemplatesStatus: typeof setTemplatesStatusAction
+}
+
+type Props = WithRouterProps & RouterProps & StateProps & DispatchProps
 
 @ErrorHandling
 class OrgTemplatesIndex extends Component<Props> {
+  public componentWillUnmount() {
+    const {setTemplatesStatus} = this.props
+    setTemplatesStatus(RemoteDataState.NotStarted)
+  }
+
   public render() {
     const {org, templates} = this.props
     return (
@@ -83,6 +96,11 @@ const mstp = (state: AppState, props: Props): StateProps => {
   }
 }
 
-export default connect<StateProps, {}, {}>(mstp)(
-  withRouter<{}>(OrgTemplatesIndex)
-)
+const mdtp = {
+  setTemplatesStatus: setTemplatesStatusAction,
+}
+
+export default connect<StateProps, DispatchProps, {}>(
+  mstp,
+  mdtp
+)(withRouter<{}>(OrgTemplatesIndex))

ui/src/templates/actions/index.ts

@@ -2,17 +2,18 @@ import _ from 'lodash'
 
 //Types
 import {TemplateSummary, DocumentCreate} from '@influxdata/influx'
+import {RemoteDataState} from 'src/types'
 
 // API
 import {client} from 'src/utils/api'
 
 export enum ActionTypes {
-  getTemplateSummariesForOrg = 'GET_TEMPLATE_SUMMARIES_FOR_ORG',
+  GetTemplateSummariesForOrg = 'GET_TEMPLATE_SUMMARIES_FOR_ORG',
   PopulateTemplateSummaries = 'POPULATE_TEMPLATE_SUMMARIES',
-  SetStatusToLoading = 'SET_STATUS_TO_LOADING',
+  SetTemplatesStatus = 'SET_TEMPLATES_STATUS',
 }
 
-export type Actions = PopulateTemplateSummaries | SetStatusToLoading
+export type Actions = PopulateTemplateSummaries | SetTemplatesStatus
 
 export interface PopulateTemplateSummaries {
   type: ActionTypes.PopulateTemplateSummaries
@@ -26,18 +27,20 @@ export const populateTemplateSummaries = (
   payload: {items},
 })
 
-export interface SetStatusToLoading {
-  type: ActionTypes.SetStatusToLoading
-  payload: {}
+export interface SetTemplatesStatus {
+  type: ActionTypes.SetTemplatesStatus
+  payload: {status: RemoteDataState}
 }
 
-export const setStatusToLoading = (): SetStatusToLoading => ({
-  type: ActionTypes.SetStatusToLoading,
-  payload: {},
+export const setTemplatesStatus = (
+  status: RemoteDataState
+): SetTemplatesStatus => ({
+  type: ActionTypes.SetTemplatesStatus,
+  payload: {status},
 })
 
 export const getTemplatesForOrg = (orgName: string) => async dispatch => {
-  dispatch(setStatusToLoading)
+  dispatch(setTemplatesStatus(RemoteDataState.Loading))
   const items = await client.templates.getAll(orgName)
   dispatch(populateTemplateSummaries(items))
 }

ui/src/templates/components/TemplateCard.tsx

@@ -42,6 +42,7 @@ export class TemplateCard extends PureComponent<Props & WithRouterProps> {
     )
   }
 
+  //TODO handle rename template
   private doNothing = () => {}
 
   private get contextMenu(): JSX.Element {

ui/src/templates/components/TemplateImportOverlay.tsx

@@ -8,13 +8,16 @@ import ImportOverlay from 'src/shared/components/ImportOverlay'
 // Actions
 import {
   createTemplate as createTemplateAction,
-  getTemplatesForOrg as getTemplatesForOrgAction,
+  setTemplatesStatus as setTemplatesStatusAction,
 } from 'src/templates/actions'
+
+// Types
 import {AppState, Organization} from 'src/types/v2'
+import {RemoteDataState} from 'src/types'
 
 interface DispatchProps {
   createTemplate: typeof createTemplateAction
-  getTemplatesForOrg: typeof getTemplatesForOrgAction
+  setTemplatesStatus: typeof setTemplatesStatusAction
 }
 
 interface StateProps {
@@ -29,12 +32,11 @@ type Props = DispatchProps & OwnProps & StateProps
 
 class TemplateImportOverlay extends PureComponent<Props> {
   public render() {
-    const {org} = this.props
     return (
       <ImportOverlay
         onDismissOverlay={this.onDismiss}
         resourceName="Template"
-        onSubmit={this.handleImportTemplate(org.name)}
+        onSubmit={this.handleImportTemplate}
       />
     )
   }
@@ -45,17 +47,15 @@ class TemplateImportOverlay extends PureComponent<Props> {
     router.goBack()
   }
 
-  private handleImportTemplate = (orgName: string) => async (
+  private handleImportTemplate = () => async (
     importString: string
   ): Promise<void> => {
-    const {createTemplate, getTemplatesForOrg} = this.props
-
+    const {createTemplate} = this.props
+    const {setTemplatesStatus} = this.props
     try {
       const template = JSON.parse(importString)
-
       await createTemplate(template)
-
-      getTemplatesForOrg(orgName)
+      setTemplatesStatus(RemoteDataState.NotStarted)
     } catch (error) {}
 
     this.onDismiss()
@@ -72,7 +72,7 @@ const mstp = (state: AppState, props: Props): StateProps => {
 
 const mdtp: DispatchProps = {
   createTemplate: createTemplateAction,
-  getTemplatesForOrg: getTemplatesForOrgAction,
+  setTemplatesStatus: setTemplatesStatusAction,
 }
 
 export default connect<StateProps, DispatchProps, Props>(

ui/src/templates/reducers/index.ts

@@ -23,10 +23,10 @@ const templatesReducer = (
         items: action.payload.items,
         status: RemoteDataState.Done,
       }
-    case ActionTypes.SetStatusToLoading:
+    case ActionTypes.SetTemplatesStatus:
       return {
         ...state,
-        status: RemoteDataState.Loading,
+        status: action.payload.status,
       }
     default:
       return state