Fix name overflow on models table (#4359)

Fix signing keys in policies table
canonical · Jul 31, 2023 · c0f55c8 · c0f55c8
1 parent ef03fbf
commit c0f55c8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
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) {
@@ -106,7 +120,11 @@ function Policies() {
             <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/Models/Models.tsx b/static/js/brand-store/components/Models/Models.tsx
@@ -124,7 +124,11 @@ function Models() {
             <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,6 +53,7 @@ function ModelsTable() {
                   {model.name}
                 </Link>
               ),
+              className: "u-truncate",
             },
             {
               content: maskString(model["api-key"]),