feat(profiles) link to instance list with profile filter applied WD-3874

canonical · May 23, 2023 · c49f136 · c49f136
1 parent ebeaabf
commit c49f136
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 43 deletions.
diff --git 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,13 +11,24 @@ 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[];
   setFilters: (newFilters: InstanceFilters) => void;
 }
 
 const InstanceSearchFilter: FC<Props> = ({ 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<Props> = ({ instances, setFilters }) => {
   return (
     <div className="search-wrapper margin-right u-no-margin--bottom">
       <SearchAndFilter
+        existingSearchData={
+          state?.appliedProfile
+            ? [
+                {
+                  lead: "profile",
+                  value: state.appliedProfile,
+                },
+              ]
+            : undefined
+        }
         filterPanelData={searchAndFilterData}
         returnSearchData={onSearchDataChange}
       />

diff --git 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
               />
             ) : (
               <tr>

diff --git 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<Props> = ({
   profile,
   project,
   headingClassName,
-  alignRight,
 }) => {
   const isDefaultProject = project === "default";
 
@@ -59,13 +57,15 @@ const ProfileInstances: FC<Props> = ({
 
   return isDefaultProject ? (
     <ProfileUsedByDefaultProject
+      profile={profile.name}
       affectedProjects={affectedProjects}
       headingClassName={headingClassName}
     />
   ) : (
     <ProfileUsedByRegularProject
+      profile={profile.name}
+      project={project}
       usedByInstances={usedByInstances}
-      alignRight={alignRight}
     />
   );
 };

diff --git 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<Props> = ({
+  profile,
   affectedProjects,
   headingClassName,
 }) => {
@@ -32,16 +33,9 @@ const ProfileUsedByDefaultProject: FC<Props> = ({
               <i className="u-text--muted no-instances">No instances</i>
             )}
             {project.instances.length > 0 && (
-              <ExpandableList
-                items={project.instances.map((instance) => (
-                  <div
-                    key={instance.name}
-                    className="u-truncate list-item"
-                    title={instance.name}
-                  >
-                    <InstanceLink instance={instance} />
-                  </div>
-                ))}
+              <ViewProfileInstancesBtn
+                profile={profile}
+                project={project.name}
               />
             )}
           </td>

diff --git 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<Props> = ({
+  profile,
+  project,
   usedByInstances,
-  alignRight = false,
 }) => {
   return (
     <>
       {usedByInstances.length > 0 && (
         <tr>
-          {alignRight && <th />}
           <td>
-            <div className="list-wrapper">
-              <ExpandableList
-                items={usedByInstances.map((instance) => (
-                  <div
-                    key={instance.name}
-                    className="u-truncate list-item non-default-project-item"
-                    title={instance.name}
-                  >
-                    <InstanceLink instance={instance} />
-                  </div>
-                ))}
-              />
-            </div>
+            <ViewProfileInstancesBtn profile={profile} project={project} />
           </td>
         </tr>
       )}

diff --git a/src/pages/profiles/actions/ViewProfileInstancesBtn.tsx 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<Props> = ({ profile, project }) => {
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      appearance="link"
+      className="u-no-margin u-no-padding"
+      small
+      onClick={() => {
+        navigate(`/ui/${project}/instances`, {
+          state: {
+            appliedProfile: profile,
+          },
+        });
+      }}
+    >
+      Go to instances
+    </Button>
+  );
+};
+
+export default ViewProfileInstancesBtn;
diff --git 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;
-  }
 }