🚧 WIP: THREESCALE-9196: Added the quick start for learning about products.

[dfennessy]

What this PR does / why we need it:

This PR adds the quick start for learning about products.

Which issue(s) this PR fixes

THREESCALE-9196

Verification steps

Reviewers

• Eng: @josemigallas / @lvillen
• Docs: @lcavalle

[dfennessy]

FAO: @lvillen @josemigallas

Some questions that need to be considered:

1. How do we split the page up between quick starts and the new content. For example documentation and/or the new content as in this PR, which isn't really a "task", but information? Like it's done here: https://console.redhat.com/application-services/learning-resources?
2. How/where do we add images? Which folder? An existing folder in the repo or a new folder for these assets?
3. Removing the review your work module causes an issue with clicking Next. It looks like it's still picking up the check your work part, so two clicks is requires to finish the task.
4. How do we link to other Quick Start cards? For example the Next option for this links to [Create an API Product]
5. Which URL should be used to point to information about Products. Currently I am using this one: https://access.redhat.com/documentation/en-us/red_hat_3scale_api_management/2.13/html/getting_started/first-steps-with-threescale_configuring-your-api#creating-products-test-api-calls_configuring-your-api

[lvillen]

Some questions that need to be considered:

Some resources can be of help:

https://quickstarts.netlify.app
https://github.com/patternfly/patternfly-quickstarts
https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html

1. How do we split the page up between quick starts and the new content. For example documentation and/or the new content as in this PR, which isn't really a "task", but information? Like it's done here: https://console.redhat.com/application-services/learning-resources?

There's not a clear way to do this, but we'll reach PF team and see what can we do about it.

2. How/where do we add images? Which folder? An existing folder in the repo or a new folder for these assets?

Let's add a new folder for images at QuickStarts/templates/images. We can use images like in any regular Markdown or use an HTML tag like the following example: https://github.com/patternfly/patternfly-quickstarts/blob/720dbd5dc56f65eeac9383b65e05be1c13197e4e/packages/dev/src/quickstarts-data/yaml/template.yaml#L45-L46

3. Removing the review your work module causes an issue with clicking Next. It looks like it's still picking up the check your work part, so two clicks is requires to finish the task.

This looks like a bug. Upgrading the library might solve the issue.

4. How do we link to other Quick Start cards? For example the Next option for this links to [Create an API Product]

You can use the nextQuickStart markdown tag as you can check in the following example:
https://github.com/patternfly/patternfly-quickstarts/blob/720dbd5dc56f65eeac9383b65e05be1c13197e4e/packages/dev/src/quickstarts-data/yaml/template.yaml#L136-L137

5. Which URL should be used to point to information about Products. Currently I am using this one: https://access.redhat.com/documentation/en-us/red_hat_3scale_api_management/2.13/html/getting_started/first-steps-with-threescale_configuring-your-api#creating-products-test-api-calls_configuring-your-api

Latest documentation should be fine, but we don't have an answer for this.

[github-actions]

This PR is stale because it has not received activity for more than 14 days. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This PR is stale because it has not received activity for more than 14 days. Remove stale label or comment or this will be closed in 7 days.

[dfennessy]

Some questions that need to be considered:

Some resources can be of help:

https://quickstarts.netlify.app https://github.com/patternfly/patternfly-quickstarts https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html

1. How do we split the page up between quick starts and the new content. For example documentation and/or the new content as in this PR, which isn't really a "task", but information? Like it's done here: https://console.redhat.com/application-services/learning-resources?

There's not a clear way to do this, but we'll reach PF team and see what can we do about it.

2. How/where do we add images? Which folder? An existing folder in the repo or a new folder for these assets?

Let's add a new folder for images at QuickStarts/templates/images. We can use images like in any regular Markdown or use an HTML tag like the following example: https://github.com/patternfly/patternfly-quickstarts/blob/720dbd5dc56f65eeac9383b65e05be1c13197e4e/packages/dev/src/quickstarts-data/yaml/template.yaml#L45-L46

3. Removing the review your work module causes an issue with clicking Next. It looks like it's still picking up the check your work part, so two clicks is requires to finish the task.

This looks like a bug. Upgrading the library might solve the issue.

4. How do we link to other Quick Start cards? For example the Next option for this links to [Create an API Product]

You can use the nextQuickStart markdown tag as you can check in the following example: https://github.com/patternfly/patternfly-quickstarts/blob/720dbd5dc56f65eeac9383b65e05be1c13197e4e/packages/dev/src/quickstarts-data/yaml/template.yaml#L136-L137

5. Which URL should be used to point to information about Products. Currently I am using this one: https://access.redhat.com/documentation/en-us/red_hat_3scale_api_management/2.13/html/getting_started/first-steps-with-threescale_configuring-your-api#creating-products-test-api-calls_configuring-your-api

Latest documentation should be fine, but we don't have an answer for this.

Hi @lvillen

I'm trying to get the image to display using the following, however it's not working. I get the broken image link icon.

![The paths in a product through backend A and backend B through to endpoint A and endpoint B respectively.](/images/learn-about-products.png "API endpoints in a product")

Is there something I'm missing? The images folder is in the same directory as the yaml file with the png image in it.

[dfennessy]

Does anyone know why "Some checks haven’t completed yet" and don't complete? Is there something I need to do/fix so that these checks pass?

[dfennessy]

@josemigallas @lcavalle
Doing some research about how to split up the page as noted in my previous comment in question 1. It looks like that magic possibly happens here: app/javascript/src/QuickStarts/components/QuickStartContainer.tsx There is some code for the QuickStartCatalogPage, which maybe we can replicate for adding titles for the Documentation and tour-related content?

[github-actions]

This PR is stale because it has not received activity for more than 14 days. Remove stale label or comment or this will be closed in 7 days.

[dfennessy]

FAO: @lvillen @josemigallas

Some questions that need to be considered:

1. How do we split the page up between quick starts and the new content. For example documentation and/or the new content as in this PR, which isn't really a "task", but information? Like it's done here: https://console.redhat.com/application-services/learning-resources?
2. How/where do we add images? Which folder? An existing folder in the repo or a new folder for these assets?
3. Removing the review your work module causes an issue with clicking Next. It looks like it's still picking up the check your work part, so two clicks is requires to finish the task.
4. How do we link to other Quick Start cards? For example the Next option for this links to [Create an API Product]
5. Which URL should be used to point to information about Products. Currently I am using this one: https://access.redhat.com/documentation/en-us/red_hat_3scale_api_management/2.13/html/getting_started/first-steps-with-threescale_configuring-your-api#creating-products-test-api-calls_configuring-your-api

FAO: @lvillen @josemigallas

Regarding the below original queries I had. I'm crossing out ones I've taken care of, leaving the ones I'm still working on, and making bold for you guys the ones you'll take care of:

1. How do we split the page up between quick starts and the new content. For example documentation and/or the new content as in this PR, which isn't really a "task", but information? Like it's done here: https://console.redhat.com/application-services/learning-resources?
   2. How/where do we add images? Which folder? An existing folder in the repo or a new folder for these assets?
2. Removing the review your work module causes an issue with clicking Next. It looks like it's still picking up the check your work part, so two clicks is requires to finish the task.
   4. How do we link to other Quick Start cards? For example the Next option for this links to [Create an API Product]
3. Which URL should be used to point to information about Products. Currently I am using this one: https://access.redhat.com/documentation/en-us/red_hat_3scale_api_management/2.13/html/getting_started/first-steps-with-threescale_configuring-your-api#creating-products-test-api-calls_configuring-your-api

[dfennessy]

@lcavalle @josemigallas

I clicked ready for review. Hopefully that is the correct action. WIP still remains in the title, but that's probably correct, right?

[github-actions]

This PR is stale because it has not received activity for more than 14 days. Remove stale label or comment or this will be closed in 7 days.

[dfennessy]

Refer to #3489