handle when only one org for org picker

cloud-gov · Sep 26, 2024 · 61d832d · 61d832d
1 parent 852b64d
commit 61d832d
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 18 deletions.
diff --git a/__tests__/components/OrgPicker/OrgPicker.test.js b/__tests__/components/OrgPicker/OrgPicker.test.js
@@ -3,14 +3,27 @@
  */
 import { describe, expect, it } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
+// eslint-disable-next-line no-unused-vars
+import { usePathname } from 'next/navigation';
 import userEvent from '@testing-library/user-event';
 import { OrgPicker } from '@/components/OrgPicker/OrgPicker';
 
+/* global jest */
+/* eslint no-undef: "off" */
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(() => '/orgs/470bd8ff-ed0e-4d11-95c4-cf765202cebd'),
+}));
+/* eslint no-undef: "error" */
+
 describe('<OrgPicker />', () => {
+  const mockOrgs = [
+    { name: 'foobar org 1', guid: 'baz' },
+    { name: 'foobar org 2', guid: 'baz2' },
+  ];
   describe('on initial load', () => {
     it('content is collapsed', () => {
       // act
-      render(<OrgPicker />);
+      render(<OrgPicker orgs={mockOrgs} currentOrgId="baz" />);
       // assert
       const content = screen.queryByText('View all organizations');
       expect(content).not.toBeInTheDocument();
@@ -21,7 +34,7 @@ describe('<OrgPicker />', () => {
     it('content expands', async () => {
       // setup
       const user = userEvent.setup();
-      render(<OrgPicker />);
+      render(<OrgPicker orgs={mockOrgs} currentOrgId="baz" />);
       // act
       const button = screen.getByRole('button', { expanded: false });
       await user.click(button);
@@ -30,4 +43,43 @@ describe('<OrgPicker />', () => {
       expect(content).toBeInTheDocument();
     });
   });
+
+  describe('when only one org', () => {
+    it('only shows org name instead of the dropdown', () => {
+      // setup
+      render(<OrgPicker orgs={mockOrgs.slice(0, 1)} currentOrgId="baz" />);
+      // act
+      const orgName = screen.getByText(/foobar org 1/);
+      const button = screen.queryByRole('button');
+      // assert
+      expect(orgName).toBeInTheDocument();
+      expect(button).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when no orgs at all', () => {
+    it('shows nothing', () => {
+      // setup
+      render(<OrgPicker orgs={[]} currentOrgId="baz" />);
+      // act
+      const orgName = screen.queryByText(/foobar org 1/);
+      const button = screen.queryByRole('button');
+      // assert
+      expect(orgName).not.toBeInTheDocument();
+      expect(button).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when no current org', () => {
+    it('shows nothing', () => {
+      // setup
+      render(<OrgPicker orgs={mockOrgs} />);
+      // act
+      const orgName = screen.queryByText(/foobar org 1/);
+      const button = screen.queryByRole('button');
+      // assert
+      expect(orgName).not.toBeInTheDocument();
+      expect(button).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/app/orgs/[orgId]/layout.tsx b/src/app/orgs/[orgId]/layout.tsx
@@ -10,9 +10,6 @@ export default async function OrgLayout({
   params: { orgId: string };
 }) {
   const orgsRes = await getOrgs();
-  if (!orgsRes.ok) {
-    return <>orgs not found</>;
-  }
   const orgResJson = await orgsRes.json();
   const orgs = orgResJson.resources;
 

diff --git a/src/components/OrgPicker/OrgPicker.tsx b/src/components/OrgPicker/OrgPicker.tsx
@@ -18,11 +18,9 @@ import { newOrgPathname } from '@/helpers/text';
 export function OrgPicker({
   currentOrgId,
   orgs = [],
-  single = false,
 }: {
   currentOrgId: string;
   orgs?: Array<OrgObj>;
-  single?: Boolean;
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const orgsSelectorRef = useRef<HTMLElement>(null);
@@ -99,7 +97,24 @@ export function OrgPicker({
     };
   }, [isOpen]);
 
-  return !single ? (
+  if (orgs.length <= 0 || !currentOrg) {
+    return null;
+  }
+
+  if (orgs.length === 1) {
+    return (
+      <div className="display-block width-card-lg desktop:display-flex desktop:width-mobile-lg">
+        <span className="usa-label font-body-2xs padding-right-105">
+          Current organization:
+        </span>
+        <strong className="text-bold text-base-darker margin-top-3 maxw-mobile">
+          {currentOrg.name}
+        </strong>
+      </div>
+    );
+  }
+
+  return (
     <div className="display-block desktop:display-flex desktop:position-absolute">
       <span className="usa-label font-body-2xs padding-right-105">
         Current organization:
@@ -112,7 +127,7 @@ export function OrgPicker({
       >
         <header className="orgs-selector__header display-flex desktop:padding-y-1 flex-align-center flex-justify">
           <strong className="orgs-selector__current text-bold text-base-darker text-ellipsis margin-right-1 padding-right-1">
-            {currentOrg?.name || 'loading'}
+            {currentOrg.name}
           </strong>
           <button
             className="usa-button usa-button--unstyled width-5 flex-justify-center border-left border-base-light"
@@ -147,14 +162,5 @@ export function OrgPicker({
         )}
       </nav>
     </div>
-  ) : (
-    <div className="display-block width-card-lg desktop:display-flex desktop:width-mobile-lg">
-      <span className="usa-label font-body-2xs padding-right-105">
-        Current organization:
-      </span>
-      <strong className="text-bold text-base-darker margin-top-3 maxw-mobile">
-        {currentOrg?.name || 'loading'}
-      </strong>
-    </div>
   );
 }