feat(flagged): wireup simple url and name overlay

ui/src/index.tsx

@@ -48,7 +48,6 @@ import NewVEO from 'src/dashboards/components/NewVEO'
 import OnboardingWizardPage from 'src/onboarding/containers/OnboardingWizardPage'
 import BucketsIndex from 'src/buckets/containers/BucketsIndex'
 import TemplatesIndex from 'src/templates/containers/TemplatesIndex'
-import {CommunityTemplatesIndex} from 'src/templates/containers/CommunityTemplatesIndex'
 import TelegrafsPage from 'src/telegrafs/containers/TelegrafsPage'
 import ClientLibrariesPage from 'src/clientLibraries/containers/ClientLibrariesPage'
 import ClientArduinoOverlay from 'src/clientLibraries/components/ClientArduinoOverlay'
@@ -100,6 +99,9 @@ import NewEndpointOverlay from 'src/notifications/endpoints/components/NewEndpoi
 import EditEndpointOverlay from 'src/notifications/endpoints/components/EditEndpointOverlay'
 import NoOrgsPage from 'src/organizations/containers/NoOrgsPage'
 
+import {CommunityTemplatesIndex} from 'src/templates/containers/CommunityTemplatesIndex'
+import {CommunityTemplateImportOverlay} from 'src/templates/components/CommunityTemplateImportOverlay'
+
 // Utilities
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {writeNavigationTimingMetrics} from 'src/cloud/utils/rum'
@@ -435,8 +437,8 @@ class Root extends PureComponent {
                                   component={CommunityTemplatesIndex}
                                 >
                                   <Route
-                                    path="import"
-                                    component={TemplateImportOverlay}
+                                    path="import/:templateName"
+                                    component={CommunityTemplateImportOverlay}
                                   />
                                   <Route
                                     path=":id/export"

ui/src/templates/components/CommunityTemplateImportOverlay.tsx

@@ -0,0 +1,92 @@
+import React, {PureComponent} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
+import {connect} from 'react-redux'
+
+// Components
+import {TemplateInstallerOverlay} from 'src/templates/components/TemplateInstallerOverlay'
+
+// Actions
+import {createTemplate as createTemplateAction} from 'src/templates/actions/thunks'
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+
+// Types
+import {AppState, Organization, ResourceType} from 'src/types'
+import {ComponentStatus} from '@influxdata/clockface'
+
+// Utils
+import {getByID} from 'src/resources/selectors'
+
+interface State {
+  status: ComponentStatus
+}
+
+interface DispatchProps {
+  createTemplate: typeof createTemplateAction
+  notify: typeof notifyAction
+}
+
+interface StateProps {
+  org: Organization
+  templateName: string
+}
+
+interface OwnProps extends WithRouterProps {
+  params: {orgID: string; templateName: string}
+}
+
+type Props = DispatchProps & OwnProps & StateProps
+
+class UnconnectedTemplateImportOverlay extends PureComponent<Props> {
+  public state: State = {
+    status: ComponentStatus.Default,
+  }
+
+  public render() {
+    return (
+      <TemplateInstallerOverlay
+        onDismissOverlay={this.onDismiss}
+        onSubmit={this.handleInstallTemplate}
+        status={this.state.status}
+        templateName={this.props.templateName}
+        updateStatus={this.updateOverlayStatus}
+      />
+    )
+  }
+
+  private onDismiss = () => {
+    const {router} = this.props
+
+    router.goBack()
+  }
+
+  private updateOverlayStatus = (status: ComponentStatus) =>
+    this.setState(() => ({status}))
+
+  private handleInstallTemplate = (importString: string) => {
+    importString
+  }
+}
+
+const mstp = (state: AppState, props: Props): StateProps => {
+  const org = getByID<Organization>(
+    state,
+    ResourceType.Orgs,
+    props.params.orgID
+  )
+
+  return {org, templateName: props.params.templateName}
+}
+
+const mdtp: DispatchProps = {
+  createTemplate: createTemplateAction,
+  notify: notifyAction,
+}
+
+export const CommunityTemplateImportOverlay = connect<
+  StateProps,
+  DispatchProps,
+  Props
+>(
+  mstp,
+  mdtp
+)(withRouter(UnconnectedTemplateImportOverlay))

ui/src/templates/components/TemplateInstallerOverlay.tsx

@@ -0,0 +1,68 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
+
+// Components
+import {
+  Gradients,
+  Heading,
+  HeadingElement,
+  Overlay,
+  Panel,
+} from '@influxdata/clockface'
+
+// Types
+import {ComponentStatus} from '@influxdata/clockface'
+
+interface OwnProps {
+  isVisible?: boolean
+  onDismissOverlay: () => void
+  onSubmit: (importString: string, orgID: string) => void
+  status?: ComponentStatus
+  templateName: string
+  updateStatus?: (status: ComponentStatus) => void
+}
+
+type Props = OwnProps & WithRouterProps
+
+class UnconnectedImportOverlay extends PureComponent<Props> {
+  public static defaultProps: {isVisible: boolean} = {
+    isVisible: true,
+  }
+
+  public render() {
+    const {isVisible, templateName} = this.props
+
+    const resourceCount = 0
+
+    return (
+      <Overlay visible={isVisible}>
+        <Overlay.Container maxWidth={800}>
+          <Overlay.Header
+            title="Template Installer"
+            onDismiss={this.onDismiss}
+          />
+          <Overlay.Body>
+            <Panel border={true} gradient={Gradients.RebelAlliance}>
+              <Panel.Header>
+                <Heading element={HeadingElement.H3}>{templateName}</Heading>
+              </Panel.Header>
+              <Panel.Body>
+                Installing this template will create {resourceCount} resources
+                in your system
+              </Panel.Body>
+            </Panel>
+          </Overlay.Body>
+        </Overlay.Container>
+      </Overlay>
+    )
+  }
+
+  private onDismiss = () => {
+    this.props.onDismissOverlay()
+  }
+}
+
+export const TemplateInstallerOverlay = withRouter<OwnProps>(
+  UnconnectedImportOverlay
+)

ui/src/templates/containers/CommunityTemplatesIndex.tsx

@@ -23,6 +23,10 @@ import SettingsHeader from 'src/settings/components/SettingsHeader'
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 import {getOrg} from 'src/organizations/selectors'
+import {
+  getGithubUrlFromTemplateName,
+  getTemplateNameFromGithubUrl,
+} from 'src/templates/utils'
 
 // Types
 import {AppState, Organization} from 'src/types'
@@ -34,14 +38,28 @@ interface StateProps {
   org: Organization
 }
 
-type Props = WithRouterProps & StateProps
+interface OwnProps extends WithRouterProps {
+  params: {templateName: string}
+}
+
+type Props = OwnProps & StateProps
 
 @ErrorHandling
-class CTI extends Component<Props> {
+class UnconnectedTemplatesIndex extends Component<Props> {
   state = {
     currentTemplate: '',
   }
 
+  public componentDidMount() {
+    if (this.props.params.templateName) {
+      this.setState({
+        currentTemplate: getGithubUrlFromTemplateName(
+          this.props.params.templateName
+        ),
+      })
+    }
+  }
+
   public render() {
     const {org, children} = this.props
     return (
@@ -86,11 +104,11 @@ class CTI extends Component<Props> {
                       className="community-templates-template-url"
                       onChange={this.handleTemplateChange}
                       placeholder="Enter the URL of an InfluxDB Template..."
-                      value={this.state.currentTemplate}
                       style={{width: '80%'}}
+                      value={this.state.currentTemplate}
                     />
                     <Button
-                      onClick={this.handleImport}
+                      onClick={this.startTemplateInstall}
                       size={ComponentSize.Small}
                       text="Lookup Template"
                     />
@@ -105,9 +123,19 @@ class CTI extends Component<Props> {
     )
   }
 
-  private handleImport = () => {
+  private startTemplateInstall = () => {
+    if (!this.state.currentTemplate) {
+      console.error('undefined')
+      return false
+    }
+
+    const name = getTemplateNameFromGithubUrl(this.state.currentTemplate)
+    this.showInstallerOverlay(name)
+  }
+
+  private showInstallerOverlay = templateName => {
     const {router, org} = this.props
-    router.push(`/orgs/${org.id}/settings/templates/import`)
+    router.push(`/orgs/${org.id}/settings/templates/import/${templateName}`)
   }
 
   private handleTemplateChange = event => {
@@ -124,4 +152,4 @@ const mstp = (state: AppState): StateProps => {
 export const CommunityTemplatesIndex = connect<StateProps, {}, {}>(
   mstp,
   null
-)(withRouter<{}>(CTI))
+)(withRouter<{}>(UnconnectedTemplatesIndex))

ui/src/templates/utils/index.ts

@@ -73,3 +73,20 @@ export const getLabelRelationships = (resource: {
 
 export const getIncludedLabels = (included: {type: TemplateType}[]) =>
   included.filter((i): i is LabelIncluded => i.type === TemplateType.Label)
+
+// 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 => {
+  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}`
+}