feat: community template error message (#19117)

ui/src/shared/copy/notifications.ts

@@ -970,9 +970,35 @@ export const communityTemplateInstallSucceeded = (
   message: `We've successfully installed: ${templateName}`,
 })
 
+export const communityTemplateInstallFailed = (
+  errorMessage: string
+): Notification => ({
+  ...defaultErrorNotification,
+  message: `There was a problem installing the template: ${errorMessage}`,
+})
+
 export const communityTemplateDeleteSucceeded = (
   templateName: string
 ): Notification => ({
   ...defaultSuccessNotification,
   message: `We've successfully deleted: ${templateName}`,
 })
+
+export const communityTemplateDeleteFailed = (
+  message: string
+): Notification => ({
+  ...defaultErrorNotification,
+  message: `Delete failed, please check error message: ${message}`,
+})
+
+export const communityTemplateFetchStackFailed = (
+  message: string
+): Notification => ({
+  ...defaultErrorNotification,
+  message: `We could not fetch your installed resources, please reload the page: ${message}`,
+})
+
+export const communityTemplateUnsupportedFormatError = (): Notification => ({
+  ...defaultErrorNotification,
+  message: `Please provide a link to a template file`,
+})

ui/src/templates/components/CommunityTemplateImportOverlay.tsx

@@ -22,7 +22,10 @@ import {getGithubUrlFromTemplateDetails} from 'src/templates/utils'
 
 import {installTemplate, reviewTemplate} from 'src/templates/api'
 
-import {communityTemplateInstallSucceeded} from 'src/shared/copy/notifications'
+import {
+  communityTemplateInstallSucceeded,
+  communityTemplateInstallFailed,
+} from 'src/shared/copy/notifications'
 
 interface State {
   status: ComponentStatus
@@ -87,7 +90,7 @@ class UnconnectedTemplateImportOverlay extends PureComponent<Props> {
       this.props.setCommunityTemplateToInstall(summary)
       return summary
     } catch (err) {
-      console.error(err)
+      this.props.notify(communityTemplateInstallFailed(err.message))
     }
   }
 
@@ -124,7 +127,7 @@ class UnconnectedTemplateImportOverlay extends PureComponent<Props> {
 
       return summary
     } catch (err) {
-      console.error('Error installing template', err)
+      this.props.notify(communityTemplateInstallFailed(err.message))
     }
   }
 }

ui/src/templates/components/CommunityTemplatesInstalledList.tsx

@@ -14,7 +14,11 @@ import {
 
 // Redux
 import {notify} from 'src/shared/actions/notifications'
-import {communityTemplateDeleteSucceeded} from 'src/shared/copy/notifications'
+import {
+  communityTemplateDeleteSucceeded,
+  communityTemplateDeleteFailed,
+  communityTemplateFetchStackFailed,
+} from 'src/shared/copy/notifications'
 import {fetchAndSetStacks} from 'src/templates/actions/thunks'
 
 // Types
@@ -48,7 +52,7 @@ class CommunityTemplatesInstalledListUnconnected extends PureComponent<Props> {
     try {
       this.props.fetchAndSetStacks(this.props.orgID)
     } catch (err) {
-      console.error('error getting stacks', err)
+      this.props.notify(communityTemplateFetchStackFailed(err.message))
     }
   }
 
@@ -79,10 +83,15 @@ class CommunityTemplatesInstalledListUnconnected extends PureComponent<Props> {
 
   private generateDeleteHandlerForStack = (stackID: string) => {
     return async () => {
-      await deleteStack(stackID, this.props.orgID)
-      this.props.fetchAndSetStacks(this.props.orgID)
+      try {
+        await deleteStack(stackID, this.props.orgID)
 
-      this.props.notify(communityTemplateDeleteSucceeded(stackID))
+        this.props.notify(communityTemplateDeleteSucceeded(stackID))
+      } catch (err) {
+        this.props.notify(communityTemplateDeleteFailed(err.message))
+      } finally {
+        this.props.fetchAndSetStacks(this.props.orgID)
+      }
     }
   }
 

ui/src/templates/containers/CommunityTemplatesIndex.tsx

@@ -7,6 +7,7 @@ import {
   Route,
 } from 'react-router-dom'
 import {connect, ConnectedProps} from 'react-redux'
+import {notify} from 'src/shared/actions/notifications'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -40,6 +41,7 @@ import {
   getTemplateDetails,
 } from 'src/templates/utils'
 
+import {communityTemplateUnsupportedFormatError} from 'src/shared/copy/notifications'
 // Types
 import {AppState} from 'src/types'
 
@@ -153,17 +155,21 @@ class UnconnectedTemplatesIndex extends Component<Props> {
 
   private startTemplateInstall = () => {
     if (!this.state.templateUrl) {
-      console.error('undefined')
+      this.props.notify(communityTemplateUnsupportedFormatError())
       return false
     }
 
-    const {directory, templateExtension, templateName} = getTemplateDetails(
-      this.state.templateUrl
-    )
+    try {
+      const {directory, templateExtension, templateName} = getTemplateDetails(
+        this.state.templateUrl
+      )
 
-    this.props.history.push(
-      `/orgs/${this.props.org.id}/settings/templates/import/${directory}/${templateName}/${templateExtension}`
-    )
+      this.props.history.push(
+        `/orgs/${this.props.org.id}/settings/templates/import/${directory}/${templateName}/${templateExtension}`
+      )
+    } catch (err) {
+      this.props.notify(communityTemplateUnsupportedFormatError())
+    }
   }
 
   private handleTemplateChange = event => {
@@ -177,7 +183,11 @@ const mstp = (state: AppState) => {
   }
 }
 
-const connector = connect(mstp)
+const mdtp = {
+  notify,
+}
+
+const connector = connect(mstp, mdtp)
 
 export const CommunityTemplatesIndex = connector(
   withRouter(UnconnectedTemplatesIndex)

ui/src/templates/utils/index.ts

@@ -106,7 +106,11 @@ export const getTemplateDetails = (source: string): TemplateDetails => {
     return getTemplateDetailsFromGithubSource(source)
   }
 
-  return getTemplateDetailsFromFileSource(source)
+  if (source.includes('file://')) {
+    return getTemplateDetailsFromFileSource(source)
+  }
+
+  throw new Error('unsupported format')
 }
 
 export const getGithubUrlFromTemplateDetails = (