refactor(reports): Arash/again refactor reports (#16872)

* pexdax refactor (#16333)

* refactor progress (#16339)

* fix: Header Actions test refactor (#16336)

* fixed tests

* Update index.tsx

Co-authored-by: Elizabeth Thompson <eschutho@gmail.com>

* code dry (#16358)

* Fetch bug fixed (#16376)

* continued refactoring (#16377)

* refactor: Reports - ReportModal (#16622)

* refactoring progress

* removed consoles

* Working, but with 2 fetches

* it is still not working

Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
Co-authored-by: Elizabeth Thompson <eschutho@gmail.com>

superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx

@@ -46,13 +46,11 @@ export default function HeaderReportActionsDropDown({
  chart?: ChartState;
 }) {
  const dispatch = useDispatch();
- const reports: any = useSelector<any>(state =>
- Object.values(state.reports).filter((report: any) =>
- dashboardId
- ? report.dashboard_id === dashboardId
- : report.chart_id === chart?.id,
- ),
+ const reports: Record<number, AlertObject> = useSelector<any, AlertObject>(
+ state => state.reports,
  );
+ const report: AlertObject = Object.values(reports)[0];
+ const hasReport = !!report;
  const user: UserWithPermissionsAndRoles = useSelector<
  any,
  UserWithPermissionsAndRoles
@@ -63,7 +61,6 @@ export default function HeaderReportActionsDropDown({
  ] = useState<AlertObject | null>(null);
  const theme = useTheme();
  const [showModal, setShowModal] = useState<boolean>(false);
- const [showModal, setShowModal] = useState(false);
  const toggleActiveKey = async (data: AlertObject, checked: boolean) => {
  if (data?.id) {
  toggleActive(data, checked);
@@ -103,10 +100,21 @@ export default function HeaderReportActionsDropDown({
  }),
  );
  }
- return () => {
- };
  }, []);
 
+ useEffect(() => {
+ if (hasReport && report.dashboard_id !== dashboardId) {
+ dispatch(
+ fetchUISpecificReport({
+ userId: user.userId,
+ filterField: dashboardId ? 'dashboard_id' : 'chart_id',
+ creationMethod: dashboardId ? 'dashboards' : 'charts',
+ resourceId: dashboardId || chart?.id,
+ }),
+ );
+ }
+ }, [dashboardId]);
+
  const menu = () => (
  <Menu selectable={false} css={{ width: '200px' }}>
  <Menu.Item>

superset-frontend/src/views/CRUD/alert/types.ts

@@ -66,6 +66,7 @@ export type AlertObject = {
  created_on?: string;
  crontab?: string;
  dashboard?: MetaObject;
+ dashboard_id?: number;
  database?: MetaObject;
  description?: string;
  grace_period?: number;