sts-sponsors team mailing list archive

[Nick De Villiers <mp+441180@xxxxxxxxxxxxxxxxxx>]

Nick De Villiers has proposed merging ~nickdv99/maas-site-manager:feat-enrolment-sticky-section-MAASENG-1524 into maas-site-manager:main.

Commit message:
feat(tokens): Add enrolment instructions MAASENG-1524

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~nickdv99/maas-site-manager/+git/site-manager/+merge/441180

## Done

- Added enrolment instructions to requests listing

## QA

- Go to /requests
- Ensure an accordion is present (and collapsed)
- Click "Enrolment steps"
- Ensure the enrolment steps are added

## Notes

This MP does not include the sticky styling or the enrolment certificate, these will come in follow-up MPs
-- 
Your team MAAS Committers is requested to review the proposed merge of ~nickdv99/maas-site-manager:feat-enrolment-sticky-section-MAASENG-1524 into maas-site-manager:main.

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index 2d7748f..60fbacb 100644
--- a/frontend/src/App.scss
+++ b/frontend/src/App.scss
@@ -23,6 +23,7 @@
 @include vf-p-form-validation;
 @include vf-p-notification;
 @include vf-p-card;
+@include vf-p-accordion;
 
 // icons
 @include vf-p-icons;
diff --git a/frontend/src/components/TokensList/TokensList.tsx b/frontend/src/components/TokensList/TokensList.tsx
index ea75f63..27cd903 100644
--- a/frontend/src/components/TokensList/TokensList.tsx
+++ b/frontend/src/components/TokensList/TokensList.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
 
-import { Button, Col, Row } from "@canonical/react-components";
-
-import PaginationBar from "../base/PaginationBar";
+import { Accordion, Button, Col, Row } from "@canonical/react-components";
+import { Link } from "react-router-dom";
 
 import TokensTable from "./components/TokensTable/TokensTable";
 
+import ExternalLink from "@/components/ExternalLink";
+import PaginationBar from "@/components/base/PaginationBar";
 import { useAppContext } from "@/context";
 import { useTokensQuery } from "@/hooks/api";
 import useDebouncedValue from "@/hooks/useDebouncedValue";
@@ -30,35 +31,82 @@ const TokensList = () => {
   };
 
   return (
-    <section>
-      <Row>
-        <Col size={2}>
-          <h2 className="p-heading--4">Tokens</h2>
-        </Col>
-      </Row>
-      <Row>
-        <Col size={12}>
-          <div className="u-flex u-flex--justify-end">
-            <Button>Export</Button>
-            <Button appearance="negative">Delete</Button>
-            <Button className="p-button--positive" onClick={() => setSidebar("createToken")} type="button">
-              Generate tokens
-            </Button>
-          </div>
-        </Col>
-      </Row>
-      <PaginationBar
-        currentPage={page + 1}
-        dataContext="tokens"
-        isLoading={isLoading}
-        itemsPerPage={size}
-        onNextClick={handleNextClick}
-        onPreviousClick={handlePreviousClick}
-        resetPageCount={() => setPage(0)}
-        setCurrentPage={setPage}
-        setPageSize={setSize}
-        totalItems={data?.total || 0}
-      />
+    <section className="tokens-list">
+      <header className="tokens-list-header" id="tokens-list-header">
+        <Row>
+          <Col size={12}>
+            <p>Follow the enrolment steps to enrol new regions:</p>
+            <Accordion
+              sections={[
+                {
+                  content: (
+                    <ol>
+                      <li>
+                        Generate single use tokens by clicking <strong>Generate tokens</strong>
+                      </li>
+                      <li>
+                        Install site-manager-agent alongside a MAAS region controller
+                        <br />
+                        <code>snap install site-manager-agent</code>
+                      </li>
+                      <li>
+                        In the site-manager-agent CLI paste the snippet below. Download the{" "}
+                        <ExternalLink to="https://www.youtube.com/watch?v=dQw4w9WgXcQ";>
+                          optional config file
+                        </ExternalLink>{" "}
+                        to provide additional data for a specific MAAS region.
+                        <br />
+                        <code>
+                          site-manager-agent enrol sitemanager.example.com $ENROLMENT_TOKEN [$CONFIG_FILE_PATH]
+                        </code>
+                        <br />
+                        {/* Use the following certificate data to compare against the certificate shown in the enrolment
+                        request.
+                        <br />
+                        <Accordion
+                          sections={[{ title: "Certificate", content: "idk there's a certificate here or something" }]}
+                        /> */}
+                      </li>
+                      <li>
+                        Accept the incoming request in the <Link to="/requests">Requests page</Link>
+                      </li>
+                    </ol>
+                  ),
+                  title: "Enrolment steps",
+                },
+              ]}
+            />
+            <p>
+              Learn more about the enrolment process and bulk enrolment{" "}
+              <ExternalLink to="https://www.youtube.com/watch?v=dQw4w9WgXcQ";>in the documentation</ExternalLink>.
+            </p>
+          </Col>
+        </Row>
+        <Row>
+          <Col size={12}>
+            <div className="u-flex u-flex--justify-end">
+              <Button>Export</Button>
+              <Button appearance="negative">Delete</Button>
+              <Button className="p-button--positive" onClick={() => setSidebar("createToken")} type="button">
+                Generate tokens
+              </Button>
+            </div>
+          </Col>
+        </Row>
+        <PaginationBar
+          currentPage={page + 1}
+          dataContext="tokens"
+          isLoading={isLoading}
+          itemsPerPage={size}
+          onNextClick={handleNextClick}
+          onPreviousClick={handlePreviousClick}
+          resetPageCount={() => setPage(0)}
+          setCurrentPage={setPage}
+          setPageSize={setSize}
+          totalItems={data?.total || 0}
+        />
+      </header>
+
       <TokensTable data={data} isFetchedAfterMount={isFetchedAfterMount} isLoading={isLoading} />
     </section>
   );