Merge branch 'main' into update-opensuse-patch

canonical · Aug 9, 2023 · bb7ada8 · bb7ada8
2 parents 4175b49 + 255fdbd
commit bb7ada8
Show file tree

Hide file tree

Showing 31 changed files with 1,141 additions and 144 deletions.
diff --git a/static/js/brand-store/atoms/index.ts b/static/js/brand-store/atoms/index.ts
@@ -34,9 +34,21 @@ const policiesListFilterState = atom({
   default: "" as string,
 });
 
-const signingKeysListState = atom({
-  key: "signingKeysList",
-  default: [] as Array<SigningKey>,
+const signingKeysListState = atom<SigningKey[]>({
+  key: "signingKeysListState",
+  default: [],
+});
+
+const signingKeysListFilterState = atom({
+  key: "signingKeysListFilter",
+  default: "" as string,
+});
+
+const newSigningKeyState = atom({
+  key: "newSigningKey",
+  default: {
+    name: "",
+  },
 });
 
 export {
@@ -47,4 +59,6 @@ export {
   policiesListState,
   policiesListFilterState,
   signingKeysListState,
+  signingKeysListFilterState,
+  newSigningKeyState,
 };
diff --git a/static/js/brand-store/components/App/App.tsx b/static/js/brand-store/components/App/App.tsx
@@ -89,6 +89,7 @@ function App() {
               element={<Policies />}
             />
             <Route path="/admin/:id/signing-keys" element={<SigningKeys />} />
+            <Route path="/admin/:id/signing-keys/create" element={<SigningKeys />} />
           </Routes>
         </div>
       </QueryClientProvider>

diff --git a/static/js/brand-store/components/Members/Members.tsx b/static/js/brand-store/components/Members/Members.tsx
@@ -201,15 +201,6 @@ function Members() {
             ) : (
               <>
                 <Row>
-                  <Col size={6}>
-                    <Button
-                      onClick={() => {
-                        setSidePanelOpen(true);
-                      }}
-                    >
-                      Add new member
-                    </Button>
-                  </Col>
                   <Col size={6}>
                     <SearchBox
                       placeholder="Search and filter"
@@ -229,6 +220,15 @@ function Members() {
                       }}
                     />
                   </Col>
+                  <Col size={6} className="u-align--right">
+                    <Button
+                      onClick={() => {
+                        setSidePanelOpen(true);
+                      }}
+                    >
+                      Add new member
+                    </Button>
+                  </Col>
                 </Row>
                 <div className="u-fixed-width app-accordion">
                   <Accordion

diff --git a/static/js/brand-store/components/Model/Policies.tsx b/static/js/brand-store/components/Model/Policies.tsx
@@ -14,13 +14,17 @@ import PoliciesFilter from "./PoliciesFilter";
 import PoliciesTable from "./PoliciesTable";
 import CreatePolicyForm from "./CreatePolicyForm";
 
-import { usePolicies } from "../../hooks";
-import { policiesListFilterState, policiesListState } from "../../atoms";
+import { usePolicies, useSigningKeys } from "../../hooks";
+import {
+  policiesListFilterState,
+  policiesListState,
+  signingKeysListState,
+} from "../../atoms";
 import { brandStoreState } from "../../selectors";
 
 import { isClosedPanel, setPageTitle } from "../../utils";
 
-import type { Policy } from "../../types/shared";
+import type { Policy, SigningKey } from "../../types/shared";
 
 function Policies() {
   const { id, model_id } = useParams();
@@ -30,6 +34,7 @@ function Policies() {
     id,
     model_id
   );
+  const signingKeys = useSigningKeys(id);
   const setPoliciesList = useSetRecoilState<Array<Policy>>(policiesListState);
   const setFilter = useSetRecoilState<string>(policiesListFilterState);
   const brandStore = useRecoilValue(brandStoreState(id));
@@ -38,6 +43,15 @@ function Policies() {
   const [showErrorNotification, setShowErrorNotification] = useState<boolean>(
     false
   );
+  const setSigningKeysList = useSetRecoilState<Array<SigningKey>>(
+    signingKeysListState
+  );
+
+  useEffect(() => {
+    if (!signingKeys.isLoading && !signingKeys.isError) {
+      setSigningKeysList(signingKeys.data);
+    }
+  }, [signingKeys]);
 
   useEffect(() => {
     if (!isLoading && !isError) {
@@ -92,21 +106,25 @@ function Policies() {
             )}
             <Row>
               <Col size={6}>
+                <PoliciesFilter />
+              </Col>
+              <Col size={6} className="u-align--right">
                 <Link
-                  className="p-button"
+                  className="p-button--positive"
                   to={`/admin/${id}/models/${model_id}/policies/create`}
                 >
                   Create policy
                 </Link>
               </Col>
-              <Col size={6}>
-                <PoliciesFilter />
-              </Col>
             </Row>
             <div className="u-fixed-width">
               <>
                 {isLoading && <p>Fetching policies...</p>}
-                {isError && error && <p>Error: {error.message}</p>}
+                {isError && error && (
+                  <Notification severity="negative">
+                    Error: {error.message}
+                  </Notification>
+                )}
                 <PoliciesTable />
               </>
             </div>

diff --git a/static/js/brand-store/components/Model/PoliciesTable.tsx b/static/js/brand-store/components/Model/PoliciesTable.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useRecoilValue } from "recoil";
-import { useParams, Link } from "react-router-dom";
 import { format } from "date-fns";
 import { MainTable } from "@canonical/react-components";
 
@@ -9,7 +8,6 @@ import { filteredPoliciesListState } from "../../selectors";
 import type { Policy } from "../../types/shared";
 
 function ModelsTable() {
-  const { id } = useParams();
   const policiesList = useRecoilValue<Array<Policy>>(filteredPoliciesListState);
 
   return (
@@ -46,13 +44,7 @@ function ModelsTable() {
               content: policy.revision,
             },
             {
-              content: (
-                <Link
-                  to={`/admin/${id}/signing-keys/${policy["signing-key-sha3-384"]}`}
-                >
-                  {policy["signing-key-name"]}
-                </Link>
-              ),
+              content: policy["signing-key-name"],
               className: "u-align--right",
             },
             {

diff --git a/static/js/brand-store/components/Models/Models.tsx b/static/js/brand-store/components/Models/Models.tsx
@@ -113,18 +113,25 @@ function Models() {
             )}
             <Row>
               <Col size={6}>
-                <Link className="p-button" to={`/admin/${id}/models/create`}>
+                <ModelsFilter />
+              </Col>
+              <Col size={6} className="u-align--right">
+                <Link
+                  className="p-button--positive"
+                  to={`/admin/${id}/models/create`}
+                >
                   Create new model
                 </Link>
               </Col>
-              <Col size={6}>
-                <ModelsFilter />
-              </Col>
             </Row>
             <div className="u-fixed-width">
               <>
                 {isLoading && <p>Fetching models...</p>}
-                {isError && error && <p>Error: {error.message}</p>}
+                {isError && error && (
+                  <Notification severity="negative">
+                    Error: {error.message}
+                  </Notification>
+                )}
                 <ModelsTable />
               </>
             </div>

diff --git a/static/js/brand-store/components/Models/ModelsTable.tsx b/static/js/brand-store/components/Models/ModelsTable.tsx
@@ -53,9 +53,10 @@ function ModelsTable() {
                   {model.name}
                 </Link>
               ),
+              className: "u-truncate",
             },
             {
-              content: maskString(model["api-key"]),
+              content: maskString(model["api-key"]) || "-",
               className: "u-align--right",
             },
             {

diff --git a/static/js/brand-store/components/Navigation/Navigation.tsx b/static/js/brand-store/components/Navigation/Navigation.tsx
@@ -54,7 +54,7 @@ function Navigation() {
             </div>
 
             <div className="p-panel__content">
-              <div className="p-side-navigation--icons">
+              <div className="p-side-navigation">
                 <nav aria-label="Stores navigation">
                   <ul className="p-side-navigation__list">
                     {brandStoresList.map((item: Store) => {
@@ -64,9 +64,6 @@ function Navigation() {
                             className="p-side-navigation__link"
                             to={`/admin/${item.id}/snaps`}
                           >
-                            <i className="p-side-navigation__icon p-icon--initial">
-                              <span>{item.name.charAt(0)}</span>
-                            </i>
                             <span className="p-side-navigation__label u-truncate">
                               {item.name}
                             </span>