diff --git a/src/pages/instances/InstanceSearchFilter.tsx b/src/pages/instances/InstanceSearchFilter.tsx index 0b4a5ec7a0..9129defcda 100644 --- a/src/pages/instances/InstanceSearchFilter.tsx +++ b/src/pages/instances/InstanceSearchFilter.tsx @@ -1,4 +1,4 @@ -import React, { FC } from "react"; +import React, { FC, useEffect } from "react"; import { LxdInstance, LxdInstanceStatus } from "types/instance"; import { InstanceFilters, @@ -11,6 +11,13 @@ import { SearchAndFilterData, SearchAndFilterChip, } from "@canonical/react-components/dist/components/SearchAndFilter/types"; +import { useLocation } from "react-router-dom"; + +interface ProfileFilterState { + state?: { + appliedProfile: string; + }; +} interface Props { instances: LxdInstance[]; @@ -18,6 +25,10 @@ interface Props { } const InstanceSearchFilter: FC = ({ instances, setFilters }) => { + const { state } = useLocation() as ProfileFilterState; + + useEffect(() => window.history.replaceState({}, ""), [state]); + const profileSet = [ ...new Set(instances.flatMap((instance) => instance.profiles)), ]; @@ -68,6 +79,16 @@ const InstanceSearchFilter: FC = ({ instances, setFilters }) => { return (
diff --git a/src/pages/profiles/ProfileDetailPanel.tsx b/src/pages/profiles/ProfileDetailPanel.tsx index a97c4b7c4d..ef2eca4970 100644 --- a/src/pages/profiles/ProfileDetailPanel.tsx +++ b/src/pages/profiles/ProfileDetailPanel.tsx @@ -111,7 +111,6 @@ const ProfileDetailPanel: FC = () => { profile={profile} project={projectName} headingClassName="u-text--muted" - alignRight /> ) : ( diff --git a/src/pages/profiles/ProfileInstances.tsx b/src/pages/profiles/ProfileInstances.tsx index 96383320d1..ccea894ae4 100644 --- a/src/pages/profiles/ProfileInstances.tsx +++ b/src/pages/profiles/ProfileInstances.tsx @@ -11,14 +11,12 @@ interface Props { profile: LxdProfile; project: string; headingClassName?: string; - alignRight?: boolean; } const ProfileInstances: FC = ({ profile, project, headingClassName, - alignRight, }) => { const isDefaultProject = project === "default"; @@ -59,13 +57,15 @@ const ProfileInstances: FC = ({ return isDefaultProject ? ( ) : ( ); }; diff --git a/src/pages/profiles/ProfileUsedByDefaultProject.tsx b/src/pages/profiles/ProfileUsedByDefaultProject.tsx index 2bb5340842..015387fa0e 100644 --- a/src/pages/profiles/ProfileUsedByDefaultProject.tsx +++ b/src/pages/profiles/ProfileUsedByDefaultProject.tsx @@ -1,9 +1,9 @@ import React, { FC } from "react"; import { LxdUsedBy } from "util/usedBy"; -import ExpandableList from "components/ExpandableList"; -import InstanceLink from "pages/instances/InstanceLink"; +import ViewProfileInstancesBtn from "./actions/ViewProfileInstancesBtn"; interface Props { + profile: string; affectedProjects?: { name: string; instances: LxdUsedBy[]; @@ -12,6 +12,7 @@ interface Props { } const ProfileUsedByDefaultProject: FC = ({ + profile, affectedProjects, headingClassName, }) => { @@ -32,16 +33,9 @@ const ProfileUsedByDefaultProject: FC = ({ No instances )} {project.instances.length > 0 && ( - ( -
- -
- ))} + )} diff --git a/src/pages/profiles/ProfileUsedByRegularProject.tsx b/src/pages/profiles/ProfileUsedByRegularProject.tsx index 16b38bfd25..d95f34bef2 100644 --- a/src/pages/profiles/ProfileUsedByRegularProject.tsx +++ b/src/pages/profiles/ProfileUsedByRegularProject.tsx @@ -1,36 +1,24 @@ import React, { FC } from "react"; import { LxdUsedBy } from "util/usedBy"; -import ExpandableList from "components/ExpandableList"; -import InstanceLink from "pages/instances/InstanceLink"; +import ViewProfileInstancesBtn from "./actions/ViewProfileInstancesBtn"; interface Props { + profile: string; + project: string; usedByInstances: LxdUsedBy[]; - alignRight?: boolean; } const ProfileUsedByRegularProject: FC = ({ + profile, + project, usedByInstances, - alignRight = false, }) => { return ( <> {usedByInstances.length > 0 && ( - {alignRight && } -
- ( -
- -
- ))} - /> -
+ )} diff --git a/src/pages/profiles/actions/ViewProfileInstancesBtn.tsx b/src/pages/profiles/actions/ViewProfileInstancesBtn.tsx new file mode 100644 index 0000000000..fcbfc38d36 --- /dev/null +++ b/src/pages/profiles/actions/ViewProfileInstancesBtn.tsx @@ -0,0 +1,31 @@ +import React, { FC } from "react"; +import { useNavigate } from "react-router-dom"; +import { Button } from "@canonical/react-components"; + +interface Props { + profile: string; + project: string; +} + +const ViewProfileInstancesBtn: FC = ({ profile, project }) => { + const navigate = useNavigate(); + + return ( + + ); +}; + +export default ViewProfileInstancesBtn; diff --git a/src/sass/_profile_used_by_default_project.scss b/src/sass/_profile_used_by_default_project.scss index 1960ea1530..ac6e556bfa 100644 --- a/src/sass/_profile_used_by_default_project.scss +++ b/src/sass/_profile_used_by_default_project.scss @@ -8,12 +8,4 @@ margin-right: $sph--small; } } - - .list-item { - padding-bottom: $spv--small; - } - - .p-button--link { - padding: $spv--small 0; - } }