Add nonce to progress bar

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

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
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/OrganizationsListCard.tsx b/src/components/OrganizationsList/OrganizationsListCard.tsx
@@ -6,8 +6,9 @@ import { Card } from '@/components/Card/Card';
 import { formatInt } from '@/helpers/numbers';
 import { MemoryBar } from '@/components/MemoryBar';
 import { formatOrgRoleName } from '@/helpers/text';
+import { headers } from 'next/headers';
 
-export function OrganizationsListCard({
+export async function OrganizationsListCard({
   org,
   userCount,
   appCount,
@@ -24,6 +25,9 @@ export function OrganizationsListCard({
   spaceCount: number;
   roles: Array<string>;
 }) {
+  const headersList = await headers();
+  const nonce = headersList.get('x-nonce') || undefined;
+
   const getOrgRolesText = (orgGuid: string): React.ReactNode => {
     if (!roles || !roles.length) {
       return (
@@ -81,6 +85,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">