@patternfly/quickstarts 0.0.0

package/src/data/mocks/yamls/install-associate-pipeline-quickstart.yaml

@@ -0,0 +1,74 @@
+apiVersion: console.openshift.io/v1
+kind: ConsoleQuickStart
+metadata:
+  name: install-app-and-associate-pipeline
+spec:
+  version: 4.7
+  displayName: Deploying an application with a pipeline
+  durationMinutes: 10
+  icon: data:image/png;base64,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
+  description: Import an application from Git, add a pipeline to it, and run the Pipeline.
+  prerequisites: ['']
+  introduction: This quick start guides you through creating an application and associating it with a CI/CD pipeline.
+  tasks:
+  - title: Importing an application and associate it with a pipeline
+    description: |-
+      ### Follow these steps to create an application.
+      1. From the **Developer** perspective, in the navigation menu, click **+Add**.
+      2. At the top of the page, in the Projects list, select a project or create a new project to put the application in.
+      3. Click **From Git**.
+      4. In the **Git Repo URL** field, enter `https://github.com/sclorg/django-ex.git`.
+      4. In the **Pipelines** section, click the checkbox to add a pipeline to your application.
+      5. Click **Create** when you’re done.
+    review:
+      instructions: |-
+        #### To verify that your application was successfully created:
+        Momentarily, you should be brought to the **Topology** view.
+
+        Is there an Application and Deployment name `django-ex?`
+      failedTaskHelp: This task isn’t verified yet. Try the task again.
+    summary:
+      success: You just installed a deployment with an associated pipeline! Next,
+        we'll explore your application in topology.
+      failed: Check your work to make sure that the application and deployment are
+        successfully created.
+  - title: Exploring your application
+    description: |-
+      ### Let's explore your application in topology:
+      1. Click on the deployment to see associated details in the side panel.
+      2. Click on the Resources tab in the side panel to view related resources.
+    review:
+      instructions: |-
+        #### To verify that the application has been created and a pipeline was associated:
+        1. The **Resources** tab of the side panel shows many associated resources, including **Pods**, **Pipeline Runs**, and **Routes**.
+        2. The **Pipeline Runs** section displays the associated pipeline.
+
+        Is there a Pipeline named django-ex-git?
+      failedTaskHelp: This task isn’t verified yet. Try the task again.
+    summary:
+      success: You just located the associated Pipeline! Next, we'll start and explore
+        your Pipeline.
+      failed: Check your work to locate the associated pipeline.
+  - title: Starting your pipeline
+    description: |-
+      ### You’ve just explored the topology of your application and seen it’s related resources.  Now let’s start your pipeline.
+      Notice the Pipeline Runs section of the Side Panel
+      1. The first row shows the Pipeline associated with the application and an action button to **Start Last Run**, which is disabled.
+      2. Click on the Pipeline link, which should bring you to the **Pipeline Details** page.
+      3. From the Action menu, click on **Start** to start your Pipeline.
+    review:
+      instructions: |-
+        #### Momentarily, you should be brought to the **Pipeline Run Details** page. To verify that your pipeline has started,
+        1. Note that the **Pipeline Runs Details** section shows a visualization of the pipeline run status and the tasks in the pipeline.
+        2. Hovering over a task shows a tooltip with the details of the associated steps.
+        3. Click on the **Logs** tab to watch the progress of your pipeline run.
+        4. When the pipeline run is complete, you will see a **Succeeded** badge on the page title.
+
+        Is the status Succeeded?
+      failedTaskHelp: This task isn’t verified yet. Try the task again.
+    summary:
+      success: You have run your pipeline successfully
+      failed: This task is not verified yet. Try the task again,
+  conclusion: You just created an application and associated a pipeline with it, and
+    successfully started the pipeline.
+  nextQuickStart: ['']

package/src/data/mocks/yamls/monitor-sampleapp-quickstart.yaml

@@ -0,0 +1,66 @@
+apiVersion: console.openshift.io/v1
+kind: ConsoleQuickStart
+metadata:
+  name: monitor-sampleapp
+spec:
+  version: 4.7
+  displayName: Monitoring your sample application
+  durationMinutes: 10
+  icon: ''
+  description: Now that you’ve created a sample application and added health checks,
+    let’s monitor your application.
+  prerequisites: [You completed the "Getting started with a sample" quick start.]
+  introduction: |-
+    ### This quick start shows you how to monitor your sample application.
+    You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.
+  tasks:
+    - title: Viewing the monitoring details of your sample application
+      description: |-
+        ### To view the details of your sample application:
+        1. Go to the project your sample application was created in.
+        2. In the **</> Developer** perspective, go to **Topology** view.
+        3. Click on the **nodejs-sample** deployment to view its details.
+        4. Click on the **Monitoring** tab in the side panel.
+
+        You can see context sensitive metrics and alerts in the **Monitoring** tab.
+      review:
+        instructions: |-
+          #### To verify you can view the monitoring information:
+          1. Do you see a **Metrics** accordion in the side panel?
+          2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion?
+          3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have learned how you can monitor your sample app!
+        failed: Try the steps again.
+    - title: Viewing your project monitoring dashboard
+      description: |-
+        ### To view the project monitoring dashboard in the context of **nodejs-sample**:
+        1. Click on the **View monitoring dashboard** link in the side panel.
+        2. You can change the **Time Range** and **Refresh Interval** of the dashboard.
+        3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.
+      review:
+        instructions: |-
+          #### To verify that you are able to view the monitoring dashboard:
+          Do you see metrics charts in the dashboard?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have learned how to view the dashboard in the context of your sample
+          app!
+        failed: Try the steps again.
+    - title: Viewing custom metrics
+      description: |-
+        ### To view custom metrics:
+        1. Click on the **Metrics** tab of the **Monitoring** page.
+        2. Click the **Select Query** drop-down list to see the available queries.
+        3. Click on **Filesystem Usage** from the list to run the query.
+      review:
+        instructions: |
+          #### Verify you can see the chart associated with the query:
+          Do you see a chart displayed with filesystem usage for your project?  Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL.
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have learned how to run a query!
+        failed: Try the steps again.
+  conclusion: You have learned how to access workload monitoring and metrics!
+  nextQuickStart: ['']

package/src/data/mocks/yamls/sample-application-quickstart.yaml

@@ -0,0 +1,97 @@
+apiVersion: console.openshift.io/v1
+kind: ConsoleQuickStart
+metadata:
+  name: sample-application
+spec:
+  version: 4.7
+  displayName: Getting started with a sample
+  durationMinutes: 10
+  icon: ''
+  description: Is this the first time you’ve used OpenShift? Let's start with a simple
+    sample app to learn the basics.
+  prerequisites: ['']
+  introduction: '### This Quick Start shows you how to deploy a sample application
+    to OpenShift.'
+  tasks:
+    - title: Creating a sample application
+      description: |-
+        ### To create a sample application:
+        1. Using the perspective switcher at the top of the navigation, go to **</> Developer**.
+        2. Go to the **+Add** page in the navigation.
+        3. Using the project drop-down list, select the project you would like to create the sample application in. You can also create a new one if you’d like.
+        4. Click **Samples** to create an application from a code sample.
+        5. Click on the **Node.js** card.
+        6. Scroll down and click **Create**.
+
+        The **Topology** view will load with your new sample application. The application is represented by the light grey area with the white border. The deployment is a white circle.
+      review:
+        instructions: |-
+          #### To verify the application was successfully created:
+          1. Do you see a **sample-app** application?
+          2. Do you see a **nodejs-sample** deployment?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have created a sample application!
+        failed: Try the steps again.
+    - title: Viewing build status
+      description: |-
+        ### To view the build status of the sample application:
+        1. Hover over the icon on the bottom left quadrant of the **nodejs-sample** deployment to see the build status in a tooltip.
+        2. Click on the icon for quick access to the build log.
+
+        You should be able to see the log stream of the **nodejs-sample-1** build on the **Build Details** page.
+      review:
+        instructions: |-
+          #### To verify the build is complete:
+          Wait for the build to complete. It may take a few minutes.  Do you see a **Completed** badge on the page header?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: Your sample app is now built!
+        failed: Try the steps again.
+    - title: Viewing the associated Git repo
+      description: |
+        ### To view the associated code:
+        1. If you aren't already there, go to the **Topology** page in the navigation.
+        2. The icon on the bottom right quadrant of the **nodejs-sample** deployment represents the Git repo of the associated code.  The icon shown can be for Bitbucket, GitHub, GitLab or generic Git. Click on it to navigate to the associated Git repository.
+      review:
+        instructions: |-
+          #### Verify you can see the code associated with the sample app:
+          Was a new browser tab opened with https://github.com/sclorg/nodejs-ex?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have viewed the associated Git repo.
+        failed: Try the steps again.
+    - title: Viewing the pod status
+      description: |-
+        ### To view the pod status:
+        1. Click on the browser tab with OpenShift.  Notice that the **nodejs-sample** deployment has a pod donut imposed on the circle, representing the pod status
+        2. Hover over the pod donut.
+
+        You should now see the pod status in a tooltip.
+      review:
+        instructions: |-
+          #### To verify you see the pod status:
+          Do you see the number of associated pods and their statuses?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have viewed the pod status for your app!
+        failed: Try the steps again.
+    - title: Running the sample application
+      description: |-
+        ### To run the sample application:
+        1. The icon on the top right quadrant of the **nodejs-sample** deployment represents the route URL. Click on it to open the URL and run the application.
+
+        The application will be run in a new tab.
+      review:
+        instructions: |-
+          #### To verify your sample application is running:
+          1. Make sure you are in the new tab.
+          2. Does the page have a **Welcome to your Node.js application on OpenShift** title?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have run your sample app!
+        failed: Try the steps again.
+  conclusion: Your sample application is deployed and ready! To add health checks
+    to your sample app, take the **Adding health checks to your sample application**
+    quick start
+  nextQuickStart: [add-healthchecks]

package/src/data/mocks/yamls/serverless-application-quickstart.yaml

@@ -0,0 +1,141 @@
+apiVersion: console.openshift.io/v1
+kind: ConsoleQuickStart
+metadata:
+  name: serverless-application
+spec:
+  version: 4.7
+  displayName: Exploring Serverless applications
+  icon: data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2UwMzQwMDt9LmNscy0ye2ZpbGw6I2NlMmUwMDt9LmNscy0ze2ZpbGw6bm9uZTt9LmNscy00e2ZpbGw6I2ZmZjt9LmNscy01e2ZpbGw6I2RjZGNkYzt9LmNscy02e2ZpbGw6I2FhYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlJlZF9IYXQtT3BlbnNoaWZ0NC1DYXRhbG9nX0ljb25zLVNlcnZlcmxlc3M8L3RpdGxlPjxjaXJjbGUgY2xhc3M9ImNscy0xIiBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik04NS4zNiwxNC42NEE1MCw1MCwwLDAsMSwxNC42NCw4NS4zNloiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik00MC41Nyw0Ny40MmEzLjg5LDMuODksMCwxLDAsMy44OCwzLjg4QTMuODksMy44OSwwLDAsMCw0MC41Nyw0Ny40MloiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0yMS40Miw0Ny40MkEzLjg5LDMuODksMCwxLDAsMjUuMyw1MS4zLDMuODksMy44OSwwLDAsMCwyMS40Miw0Ny40MloiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik01MC4wOSw0OC44NmgtLjE4YTQuMTEsNC4xMSwwLDAsMS0zLjI2LTEuNjMsNy42OSw3LjY5LDAsMCwwLTEyLjE2LDAsNC4xMyw0LjEzLDAsMCwxLTMuMjYsMS42M0gzMWE0LjA5LDQuMDksMCwwLDEtMy4yNS0xLjYzQTcuNjksNy42OSwwLDAsMCwxNCw1MS45M2gwVjY0LjZhMi43OSwyLjc5LDAsMCwwLDIuNzksMi43OWgxNS44TDUxLjM0LDQ4LjY2QTQsNCwwLDAsMSw1MC4wOSw0OC44NloiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik03OC4wNSw0NC4yNWE3LjY1LDcuNjUsMCwwLDAtNS44NSwzQTQuMSw0LjEsMCwwLDEsNjksNDguODZoLS4xOWE0LjEzLDQuMTMsMCwwLDEtMy4yNi0xLjYzLDcuNjksNy42OSwwLDAsMC0xMi4xNiwwLDQuMTYsNC4xNiwwLDAsMS0yLDEuNDNMMzIuNjEsNjcuMzlIODMuMTlBMi43OSwyLjc5LDAsMCwwLDg2LDY0LjZWNTIuMDdBNy43Nyw3Ljc3LDAsMCwwLDc4LjA1LDQ0LjI1WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTIxLjEsNjNoMTBhMS44MywxLjgzLDAsMSwwLDAtMy42NmgtMTBhMS44MywxLjgzLDAsMCwwLDAsMy42NloiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjQwLjU3IiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjQwLjU3IiBjeT0iMjguMjMiIHI9IjEuMzUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjU5LjcyIiBjeT0iMjguMjMiIHI9IjEuMzUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjIxLjQyIiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjUwIiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjY4Ljg5IiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjMxLjA5IiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNiIgY3g9Ijc3Ljk0IiBjeT0iNTQuMzEiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNiIgY3g9IjY4LjkxIiBjeT0iNTQuMzEiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9Ijc3Ljk0IiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjU5LjcyIiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjUwIiBjeT0iMzMuMSIgcj0iMy4wMSIvPjxjaXJjbGUgY2xhc3M9ImNscy00IiBjeD0iMzEuMDkiIGN5PSIzMy4xIiByPSIzLjAxIi8+PGNpcmNsZSBjbGFzcz0iY2xzLTQiIGN4PSI2OC44OSIgY3k9IjMzLjEiIHI9IjMuMDEiLz48L3N2Zz4=
+  durationMinutes: 15
+  description: Learn how to create a Serverless application.
+  prerequisites: ['']
+  introduction: This quick start guides you through creating and using a serverless application.
+  tasks:
+    - title: Creating a serverless application
+      description: |-
+        ### To create a serverless application:
+        1. From the **Developer** perspective, in the navigation menu, click [+Add](/add).
+        2. At the top of the page, in the **Projects** list, select a project to create the application in.
+        3. Click **From Git**.
+        4. In the **Git Repo URL** field, type `https://github.com/sclorg/django-ex.git`.
+        5. Under Resources, select **Knative Service**.
+        6. At the end of the page, click **Create**.
+
+        The **Topology** view displays your new Serverless application. The application is represented by the light gray area with the white border. The Knative Service is the darker gray area with the dotted border. The Pod ring in the middle represents the revision.
+      review:
+        instructions: |-
+          #### To verify the application was successfully created:
+          From the **Topology** view, look for your new application. Wait for the build to complete. It may take a few minutes.
+
+          After the build completes, a green checkmark appears in the lower-left corner of the service. Your application will say  “No Revisions” in the center.
+
+          Do you see the completed application and build?
+        failedTaskHelp:
+          This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/serverless/serving-creating-managing-apps.html#creating-serverless-applications-using-the-openshift-container-platform-web-console)
+          about this topic.
+      summary:
+        success: You just created a Serverless app!
+        failed: Try the steps again.
+    - title: Demoing scalability
+      description: |
+        ### To see your application scale:
+        1. From the **Display Options** list at the top of the **Topology** view, click **Pod Count**.
+        2. Wait for the Pod count to scale down to zero Pods. Scaling down may take a few minutes.
+        3. Click the **Route URL** icon in the upper-right corner of the Knative Service panel. The application opens in a new tab.
+        4. Close the new browser tab and return to the **Topology** view.
+
+        In the **Topology** view, you can see that your application scaled up to one Pod to accommodate your request.  After a few minutes, your application scales back down to zero Pods.
+      review:
+        instructions: |-
+          #### To verify the application scaled down:
+          1. Click the revision inside your service. The badges under the Pod ring and at the top of the side panel should be (REV).
+          2. Click the **Details** tab in the side panel.
+
+          Is the Pod ring autoscaled to zero?
+        failedTaskHelp:
+          This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/applications/application_life_cycle_management/odc-viewing-application-composition-using-topology-view.html#odc-scaling-application-pods-and-checking-builds-and-routes_viewing-application-composition-using-topology-view)
+          about this topic.
+      summary:
+        success: You just scaled up your application to accomodate a traffic request!
+        failed: Try the steps again.
+    - title: Connecting an event source to your Knative Service
+      description: |-
+        ### To connect an event source to your Knative Service:
+        1. On the **Topology** View, hover over your service with your cursor. You should see a blue arrow.
+        2. Click and drag the blue arrow, then drop it anywhere outside the service.
+        3. In the list that appears, click **Event Source**.
+        4. Under the **Type** field, click **PingSource**.
+        5. In the **Data** field, type `This message is from PingSource`. This message is posted when the service is called.
+        6. In the **Schedule** field, type `* * * * *`.  This means that the PingSource will make a call every minute.
+        7. In the **Application** field, select **Sample Serverless App**.
+        8. Click **Create**.
+      review:
+        instructions: |-
+          #### To verify that the event connected to your Knative service:
+
+          Go to the **Topology** view.
+
+          Do you see a PingSource connected by a gray line to the side of your application?
+        failedTaskHelp:
+          This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/serverless/event_sources/knative-event-sources.html)
+          about this topic.
+      summary:
+        success: You just wired an Event Source to your Knative Service!
+        failed: Try the steps again.
+    - title: Forcing a new revision and set traffic distribution
+      description: |-
+        ### To force a revision and set traffic distribution:
+
+        1. In **Topology**, click on the revision inside your service to view its details. The badges under the Pod ring and at the top of the detail panel should be (REV).
+        2. In the side panel, click on the **Resources** tab.
+        3. Scroll down and click on the configuration associated with your service.
+        4. Go to the resource’s **YAML** tab.
+        5. Scroll all the way down until you see `timeoutSeconds`.
+        6. Change the value from `300` to `30` and click **Save**.
+        7. Go back to the **Topology** view.
+        8. Click on your service. The badge at the top of the side panel should be (KSVC).
+        9. In the side panel, click on the **Resources** tab.
+        10. Next to **Revisions**, click **Set Traffic Distribution**.
+        11. Click **Add Revision**.
+        12. In the **Revision** dropdown, select the new revision.
+        13. In the **Split** column, set both revisions to **50**.
+        14. Click **Save**.
+
+        You should now be able to watch as the Pod rings for each revision scale up and down each time the application is pinged.
+      review:
+        instructions: |-
+          #### To verify that you forced a new revision and set traffic distribution:
+
+          Make sure you are still in **Topology** view.
+
+          Do you see two revisions in your Knative Service?
+        failedTaskHelp:
+          This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/serverless/knative_serving/splitting-traffic-between-revisions.html)
+          about this topic.
+      summary:
+        success: You just set a traffic distribution for your Serverless app!
+        failed: Try the steps again.
+    - title: Deleting your application
+      description: |-
+        ### To delete the application you just created:
+
+        1. Click your application’s name. The badge at the top of the side panel should be (A).
+        2. At the top of the resource details panel, click on the **Actions** list.
+        3. Click **Delete application**.
+        4. To confirm deletion, type the application’s name in the **Name** field, and then click **Delete**.
+      review:
+        instructions: |-
+          #### To verify you deleted your application:          :
+
+          Make sure you are still in **Topology** view.
+
+          Has the Sample Serverless App been removed?
+        failedTaskHelp:
+          This task is not verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/applications/application_life_cycle_management/odc-deleting-applications.html)
+          about this topic.
+      summary:
+        success: You just deleted your Serverless app!
+        failed: Try the steps again.
+  conclusion: You just learned how to use Serverless applications in your cluster!
+    To learn more about building Serverless apps, take a look at our [Knative Cookbook](https://redhat-developer-demos.github.io/knative-tutorial/knative-tutorial/index.html).
+  nextQuickStart: ['']

package/src/data/quick-start-test-data.ts

@@ -0,0 +1,10 @@
+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';
+
+export const allQuickStarts: QuickStart[] = [
+  explorePipelinesQuickStart,
+  exploreServerlessQuickStart,
+  monitorSampleAppQuickStart,
+];

package/src/data/test-utils.ts

@@ -0,0 +1,11 @@
+import { QuickStart } from '@patternfly/quickstarts';
+import { allQuickStarts } from './quick-start-test-data';
+
+export const getQuickStarts = (): QuickStart[] => allQuickStarts;
+
+export const contextValues = {
+  allQuickStarts,
+  activeQuickStartID: '',
+  startQuickStart: () => {},
+  restartQuickStart: () => {},
+};

package/src/declaration.d.ts

@@ -0,0 +1,2 @@
+declare module '*.scss';
+declare module '*.json';

package/src/index.ts

@@ -0,0 +1,17 @@
+import './styles/style.scss';
+
+export * from './QuickStartCatalogPage';
+export * from './catalog';
+export * from './ConsoleInternal/components/utils';
+export * from './QuickStartDrawer';
+export * from './HelpTopicDrawer';
+export * from './utils/const';
+export * from './utils/quick-start-context';
+export * from './utils/quick-start-types';
+export * from './utils/help-topic-context';
+export * from './utils/help-topic-types';
+export * from './utils/quick-start-utils';
+export * from './utils/useLocalStorage';
+export * from './utils/asciidoc-procedure-parser';
+export { default as QuickStartPanelContent } from './QuickStartPanelContent';
+export { default as QuickStartCloseModal } from './QuickStartCloseModal';

package/src/locales/en/quickstart.json

@@ -0,0 +1,46 @@
+{
+  "No results found": "No results found",
+  "No results match the filter criteria. Remove filters or clear all filters to show results.": "No results match the filter criteria. Remove filters or clear all filters to show results.",
+  "Clear all filters": "Clear all filters",
+  "Quick Starts": "Quick Starts",
+  "Complete ({{statusCount, number}})": "Complete ({{statusCount, number}})",
+  "In progress ({{statusCount, number}})": "In progress ({{statusCount, number}})",
+  "Not started ({{statusCount, number}})": "Not started ({{statusCount, number}})",
+  "Filter by keyword...": "Filter by keyword...",
+  "Select filter": "Select filter",
+  "Status": "Status",
+  "{{count, number}} item": "{{count, number}} item",
+  "{{count, number}} item_plural": "{{count, number}} items",
+  "Prerequisites ({{totalPrereqs}})": "Prerequisites ({{totalPrereqs}})",
+  "View Prerequisites ({{totalPrereqs}})": "View Prerequisites ({{totalPrereqs}})",
+  "Prerequisites": "Prerequisites",
+  "Show prerequisites": "Show prerequisites",
+  "Complete": "Complete",
+  "In progress": "In progress",
+  "Not started": "Not started",
+  "{{duration, number}} minutes": "{{duration, number}} minutes",
+  "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.": "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.",
+  "Start {{nextQSDisplayName}} quick start": "Start {{nextQSDisplayName}} quick start",
+  "Start": "Start",
+  "Continue": "Continue",
+  "Next": "Next",
+  "Close": "Close",
+  "Back": "Back",
+  "Restart": "Restart",
+  "In this quick start, you will complete {{count, number}} task": "In this quick start, you will complete {{count, number}} task",
+  "In this quick start, you will complete {{count, number}} task_plural": "In this quick start, you will complete {{count, number}} tasks",
+  "{{taskIndex, number}}": "{{taskIndex, number}}",
+  "Check your work": "Check your work",
+  "Yes": "Yes",
+  "No": "No",
+  "{{index, number}} of {{tasks, number}}": "{{index, number}} of {{tasks, number}}",
+  "Leave quick start?": "Leave quick start?",
+  "Cancel": "Cancel",
+  "Leave": "Leave",
+  "Your progress will be saved.": "Your progress will be saved.",
+  "Not available": "Not available",
+  "Copy to clipboard": "Copy to clipboard",
+  "Successfully copied to clipboard!": "Successfully copied to clipboard!",
+  "Type": "Quick start",
+  "{{type}} • {{duration, number}} minutes": "{{type}} • {{duration, number}} minutes"
+}

package/src/styles/_base.scss

@@ -0,0 +1,54 @@
+// Base element styles.
+// Please DO NOT add rules of this type.
+.pfext-quick-start-panel-content__body {
+  dl {
+    margin: 0px; }
+
+  // match pf4 styling / table col head styling
+  dt {
+    font-weight: var(--pf-v5-global--FontWeight--bold); }
+
+  dd {
+    margin-bottom: 20px; }
+
+  dd:last-child {
+    margin-bottom: 0px; }
+
+  input[type="number"] {
+    -webkit-appearance: textfield;
+    appearance: textfield;
+    max-width: 100px;
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+    }
+  }
+
+  input[type="radio"] {
+    margin-right: 7px;
+  }
+
+  .pf-v5-c-list {
+    --pf-v5-c-list--PaddingLeft: 20px;
+  }
+}
+
+// drawer
+.pfext-quick-start-panel-content__header,
+.pfext-quick-start-panel-content__body,
+// catalog gallery wrapper
+.pfext-page-layout__content,
+// catalog item prereq popover
+.pfext-popover__base {
+  --pf-v5-global--FontSize--md: 14px;
+  --pf-v5-global--FontSize--sm: 13px;
+
+  ul {
+      list-style-type: disc;
+  }
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    margin-top: 1px !important;
+  }
+}

package/src/styles/_dark-custom-override.scss

@@ -0,0 +1,62 @@
+.pf-v5-theme-dark {
+  .pfext-catalog-item-icon__img--large {
+    // Not perfect, but gives a better result for colors than just inverting
+    // by inverts to switch b/w, then rotates to get colors approximately back
+    filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
+  }
+
+  // duration color was gray on white but on the blue header, only white text works
+  .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
+    color: var(--pf-v5-global--Color--light-100);
+  }
+
+  .pfext-quick-start-task-header__subtitle {
+    color: var(--pf-v5-global--palette--black-200) !important;
+  }
+
+  .pfext-quick-start-task-header__task-icon-init {
+    background-color: var(--pf-v5-global--primary-color--300);
+  }
+
+  .pfext-quick-start-task-header__tryagain {
+    color: var(--pf-v5-global--palette--black-200) !important;
+  }
+
+  .pfext-markdown-view pre:not(.pfext-code-block__pre) {
+    background-color: var(--pf-v5-global--BackgroundColor--100);
+    border-color: var(--pf-v5-global--BorderColor--100);
+  }
+
+  .pfext-markdown-view .pf-v5-c-code-block__code {
+    color: var(--pf-v5-global--Color--100);
+    background-color: var(--pf-v5-global--palette--black-600);
+  }
+
+  .pfext-markdown-view .pf-v5-c-code-block,
+  .pfext-markdown-view .pf-v5-c-code-block code {
+    background-color: var(--pf-v5-global--BackgroundColor--400);
+  }
+
+  :where(.pfext-markdown-view) .pf-v5-c-clipboard-copy.pf-m-inline {
+    --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
+  }
+
+  // Make the cards light on dark background. It would be better to use pf-v5-c-page__main-section variable but we aren't using a page section here.
+  .pfext-page-layout__content {
+    background-color: var(--pf-v5-global--BackgroundColor--200);
+  }
+
+  .pfext-quick-start-catalog__gallery-item .pf-v5-c-card {
+    --pf-v5-c-card--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  }
+
+  // Alerts currently has the wrong background in the PF dark stylesheet. This can be removed once that is fixed.
+  .pf-v5-c-alert {
+    --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--palette--black-700);
+    --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-global--palette--black-700);
+    --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--pf-v5-global--palette--black-700);
+    --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-v5-global--palette--black-700);
+    --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-v5-global--palette--black-700);
+    --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--palette--black-700);
+  }
+}

package/src/styles/legacy-bootstrap/README.md

@@ -0,0 +1,21 @@
+Contains a number of bootstrap styles that were implicitly in use within the markdown sections.
+
+Before we had a dependency on bootstrap-sass and pulled in several of their styles.
+
+"bootstrap-sass": "^3.3.7",
+
+```
+.pfext-markdown-view {
+  @import './ConsoleInternal/style/vars';
+  @import 'patternfly/dist/sass/patternfly/variables';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/variables';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/mixins';
+  @import 'patternfly/dist/sass/patternfly/bootstrap-mixin-overrides';
+
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/type';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/code';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/tables';
+}
+```
+
+Now we try to contain to a smaller subset and copy it in directly.