Add sample JoyRide walkthrough.

client/src/components/header/header.component.jsx

@@ -299,6 +299,7 @@ function Header({
     },
     {
       key: 'jobssubmenu',
+      id: 'header-jobs',
       icon: <Icon component={FaCarCrash} />,
       label: t('menus.header.jobs'),
       children: [
@@ -319,6 +320,7 @@ function Header({
         },
         {
           key: 'availablejobs',
+          id: 'header-jobs-available',
           icon: <ImportOutlined />,
           label: <Link to="/manage/available">{t('menus.header.availablejobs')}</Link>,
         },

client/src/components/jobs-list/jobs-list.component.jsx

@@ -16,12 +16,18 @@ import useLocalStorage from "../../utils/useLocalStorage";
 import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import { setJoyRideSteps } from "../../redux/application/application.actions";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
 });
 
-export function JobsList({bodyshop}) {
+const mapDispatchToProps = (dispatch) => ({
+  setJoyRideSteps: (steps) => dispatch(setJoyRideSteps(steps)),
+
+});
+
+export function JobsList({bodyshop,setJoyRideSteps}) {
     const searchParams = queryString.parse(useLocation().search);
     const {selected} = searchParams;
     const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
@@ -352,51 +358,75 @@ export function JobsList({bodyshop}) {
     };
 
     return (
-        <Card
-            title={t("titles.bc.jobs-active")}
-            extra={
-                <Space wrap>
-                    <Button onClick={() => refetch()}>
-                        <SyncOutlined/>
-                    </Button>
-                    <Input.Search
-                        placeholder={t("general.labels.search")}
-                        onChange={(e) => {
-                            setSearchText(e.target.value);
-                        }}
-                        value={searchText}
-                        enterButton
-                    />
-                </Space>
-            }
-        >
-            <Table
-                loading={loading}
-                pagination={{defaultPageSize: 50}}
-                columns={columns}
-                rowKey="id"
-                dataSource={jobs}
-                scroll={{
-                    x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%",
-                }}
-                rowSelection={{
-                    onSelect: (record) => {
-                        handleOnRowClick(record);
-                    },
-                    selectedRowKeys: [selected],
-                    type: "radio",
-                }}
-                onChange={handleTableChange}
-                onRow={(record, rowIndex) => {
-                    return {
-                        onClick: (event) => {
-                            handleOnRowClick(record);
-                        },
-                    };
-                }}
+      <Card
+        id="active-jobs-list"
+        title={t('titles.bc.jobs-active')}
+        extra={
+          <Space wrap>
+            <Button
+              onClick={() =>
+                setJoyRideSteps([
+                  {
+                    target: '#active-jobs-list',
+                    content: 'This is where you will see all work coming in and currently here.',
+                  },
+                  {
+                    target: '#header-jobs',
+                    spotlightClicks :true,
+                    disableOverlayClose :true,
+                    content: 'The jobs menu lets you access additional pages to see more information. You can import new jobs, search all jobs, or manage your current production.',
+                  },
+                  {
+                    target: '#header-jobs-available',
+                    content: 'You can find jobs to import here.',
+                  },
+                 
+                ])
+              }
+            >
+              Start Walk Through
+            </Button>
+            <Button onClick={() => refetch()}>
+              <SyncOutlined />
+            </Button>
+            <Input.Search
+              placeholder={t('general.labels.search')}
+              onChange={(e) => {
+                setSearchText(e.target.value);
+              }}
+              value={searchText}
+              enterButton
             />
-        </Card>
+          </Space>
+        }
+      >
+        <Table
+          loading={loading}
+          pagination={{ defaultPageSize: 50 }}
+          columns={columns}
+          rowKey="id"
+          dataSource={jobs}
+          scroll={{
+            x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : '100%',
+          }}
+          rowSelection={{
+            onSelect: (record) => {
+              handleOnRowClick(record);
+            },
+            selectedRowKeys: [selected],
+            type: 'radio',
+          }}
+          onChange={handleTableChange}
+          onRow={(record, rowIndex) => {
+            return {
+              onClick: (event) => {
+                handleOnRowClick(record);
+              },
+            };
+          }}
+        />
+      </Card>
     );
 }
 
-export default connect(mapStateToProps, null)(JobsList);
+export default connect(mapStateToProps, mapDispatchToProps)(JobsList);