feat: Adding the new overlay read me (#19455)

* feat: Adding the new overlay read me

ui/cypress/e2e/communityTemplates.test.ts

@@ -226,15 +226,9 @@ describe('Community Templates', () => {
       cy.go('back')
     })
 
-    it('takes you to github when you click on the Community Templates link', () => {
-      cy.getByTestID('template-source-link').within(() => {
-        cy.contains('Community Templates').should(
-          'have.attr',
-          'href',
-          'https://github.com/influxdata/community-templates/blob/master/docker/docker.yml'
-        )
-      })
-      //TODO: add the link from CLI
+    it('takes you to github readme when you click on the Community Templates button', () => {
+      cy.getByTestID('community-template-readme-overlay-button').click()
+      cy.get('.markdown-format').should('contain', 'Docker Monitoring template')
     })
 
     it('Can delete template', () => {

ui/src/templates/components/CommunityTemplateReadMeOverlay.tsx

@@ -0,0 +1,50 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {CommunityTemplateReadme} from 'src/templates/components/CommunityTemplateReadme'
+import {Overlay, Button, IconFont, ComponentSize} from '@influxdata/clockface'
+
+interface Props {
+  directory: string
+}
+
+interface State {
+  isVisible: boolean
+}
+
+export class CommunityTemplateReadMeOverlay extends PureComponent<
+  Props,
+  State
+> {
+  state = {isVisible: false}
+
+  render() {
+    return (
+      <React.Fragment>
+        <Button
+          text="View Readme"
+          icon={IconFont.GitHub}
+          size={ComponentSize.Small}
+          onClick={this.showOverlay}
+          testID="community-template-readme-overlay-button"
+          style={{display: 'inline-block'}}
+        />
+        <Overlay visible={this.state.isVisible}>
+          <Overlay.Container maxWidth={800} testID="template-install-overlay">
+            <Overlay.Header title="Read Me" onDismiss={this.onDismiss} />
+            <Overlay.Body>
+              <CommunityTemplateReadme directory={this.props.directory} />
+            </Overlay.Body>
+          </Overlay.Container>
+        </Overlay>
+      </React.Fragment>
+    )
+  }
+
+  private showOverlay = () => {
+    this.setState({isVisible: true})
+  }
+
+  private onDismiss = () => {
+    this.setState({isVisible: false})
+  }
+}

ui/src/templates/components/CommunityTemplatesInstalledList.tsx

@@ -1,5 +1,6 @@
 import React, {PureComponent} from 'react'
 import {connect, ConnectedProps} from 'react-redux'
+import {getTemplateNameFromUrl} from 'src/templates/utils'
 
 // Components
 import {
@@ -10,12 +11,12 @@ import {
   ConfirmationButton,
   IconFont,
   Table,
-  LinkButton,
   VerticalAlignment,
   ButtonShape,
   Alignment,
 } from '@influxdata/clockface'
 import {CommunityTemplatesResourceSummary} from 'src/templates/components/CommunityTemplatesResourceSummary'
+import {CommunityTemplateReadMeOverlay} from 'src/templates/components/CommunityTemplateReadMeOverlay'
 
 // Redux
 import {notify} from 'src/shared/actions/notifications'
@@ -70,16 +71,9 @@ class CommunityTemplatesInstalledListUnconnected extends PureComponent<Props> {
   private renderStackSources(sources: string[]) {
     return sources.map(source => {
       if (source.includes('github') && source.includes('influxdata')) {
+        const directory = getTemplateNameFromUrl(source).directory
         return (
-          <LinkButton
-            key={source}
-            text="Community Templates"
-            icon={IconFont.GitHub}
-            href={source}
-            size={ComponentSize.Small}
-            style={{display: 'inline-block'}}
-            target="_blank"
-          />
+          <CommunityTemplateReadMeOverlay key={source} directory={directory} />
         )
       }