export default function HeaderReportDropDown()

in superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx [106:255]
136 lines of code
26 McCabe index (conditional complexity)

export default function HeaderReportDropDown({
  dashboardId,
  chart,
  useTextMenu = false,
  setShowReportSubMenu,
  submenuTitle,
  showReportModal,
  setCurrentReportDeleting,
}: HeaderReportProps) {
  const dispatch = useDispatch();
  const report = useSelector<any, AlertObject>(state => {
    const resourceType = dashboardId
      ? CreationMethod.Dashboards
      : CreationMethod.Charts;
    return (
      reportSelector(state, resourceType, dashboardId || chart?.id) ||
      EMPTY_OBJECT
    );
  });

  const isReportActive: boolean = report?.active || false;
  const user: UserWithPermissionsAndRoles = useSelector<
    any,
    UserWithPermissionsAndRoles
  >(state => state.user);
  const canAddReports = () => {
    if (!isFeatureEnabled(FeatureFlag.AlertReports)) {
      return false;
    }

    if (!user?.userId) {
      // this is in the case that there is an anonymous user.
      return false;
    }

    // Cannot add reports if the resource is not saved
    if (!(dashboardId || chart?.id)) {
      return false;
    }

    const roles = Object.keys(user.roles || []);
    const permissions = roles.map(key =>
      user.roles[key].filter(
        perms => perms[0] === 'menu_access' && perms[1] === 'Manage',
      ),
    );
    return permissions.some(permission => permission.length > 0);
  };

  const prevDashboard = usePrevious(dashboardId);
  const toggleActiveKey = async (data: AlertObject, checked: boolean) => {
    if (data?.id) {
      dispatch(toggleActive(data, checked));
    }
  };

  const shouldFetch =
    canAddReports() &&
    !!((dashboardId && prevDashboard !== dashboardId) || chart?.id);

  useEffect(() => {
    if (shouldFetch) {
      dispatch(
        fetchUISpecificReport({
          userId: user.userId,
          filterField: dashboardId ? 'dashboard_id' : 'chart_id',
          creationMethod: dashboardId ? 'dashboards' : 'charts',
          resourceId: dashboardId || chart?.id,
        }),
      );
    }
  }, []);

  const showReportSubMenu = report && setShowReportSubMenu && canAddReports();

  useEffect(() => {
    if (showReportSubMenu) {
      setShowReportSubMenu(true);
    } else if (!report && setShowReportSubMenu) {
      setShowReportSubMenu(false);
    }
  }, [report]);

  const handleShowMenu = () => {
    showReportModal();
  };

  const handleDeleteMenuClick = () => {
    setCurrentReportDeleting(report);
  };

  const textMenu = () =>
    isEmpty(report) ? (
      <Menu.SubMenu title={submenuTitle} css={onMenuHover}>
        <Menu.Item onClick={handleShowMenu}>
          {DropdownItemExtension ? (
            <StyledDropdownItemWithIcon>
              <div>{t('Set up an email report')}</div>
              <DropdownItemExtension />
            </StyledDropdownItemWithIcon>
          ) : (
            t('Set up an email report')
          )}
        </Menu.Item>
        <Menu.Divider />
      </Menu.SubMenu>
    ) : (
      <Menu.SubMenu
        title={submenuTitle}
        css={css`
          border: none;
        `}
      >
        <Menu.Item
          css={onMenuItemHover}
          onClick={() => toggleActiveKey(report, !isReportActive)}
        >
          <MenuItemWithCheckboxContainer>
            <Checkbox checked={isReportActive} onChange={noOp} />
            {t('Email reports active')}
          </MenuItemWithCheckboxContainer>
        </Menu.Item>
        <Menu.Item css={onMenuItemHover} onClick={handleShowMenu}>
          {t('Edit email report')}
        </Menu.Item>
        <Menu.Item css={onMenuItemHover} onClick={handleDeleteMenuClick}>
          {t('Delete email report')}
        </Menu.Item>
      </Menu.SubMenu>
    );
  const menu = (title: ReactNode) => (
    <Menu.SubMenu
      title={title}
      css={css`
        width: 200px;
      `}
    >
      <Menu.Item>
        {t('Email reports active')}
        <Switch
          data-test="toggle-active"
          checked={isReportActive}
          onClick={(checked: boolean) => toggleActiveKey(report, checked)}
          size="small"
          css={theme => css`
            margin-left: ${theme.gridUnit * 2}px;
          `}
        />
      </Menu.Item>
      <Menu.Item onClick={() => showReportModal()}>