feat: add zero state for customer view headers

openedx · Sep 9, 2024 · 837e412 · 837e412
1 parent c6ed509
commit 837e412
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 11 deletions.
diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx
@@ -16,6 +16,10 @@ const CustomerIntegrations = ({
     integrationCount++;
   }
 
+  if (!integrationCount) {
+    return null;
+  }
+
   return (
     <div>
       {(integrationCount > 0) && (

diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerPlanContainer.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerPlanContainer.jsx
@@ -30,23 +30,31 @@ const CustomerPlanContainer = ({ slug }) => {
   const renderInActiveSubscriptions = inactiveSubscriptions.map(subscription => (
     <SubscriptionPlanCard key={subscription.uuid} isActive={false} slug={slug} subscription={subscription} />
   ));
+
+  const hasActivePlans = activePolicies.length > 0 || renderActiveSubscriptions.length > 0;
+
+  if (!hasActivePlans) {
+    return null;
+  }
+
   return (
     <div>
       {!isLoading ? (
         <div>
           <div className="d-flex justify-content-between">
             <h2>Associated subsidy plans ({showInactive ? countOfAllPlans : countOfActivePlans})</h2>
-            <Form.Switch
-              className="ml-2.5 mt-2.5"
-              checked={showInactive}
-              disabled={countOfAllPlans === countOfActivePlans}
-              onChange={() => {
-                setShowInactive(prevState => !prevState);
-              }}
-              data-testid="show-removed-toggle"
-            >
-              Show inactive
-            </Form.Switch>
+            {(countOfAllPlans !== countOfActivePlans) && (
+              <Form.Switch
+                className="ml-2.5 mt-2.5"
+                checked={showInactive}
+                onChange={() => {
+                  setShowInactive(prevState => !prevState);
+                }}
+                data-testid="show-removed-toggle"
+              >
+                Show inactive
+              </Form.Switch>
+            )}
           </div>
           <hr />
           {renderActivePoliciesCard}

diff --git a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx b/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx
@@ -10,6 +10,11 @@ const EnterpriseCustomerUsersTable = () => {
     enterpriseUsersTableData,
     fetchEnterpriseUsersData,
   } = useCustomerUsersTableData(id);
+
+  if (!enterpriseUsersTableData.itemCount) {
+    return null;
+  }
+
   return (
     <div>
       <h2>Associated users ({enterpriseUsersTableData.itemCount})</h2>

diff --git a/src/Configuration/Customers/CustomerDetailView/tests/CustomerPlanContainer.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/CustomerPlanContainer.test.jsx
@@ -99,4 +99,26 @@ describe('CustomerPlanContainer', () => {
     await waitFor(() => expect(screen.getByText('Associated subsidy plans (3)')).toBeInTheDocument());
     expect(screen.getByText('Inactive')).toBeInTheDocument();
   });
+  it('does not render CustomerPlanContainer data', async () => {
+    getConfig.mockImplementation(() => ({
+      ADMIN_PORTAL_BASE_URL: 'http://www.testportal.com',
+      ENTERPRISE_ACCESS_BASE_URL: 'http:www.enterprise-access.com',
+      LICENSE_MANAGER_URL: 'http:www.license-manager.com',
+    }));
+    useAllAssociatedPlans.mockReturnValue({
+      isLoading: false,
+      activePolicies: [],
+      activeSubscriptions: [],
+      countOfActivePlans: 0,
+      countOfAllPlans: 0,
+      inactiveSubscriptions: [],
+      inactivePolicies: [],
+    });
+    render(
+      <IntlProvider locale="en">
+        <CustomerPlanContainer slug={CUSTOMER_SLUG} />
+      </IntlProvider>,
+    );
+    expect(screen.queryByText('Associated subsidy plans (0)')).not.toBeInTheDocument();
+  });
 });
diff --git a/src/Configuration/Customers/CustomerDetailView/tests/CustomerViewIntegrations.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/CustomerViewIntegrations.test.jsx
@@ -63,4 +63,20 @@ describe('CustomerViewIntegrations', () => {
       expect(screen.getByText('API')).toBeInTheDocument();
     });
   });
+  it('does not render cards', async () => {
+    formatDate.mockReturnValue('September 15, 2024');
+    render(
+      <IntlProvider locale="en">
+        <CustomerIntegrations
+          slug="marcel-the-shell"
+          activeIntegrations={mockIntegratedChannelData}
+          activeSSO={[]}
+          apiCredentialsEnabled={false}
+        />
+      </IntlProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.queryByText('Associated integrations (0)')).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUsersTable.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUsersTable.test.jsx
@@ -80,4 +80,24 @@ describe('EnterpriseCustomerUsersTable', () => {
       });
     });
   });
+
+  it('does not render user table section', () => {
+    const emptyResults = {
+      isLoading: false,
+      enterpriseUsersTableData: {
+        itemCount: 0,
+        pageCount: 1,
+        results: [],
+      },
+      fetchEnterpriseUsersData: mockFetchEnterpriseUsersData,
+    };
+    useCustomerUsersTableData.mockReturnValue(emptyResults);
+    render(
+      <IntlProvider locale="en">
+        <EnterpriseCustomerUsersTable />
+      </IntlProvider>,
+    );
+    expect(screen.queryByText('Search user details')).not.toBeInTheDocument();
+    expect(screen.queryByText('Associated users (0)')).not.toBeInTheDocument();
+  });
 });