UI: Coordinate sibling refetches via parent state (#20973)

## #20965 


https://www.loom.com/share/52ff44615e2e41a99c129acd3d2427bf?sid=f90ead66-9730-4538-95db-a70bf971b5a8

- [x] Manual QA for all new/changed functionality)

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/pages/SoftwarePage/SoftwarePage.tsx

@@ -151,6 +151,9 @@ const SoftwarePage = ({ children, router, location }: ISoftwarePageProps) => {
   const [showPreviewTicketModal, setShowPreviewTicketModal] = useState(false);
   const [showAddSoftwareModal, setShowAddSoftwareModal] = useState(false);
   const [resetPageIndex, setResetPageIndex] = useState<boolean>(false);
+  const [addedSoftwareToken, setAddedSoftwareToken] = useState<string | null>(
+    null
+  );
 
   const {
     currentTeamId,
@@ -385,6 +388,7 @@ const SoftwarePage = ({ children, router, location }: ISoftwarePageProps) => {
           showExploitedVulnerabilitiesOnly,
           softwareFilter,
           resetPageIndex,
+          addedSoftwareToken,
         })}
       </div>
     );
@@ -424,6 +428,7 @@ const SoftwarePage = ({ children, router, location }: ISoftwarePageProps) => {
             teamId={currentTeamId ?? 0}
             router={router}
             onExit={toggleAddSoftwareModal}
+            setAddedSoftwareToken={setAddedSoftwareToken}
           />
         )}
       </div>

frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTitles.tsx

@@ -43,6 +43,7 @@ interface ISoftwareTitlesProps {
   currentPage: number;
   teamId?: number;
   resetPageIndex: boolean;
+  addedSoftwareToken: string | null;
 }
 
 const SoftwareTitles = ({
@@ -56,6 +57,7 @@ const SoftwareTitles = ({
   currentPage,
   teamId,
   resetPageIndex,
+  addedSoftwareToken,
 }: ISoftwareTitlesProps) => {
   const showVersions = location.pathname === PATHS.SOFTWARE_VERSIONS;
 
@@ -80,6 +82,7 @@ const SoftwareTitles = ({
         orderDirection,
         orderKey,
         teamId,
+        addedSoftwareToken,
         ...getSoftwareFilterForQueryKey(softwareFilter),
       },
     ],
@@ -113,6 +116,7 @@ const SoftwareTitles = ({
         orderKey,
         teamId,
         vulnerable: softwareFilter === "vulnerableSoftware",
+        addedSoftwareToken,
       },
     ],
     ({ queryKey: [queryKey] }) =>

frontend/pages/SoftwarePage/components/AddPackage/AddPackage.tsx

@@ -21,9 +21,15 @@ interface IAddPackageProps {
   teamId: number;
   router: InjectedRouter;
   onExit: () => void;
+  setAddedSoftwareToken: (token: string) => void;
 }
 
-const AddPackage = ({ teamId, router, onExit }: IAddPackageProps) => {
+const AddPackage = ({
+  teamId,
+  router,
+  onExit,
+  setAddedSoftwareToken,
+}: IAddPackageProps) => {
   const { renderFlash } = useContext(NotificationContext);
   const [isUploading, setIsUploading] = useState(false);
 
@@ -86,7 +92,8 @@ const AddPackage = ({ teamId, router, onExit }: IAddPackageProps) => {
       } else {
         newQueryParams.available_for_install = true;
       }
-
+      // any unique string - triggers SW refetch
+      setAddedSoftwareToken(`${Date.now()}`);
       router.push(
         `${PATHS.SOFTWARE_TITLES}?${buildQueryStringFromParams(newQueryParams)}`
       );

frontend/pages/SoftwarePage/components/AddSoftwareModal/AddSoftwareModal.tsx

@@ -37,12 +37,14 @@ interface IAddSoftwareModalProps {
   teamId: number;
   router: InjectedRouter;
   onExit: () => void;
+  setAddedSoftwareToken: (token: string) => void;
 }
 
 const AddSoftwareModal = ({
   teamId,
   router,
   onExit,
+  setAddedSoftwareToken,
 }: IAddSoftwareModalProps) => {
   return (
     <Modal
@@ -62,10 +64,20 @@ const AddSoftwareModal = ({
                 <Tab>App Store (VPP)</Tab>
               </TabList>
               <TabPanel>
-                <AddPackage teamId={teamId} router={router} onExit={onExit} />
+                <AddPackage
+                  teamId={teamId}
+                  router={router}
+                  onExit={onExit}
+                  setAddedSoftwareToken={setAddedSoftwareToken}
+                />
               </TabPanel>
               <TabPanel>
-                <AppStoreVpp teamId={teamId} router={router} onExit={onExit} />
+                <AppStoreVpp
+                  teamId={teamId}
+                  router={router}
+                  onExit={onExit}
+                  setAddedSoftwareToken={setAddedSoftwareToken}
+                />
               </TabPanel>
             </Tabs>
           </TabsWrapper>

frontend/pages/SoftwarePage/components/AppStoreVpp/AppStoreVpp.tsx

@@ -130,9 +130,15 @@ interface IAppStoreVppProps {
   teamId: number;
   router: InjectedRouter;
   onExit: () => void;
+  setAddedSoftwareToken: (token: string) => void;
 }
 
-const AppStoreVpp = ({ teamId, router, onExit }: IAppStoreVppProps) => {
+const AppStoreVpp = ({
+  teamId,
+  router,
+  onExit,
+  setAddedSoftwareToken,
+}: IAppStoreVppProps) => {
   const { renderFlash } = useContext(NotificationContext);
   const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
   const [selectedApp, setSelectedApp] = useState<IVppApp | null>(null);
@@ -189,6 +195,8 @@ const AppStoreVpp = ({ teamId, router, onExit }: IAppStoreVppProps) => {
         team_id: teamId,
         available_for_install: true,
       });
+      // any unique string - triggers SW refetch
+      setAddedSoftwareToken(`${Date.now()}`);
       router.push(`${PATHS.SOFTWARE}?${queryParams}`);
     } catch (e) {
       renderFlash("error", getErrorMessage(e));

frontend/services/entities/software.ts

@@ -56,10 +56,14 @@ export interface ISoftwareVersionResponse {
 }
 
 export interface ISoftwareVersionsQueryKey extends ISoftwareApiParams {
+  // used to trigger software refetches from sibling pages
+  addedSoftwareToken: string | null;
   scope: "software-versions";
 }
 
 export interface ISoftwareTitlesQueryKey extends ISoftwareApiParams {
+  // used to trigger software refetches from sibling pages
+  addedSoftwareToken: string | null;
   scope: "software-titles";
 }