Merge pull request #9 from patternfly/copy-extension

Bring in the "copy extension"

packages/dev/package.json

@@ -9,7 +9,7 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/quickstarts": "1.0.0-rc.24",
+    "@patternfly/quickstarts": "1.0.0-rc.25",
     "@patternfly/react-core": "^4.101.3",
     "asciidoctor": "^2.2.1",
     "react": "^16.14.0",

packages/dev/src/index.tsx

@@ -3,6 +3,7 @@ import "@patternfly/patternfly/patternfly.min.css";
 import "@patternfly/patternfly/utilities/Accessibility/accessibility.css";
 import "@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css";
 import "@patternfly/quickstarts/dist/quickstarts.css";
+import "@patternfly/quickstarts/dist/global.css";
 import React from "react";
 import ReactDOM from "react-dom";
 import { Route, BrowserRouter as Router, Switch } from "react-router-dom";

packages/dev/src/quickstarts-data/mocks/yamls/copy-execute-snippets.yaml

@@ -0,0 +1,99 @@
+apiVersion: console.openshift.io/v1
+kind: ConsoleQuickStart
+metadata:
+  name: copy-execute-snippets
+spec:
+  description: Description here
+  displayName: Execute and Copy snippets Demo
+  durationMinutes: 1
+  introduction: Introduction here
+  tasks:
+    - description: >
+        ### Inline Copy/Execute Snippets
+
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non varius
+
+        lectus. 
+
+
+        Cras tellus arcu, convallis ac vehicula vitae, malesuada sed libero.
+
+        Aenean eu
+
+
+        dolor a magna lobortis vulputate. Sed interdum gravida orci, id mattis
+
+        elit 
+
+
+        blandit vel. `echo "Donec id est ante"`{{copy}}. 
+
+        Sed `echo "quis est at nisiullamcorper"`{{execute}} eleifend. 
+
+
+        Cras vestibulum, quam sed sodales aliquam, lorem turpis dictum felis, 
+
+
+        sit amet pellentesque augue purus a leo. Praesent auctor, enim sed 
+
+
+        ultrices tristique, diam nibh egestas mi, ut mollis nibh nunc sed
+
+        tortor.
+
+        ```
+
+
+        Nunc quis velit rhoncus, tempor nisi convallis, bibendum sem. Class
+
+        aptent 
+
+
+        ```{{copy}}
+
+
+        taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+
+        himenaeos. 
+
+
+        ```
+
+
+        echo "Ut eu quam fringilla enim varius tincidunt quis sit amet diam.
+        Praesent
+
+        libero"
+
+
+        ```{{execute}}
+
+
+        sapien, accumsan sed sapien vitae, euismod consectetur turpis. Aenean
+
+        sodales 
+
+
+        molestie arcu eget aliquam. Nullam semper consectetur erat, non lobortis
+
+        ligula facilisis et.
+      title: Copy/Execute
+    - description: >
+        ### Create a Project
+
+        In next step we will create a resource using
+        `https://github.com/sclorg/ruby-ex.git`{{copy}}
+
+        Create and deploy a ruby app
+
+        ```
+
+        oc new-app ruby~https://github.com/sclorg/ruby-ex.git
+
+
+        echo "Expose route using oc expose svc/ruby-ex"
+
+        oc expose svc/ruby-ex
+
+        ```{{execute}}
+      title: Create Ruby App

packages/dev/src/quickstarts-data/mocks/yamls/spring-with-s2i.yaml

@@ -0,0 +1,236 @@
+apiVersion: console.openshift.io/v1
+kind: ConsoleQuickStart
+metadata:
+  annotations:
+    include.release.openshift.io/ibm-cloud-managed: 'true'
+    include.release.openshift.io/self-managed-high-availability: 'true'
+    include.release.openshift.io/single-node-developer: 'true'
+  creationTimestamp: '2021-06-30T10:53:10Z'
+  generation: 1
+  managedFields:
+    - apiVersion: console.openshift.io/v1
+      fieldsType: FieldsV1
+      fieldsV1:
+        'f:metadata':
+          'f:annotations':
+            .: {}
+            'f:include.release.openshift.io/ibm-cloud-managed': {}
+            'f:include.release.openshift.io/self-managed-high-availability': {}
+            'f:include.release.openshift.io/single-node-developer': {}
+        'f:spec':
+          .: {}
+          'f:conclusion': {}
+          'f:description': {}
+          'f:displayName': {}
+          'f:durationMinutes': {}
+          'f:icon': {}
+          'f:introduction': {}
+          'f:tasks': {}
+      manager: cluster-version-operator
+      operation: Update
+      time: '2021-06-30T10:53:10Z'
+  name: spring-with-s2i
+  resourceVersion: '29763'
+  uid: 0ac2376e-9806-43ab-b263-5f119da1a163
+spec:
+  conclusion: 'Your Spring application is deployed and ready. '
+  description: 'Import a Spring Application from git, build, and deploy it onto OpenShift.'
+  displayName: Get started with Spring
+  durationMinutes: 10
+  icon: >-
+    data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJMYXllcl8xIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMTUzZDNjO30uY2xzLTJ7ZmlsbDojZDhkYTlkO30uY2xzLTN7ZmlsbDojNThjMGE4O30uY2xzLTR7ZmlsbDojZmZmO30uY2xzLTV7ZmlsbDojM2Q5MTkxO308L3N0eWxlPjwvZGVmcz48dGl0bGU+c25vd2Ryb3BfaWNvbl9yZ2JfZGVmYXVsdDwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAxMi42OSw1OTNjLTExLjEyLTM4LjA3LTMxLTczLTU5LjIxLTEwMy44LTkuNS0xMS4zLTIzLjIxLTI4LjI5LTM5LjA2LTQ3Ljk0QzgzMy41MywzNDEsNzQ1LjM3LDIzNC4xOCw2NzQsMTY4Ljk0Yy01LTUuMjYtMTAuMjYtMTAuMzEtMTUuNjUtMTUuMDdhMjQ2LjQ5LDI0Ni40OSwwLDAsMC0zNi41NS0yNi44LDE4Mi41LDE4Mi41LDAsMCwwLTIwLjMtMTEuNzcsMjAxLjUzLDIwMS41MywwLDAsMC00My4xOS0xNUExNTUuMjQsMTU1LjI0LDAsMCwwLDUyOCw5NS4yYy02Ljc2LS42OC0xMS43NC0uODEtMTQuMzktLjgxaDBsLTEuNjIsMC0xLjYyLDBhMTc3LjMsMTc3LjMsMCwwLDAtMzEuNzcsMy4zNSwyMDguMjMsMjA4LjIzLDAsMCwwLTU2LjEyLDE3LjU2LDE4MSwxODEsMCwwLDAtMjAuMjcsMTEuNzUsMjQ3LjQzLDI0Ny40MywwLDAsMC0zNi41NywyNi44MUMzNjAuMjUsMTU4LjYyLDM1NSwxNjMuNjgsMzUwLDE2OWMtNzEuMzUsNjUuMjUtMTU5LjUsMTcyLTI0MC4zOSwyNzIuMjhDOTMuNzMsNDYwLjg4LDgwLDQ3Ny44Nyw3MC41Miw0ODkuMTcsNDIuMzUsNTIwLDIyLjQzLDU1NC45LDExLjMxLDU5MywuNzIsNjI5LjIyLTEuNzMsNjY3LjY5LDQsNzA3LjMxLDE1LDc4Mi40OSw1NS43OCw4NTkuMTIsMTE4LjkzLDkyMy4wOWEyMiwyMiwwLDAsMCwxNS41OSw2LjUyaDEuODNsMS44Ny0uMzJjODEuMDYtMTMuOTEsMTEwLTc5LjU3LDE0My40OC0xNTUuNiwzLjkxLTguODgsNy45NS0xOC4wNSwxMi4yLTI3LjQzcTUuNDIsOC41NCwxMS4zOSwxNi4yM2MzMS44NSw0MC45MSw3NS4xMiw2NC42NywxMzIuMzIsNzIuNjNsMTguOCwyLjYyLDQuOTUtMTguMzNjMTMuMjYtNDkuMDcsMzUuMy05MC44NSw1MC42NC0xMTYuMTksMTUuMzQsMjUuMzQsMzcuMzgsNjcuMTIsNTAuNjQsMTE2LjE5bDUsMTguMzMsMTguOC0yLjYyYzU3LjItOCwxMDAuNDctMzEuNzIsMTMyLjMyLTcyLjYzcTYtNy42OCwxMS4zOS0xNi4yM2M0LjI1LDkuMzgsOC4yOSwxOC41NSwxMi4yLDI3LjQzLDMzLjQ5LDc2LDYyLjQyLDE0MS42OSwxNDMuNDgsMTU1LjZsMS44MS4zMWgxLjg5YTIyLDIyLDAsMCwwLDE1LjU5LTYuNTJjNjMuMTUtNjQsMTAzLjk1LTE0MC42LDExNC44OS0yMTUuNzhDMTAyNS43Myw2NjcuNjksMTAyMy4yOCw2MjkuMjIsMTAxMi42OSw1OTNaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzY0LjE1LDE4NS4yM2MxNy44OS0xNi40LDM0LjctMzAuMTUsNDkuNzctNDAuMTFhMjEyLDIxMiwwLDAsMSw2NS45My0yNS43M0ExOTgsMTk4LDAsMCwxLDUxMiwxMTYuMjdhMTk2LjExLDE5Ni4xMSwwLDAsMSwzMiwzLjFjNC41LjkxLDkuMzYsMi4wNiwxNC41MywzLjUyLDYwLjQxLDIwLjQ4LDg0LjkyLDkxLjA1LTQ3LjQ0LDI0OC4wNi0yOC43NSwzNC4xMi0xNDAuNywxOTQuODQtMTg0LjY2LDI2OC40MmE2MzAuODYsNjMwLjg2LDAsMCwwLTMzLjIyLDU4LjMyQzI3Niw2NTUuMzQsMjY1LjQsNTk4LDI2NS40LDUyMC4yOSwyNjUuNCwzNDAuNjEsMzExLjY5LDI0MC43NCwzNjQuMTUsMTg1LjIzWiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTUyNy41NCwzODQuODNjODQuMDYtOTkuNywxMTYuMDYtMTc3LjI4LDk1LjIyLTIzMC43NCwxMS42Miw4LjY5LDI0LDE5LjIsMzcuMDYsMzEuMTMsNTIuNDgsNTUuNSw5OC43OCwxNTUuMzgsOTguNzgsMzM1LjA3LDAsNzcuNzEtMTAuNiwxMzUuMDUtMjcuNzcsMTc3LjRhNjI4LjczLDYyOC43MywwLDAsMC0zMy4yMy01OC4zMmMtMzktNjUuMjYtMTMxLjQ1LTE5OS0xNzEuOTMtMjUyLjI3QzUyNi4zMywzODYuMjksNTI3LDM4NS41Miw1MjcuNTQsMzg0LjgzWiIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTEzNC41OCw5MDguMDdoLS4wNmEuMzkuMzksMCwwLDEtLjI3LS4xMWMtMTE5LjUyLTEyMS4wNy0xNTUtMjg3LjQtNDcuNTQtNDA0LjU4LDM0LjYzLTQxLjE0LDEyMC0xNTEuNiwyMDIuNzUtMjQyLjE5LTMuMTMsNy02LjEyLDE0LjI1LTguOTIsMjEuNjktMjQuMzQsNjQuNDUtMzYuNjcsMTQ0LjMyLTM2LjY3LDIzNy40MSwwLDU2LjUzLDUuNTgsMTA2LDE2LjU5LDE0Ny4xNEEzMDcuNDksMzA3LjQ5LDAsMCwwLDI4MC45MSw3MjNDMjM3LDgxNi44OCwyMTYuOTMsODkzLjkzLDEzNC41OCw5MDguMDdaIi8+PHBhdGggY2xhc3M9ImNscy01IiBkPSJNNTgzLjQzLDgxMy43OUM1NjAuMTgsNzI3LjcyLDUxMiw2NjQuMTUsNTEyLDY2NC4xNXMtNDguMTcsNjMuNTctNzEuNDMsMTQ5LjY0Yy00OC40NS02Ljc0LTEwMC45MS0yNy41Mi0xMzUuNjYtOTEuMThhNjQ1LjY4LDY0NS42OCwwLDAsMSwzOS41Ny03MS41NGwuMjEtLjMyLjE5LS4zM2MzOC02My42MywxMjYuNC0xOTEuMzcsMTY3LjEyLTI0NS42Niw0MC43MSw1NC4yOCwxMjkuMSwxODIsMTY3LjEyLDI0NS42NmwuMTkuMzMuMjEuMzJhNjQ1LjY4LDY0NS42OCwwLDAsMSwzOS41Nyw3MS41NEM2ODQuMzQsNzg2LjI3LDYzMS44OCw4MDcuMDUsNTgzLjQzLDgxMy43OVoiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik04ODkuNzUsOTA4YS4zOS4zOSwwLDAsMS0uMjcuMTFoLS4wNkM4MDcuMDcsODkzLjkzLDc4Nyw4MTYuODgsNzQzLjA5LDcyM2EzMDcuNDksMzA3LjQ5LDAsMCwwLDIwLjQ1LTU1LjU0YzExLTQxLjExLDE2LjU5LTkwLjYxLDE2LjU5LTE0Ny4xNCwwLTkzLjA4LTEyLjMzLTE3My0zNi42Ni0yMzcuNHEtNC4yMi0xMS4xNi04LjkzLTIxLjdjODIuNzUsOTAuNTksMTY4LjEyLDIwMS4wNSwyMDIuNzUsMjQyLjE5QzEwNDQuNzksNjIwLjU2LDEwMDkuMjcsNzg2Ljg5LDg4OS43NSw5MDhaIi8+PC9zdmc+Cg==
+  introduction: >-
+    **Spring** is a Java framework for building applications based on a
+    distributed microservices architecture. 
+
+    - Spring enables easy packaging and configuration of Spring applications
+    into a self-contained executable application which can be easily deployed as
+    a container to OpenShift.
+
+    - Spring applications can integrate OpenShift capabilities to provide a
+    natural "Spring on OpenShift" developer experience for both existing and
+    net-new Spring applications. For example:
+
+    - Externalized configuration using Kubernetes ConfigMaps and integration
+    with Spring Cloud Kubernetes
+
+    - Service discovery using Kubernetes Services
+
+    - Load balancing with Replication Controllers
+
+    - Kubernetes health probes and integration with Spring Actuator
+
+    - Metrics: Prometheus, Grafana, and integration with Spring Cloud Sleuth
+
+    - Distributed tracing with Istio & Jaeger tracing
+
+    - Developer tooling through Red Hat OpenShift and Red Hat CodeReady
+    developer tooling to quickly scaffold new Spring projects, gain access to
+    familiar Spring APIs in your favorite IDE, and deploy to Red Hat OpenShift
+  tasks:
+    - description: >-
+        To create a Spring application:
+
+        1. Click on the [perspective switcher]{{highlight
+        qs-perspective-switcher}} at the top of the navigation, and select
+        **Developer**.
+
+        1. In the navigation menu, click [Add]{{highlight qs-nav-add}}.
+
+        1. Click the **Project** dropdown menu and select **Create Project** to
+        create a project for your Spring application.
+
+        1. In the **Name** field, enter a name for your new project. Then click
+        **Create**.
+
+        1. On the **+Add** page, click **From Git**. 
+
+        1. In the **Git Repo URL** field, add 
+          
+          ```
+            https://github.com/snowdrop/rest-http-example
+          ``` 
+
+        1. Click **Show advanced Git options** to expose additional form fields.
+
+        1. Add 
+
+          ```
+          2.3.4-2-redhat
+          ``` 
+        to the **Git reference** field.
+
+        1. At the end of the form, click **Create**. 
+      review:
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+        instructions: >-
+          The application is represented by the light grey area with the white
+          border.  The deployment is a white circle.  Verify that the
+          application was successfully created:
+
+          1. Do you see a **rest-http-example-app** application?
+
+          1. Do you see a **rest-http-example** deployment?
+      summary:
+        failed: Try the steps again.
+        success: Your Spring application has been deployed onto OpenShift.
+      title: Create a Spring application
+    - description: >-
+        To view the build status of the Spring application:
+
+        1. Hover over the icon on the bottom left quadrant of the
+        **rest-http-example** deployment to see the build status in a tooltip.
+
+        1. Click on the icon for quick access to the build log.  
+
+            - You should be able to see the log stream of the **rest-http-example-1** build on the **Build Details** page.
+            
+            - The application and its dependencies will be built into a container image and pushed to the OpenShift container registry.
+      review:
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+        instructions: >-
+          Verify the build is complete:
+
+
+          - This build may take a few minutes. When it's finished, a
+          **Complete** badge will surface on the page header beside build name
+          **rest-http-example**. Did this badge appear?
+      summary:
+        failed: Try the steps again.
+        success: Your build is complete.
+      title: View the build status
+    - description: >-
+        To view the associated code:
+
+        1. In the navigation menu, click [Topology]{{highlight
+        qs-nav-topology}}.
+
+        1. The icon on the bottom right quadrant of the **rest-http-example**
+        deployment represents the Git repository of the associated code.  
+
+            - The icon shown can be for Bitbucket, GitHub, GitLab or generic Git.  
+          
+        1. Click on the icon to navigate to the associated Git repository.
+      review:
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+        instructions: >-
+          Verify that you can see the code associated with the sample app:
+
+
+          - Was a new browser tab opened with
+          https://github.com/snowdrop/rest-http-example ?
+
+
+          - Return to the browser tab running OpenShift.  
+      summary:
+        failed: Try the steps again.
+        success: You accessed the Git repository associated with your deployment.
+      title: View the associated Git repository
+    - description: |-
+        To view the pod status:
+        1. To view pod status in a tooltip, hover over the pod donut.
+
+              - Notice that the **rest-http-example** deployment has a pod donut imposed on the circle, representing the pod status (i.e. blue = running).  
+              
+              - The color of the donut indicates the pod status.  
+      review:
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+        instructions: |-
+          Verify you see the pod status:
+
+          - Do you see the number of associated pods and their statuses?
+      summary:
+        failed: Try the steps again.
+        success: Your deployment has one running pod.
+      title: View the pod status
+    - description: >-
+        Since a Java builder image was used during the **Import from Git** flow,
+        a Java icon is used by default in topology.  
+
+          - This icon is determined by the value of the `app.openshift.io/runtime` label.
+
+          - Let’s change the icon associated with the **rest-http-example** deployment to indicate that it is a Spring application.
+
+        1. Click on the **rest-http-example** deployment.
+
+        1. In the side panel, click on the Actions drop-down and click the
+        **Edit labels** menu item.
+
+        1. Click on the “x” next to the `app.openshift.io/runtime=java` label to
+        remove the entry
+
+        1. Add an additional label: 
+
+          ```
+          app.openshift.io/runtime=rh-spring-boot
+          ```
+
+        1. Click on **Save** to save the labels.
+      review:
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+        instructions: >-
+          Verify you have updated the icon:
+
+
+          - Has the Spring icon replaced the Java icon in the
+          **rest-http-example** deployment? 
+      summary:
+        failed: Try the steps again.
+        success: You changed the icon associated with your deployment.
+      title: Change the deployment icon to Spring
+    - description: >-
+        The external link icon on the top right quadrant of the
+        **rest-http-example** deployment represents the route URL.  
+
+        1. Click on the external link icon to open the URL and run the
+        application in a new browser tab.
+      review:
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+        instructions: |-
+          Verify your Spring application is running:
+
+          - Is the new tab titled **HTTP Example**?
+      summary:
+        failed: Try the steps again.
+        success: Your Spring application is running.
+      title: Run the Spring application

packages/dev/src/quickstarts-data/quick-start-test-data.ts

@@ -1,23 +1,25 @@
-import {
-  QuickStart
-} from "@patternfly/quickstarts";
 import {
   ProcedureAdocHtmlParser,
   ProcedureAsciiDocParser,
   QuickstartAsciiDocParser,
 } from "./mocks/parsers";
+import {
+  QuickStart
+} from "@patternfly/quickstarts";
 
 import { explorePipelinesQuickStart } from "./mocks/json/explore-pipeline-quickstart";
 import { exploreServerlessQuickStart } from "./mocks/json/explore-serverless-quickstart";
 import { monitorSampleAppQuickStart } from "./mocks/json/monitor-sampleapp-quickstart";
 
 import addHealthchecksQuickstart from "./mocks/yamls/add-healthchecks-quickstart.yaml";
 import demo from "./mocks/yamls/demo.yaml";
+import external from "./mocks/yamls/external.yaml";
 import installAssociatePipelineQuickstart from "./mocks/yamls/install-associate-pipeline-quickstart.yaml";
+import nodeWithS2i from "./mocks/yamls/node-with-s2i.yaml";
 import sampleApplicationQuickstart from "./mocks/yamls/sample-application-quickstart.yaml";
 import serverlessApplicationQuickstart from "./mocks/yamls/serverless-application-quickstart.yaml";
-import external from "./mocks/yamls/external.yaml";
-import nodeWithS2i from "./mocks/yamls/node-with-s2i.yaml";
+import springWithS2i from "./mocks/yamls/spring-with-s2i.yaml";
+import copyExecuteSnippet from "./mocks/yamls/copy-execute-snippets.yaml";
 
 // import addHealthchecksQuickstartADoc from "raw-loader!./mocks/asciidoc/add-healthchecks-quickstart.adoc";
 // import template from "raw-loader!./mocks/asciidoc/TEMPLATE_PROCEDURE.adoc";
@@ -91,6 +93,8 @@ export const allQuickStarts: QuickStart[] = [
   serverlessApplicationQuickstart,
   external,
   nodeWithS2i,
+  springWithS2i,
+  copyExecuteSnippet,
   // QuickstartAsciiDocParser(addHealthchecksQuickstartADoc),
   // ProcedureAsciiDocParser(template, allAsciiDocImports.template.options),
   ProcedureAsciiDocParser(sampleA, allAsciiDocImports.sampleA.options),