Add nonce to progress bar

cloud-gov · Nov 1, 2024 · 2681bb8 · 2681bb8
1 parent 670174a
commit 2681bb8
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 2 deletions.
diff --git a/src/app/orgs/page.tsx b/src/app/orgs/page.tsx
@@ -1,12 +1,15 @@
 'use server';
 
+import { headers } from 'next/headers';
 import { getOrgsPage } from '@/controllers/controllers';
 import { OrganizationsList } from '@/components/OrganizationsList/OrganizationsList';
 import { PageHeader } from '@/components/PageHeader';
 import { LastViewedOrgLink } from '@/components/LastViewedOrgLink';
 import { Timestamp } from '@/components/Timestamp';
 
 export default async function OrgsPage() {
+  const headersList = await headers();
+  const nonce = headersList.get('x-nonce') || undefined;
   const { payload } = await getOrgsPage();
 
   return (
@@ -28,6 +31,7 @@ export default async function OrgsPage() {
         memoryCurrentUsage={payload.memoryCurrentUsage}
         spaceCounts={payload.spaceCounts}
         roles={payload.roles}
+        nonce={nonce}
       />
     </div>
   );

diff --git a/src/components/MemoryBar.tsx b/src/components/MemoryBar.tsx
@@ -4,17 +4,19 @@ import { formatMb } from '@/helpers/numbers';
 export function MemoryBar({
   memoryUsed,
   memoryAllocated,
+  nonce,
 }: {
   memoryUsed?: number | null | undefined;
   memoryAllocated?: number | null | undefined;
+  nonce: string | undefined;
 }) {
   const memoryUsedNum = memoryUsed || 0;
   const mbRemaining = (memoryAllocated || 0) - memoryUsedNum;
   return (
     <div className="margin-top-3" data-testid="memory-bar">
       <p className="font-sans-3xs text-uppercase text-bold">Memory:</p>
 
-      <ProgressBar total={memoryAllocated} fill={memoryUsedNum} />
+      <ProgressBar total={memoryAllocated} fill={memoryUsedNum} nonce={nonce} />
 
       <div className="margin-top-1 display-flex flex-justify font-sans-3xs">
         <div className="margin-right-1">

diff --git a/src/components/OrganizationsList/OrganizationsList.tsx b/src/components/OrganizationsList/OrganizationsList.tsx
@@ -12,6 +12,7 @@ export function OrganizationsList({
   memoryCurrentUsage,
   spaceCounts,
   roles,
+  nonce,
 }: {
   orgs: Array<OrgObj>;
   userCounts: { [orgGuid: string]: number };
@@ -20,6 +21,7 @@ export function OrganizationsList({
   memoryCurrentUsage: { [orgGuid: string]: number };
   spaceCounts: { [orgGuid: string]: number };
   roles: { [orgGuid: string]: Array<string> };
+  nonce: string | undefined;
 }) {
   if (!orgs.length) {
     return <>no orgs found</>;
@@ -44,6 +46,7 @@ export function OrganizationsList({
                   memoryCurrentUsage={memoryCurrentUsage[org.guid]}
                   spaceCount={spaceCounts[org.guid]}
                   roles={roles[org.guid]}
+                  nonce={nonce}
                 />
               );
             })}

diff --git a/src/components/OrganizationsList/OrganizationsListCard.tsx b/src/components/OrganizationsList/OrganizationsListCard.tsx
@@ -7,14 +7,15 @@ import { formatInt } from '@/helpers/numbers';
 import { MemoryBar } from '@/components/MemoryBar';
 import { formatOrgRoleName } from '@/helpers/text';
 
-export function OrganizationsListCard({
+export async function OrganizationsListCard({
   org,
   userCount,
   appCount,
   memoryAllocated,
   memoryCurrentUsage,
   spaceCount,
   roles,
+  nonce,
 }: {
   org: OrgObj;
   userCount: number;
@@ -23,6 +24,7 @@ export function OrganizationsListCard({
   memoryCurrentUsage: number;
   spaceCount: number;
   roles: Array<string>;
+  nonce: string | undefined;
 }) {
   const getOrgRolesText = (orgGuid: string): React.ReactNode => {
     if (!roles || !roles.length) {
@@ -81,6 +83,7 @@ export function OrganizationsListCard({
       <MemoryBar
         memoryUsed={memoryCurrentUsage}
         memoryAllocated={memoryAllocated}
+        nonce={nonce}
       />
     </Card>
   );

diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
@@ -6,12 +6,14 @@ export function ProgressBar({
   threshold1 = 75, // percentage where color should change first, between 0 and 100
   threshold2 = 90, // percentage where color should change next, between 0 and 100
   changeColors = true,
+  nonce,
 }: {
   total: number | null | undefined;
   fill: number;
   threshold1?: number;
   threshold2?: number;
   changeColors?: boolean;
+  nonce: string | undefined;
 }) {
   const heightClass = 'height-1';
   const percentage = total ? Math.floor((fill / total) * 100) : 100;
@@ -33,6 +35,7 @@ export function ProgressBar({
         className={`${heightClass} radius-pill ${color}`}
         style={{ width: `${percentage}%` }}
         data-testid="progress"
+        nonce={nonce}
       ></div>
       {!total && (
         <span className="progress__infinity-logo">