fix(templates): update org name to ID for fetching templates

ui/src/dashboards/components/DashboardImportFromTemplateOverlay.tsx

@@ -64,6 +64,9 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
   }
 
   render() {
+    const {
+      params: {orgID},
+    } = this.props
     const {selectedTemplateSummary} = this.state
 
     return (
@@ -75,7 +78,7 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
           />
           <Overlay.Body>
             <div className="import-template-overlay">
-              <OrgTemplateFetcher orgName={this.orgName}>
+              <OrgTemplateFetcher orgID={orgID}>
                 <ResponsiveGridSizer columns={3}>
                   {this.templates}
                 </ResponsiveGridSizer>
@@ -140,16 +143,6 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
     ]
   }
 
-  private get orgName(): string {
-    const {
-      params: {orgID},
-      orgs,
-    } = this.props
-    return orgs.find(org => {
-      return org.id === orgID
-    }).name
-  }
-
   private get variableItems(): JSX.Element[] {
     return this.state.variables.map(v => {
       return <p key={v}>{v}</p>

ui/src/organizations/components/OrgTemplateFetcher.tsx

@@ -21,20 +21,20 @@ interface DispatchProps {
 }
 
 interface OwnProps {
-  orgName: string
+  orgID: string
 }
 
 type Props = StateProps & DispatchProps & OwnProps
 
 const OrgTemplateFetcher: FunctionComponent<Props> = ({
-  orgName,
+  orgID,
   templatesStatus,
   onGetTemplatesForOrg,
   children,
 }) => {
   useEffect(() => {
     if (templatesStatus === RemoteDataState.NotStarted) {
-      onGetTemplatesForOrg(orgName)
+      onGetTemplatesForOrg(orgID)
     }
   }, [templatesStatus])
 

ui/src/organizations/containers/OrgTemplatesIndex.tsx

@@ -60,7 +60,7 @@ class OrgTemplatesIndex extends Component<Props> {
                     url="templates"
                     title="Templates"
                   >
-                    <OrgTemplateFetcher orgName={org.name}>
+                    <OrgTemplateFetcher orgID={org.id}>
                       <OrgTemplatesPage
                         templates={templates}
                         orgName={org.name}

ui/src/templates/actions/index.ts

@@ -98,9 +98,9 @@ export const getTemplateByID = async (id: string) => {
   return template
 }
 
-export const getTemplatesForOrg = (orgName: string) => async dispatch => {
+export const getTemplatesForOrg = (orgID: string) => async dispatch => {
   dispatch(setTemplatesStatus(RemoteDataState.Loading))
-  const items = await client.templates.getAll(orgName)
+  const items = await client.templates.getAll(orgID)
   dispatch(populateTemplateSummaries(items))
 }