Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jacobshandling merged 1 commit into from
Aug 2, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions frontend/pages/SoftwarePage/SoftwarePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -385,6 +388,7 @@ const SoftwarePage = ({ children, router, location }: ISoftwarePageProps) => {
showExploitedVulnerabilitiesOnly,
softwareFilter,
resetPageIndex,
addedSoftwareToken,
})}
</div>
);
Expand Down Expand Up @@ -424,6 +428,7 @@ const SoftwarePage = ({ children, router, location }: ISoftwarePageProps) => {
teamId={currentTeamId ?? 0}
router={router}
onExit={toggleAddSoftwareModal}
setAddedSoftwareToken={setAddedSoftwareToken}
/>
)}
</div>
Expand Down
4 changes: 4 additions & 0 deletions frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTitles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ interface ISoftwareTitlesProps {
currentPage: number;
teamId?: number;
resetPageIndex: boolean;
addedSoftwareToken: string | null;
}

const SoftwareTitles = ({
Expand All @@ -56,6 +57,7 @@ const SoftwareTitles = ({
currentPage,
teamId,
resetPageIndex,
addedSoftwareToken,
}: ISoftwareTitlesProps) => {
const showVersions = location.pathname === PATHS.SOFTWARE_VERSIONS;

Expand All @@ -80,6 +82,7 @@ const SoftwareTitles = ({
orderDirection,
orderKey,
teamId,
addedSoftwareToken,
Copy link
Copy Markdown
Contributor

@gillespi314 gillespi314 Aug 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I was hoping this was going to be the solution you found :)

A couple small comments for future consideration:

Are we including this new field in the URL params? If so, can we omit it, like we do for scope on line 90 below?

It might be nice to establish a pattern for this approach more generally. Perhaps addedSoftwareToken could become something more generic like refetchAt.

...getSoftwareFilterForQueryKey(softwareFilter),
},
],
Expand Down Expand Up @@ -113,6 +116,7 @@ const SoftwareTitles = ({
orderKey,
teamId,
vulnerable: softwareFilter === "vulnerableSoftware",
addedSoftwareToken,
},
],
({ queryKey: [queryKey] }) =>
Expand Down
11 changes: 9 additions & 2 deletions frontend/pages/SoftwarePage/components/AddPackage/AddPackage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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)}`
);
Expand Down
16 changes: 14 additions & 2 deletions frontend/pages/SoftwarePage/components/AddSoftwareModal/AddSoftwareModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
10 changes: 9 additions & 1 deletion frontend/pages/SoftwarePage/components/AppStoreVpp/AppStoreVpp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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));
Expand Down
4 changes: 4 additions & 0 deletions frontend/services/entities/software.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}

Expand Down