sts-sponsors team mailing list archive

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

Nick De Villiers has proposed merging ~nickdv99/maas-site-manager:adjust-sticky-styling into maas-site-manager:main.

Commit message:
fix(tokens): Make table header sticky and remove accordion

Requested reviews:
  MAAS Committers (maas-committers): code, qa

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

Done:

- Removed enrollment instructions accordion
- Replaced with documentation link
- Added certificate display (dummy)
- Made table header sticky

QA Steps:

- Go to /settings/tokens
- Scroll down
- Ensure the table header sticks as well as the page header
- Ensure this is consistent across breakpoints
- Ensure the page header does NOT stick on small screen widths, but the table header should
-- 
Your team MAAS Committers is requested to review the proposed merge of ~nickdv99/maas-site-manager:adjust-sticky-styling into maas-site-manager:main.

diff --git a/frontend/src/components/TokensList/TokensList.tsx b/frontend/src/components/TokensList/TokensList.tsx
index 8b93285..f0e4fc6 100644
--- a/frontend/src/components/TokensList/TokensList.tsx
+++ b/frontend/src/components/TokensList/TokensList.tsx
@@ -1,18 +1,16 @@
 import { useState, useEffect } from "react";
 
-import { Accordion, Button, Col, Row, Notification } from "@canonical/react-components";
+import { Button, Col, Row, Notification } from "@canonical/react-components";
 import pluralize from "pluralize";
 
 import TokensTable from "./components/TokensTable/TokensTable";
 
 import docsUrls from "@/base/docsUrls";
-import { routesConfig } from "@/base/routesConfig";
 import ExternalLink from "@/components/ExternalLink";
 import PaginationBar from "@/components/base/PaginationBar";
 import { useAppContext } from "@/context";
 import { useDeleteTokensMutation, useTokensQuery } from "@/hooks/api";
 import usePagination from "@/hooks/usePagination";
-import { Link } from "@/router";
 
 const DEFAULT_PAGE_SIZE = 50;
 
@@ -66,46 +64,22 @@ const TokensList = () => {
       <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={docsUrls.configFile}>
-                          {/* TODO: Update link once documentation is live https://warthogs.atlassian.net/browse/MAASENG-1585 */}
-                          optional config file
-                        </ExternalLink>{" "}
-                        to provide additional data for a specific MAAS region.
-                        <br />
-                        <code>site-manager-agent enrol location.host $ENROLMENT_TOKEN [$CONFIG_FILE_PATH]</code>
-                        <br />
-                        {/* TODO: Add certificate here once endpoint is ready https://warthogs.atlassian.net/browse/MAASENG-1584 */}
-                      </li>
-                      <li>
-                        Accept the incoming request in the <Link to={routesConfig.requests.path}>Requests page</Link>
-                      </li>
-                    </ol>
-                  ),
-                  title: "Enrolment steps",
-                },
-              ]}
-            />
-            <p>
-              Learn more about the enrolment process and bulk enrolment{" "}
-              {/* TODO: Update link once documentation is live https://warthogs.atlassian.net/browse/MAASENG-1585 */}
-              <ExternalLink to={docsUrls.baseDocsLink}>in the documentation</ExternalLink>.
+            <p className="tokens-list-instructions">
+              Follow the enrolment steps outlined in the{" "}
+              <ExternalLink to={docsUrls.enrollmentRequest}>documentation</ExternalLink> to enrol new regions. Once an
+              enrolment request was made use the following certificate data to compare against the certificate shown in
+              the enrolment request:
             </p>
+            <code className="tokens-list-certificate">
+              <span>CN:</span>
+              <span>sitemanager.example.com</span>
+              <span>Expiration date:</span>
+              <span>Thu, 29 Jul. 2035</span>
+              <span>Fingerprint:</span>
+              <span>15cf96e8bad3eea3ef3c10badcd88f66fe236e0de99027451120bc7cd69c0012</span>
+              <span>Issued by:</span>
+              <span>Let's Encrypt</span>
+            </code>
           </Col>
         </Row>
         <Row>
diff --git a/frontend/src/components/TokensList/_TokensList.scss b/frontend/src/components/TokensList/_TokensList.scss
index 64694b2..ac01952 100644
--- a/frontend/src/components/TokensList/_TokensList.scss
+++ b/frontend/src/components/TokensList/_TokensList.scss
@@ -1,10 +1,39 @@
 .tokens-list-header {
+
   @media only screen and (min-width: $breakpoint-small) {
-    
+    height: 555px;
     position: sticky;
     top: -0.75rem;
     background-color: white;
     z-index: 1;
     padding-top: 0.75rem;
   }
+
+  @media only screen and (min-width: $breakpoint-large) {
+    height: 375px;
+  }
+
+  .tokens-list-certificate {
+    display: grid;
+    width: fit-content;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: $spv--small;
+    overflow-x: auto;
+    white-space: nowrap;
+    margin-bottom: $spv--large * 2;
+
+    @media only screen and (max-width: $breakpoint-large) {
+      width: 100%;
+    }
+  }
+
+  .tokens-list-instructions {
+    @media only screen and (max-width: $breakpoint-large) {
+      height: 175px;
+    }
+  }
+
+  .pagination-bar {
+    margin-bottom: 0;
+  }
 }
diff --git a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
index f3ee36a..a792f6d 100644
--- a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
+++ b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
@@ -1,4 +1,21 @@
 .tokens-table {
+
+  thead th {
+    position: sticky;
+    top: -0.75rem;
+    background-color: white;
+    z-index: 1;
+    padding-top: $spv--large;
+
+    @media only screen and (min-width: $breakpoint-small){
+      top: calc(555px - 0.75rem);
+    }
+
+    @media only screen and (min-width: $breakpoint-large) {
+      top: calc(375px - 0.75rem);
+    }
+  }
+
   thead th:first-child {
     width: 3rem;
   }