feat: Community template polishing (#19171)

* feat: Community template polishing

ui/src/templates/components/CommunityTemplateName.tsx

@@ -23,12 +23,19 @@ interface Props {
   onClickInstall?: () => void
 }
 
+import {} from 'react'
+
 const CommunityTemplateName: FC<Props> = ({
   templateName,
   resourceCount,
   onClickInstall,
 }) => {
   let installButton
+  let resourcePlural = 'resources'
+
+  if (resourceCount === 1) {
+    resourcePlural = 'resource'
+  }
 
   if (onClickInstall && resourceCount > 0) {
     installButton = (
@@ -63,7 +70,10 @@ const CommunityTemplateName: FC<Props> = ({
           </Heading>
           <p className="community-templates--template-description">
             Installing this template will create{' '}
-            <strong>{resourceCount} resources</strong> in your system
+            <strong>
+              {resourceCount} {resourcePlural}
+            </strong>{' '}
+            in your system
           </p>
         </FlexBox.Child>
         {installButton}

ui/src/templates/components/CommunityTemplatesInstalledList.tsx

@@ -199,12 +199,15 @@ class CommunityTemplatesInstalledListUnconnected extends PureComponent<Props> {
     })
   }
 
-  private generateDeleteHandlerForStack = (stackID: string) => {
+  private generateDeleteHandlerForStack = (
+    stackID: string,
+    stackName: string
+  ) => {
     return async () => {
       try {
         await deleteStack(stackID, this.props.orgID)
 
-        this.props.notify(communityTemplateDeleteSucceeded(stackID))
+        this.props.notify(communityTemplateDeleteSucceeded(stackName))
       } catch (err) {
         this.props.notify(communityTemplateDeleteFailed(err.message))
         reportError(err, {name: 'The community template delete failed'})
@@ -253,7 +256,10 @@ class CommunityTemplatesInstalledListUnconnected extends PureComponent<Props> {
                       confirmationLabel="Really Delete All Resources?"
                       popoverColor={ComponentColor.Default}
                       popoverAppearance={Appearance.Solid}
-                      onConfirm={this.generateDeleteHandlerForStack(stack.id)}
+                      onConfirm={this.generateDeleteHandlerForStack(
+                        stack.id,
+                        stack.name
+                      )}
                       icon={IconFont.Trash}
                       color={ComponentColor.Danger}
                       size={ComponentSize.Small}