Merge pull request #344 from kmcfaul/qs-custom-drawer

feat(QuickStarts): decouple content from quickstart drawer
patternfly · Nov 22, 2024 · fa41d42 · fa41d42
2 parents ee2569e + 8b6aa3b
commit fa41d42
Show file tree

Hide file tree

Showing 9 changed files with 580 additions and 161 deletions.
diff --git a/packages/dev/src/AppCustomDrawer.tsx b/packages/dev/src/AppCustomDrawer.tsx
@@ -0,0 +1,175 @@
+import './App.css';
+import {
+  Page,
+  Button,
+  Drawer,
+  DrawerContent,
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerPanelDescription,
+  DrawerPanelBody,
+  DrawerContentBody,
+} from '@patternfly/react-core';
+import {
+  LoadingBox,
+  QuickStartContainer,
+  QuickStartContainerProps,
+  QuickStartDrawerContent,
+  QuickStartCloseModal,
+  QuickStartStatus,
+  useLocalStorage,
+  setQueryArgument,
+  removeQueryArgument,
+  QUICKSTART_ID_FILTER_KEY,
+} from '@patternfly/quickstarts';
+import { allQuickStarts as yamlQuickStarts } from './quickstarts-data/quick-start-test-data';
+import React from 'react';
+import i18n from './i18n/i18n';
+import { AppHeader, AppSidebar } from './common/Page';
+
+interface AppProps {
+  children?: React.ReactNode;
+  showCardFooters?: boolean;
+}
+
+const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
+  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
+  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
+  const language = localStorage.getItem('bridge/language') || 'en';
+  const resourceBundle = i18n.getResourceBundle(language, 'quickstart');
+
+  // eslint-disable-next-line no-console
+  React.useEffect(() => console.log(activeQuickStartID), [activeQuickStartID]);
+  React.useEffect(() => {
+    // callback on state change
+    // eslint-disable-next-line no-console
+    console.log(allQuickStartStates);
+  }, [allQuickStartStates]);
+
+  const withQueryParams = true;
+
+  const containerProps: QuickStartContainerProps = {
+    quickStarts: yamlQuickStarts,
+    activeQuickStartID,
+    allQuickStartStates,
+    setActiveQuickStartID,
+    setAllQuickStartStates,
+    resourceBundle,
+    showCardFooters,
+    language,
+    useQueryParams: withQueryParams,
+    alwaysShowTaskReview: true,
+    markdown: {
+      extensions: [
+        // variable substitution
+        {
+          type: 'output',
+          filter(html: string) {
+            html = html.replace(/\[APPLICATION\]/g, 'Mercury');
+            html = html.replace(/\[PRODUCT\]/g, 'Lightning');
+
+            return html;
+          },
+        },
+      ],
+    },
+  };
+
+  const toggleQuickStart = (quickStartId: string) => {
+    if (activeQuickStartID !== quickStartId) {
+      // activate
+      setActiveQuickStartID(quickStartId);
+      // optionally add the query param
+      withQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
+    } else {
+      // deactivate
+      setActiveQuickStartID('');
+      // optionally remove the query param
+      withQueryParams && removeQueryArgument(QUICKSTART_ID_FILTER_KEY);
+    }
+  };
+
+  const [modalOpen, setModalOpen] = React.useState<boolean>(false);
+  const onClose = () => {
+    setActiveQuickStartID('');
+    setDrawerContent('none');
+  };
+  const handleClose = (activeQuickStartStatus: string | number) => {
+    if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
+      setModalOpen(true);
+    } else {
+      onClose();
+    }
+    onClose();
+  };
+  const onModalConfirm = () => {
+    setModalOpen(false);
+    onClose();
+  };
+  const onModalCancel = () => setModalOpen(false);
+
+  const [drawerContent, setDrawerContent] = React.useState('none');
+
+  const otherDrawerPanelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={drawerContent === 'custom' ? 0 : -1}>Drawer panel header</span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => setDrawerContent('none')} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
+      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <React.Suspense fallback={<LoadingBox />}>
+      <QuickStartContainer {...containerProps} isManagedDrawer={false}>
+        <Drawer isExpanded={drawerContent !== 'none'} isInline>
+          <DrawerContent
+            panelContent={
+              drawerContent === 'quickstart' || activeQuickStartID !== '' ? (
+                <QuickStartDrawerContent handleDrawerClose={handleClose} />
+              ) : (
+                otherDrawerPanelContent
+              )
+            }
+          >
+            <DrawerContentBody>
+              <Page masthead={AppHeader} sidebar={AppSidebar} isManagedSidebar>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    toggleQuickStart('getting-started-with-quick-starts');
+                    setDrawerContent('quickstart');
+                  }}
+                >
+                  Getting started with quick starts
+                </Button>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setActiveQuickStartID('');
+                    setDrawerContent('custom');
+                  }}
+                >
+                  Open a different drawer
+                </Button>
+                {children}
+              </Page>
+            </DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+        <QuickStartCloseModal
+          isOpen={modalOpen}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+        />
+      </QuickStartContainer>
+    </React.Suspense>
+  );
+};
+export default App;
diff --git a/packages/dev/src/Nav.ts b/packages/dev/src/Nav.ts
@@ -35,6 +35,11 @@ export const Nav: NavInterface[] = [
     name: 'In-app documentation',
     to: '/in-app-documentation',
   },
+  {
+    id: 'custom-drawer',
+    name: 'With custom drawer',
+    to: '/quickstarts-drawer',
+  },
 ];
 
 export default Nav;
diff --git a/packages/dev/src/index.tsx b/packages/dev/src/index.tsx
@@ -11,6 +11,7 @@ import AppContext from './AppContext';
 import AppProps from './AppProps';
 import AppLocalized from './AppLocalized';
 import AppHelpTopicDemo from './AppHelpTopicDemo';
+import AppCustomDrawer from './AppCustomDrawer';
 import { DefaultCatalog } from './DefaultCatalog';
 import { CustomCatalog } from './CustomCatalog';
 import { MockConsole } from './MockConsole';
@@ -61,6 +62,14 @@ root.render(
           </AppHelpTopicDemo>
         }
       />
+      <Route
+        path="/quickstarts-drawer"
+        element={
+          <AppCustomDrawer showCardFooters={false}>
+            <DefaultCatalog hint="This catalog is for testing the component props based quick starts approach by utilizing the QuickStartContainer component" />
+          </AppCustomDrawer>
+        }
+      />
     </Routes>
   </BrowserRouter>,
 );
diff --git a/...ages/module/patternfly-docs/content/extensions/quick-starts/examples/WithCustomDrawer.jsx b/...ages/module/patternfly-docs/content/extensions/quick-starts/examples/WithCustomDrawer.jsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+  LoadingBox,
+  QuickStartContainer,
+  useLocalStorage,
+  QuickStartCatalogPage,
+  QuickStartDrawerContent,
+  QuickStartCloseModal,
+  QuickStartStatus,
+} from '@patternfly/quickstarts';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerPanelDescription,
+  DrawerPanelBody,
+  DrawerContentBody,
+  Button,
+} from '@patternfly/react-core';
+import { quickStarts as exampleQuickStarts } from './example-data';
+
+export const App = ({ showCardFooters }) => {
+  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
+  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
+  const language = localStorage.getItem('bridge/language') || 'en';
+
+  // eslint-disable-next-line no-console
+  React.useEffect(() => console.log(activeQuickStartID), [activeQuickStartID]);
+  React.useEffect(() => {
+    // callback on state change
+    // eslint-disable-next-line no-console
+    console.log(allQuickStartStates);
+  }, [allQuickStartStates]);
+
+  const [loading, setLoading] = React.useState(true);
+  const [quickStarts, setQuickStarts] = React.useState([]);
+  React.useEffect(() => {
+    const load = async () => {
+      setQuickStarts(exampleQuickStarts);
+      setLoading(false);
+    };
+    setTimeout(() => {
+      load();
+    }, 500);
+  }, []);
+
+  const drawerProps = {
+    quickStarts,
+    activeQuickStartID,
+    allQuickStartStates,
+    setActiveQuickStartID,
+    setAllQuickStartStates,
+    showCardFooters,
+    language,
+    loading,
+    alwaysShowTaskReview: true,
+    markdown: {
+      extensions: [
+        // variable substitution
+        {
+          type: 'output',
+          filter(html) {
+            html = html.replace(/\[APPLICATION\]/g, 'Mercury');
+            html = html.replace(/\[PRODUCT\]/g, 'Lightning');
+
+            return html;
+          },
+        },
+      ],
+    },
+  };
+
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const onClose = () => {
+    setActiveQuickStartID('');
+    setDrawerContent('none');
+  };
+  const handleClose = (activeQuickStartStatus) => {
+    if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
+      setModalOpen(true);
+    } else {
+      onClose();
+    }
+  };
+  const onModalConfirm = () => {
+    setModalOpen(false);
+    onClose();
+  };
+  const onModalCancel = () => setModalOpen(false);
+
+  const [drawerContent, setDrawerContent] = React.useState('none');
+
+  const otherDrawerPanelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={drawerContent === 'custom' ? 0 : -1}>Drawer panel header</span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => setDrawerContent('none')} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
+      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <React.Suspense fallback={<LoadingBox />}>
+      <QuickStartContainer {...drawerProps} isManagedDrawer={false}>
+        <Drawer isExpanded={drawerContent !== 'none'} isInline>
+          <DrawerContent
+            panelContent={
+              drawerContent === 'quickstart' || activeQuickStartID !== '' ? (
+                <QuickStartDrawerContent handleDrawerClose={handleClose} />
+              ) : (
+                otherDrawerPanelContent
+              )
+            }
+          >
+            <DrawerContentBody>
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setActiveQuickStartID('explore-pipelines');
+                  setDrawerContent('quickstart');
+                }}
+              >
+                Getting started with quick starts
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setActiveQuickStartID('');
+                  setDrawerContent('custom');
+                }}
+              >
+                Open a different drawer
+              </Button>
+              <QuickStartCatalogPage
+                title="Quick starts"
+                hint={
+                  'Learn how to create, import, and run applications with step-by-step instructions and tasks.'
+                }
+              />
+            </DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+        <QuickStartCloseModal
+          isOpen={modalOpen}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+        />
+      </QuickStartContainer>
+    </React.Suspense>
+  );
+};