Grouping Mechanism

packages/dev/src/App2.tsx

@@ -3,6 +3,7 @@ import { Page, Button } from '@patternfly/react-core';
 import {
   LoadingBox,
   QuickStart,
+  QuickStartLearningPath,
   QuickStartContainer,
   QuickStartContainerProps,
   useLocalStorage,
@@ -50,6 +51,17 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
 
   const withQueryParams = true;
 
+  const exmapleLearningPath: QuickStartLearningPath = {
+    name: 'example-learning-path',
+    displayName: 'Example Learning Path',
+    quickStarts: {
+      1: 'example-learning-path-part-1',
+      2: 'example-learning-path-part-2',
+      3: 'example-learning-path-part-3',
+      4: 'example-learning-path-part-4',
+    },
+  };
+
   const drawerProps: QuickStartContainerProps = {
     quickStarts,
     activeQuickStartID,
@@ -61,7 +73,8 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
     language,
     loading,
     useQueryParams: withQueryParams,
-    alwaysShowTaskReview: false,
+    alwaysShowTaskReview: true,
+    learningPaths: [exmapleLearningPath],
   };
 
   const toggleQuickStart = (quickStartId: string) => {

packages/dev/src/Demos.ts

@@ -25,6 +25,11 @@ export const Demos: DemoInterface[] = [
     name: 'Quick starts prop based',
     to: '/quickstarts-props',
   },
+  {
+    id: 'learning-path-catalog',
+    name: 'Learning Path Catalog',
+    to: '/learning-path-catalog',
+  },
 ];
 
 export default Demos;

packages/dev/src/LearningPathCatalog.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import {
+  QuickStart,
+  QuickStartCatalog,
+  QuickStartCatalogEmptyState,
+  QuickStartCatalogFilterCountWrapper,
+  QuickStartCatalogFilterSearchWrapper,
+  QuickStartCatalogFilterStatusWrapper,
+  QuickStartCatalogHeader,
+  QuickStartCatalogSection,
+  QuickStartCatalogToolbar,
+  QuickStartContext,
+  QuickStartContextValues,
+  QuickStartTile,
+  clearFilterParams,
+  filterQuickStarts,
+  getQuickStartStatus,
+} from '@patternfly/quickstarts';
+import {
+  Divider,
+  Gallery,
+  GalleryItem,
+  Text,
+  TextContent,
+  ToolbarContent,
+} from '@patternfly/react-core';
+
+export const LearningPathCatalog: React.FC = () => {
+  const {
+    activeQuickStartID,
+    allQuickStartStates,
+    allQuickStarts,
+    filter,
+    setFilter,
+  } = React.useContext<QuickStartContextValues>(QuickStartContext);
+
+  const sortFnc = (q1: QuickStart, q2: QuickStart) =>
+    q1.spec.displayName.localeCompare(q2.spec.displayName);
+
+  const [filteredQuickStarts, setFilteredQuickStarts] = React.useState<QuickStart[]>(
+    filterQuickStarts(
+      allQuickStarts,
+      filter.keyword,
+      filter.status.statusFilters,
+      allQuickStartStates,
+    ).sort(sortFnc),
+  );
+
+  React.useEffect(() => {
+    // callback on state change
+    setFilteredQuickStarts(
+      filterQuickStarts(
+        allQuickStarts,
+        filter.keyword,
+        filter.status.statusFilters,
+        allQuickStartStates,
+      ).sort(sortFnc),
+    );
+  }, [allQuickStartStates, allQuickStarts, filter.keyword, filter.status.statusFilters]);
+
+  const onSearchInputChange = (searchValue: string) => {
+    const result = filterQuickStarts(
+      allQuickStarts,
+      searchValue,
+      filter.status.statusFilters,
+      allQuickStartStates,
+    ).sort((q1: QuickStart, q2: QuickStart) =>
+      q1.spec.displayName.localeCompare(q2.spec.displayName),
+    );
+    setFilter('keyword', searchValue);
+    setFilteredQuickStarts(result);
+  };
+
+  const onStatusChange = (statusList: string[]) => {
+    const result = filterQuickStarts(
+      allQuickStarts,
+      filter.keyword,
+      statusList,
+      allQuickStartStates,
+    ).sort((q1: QuickStart, q2: QuickStart) =>
+      q1.spec.displayName.localeCompare(q2.spec.displayName),
+    );
+    setFilter('status', statusList);
+    setFilteredQuickStarts(result);
+  };
+
+  const CatalogWithSections = (
+    <>
+      <QuickStartCatalogSection>
+        <TextContent>
+          <Text component="h2">Quick Starts in Learning Paths</Text>
+          <Text component="p" className="catalog-sub">
+            Step-by-step instructions and tasks
+          </Text>
+        </TextContent>
+        <Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
+          {allQuickStarts
+            .filter(
+              (quickStart: QuickStart) => quickStart.metadata.name.indexOf('learning-path') > -1,
+            )
+            .map((quickStart: QuickStart) => {
+              const {
+                metadata: { name: id },
+              } = quickStart;
+
+              return (
+                <GalleryItem key={id} className="pfext-quick-start-catalog__gallery-item">
+                  <QuickStartTile
+                    quickStart={quickStart}
+                    isActive={id === activeQuickStartID}
+                    status={getQuickStartStatus(allQuickStartStates, id)}
+                  />
+                </GalleryItem>
+              );
+            })}
+        </Gallery>
+      </QuickStartCatalogSection>
+    </>
+  );
+
+  const clearFilters = () => {
+    setFilter('keyword', '');
+    setFilter('status', []);
+    clearFilterParams();
+    setFilteredQuickStarts(
+      allQuickStarts.sort((q1: QuickStart, q2: QuickStart) =>
+        q1.spec.displayName.localeCompare(q2.spec.displayName),
+      ),
+    );
+  };
+
+  return (
+    <>
+      <QuickStartCatalogHeader title="Resources" />
+      <Divider component="div" />
+      <QuickStartCatalogToolbar>
+        <ToolbarContent>
+          <QuickStartCatalogFilterSearchWrapper onSearchInputChange={onSearchInputChange} />
+          <QuickStartCatalogFilterStatusWrapper onStatusChange={onStatusChange} />
+          <QuickStartCatalogFilterCountWrapper quickStartsCount={filteredQuickStarts.length} />
+        </ToolbarContent>
+      </QuickStartCatalogToolbar>
+      <Divider component="div" />
+      {filteredQuickStarts.length === 0 ? (
+        <QuickStartCatalogEmptyState clearFilters={clearFilters} />
+      ) : filteredQuickStarts.length !== allQuickStarts.length ? (
+        <QuickStartCatalog quickStarts={filteredQuickStarts} />
+      ) : (
+        CatalogWithSections
+      )}
+    </>
+  );
+};

packages/dev/src/index.tsx

@@ -11,6 +11,7 @@ import App2 from './App2';
 import { QuickStartContext } from '@patternfly/quickstarts';
 import { DefaultCatalog } from './DefaultCatalog';
 import { CustomCatalog } from './CustomCatalog';
+import { LearningPathCatalog } from './LearningPathCatalog';
 
 const SomeNestedComponent = () => {
   const qsContext = React.useContext(QuickStartContext);
@@ -43,6 +44,12 @@ ReactDOM.render(
           <CustomCatalog />
         </App>
       </Route>
+      <Route exact path="/learning-path-catalog">
+        <App2 showCardFooters>
+          <SomeNestedComponent />
+          <LearningPathCatalog />
+        </App2>
+      </Route>
     </Switch>
   </Router>,
   document.getElementById('root'),

packages/dev/src/quickstarts-data/mas-guides/getting-started/quickstart.yml

@@ -20,4 +20,4 @@ spec:
   nextQuickStart:
     - 'kafkacat'
     - 'kafka-bin-scripts'
-    - 'quarkus-kafka'
+    - 'mas-quarkus-kafka'

packages/dev/src/quickstarts-data/mas-guides/kafka-bin-scripts/quickstart.yml

@@ -20,4 +20,7 @@ spec:
     - !snippet/proc README.adoc#task-5
   conclusion: !snippet README.adoc#conclusion
   nextQuickStart:
-    - 'todo'
+    - 'todo'
+    - 'mas-getting-started'
+    - 'serverless-application'
+    - 'install-app-and-associate-pipeline'

packages/dev/src/quickstarts-data/mocks/yamls/example-learning-path-1.yaml

@@ -0,0 +1,76 @@
+apiVersion: console.openshift.io/v1
+kind: ConsoleQuickStart
+metadata:
+  name: example-learning-path-part-1
+  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"
+spec:
+  type:
+    text: Quick start
+    color: green
+  version: 4.7
+  displayName: Example Learning Path Part 1
+  durationMinutes: 10
+  description: |-
+    This is the second quickstart in the Example Learning Path.
+  prerequisites: [You completed the "Getting started with a sample" quick start.]
+  introduction: |-
+    ### This quick start demonstrates the **Learning Path Feature - Part 1**.
+  tasks:
+    - title: View the 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.
+
+        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 [Topology]{{highlight qs-nav-topology}}.
+
+        1. Click on the **nodejs-sample** deployment to view its details.
+
+        A side panel is displayed containing the details of your sample application.
+      review:
+        instructions: |-
+          #### To verify you are viewing the details of your sample application:
+          Is the side panel titled **nodejs-sample**?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have viewed the details of your sample app!
+        failed: Try the steps again.
+    - title: Verify that there are no health checks
+      description: |-
+        ### To verify that there your sample application has no health checks configured:
+        1. View the information in the **Resources** tab in the side panel.
+      review:
+        instructions: |-
+          #### To verify there are no health checks configured:
+          Do you see an inline alert stating that **nodejs-sample** does not have health checks?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have verified that there are no existing health checks!
+        failed: Try the steps again.
+    - title: Add health checks to your sample
+      description: |-
+        ### To add health checks to your sample:
+        1. Add health checks to your **nodejs-sample** deployment in one of the following ways: (a) On the side panel, click on the **Actions** menu, where you will see an **Add Health Checks** menu item or (b) Click on the **Add Health Checks** link on the inline notification in the side panel.
+        2. In the Add Health Checks form, click on the **Add Readiness Probe** link.  Leave the default values, and click on the check to add the Readiness Probe.
+        3. Click on the **Add Liveness Probe** link.  Leave the default values, and click on the check to add the Liveness Probe.
+        4. Click on the **Add Startup Probe** link.  Leave the default values, and click on the check to add the Startup Probe.
+        5. Click **Add** when you’re done.
+
+        You will be brought back to the Topology View.
+      review:
+        instructions: |-
+          #### Verify that health checks are now configured:
+          Is the inline notification gone?
+        failedTaskHelp:
+          This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/applications/application-health.html#odc-adding-health-checks)
+          about this topic.
+      summary:
+        success: You have added health checks to your sample app!
+        failed: Try the steps again.
+  conclusion: Your sample application now has health checks. To ensure that your application
+    is running correctly, take the **Monitor your sample application** quick start.

packages/dev/src/quickstarts-data/mocks/yamls/example-learning-path-2.yaml

@@ -0,0 +1,76 @@
+apiVersion: console.openshift.io/v1
+kind: ConsoleQuickStart
+metadata:
+  name: example-learning-path-part-2
+  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"
+spec:
+  type:
+    text: Quick start
+    color: green
+  version: 4.7
+  displayName: Example Learning Path Part 2
+  durationMinutes: 10
+  description: |-
+    This is the second quickstart in the Example Learning Path.
+  prerequisites: [You completed the "Getting started with a sample" quick start.]
+  introduction: |-
+    ### This quick start demonstrates the **Learning Path Feature - Part 2**.
+  tasks:
+    - title: View the 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.
+
+        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 [Topology]{{highlight qs-nav-topology}}.
+
+        1. Click on the **nodejs-sample** deployment to view its details.
+
+        A side panel is displayed containing the details of your sample application.
+      review:
+        instructions: |-
+          #### To verify you are viewing the details of your sample application:
+          Is the side panel titled **nodejs-sample**?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have viewed the details of your sample app!
+        failed: Try the steps again.
+    - title: Verify that there are no health checks
+      description: |-
+        ### To verify that there your sample application has no health checks configured:
+        1. View the information in the **Resources** tab in the side panel.
+      review:
+        instructions: |-
+          #### To verify there are no health checks configured:
+          Do you see an inline alert stating that **nodejs-sample** does not have health checks?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have verified that there are no existing health checks!
+        failed: Try the steps again.
+    - title: Add health checks to your sample
+      description: |-
+        ### To add health checks to your sample:
+        1. Add health checks to your **nodejs-sample** deployment in one of the following ways: (a) On the side panel, click on the **Actions** menu, where you will see an **Add Health Checks** menu item or (b) Click on the **Add Health Checks** link on the inline notification in the side panel.
+        2. In the Add Health Checks form, click on the **Add Readiness Probe** link.  Leave the default values, and click on the check to add the Readiness Probe.
+        3. Click on the **Add Liveness Probe** link.  Leave the default values, and click on the check to add the Liveness Probe.
+        4. Click on the **Add Startup Probe** link.  Leave the default values, and click on the check to add the Startup Probe.
+        5. Click **Add** when you’re done.
+
+        You will be brought back to the Topology View.
+      review:
+        instructions: |-
+          #### Verify that health checks are now configured:
+          Is the inline notification gone?
+        failedTaskHelp:
+          This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/applications/application-health.html#odc-adding-health-checks)
+          about this topic.
+      summary:
+        success: You have added health checks to your sample app!
+        failed: Try the steps again.
+  conclusion: Your sample application now has health checks. To ensure that your application
+    is running correctly, take the **Monitor your sample application** quick start.