function Sidebar()

in public/src/components/channelManagement/sidebar.tsx [68:187]
101 lines of code
11 McCabe index (conditional complexity)

function Sidebar<T extends Test>({
  tests,
  selectedTestName,
  onTestPriorityChange,
  onTestSelected,
  testNamePrefix,
  createTest,
  onBatchTestArchive,
  onTestListOrderSave,
  onTestListLock,
  testListLockStatus,
  userHasTestListLocked,
  savingTestList,
  allowEditing,
}: SidebarProps<T>): React.ReactElement<SidebarProps<T>> {
  const classes = useStyles();
  const [regionFilter, setRegionFilter] = useState<RegionsAndAll>('ALL');

  const filterTests = function(testsToFilter: Test[]): Test[] {
    if (userHasTestListLocked || 'ALL' === regionFilter) {
      return testsToFilter;
    }

    return testsToFilter.filter(
      t =>
        t.regionTargeting?.targetedCountryGroups?.indexOf(regionFilter) >= 0 ||
        t.locations.indexOf(regionFilter) >= 0,
    );
  };

  return (
    <div className={classes.root}>
      <div className={classes.buttonsContainer}>
        <NewTestButton
          existingNames={tests.map(t => t.name)}
          existingNicknames={tests.map(t => t.nickname || '')}
          testNamePrefix={testNamePrefix}
          createTest={createTest}
          disabled={userHasTestListLocked || !allowEditing}
        />

        <BatchProcessTestButton
          // filter out live tests and any test currently being edited
          draftTests={tests.filter(t => !(t.status === 'Live' && t.name !== selectedTestName))}
          onBatchTestArchive={onBatchTestArchive}
          disabled={!allowEditing}
        />

        {userHasTestListLocked && (
          <>
            <Button
              variant="outlined"
              size="medium"
              startIcon={<SaveIcon />}
              className={classes.reorderListButton}
              onClick={savingTestList ? undefined : onTestListOrderSave}
              disabled={savingTestList}
            >
              <Typography className={classes.buttonText}>
                {savingTestList ? 'Saving order...' : 'Save order'}
              </Typography>
            </Button>
            <Typography className={classes.header}>EDITING: tests in priority order</Typography>
          </>
        )}

        {testListLockStatus.locked && !userHasTestListLocked && (
          <>
            <Button
              variant="outlined"
              size="medium"
              startIcon={<EditIcon />}
              className={classes.reorderListButton}
              onClick={() => onTestListLock(true)}
              disabled={!allowEditing}
            >
              <Typography className={classes.buttonText}>Take control</Typography>
            </Button>
            <Typography className={classes.header}>
              {testListLockStatus.email} has the test list locked
            </Typography>
          </>
        )}

        {!testListLockStatus.locked && (
          <Button
            variant="outlined"
            size="medium"
            startIcon={<EditIcon />}
            className={classes.reorderListButton}
            onClick={() => onTestListLock(false)}
            disabled={!allowEditing}
          >
            <Typography className={classes.buttonText}>Reorder test list</Typography>
          </Button>
        )}

        {!userHasTestListLocked && (
          <TestListSidebarFilterSelector
            regionFilter={regionFilter as string}
            handleRegionFilterChange={setRegionFilter}
          />
        )}
      </div>

      <div className={classes.listsContainer}>
        <div className={classes.priorityLabelListContainer}>
          <TestPriorityLabelList numTests={tests.length} />
        </div>
        <TestList
          tests={filterTests(tests)}
          isInEditMode={userHasTestListLocked}
          selectedTestName={selectedTestName}
          onTestPriorityChange={onTestPriorityChange}
          onTestSelected={onTestSelected}
        />
      </div>
    </div>
  );
}