EDM-3861: QuickStart guide (1/2)

apps/ocp-plugin/src/components/AppContext/AppContext.tsx

@@ -24,6 +24,7 @@ import { getUser } from '@openshift-console/dynamic-plugin-sdk/lib/app/core/redu
 import { useSelector } from 'react-redux';
 import { useFetch } from '../../hooks/useFetch';
 import { apiProxy } from '../../utils/apiCalls';
+import QuickStartHost from '@flightctl/ui-components/src/components/QuickStart/QuickStartHost';
 
 import '@flightctl/ui-components/src/styles/global.css';
 import './AppContext.css';
@@ -59,7 +60,11 @@ export const OCPPluginAppContext: React.FC<React.PropsWithChildren<{ value: AppC
   children,
   value,
 }) => {
-  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+  return (
+    <AppContext.Provider value={value}>
+      <QuickStartHost>{children}</QuickStartHost>
+    </AppContext.Provider>
+  );
 };
 
 const appRoutes = {

apps/ocp-plugin/src/components/common/WithPageLayout.tsx

@@ -29,7 +29,7 @@ const WithPageLayoutContent = ({ children }: React.PropsWithChildren) => {
 
   return (
     <WithPageLayoutRoot>
-      <PageNavigation showSettings={false} />
+      <PageNavigation />
       {children}
     </WithPageLayoutRoot>
   );

apps/standalone/src/app/components/AppLayout/AppLayout.tsx

@@ -23,6 +23,7 @@ import PageNavigation from '@flightctl/ui-components/src/components/common/PageN
 import { useTranslation } from '@flightctl/ui-components/src/hooks/useTranslation';
 import { SystemRestoreProvider } from '@flightctl/ui-components/src/hooks/useSystemRestoreContext';
 import { PermissionsContextProvider } from '@flightctl/ui-components/src/components/common/PermissionsContext';
+import QuickStartHost from '@flightctl/ui-components/src/components/QuickStart/QuickStartHost';
 import { useBrandLogo } from '../../hooks/useBrandLogo';
 
 import AppNavigation from './AppNavigation';
@@ -118,9 +119,11 @@ const AppLayout = () => {
   return (
     <OrganizationGuard>
       <PermissionsContextProvider>
-        <SystemRestoreProvider>
-          <AppLayoutContent />
-        </SystemRestoreProvider>
+        <QuickStartHost>
+          <SystemRestoreProvider>
+            <AppLayoutContent />
+          </SystemRestoreProvider>
+        </QuickStartHost>
       </PermissionsContextProvider>
     </OrganizationGuard>
   );

libs/i18n/locales/en/translation.json

@@ -574,8 +574,10 @@
   "OS mode: Unknown": "OS mode: Unknown",
   "Organization ID": "Organization ID",
   "Change Organization": "Change Organization",
-  "Copy login command": "Copy login command",
   "Settings": "Settings",
+  "Show quick start guide": "Show quick start guide",
+  "Hide quick start guide": "Hide quick start guide",
+  "Copy login command": "Copy login command",
   "Fleet not found": "Fleet not found",
   "We could not find the fleet with id <1>{id}</1>": "We could not find the fleet with id <1>{id}</1>",
   "Device not found": "Device not found",
@@ -1669,6 +1671,39 @@
   "All good!": "All good!",
   "Tasks": "Tasks",
   "View the health of your edge environment and explore details across devices, fleets, and security.": "View the health of your edge environment and explore details across devices, fleets, and security.",
+  "{{count}} minutes_one": "{{count}} minute",
+  "{{count}} minutes_other": "{{count}} minutes",
+  "{{count}} tasks_one": "{{count}} task",
+  "{{count}} tasks_other": "{{count}} tasks",
+  "Locked": "Locked",
+  "Prerequisites": "Prerequisites",
+  "Complete \"{{prevPhaseTitle}}\"": "Complete \"{{prevPhaseTitle}}\"",
+  "Prerequisites (1)": "Prerequisites (1)",
+  "To show it again, open Settings in the toolbar above and choose Show quick start guide.": "To show it again, open Settings in the toolbar above and choose Show quick start guide.",
+  "Quick start guide": "Quick start guide",
+  "{{completed}}/{{total}} phases complete": "{{completed}}/{{total}} phases complete",
+  "Expand guide": "Expand guide",
+  "Collapse guide": "Collapse guide",
+  "Follow these phases to get your edge management environment up and running.": "Follow these phases to get your edge management environment up and running.",
+  "Progress": "Progress",
+  "{{completed}} of {{total}}": "{{completed}} of {{total}}",
+  "About {{count}} minutes_one": "About {{count}} minute",
+  "About {{count}} minutes_other": "About {{count}} minutes",
+  "Welcome & Orientation": "Welcome & Orientation",
+  "Get familiar with {{ productName }} and learn how to navigate the console.": "Get familiar with {{ productName }} and learn how to navigate the console.",
+  "Build an OS Image": "Build an OS Image",
+  "Create a custom edge OS image so devices auto-register on boot.": "Create a custom edge OS image so devices auto-register on boot.",
+  "Enroll Your First Device": "Enroll Your First Device",
+  "Boot a device with your image, then approve it to bring it under management.": "Boot a device with your image, then approve it to bring it under management.",
+  "Create and Manage Fleets": "Create and Manage Fleets",
+  "Group devices that share identical or similar configuration and update policy for centralized management.": "Group devices that share identical or similar configuration and update policy for centralized management.",
+  "Close guide": "Close guide",
+  "Minimize guide": "Minimize guide",
+  "Explore the console": "Explore the console",
+  "Orientation": "Orientation",
+  "Some description here.": "Some description here.",
+  "Sections visible to you depend on your permissions.": "Sections visible to you depend on your permissions.",
+  "Drag guide": "Drag guide",
   "Failed to retrieve repository details": "Failed to retrieve repository details",
   "Failed to retrieve the resource syncs": "Failed to retrieve the resource syncs",
   "The repository cannot be modified at the moment because some of its details could not be obtained.": "The repository cannot be modified at the moment because some of its details could not be obtained.",

libs/ui-components/src/components/OverviewPage/Overview.tsx

@@ -7,6 +7,7 @@ import { RESOURCE, VERB } from '../../types/rbac';
 import PageWithPermissions from '../common/PageWithPermissions';
 import { GlobalSystemRestoreBanners } from '../SystemRestore/SystemRestoreBanners';
 
+import QuickStart from '../QuickStart/QuickStart';
 import AlertsCard from './Cards/Alerts/AlertsCard';
 import StatusCard from './Cards/Status/StatusCard';
 import TasksCard from './Cards/Tasks/TasksCard';
@@ -31,6 +32,8 @@ const Overview = () => {
     >
       <GlobalSystemRestoreBanners className="pf-v6-u-py-0" />
 
+      <QuickStart />
+
       <Grid hasGutter>
         <GridItem md={alertsEnabled ? 9 : 12}>
           <Grid hasGutter>

libs/ui-components/src/components/QuickStart/QuickStart.css

@@ -0,0 +1,7 @@
+.fctl-quickstart-card {
+  margin-bottom: var(--pf-t--global--spacer--xl);
+}
+
+.fctl-quickstart-card__expanded {
+  border-top: 3px solid var(--pf-t--global--color--brand--default, #06c);
+}