fix: community templates UI should accept a single template file now

jspenc72 · Jul 27, 2020 · 717cf29 · 717cf29
1 parent 1124283
commit 717cf29
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 40 deletions.
diff --git a/ui/src/templates/components/CommunityTemplateImportOverlay.tsx b/ui/src/templates/components/CommunityTemplateImportOverlay.tsx
@@ -18,10 +18,7 @@ import {ComponentStatus} from '@influxdata/clockface'
 
 // Utils
 import {getByID} from 'src/resources/selectors'
-import {
-  getGithubUrlFromTemplateName,
-  getRawUrlFromGithub,
-} from 'src/templates/utils'
+import {getGithubUrlFromTemplateName} from 'src/templates/utils'
 
 import {installTemplate, reviewTemplate} from 'src/templates/api'
 
@@ -32,7 +29,12 @@ interface State {
 }
 
 type ReduxProps = ConnectedProps<typeof connector>
-type RouterProps = RouteComponentProps<{orgID: string; templateName: string}>
+type RouterProps = RouteComponentProps<{
+  directory: string
+  orgID: string
+  templateName: string
+  templateExtension: string
+}>
 type Props = ReduxProps & RouterProps
 
 class UnconnectedTemplateImportOverlay extends PureComponent<Props> {
@@ -41,9 +43,13 @@ class UnconnectedTemplateImportOverlay extends PureComponent<Props> {
   }
 
   public componentDidMount() {
-    const {org, templateName} = this.props
-
-    this.reviewTemplateResources(org.id, templateName)
+    const {directory, org, templateExtension, templateName} = this.props
+    this.reviewTemplateResources(
+      org.id,
+      directory,
+      templateName,
+      templateExtension
+    )
   }
 
   public render() {
@@ -63,10 +69,17 @@ class UnconnectedTemplateImportOverlay extends PureComponent<Props> {
     )
   }
 
-  private reviewTemplateResources = async (orgID, templateName) => {
-    const yamlLocation = `${getRawUrlFromGithub(
-      getGithubUrlFromTemplateName(templateName)
-    )}/${templateName}.yml`
+  private reviewTemplateResources = async (
+    orgID,
+    directory,
+    templateName,
+    templateExtension
+  ) => {
+    const yamlLocation = getGithubUrlFromTemplateName(
+      directory,
+      templateName,
+      templateExtension
+    )
 
     try {
       const summary = await reviewTemplate(orgID, yamlLocation)
@@ -88,11 +101,13 @@ class UnconnectedTemplateImportOverlay extends PureComponent<Props> {
     this.setState(() => ({status}))
 
   private handleInstallTemplate = async () => {
-    const {org, templateName} = this.props
+    const {directory, org, templateExtension, templateName} = this.props
 
-    const yamlLocation = `${getRawUrlFromGithub(
-      getGithubUrlFromTemplateName(templateName)
-    )}/${templateName}.yml`
+    const yamlLocation = getGithubUrlFromTemplateName(
+      directory,
+      templateName,
+      templateExtension
+    )
 
     try {
       const summary = await installTemplate(
@@ -122,7 +137,9 @@ const mstp = (state: AppState, props: RouterProps) => {
 
   return {
     org,
+    directory: props.match.params.directory,
     templateName: props.match.params.templateName,
+    templateExtension: props.match.params.templateExtension,
     flags: state.flags.original,
     resourceCount: getTotalResourceCount(
       state.resources.templates.communityTemplateToInstall.summary

diff --git a/ui/src/templates/containers/CommunityTemplatesIndex.tsx b/ui/src/templates/containers/CommunityTemplatesIndex.tsx
@@ -37,7 +37,7 @@ import {getOrg} from 'src/organizations/selectors'
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 import {
   getGithubUrlFromTemplateName,
-  getTemplateNameFromGithubUrl,
+  getTemplateNameFromGithubSource,
 } from 'src/templates/utils'
 
 // Types
@@ -47,7 +47,9 @@ const communityTemplatesUrl =
   'https://github.com/influxdata/community-templates#templates'
 const templatesPath = '/orgs/:orgID/settings/templates'
 
-type Params = {params: {templateName: string}}
+type Params = {
+  params: {directory: string; templateName: string; templateExtension: string}
+}
 type ReduxProps = ConnectedProps<typeof connector>
 type Props = ReduxProps & RouteComponentProps<{templateName: string}>
 
@@ -65,9 +67,17 @@ class UnconnectedTemplatesIndex extends Component<Props> {
       path: communityTemplatesImportPath,
     }) as Params
 
-    if (match?.params?.templateName) {
+    if (
+      match?.params?.directory &&
+      match?.params?.templateName &&
+      match?.params?.templateExtension
+    ) {
       this.setState({
-        templateUrl: getGithubUrlFromTemplateName(match.params.templateName),
+        templateUrl: getGithubUrlFromTemplateName(
+          match.params.directory,
+          match.params.templateName,
+          match.params.templateExtension
+        ),
       })
     }
   }
@@ -133,7 +143,7 @@ class UnconnectedTemplatesIndex extends Component<Props> {
         </Page>
         <Switch>
           <Route
-            path={`${templatesPath}/import/:templateName`}
+            path={`${templatesPath}/import/:directory/:templateName/:templateExtension`}
             component={CommunityTemplateImportOverlay}
           />
         </Switch>
@@ -147,14 +157,15 @@ class UnconnectedTemplatesIndex extends Component<Props> {
       return false
     }
 
-    const name = getTemplateNameFromGithubUrl(this.state.templateUrl)
-    this.showInstallerOverlay(name)
-  }
-
-  private showInstallerOverlay = templateName => {
-    const {history, org} = this.props
+    const {
+      directory,
+      templateExtension,
+      templateName,
+    } = getTemplateNameFromGithubSource(this.state.templateUrl)
 
-    history.push(`/orgs/${org.id}/settings/templates/import/${templateName}`)
+    this.props.history.push(
+      `/orgs/${this.props.org.id}/settings/templates/import/${directory}/${templateName}/${templateExtension}`
+    )
   }
 
   private handleTemplateChange = event => {

diff --git a/ui/src/templates/containers/TemplatesIndex.tsx b/ui/src/templates/containers/TemplatesIndex.tsx
@@ -29,7 +29,7 @@ type ReduxProps = ConnectedProps<typeof connector>
 type Props = RouteComponentProps & ReduxProps
 
 const templatesPath = '/orgs/:orgID/settings/templates'
-export const communityTemplatesImportPath = `${templatesPath}/import/:templateName`
+export const communityTemplatesImportPath = `${templatesPath}/import/:directory/:templateName/:templateExtension`
 
 @ErrorHandling
 class TemplatesIndex extends Component<Props> {

diff --git a/ui/src/templates/utils/index.ts b/ui/src/templates/utils/index.ts
@@ -77,22 +77,28 @@ export const getIncludedLabels = (included: {type: TemplateType}[]) =>
 // See https://github.com/influxdata/community-templates/
 // an example of a url that works with this function:
 // https://github.com/influxdata/community-templates/tree/master/csgo
-export const getTemplateNameFromGithubUrl = (url: string): string => {
+export const getTemplateNameFromGithubSource = (
+  url: string
+): {directory: string; templateExtension: string; templateName: string} => {
   if (!url.includes('https://github.com/influxdata/community-templates/')) {
     throw new Error(
       "We're only going to fetch from influxdb's github repo right now"
     )
   }
-  const [, name] = url.split('/tree/master/')
-  return name
-}
-
-export const getGithubUrlFromTemplateName = (templateName: string): string => {
-  return `https://github.com/influxdata/community-templates/tree/master/${templateName}`
+  const [, templatePath] = url.split('/blob/master/')
+  const [directory, name] = templatePath.split('/')
+  const [templateName, templateExtension] = name.split('.')
+  return {
+    directory,
+    templateExtension,
+    templateName,
+  }
 }
 
-export const getRawUrlFromGithub = repoUrl => {
-  return repoUrl
-    .replace('github.com', 'raw.githubusercontent.com')
-    .replace('tree/', '')
+export const getGithubUrlFromTemplateName = (
+  directory: string,
+  templateName: string,
+  templateExtension: string
+): string => {
+  return `https://github.com/influxdata/community-templates/blob/master/${directory}/${templateName}.${templateExtension}`
 }