Implements all orgs page

.env.example.local

@@ -19,10 +19,13 @@ UAA_LOGOUT_PATH=/logout.do
 # CF API
 #   Used to connect to the Cloud Foundry API. CF_API_URL should always end
 #   with /v3 regardless of the environment.
-#   The CF_API_TOKEN can be populated with `cf oauth-token` or by running
-#   npm run dev-cf
-#
 CF_API_URL=https://api.dev.us-gov-west-1.aws-us-gov.cloud.gov/v3
+#   In a deployed environment, the CF user id comes from the UAA token.
+#   Locally, use CF_USER_ID to get CAPI info related to the current logged in user.
+#   You can find your own CF_USER_ID by decoding your CF_API_TOKEN (using JWT).
+CF_USER_ID=your-cf-user-guid
+#   Locally, the CF_API_TOKEN can be populated with `cf oauth-token` or by running
+#   npm run dev-cf
 CF_API_TOKEN=
 
 # S3

.env.test

@@ -11,5 +11,6 @@ UAA_LOGOUT_PATH=/logout.do
 
 CF_API_URL=https://example.com
 CF_API_TOKEN=placeholder
+CF_USER_ID=placeholder
 
 NEXT_PUBLIC_USER_INVITE_URL=https://account.dev.us-gov-west-1.aws-us-gov.cloud.gov/invite

__tests__/api/cf/token.test.js

@@ -1,6 +1,6 @@
 import { cookies } from 'next/headers';
 import { describe, it, expect, beforeEach, afterEach } from '@jest/globals';
-import { getToken, isLoggedIn } from '@/api/cf/token';
+import { getToken, isLoggedIn, getUserId } from '@/api/cf/token';
 
 /* global jest */
 /* eslint no-undef: "off" */
@@ -64,3 +64,52 @@ describe('cloudfoundry token tests', () => {
     });
   });
 });
+
+describe('cloudfoundry user id tests', () => {
+  describe('when CF_USER_ID environment variable is set', () => {
+    beforeEach(() => {
+      process.env.CF_USER_ID = 'foo-user-id';
+    });
+    afterEach(() => {
+      delete process.env.CF_USER_ID;
+    });
+    it('getUserId() returns a manual token', () => {
+      expect(getUserId()).toBe('foo-user-id');
+    });
+  });
+
+  describe('when CF_USER_ID environment variable is not set', () => {
+    describe('when auth cookie is set', () => {
+      beforeEach(() => {
+        cookies.mockImplementation(() => ({
+          get: () => ({ value: '{"user_id":"foo-user-id"}' }),
+        }));
+      });
+      it('getUserId() returns a token from a cookie', () => {
+        expect(getUserId()).toBe('foo-user-id');
+      });
+    });
+    describe('when auth cookie is not set', () => {
+      beforeEach(() => {
+        cookies.mockImplementation(() => ({
+          get: () => undefined,
+        }));
+      });
+      it('getToken() throws an error when no cookie is set', () => {
+        expect(() => getUserId()).toThrow('please confirm you are logged in');
+      });
+    });
+    describe('when auth cookie is not in an expected format', () => {
+      beforeEach(() => {
+        cookies.mockImplementation(() => ({
+          get: () => 'unexpected format',
+        }));
+      });
+      it('getToken() throws an error', () => {
+        expect(() => getUserId()).toThrow(
+          'unable to parse authsession user_id'
+        );
+      });
+    });
+  });
+});

__tests__/api/mocks/orgQuotas.js

@@ -0,0 +1,112 @@
+export const mockOrgQuotas = {
+  pagination: {
+    total_results: 1,
+    total_pages: 1,
+    first: {
+      href: 'https://api.dev.us-gov-west-1.aws-us-gov.cloud.gov/v3/organization_quotas?organization_guids=470bd8ff-ed0e-4d11-95c4-cf765202cebd&page=1&per_page=50',
+    },
+    last: {
+      href: 'https://api.dev.us-gov-west-1.aws-us-gov.cloud.gov/v3/organization_quotas?organization_guids=470bd8ff-ed0e-4d11-95c4-cf765202cebd&page=1&per_page=50',
+    },
+    next: null,
+    previous: null,
+  },
+  resources: [
+    {
+      guid: '3564fac5-c405-480e-b758-57912da29f9e',
+      created_at: '2017-04-27T19:12:50Z',
+      updated_at: '2022-07-18T21:01:25Z',
+      name: 'default',
+      apps: {
+        total_memory_in_mb: 10240,
+        per_process_memory_in_mb: null,
+        total_instances: null,
+        per_app_tasks: null,
+        log_rate_limit_in_bytes_per_second: null,
+      },
+      services: {
+        paid_services_allowed: true,
+        total_service_instances: 100,
+        total_service_keys: 1000,
+      },
+      routes: {
+        total_routes: 1000,
+        total_reserved_ports: 5,
+      },
+      domains: {
+        total_domains: null,
+      },
+      relationships: {
+        organizations: {
+          data: [
+            {
+              guid: 'orgId1',
+            },
+            {
+              guid: 'foo',
+            },
+            {
+              guid: 'bar',
+            },
+            {
+              guid: 'baz',
+            },
+          ],
+        },
+      },
+      links: {
+        self: {
+          href: 'https://api.dev.us-gov-west-1.aws-us-gov.cloud.gov/v3/organization_quotas/3564fac5-c405-480e-b758-57912da29f9e',
+        },
+      },
+    },
+    {
+      guid: '3564fac5-c405-480e-b758-57912da29f9f',
+      created_at: '2017-04-27T19:12:50Z',
+      updated_at: '2022-07-18T21:01:25Z',
+      name: 'staging',
+      apps: {
+        total_memory_in_mb: 500,
+        per_process_memory_in_mb: null,
+        total_instances: null,
+        per_app_tasks: null,
+        log_rate_limit_in_bytes_per_second: null,
+      },
+      services: {
+        paid_services_allowed: true,
+        total_service_instances: 100,
+        total_service_keys: 1000,
+      },
+      routes: {
+        total_routes: 1000,
+        total_reserved_ports: 5,
+      },
+      domains: {
+        total_domains: null,
+      },
+      relationships: {
+        organizations: {
+          data: [
+            {
+              guid: 'orgId2',
+            },
+            {
+              guid: 'foo',
+            },
+            {
+              guid: 'bar',
+            },
+            {
+              guid: 'baz',
+            },
+          ],
+        },
+      },
+      links: {
+        self: {
+          href: 'https://api.dev.us-gov-west-1.aws-us-gov.cloud.gov/v3/organization_quotas/3564fac5-c405-480e-b758-57912da29f9e',
+        },
+      },
+    },
+  ],
+};

__tests__/components/LastViewedOrgLink.test.js

@@ -0,0 +1,40 @@
+/**
+ * @jest-environment jsdom
+ */
+import { cookies } from 'next/headers';
+import { describe, expect, it, beforeEach } from '@jest/globals';
+import { render } from '@testing-library/react';
+import { LastViewedOrgLink } from '@/components/LastViewedOrgLink';
+
+/* global jest */
+/* eslint no-undef: "off" */
+jest.mock('next/headers', () => ({
+  cookies: jest.fn(),
+}));
+/* eslint no-undef: "error" */
+
+describe.skip('<LastViewedOrgLink />', () => {
+  describe('when no org id cookie is found', () => {
+    beforeEach(() => {
+      // TODO: figure out how to mock cookies (we're mocking same as token.test.js but it doesn't work here)
+      cookies.mockImplementation(() => ({
+        get: () => null,
+      }));
+    });
+    it('returns nothing', async () => {
+      // act
+      const component = render(await LastViewedOrgLink());
+      // assert
+      const link = component.queryByRole('link');
+      expect(link).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when get org request fails', () => {
+    it.todo('returns nothing');
+  });
+
+  describe('when org cookie is present and get org succeeds', () => {
+    it.todo('shows correct hyperlink and org name');
+  });
+});

__tests__/components/MemoryBar.test.js

@@ -0,0 +1,38 @@
+/**
+ * @jest-environment jsdom
+ */
+import { describe, expect, it, beforeEach } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { MemoryBar } from '@/components/MemoryBar';
+
+describe('<MemoryBar />', () => {
+  describe('when allocated memory is null', () => {
+    render(<MemoryBar memoryUsed={50} memoryAllocated={null} />);
+
+    it('says no upper limit', () => {
+      const text = screen.queryByText(/no upper limit/);
+      expect(text).toBeInTheDocument();
+    });
+
+    it('hides memory remaining', () => {
+      const text = screen.queryByText(/remaining/);
+      expect(text).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when allocated memory', () => {
+    beforeEach(() => {
+      render(<MemoryBar memoryUsed={40} memoryAllocated={100} />);
+    });
+
+    it('returns content', () => {
+      const component = screen.queryByTestId('memory-bar');
+      expect(component).toBeInTheDocument();
+    });
+
+    it('shows correct amount remaining', () => {
+      const remainingText = screen.queryByText(/60MB remaining/);
+      expect(remainingText).toBeInTheDocument();
+    });
+  });
+});

__tests__/components/ProgressBar.test.js

@@ -0,0 +1,50 @@
+/**
+ * @jest-environment jsdom
+ */
+import { describe, expect, it } from '@jest/globals';
+import { render } from '@testing-library/react';
+import { ProgressBar } from '@/components/ProgressBar';
+
+describe('<ProgressBar />', () => {
+  describe('when changeColors is false', () => {
+    it('keeps progress bar green', () => {
+      // act
+      const { container } = render(
+        <ProgressBar total={100} fill={99} changeColors={false} />
+      );
+      // assert
+      const progressDiv = container.querySelector('.bg-mint');
+      expect(progressDiv).toBeInTheDocument();
+    });
+  });
+
+  describe('when percentage is less than threshold1', () => {
+    it('shows a green bar', () => {
+      // act
+      const { container } = render(<ProgressBar total={100} fill={25} />);
+      // assert
+      const progressDiv = container.querySelector('.bg-mint');
+      expect(progressDiv).toBeInTheDocument();
+    });
+  });
+
+  describe('when percentage is above threshold1 but below threshold2', () => {
+    it('shows an light red bar', () => {
+      // act
+      const { container } = render(<ProgressBar total={100} fill={76} />);
+      // assert
+      const progressDiv = container.querySelector('.bg-red-30v');
+      expect(progressDiv).toBeInTheDocument();
+    });
+  });
+
+  describe('when percentage is above threshold2', () => {
+    it('shows a deep red bar', () => {
+      // act
+      const { container } = render(<ProgressBar total={100} fill={95} />);
+      // assert
+      const progressDiv = container.querySelector('.bg-red-40v');
+      expect(progressDiv).toBeInTheDocument();
+    });
+  });
+});