Always display segments filter when the feature is enabled (#6704)

hypothesis · Sep 25, 2024 · 42e22a7 · 42e22a7
1 parent 9f54d5e
commit 42e22a7
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 29 deletions.
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx b/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
@@ -12,7 +12,10 @@ import { useDashboardFilters } from '../../utils/dashboard/hooks';
 import { courseURL } from '../../utils/dashboard/navigation';
 import { useDocumentTitle } from '../../utils/hooks';
 import { replaceURLParams } from '../../utils/url';
-import type { DashboardActivityFiltersProps } from './DashboardActivityFilters';
+import type {
+  DashboardActivityFiltersProps,
+  SegmentsType,
+} from './DashboardActivityFilters';
 import DashboardActivityFilters from './DashboardActivityFilters';
 import DashboardBreadcrumbs from './DashboardBreadcrumbs';
 import FormattedDate from './FormattedDate';
@@ -61,21 +64,21 @@ export default function AssignmentActivity() {
     }
 
     const hasSections = 'sections' in data;
+    const hasGroups = 'groups' in data;
     const entries = hasSections
       ? data.sections
-      : 'groups' in data
+      : hasGroups
         ? data.groups
         : undefined;
-
-    // If the assignment doesn't have either sections or groups, we won't
-    // display the segments filter
-    if (!entries || entries.length === 0) {
-      return undefined;
-    }
+    const type: SegmentsType = hasSections
+      ? 'sections'
+      : hasGroups
+        ? 'groups'
+        : 'none';
 
     return {
-      type: hasSections ? 'sections' : 'groups',
-      entries,
+      type,
+      entries: entries ?? [],
       selectedIds: segmentIds,
       onChange: segmentIds => updateFilters({ segmentIds }),
     };

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/DashboardActivityFilters.tsx b/lms/static/scripts/frontend_apps/components/dashboard/DashboardActivityFilters.tsx
@@ -51,8 +51,10 @@ export type ActivityFilterItem<T extends Course | Assignment> = {
   onClear: () => void;
 };
 
+export type SegmentsType = 'groups' | 'sections' | 'none';
+
 export type SegmentsSelection = ActivityFilterSelection & {
-  type: 'groups' | 'sections';
+  type: SegmentsType;
   entries: AssignmentSegment[];
 };
 
@@ -129,16 +131,19 @@ function StudentOption({
 function SegmentsMultiSelect({ segments }: { segments: SegmentsSelection }) {
   const segmentsName = segments.type === 'groups' ? 'groups' : 'sections';
   const segmentNameSingular = segments.type === 'groups' ? 'group' : 'section';
+  const allSegmentsText =
+    segments.type === 'none' ? 'N/A' : `All ${segmentsName}`;
 
   return (
     <MultiSelect
       aria-label={`Select ${segmentsName}`}
       containerClasses="!w-auto min-w-[180px]"
       value={segments.selectedIds}
       onChange={newSegmentIds => segments.onChange(newSegmentIds)}
+      disabled={segments.entries.length === 0}
       buttonContent={
         segments.selectedIds.length === 0 ? (
-          <>All {segmentsName}</>
+          <>{allSegmentsText}</>
         ) : segments.selectedIds.length === 1 ? (
           segments.entries.find(
             s => s.h_authority_provided_id === segments.selectedIds[0],
@@ -152,7 +157,7 @@ function SegmentsMultiSelect({ segments }: { segments: SegmentsSelection }) {
       data-testid="segments-select"
     >
       <MultiSelect.Option value={undefined}>
-        All {segmentsName}
+        {allSegmentsText}
       </MultiSelect.Option>
       {segments.entries.map(entry => (
         <MultiSelect.Option

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js b/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js
@@ -432,30 +432,27 @@ describe('AssignmentActivity', () => {
       assert.isUndefined(filters.prop('segments'));
     });
 
-    [{}, { sections: [] }, { groups: [] }].forEach(assignmentExtra => {
-      it('sets no segments when assignment has no groups or sections', () => {
-        setUpFakeUseAPIFetch({
-          ...activeAssignment,
-          ...assignmentExtra,
-          auto_grading_config: {},
-        });
-
-        const wrapper = createComponent();
-        const filters = wrapper.find('DashboardActivityFilters');
-
-        assert.isUndefined(filters.prop('segments'));
-      });
-    });
-
     [
       {
         assignmentExtra: { sections: [{}, {}] },
         expectedType: 'sections',
       },
+      {
+        assignmentExtra: { sections: [] },
+        expectedType: 'sections',
+      },
       {
         assignmentExtra: { groups: [{}, {}, {}] },
         expectedType: 'groups',
       },
+      {
+        assignmentExtra: { groups: [] },
+        expectedType: 'groups',
+      },
+      {
+        assignmentExtra: {},
+        expectedType: 'none',
+      },
     ].forEach(({ assignmentExtra, expectedType }) => {
       it('sets type of segment based on assignment data fields', () => {
         setUpFakeUseAPIFetch({
@@ -469,7 +466,7 @@ describe('AssignmentActivity', () => {
         const segments = filters.prop('segments');
 
         assert.equal(segments.type, expectedType);
-        assert.equal(segments.entries, assignmentExtra[expectedType]);
+        assert.deepEqual(segments.entries, assignmentExtra[expectedType] ?? []);
       });
     });
 

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/test/DashboardActivityFilters-test.js b/lms/static/scripts/frontend_apps/components/dashboard/test/DashboardActivityFilters-test.js
@@ -536,6 +536,19 @@ describe('DashboardActivityFilters', () => {
       assert.deepEqual(select.prop('value'), selectedIds);
     });
 
+    [
+      { entries: [], shouldBeDisabled: true },
+      { entries: ['foo', 'bar'], shouldBeDisabled: false },
+    ].forEach(({ entries, shouldBeDisabled }) => {
+      it('disables segments filter when entries are empty', () => {
+        const wrapper = createComponentWithSegments({ entries });
+        assert.equal(
+          getSegmentsSelect(wrapper).prop('disabled'),
+          shouldBeDisabled,
+        );
+      });
+    });
+
     it('invokes onChange callback', () => {
       const wrapper = createComponentWithSegments();
       const select = getSegmentsSelect(wrapper);
@@ -565,6 +578,11 @@ describe('DashboardActivityFilters', () => {
         segmentsConfig: { type: 'sections' },
         expectedButtonContent: 'All sections',
       },
+      // "None" type
+      {
+        segmentsConfig: { type: 'none' },
+        expectedButtonContent: 'N/A',
+      },
       // 1 known selected item
       {
         segmentsConfig: {