feat(home): open env on click [EE-4792] (#8219)

app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.stories.tsx

@@ -24,8 +24,6 @@ function Template({ environment }: Args) {
       environment={environment}
       onClickBrowse={() => {}}
       isActive={false}
-      onSelect={() => {}}
-      isSelected={false}
     />
   );
 }

app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.test.tsx

@@ -44,8 +44,6 @@ function renderComponent(
   return renderWithQueryClient(
     <UserContext.Provider value={{ user }}>
       <EnvironmentItem
-        onSelect={jest.fn()}
-        isSelected={false}
         isActive={false}
         onClickBrowse={() => {}}
         environment={env}

app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx

@@ -10,6 +10,7 @@ import {
   PlatformType,
 } from '@/react/portainer/environments/types';
 import {
+  getDashboardRoute,
   getPlatformType,
   isEdgeEnvironment,
 } from '@/react/portainer/environments/utils';
@@ -18,7 +19,7 @@ import { useTags } from '@/portainer/tags/queries';
 
 import { EdgeIndicator } from '@@/EdgeIndicator';
 import { EnvironmentStatusBadge } from '@@/EnvironmentStatusBadge';
-import { Checkbox } from '@@/form-components/Checkbox';
+import { Link } from '@@/Link';
 
 import { EnvironmentIcon } from './EnvironmentIcon';
 import { EnvironmentStats } from './EnvironmentStats';
@@ -31,8 +32,6 @@ interface Props {
   environment: Environment;
   groupName?: string;
   onClickBrowse(): void;
-  onSelect(isSelected: boolean): void;
-  isSelected: boolean;
   isActive: boolean;
 }
 
@@ -41,8 +40,6 @@ export function EnvironmentItem({
   onClickBrowse,
   groupName,
   isActive,
-  isSelected,
-  onSelect,
 }: Props) {
   const isEdge = isEdgeEnvironment(environment.Type);
 
@@ -51,15 +48,19 @@ export function EnvironmentItem({
   const tags = useEnvironmentTagNames(environment.TagIds);
 
   return (
-    <label className="relative">
+    <Link
-      <div className="absolute top-2 left-2">
+      to={getDashboardRoute(environment)}
-        <Checkbox
+      params={{
-          id={`environment-select-${environment.Id}`}
+        endpointId: environment.Id,
-          checked={isSelected}
+        environmentId: environment.Id,
-          onChange={() => onSelect(!isSelected)}
+      }}
-        />
+      className="no-link"
-      </div>
+    >
-      <div className="blocklist-item flex overflow-hidden min-h-[100px]">
+      <button
+        className="blocklist-item flex items-stretch overflow-hidden min-h-[100px] bg-transparent w-full"
+        onClick={onClickBrowse}
+        type="button"
+      >
         <div className="ml-2 self-center flex justify-center">
           <EnvironmentIcon type={environment.Type} />
         </div>
@@ -129,8 +130,8 @@ export function EnvironmentItem({
           isActive={isActive}
         />
         <EditButtons environment={environment} />
-      </div>
+      </button>
-    </label>
+    </Link>
   );
 }
 

app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx

@@ -25,7 +25,6 @@ import { EnvironmentsQueryParams } from '@/react/portainer/environments/environm
 import { useUser } from '@/react/hooks/useUser';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { environmentStore } from '@/react/hooks/current-environment-store';
-import { useListSelection } from '@/react/hooks/useListSelection';
 
 import { TableFooter } from '@@/datatables/TableFooter';
 import { TableActions, TableContainer, TableTitle } from '@@/datatables';
@@ -71,11 +70,6 @@ enum ConnectionType {
 const storageKey = 'home_endpoints';
 
 export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
-  const [selectedItems, handleChangeSelect] = useListSelection<Environment>(
-    [],
-    (a, b) => a.Id === b.Id
-  );
-
   const { isAdmin } = useUser();
   const { environmentId: currentEnvironmentId } = useStore(environmentStore);
   const [platformTypes, setPlatformTypes] = useHomePageFilter<
@@ -229,7 +223,6 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
                   sort: sortByFilter,
                   order: sortByDescending ? 'desc' : 'asc',
                 }}
-                selectedItems={selectedItems}
               />
             </div>
             <div className={clsx(styles.filterSearchbar, 'ml-3')}>
@@ -328,10 +321,6 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
                 }
                 onClickBrowse={() => onClickBrowse(env)}
                 isActive={env.Id === currentEnvironmentId}
-                isSelected={selectedItems.some(
-                  (selectedEnv) => selectedEnv.Id === env.Id
-                )}
-                onSelect={(selected) => handleChangeSelect(env, selected)}
               />
             ))
           )}

app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx

@@ -15,17 +15,12 @@ import '@reach/dialog/styles.css';
 export interface Props {
   environments: Environment[];
   envQueryParams: Query;
-  selectedItems: Array<Environment>;
 }
-export function KubeconfigButton({
+export function KubeconfigButton({ environments, envQueryParams }: Props) {
-  environments,
-  envQueryParams,
-  selectedItems,
-}: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
   if (!isKubeconfigButtonVisible(environments)) {
-    //  return null;
+    return null;
   }
 
   return (
@@ -34,7 +29,7 @@ export function KubeconfigButton({
         onClick={handleClick}
         size="medium"
         className="!ml-3"
-        disabled={selectedItems.some(
+        disabled={environments.some(
           (env) => !isKubernetesEnvironment(env.Type)
         )}
         icon={Download}
@@ -74,11 +69,7 @@ export function KubeconfigButton({
         <KubeconfigPrompt
           envQueryParams={envQueryParams}
           onClose={handleClose}
-          selectedItems={
+          selectedItems={environments.map((env) => env.Id)}
-            selectedItems.length
-              ? selectedItems.map((env) => env.Id)
-              : environments.map((env) => env.Id)
-          }
         />
       )
     );

app/react/portainer/environments/utils/index.ts

@@ -60,10 +60,16 @@ export function isUnassociatedEdgeEnvironment(env: Environment) {
 }
 
 export function getDashboardRoute(environment: Environment) {
-  if (isEdgeEnvironment(environment.Type) && !environment.EdgeID) {
+  if (isEdgeEnvironment(environment.Type)) {
+    if (!environment.EdgeID) {
       return 'portainer.endpoints.endpoint';
     }
 
+    if (isEdgeAsync(environment)) {
+      return 'edge.browse.dashboard';
+    }
+  }
+
   const platform = getPlatformType(environment.Type);
 
   switch (platform) {