From 717cf29b24486e162ddeb68f594c308172ce6ad1 Mon Sep 17 00:00:00 2001 From: Bucky Schwarz Date: Fri, 24 Jul 2020 13:53:50 -0700 Subject: [PATCH] fix: community templates UI should accept a single template file now --- .../CommunityTemplateImportOverlay.tsx | 49 +++++++++++++------ .../containers/CommunityTemplatesIndex.tsx | 35 ++++++++----- .../templates/containers/TemplatesIndex.tsx | 2 +- ui/src/templates/utils/index.ts | 28 ++++++----- 4 files changed, 74 insertions(+), 40 deletions(-) diff --git a/ui/src/templates/components/CommunityTemplateImportOverlay.tsx b/ui/src/templates/components/CommunityTemplateImportOverlay.tsx index e51673c8347..51f1f906d12 100644 --- 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 -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 { @@ -41,9 +43,13 @@ class UnconnectedTemplateImportOverlay extends PureComponent { } 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 { ) } - 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 { 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 index ed845d96d6c..9b1ebceda9e 100644 --- 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 type Props = ReduxProps & RouteComponentProps<{templateName: string}> @@ -65,9 +67,17 @@ class UnconnectedTemplatesIndex extends Component { 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 { @@ -147,14 +157,15 @@ class UnconnectedTemplatesIndex extends Component { 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 index 279a6045fd9..f6ac97a2b2e 100644 --- a/ui/src/templates/containers/TemplatesIndex.tsx +++ b/ui/src/templates/containers/TemplatesIndex.tsx @@ -29,7 +29,7 @@ type ReduxProps = ConnectedProps 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 { diff --git a/ui/src/templates/utils/index.ts b/ui/src/templates/utils/index.ts index 69dd67ba535..8c75b6768ff 100644 --- 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}` }