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;