Enable viewing AvailablePackageDetail with flux.

dashboard/src/components/Catalog/PackageCatalogItem.tsx

@@ -1,5 +1,3 @@
-import { useSelector } from "react-redux";
-import { IStoreState } from "shared/types";
 import * as url from "shared/url";
 import { getPluginIcon, PluginNames, trimDescription } from "shared/utils";
 import placeholder from "../../placeholder.png";
@@ -8,20 +6,13 @@ import { IPackageCatalogItem } from "./CatalogItem";
 
 export default function PackageCatalogItem(props: IPackageCatalogItem) {
   const { cluster, namespace, availablePackageSummary } = props;
-  const { config } = useSelector((state: IStoreState) => state);
-
-  // A package is "global" if its cluster and namespace are the ones in which Kubeapps is installed on
-  const isGlobal =
-    availablePackageSummary.availablePackageRef?.context?.namespace === config.kubeappsNamespace &&
-    availablePackageSummary.availablePackageRef?.context?.cluster === config.kubeappsCluster;
 
   // Use the current cluster/namespace in the URL (passed as props here),
   // but, if it is global a "global" segement will be included in the generated URL.
   const packageViewLink = url.app.packages.get(
     cluster,
     namespace,
     availablePackageSummary.availablePackageRef!,
-    isGlobal,
   );
 
   // Historically, this tag is used to show the repository a given package is from,

dashboard/src/components/PackageHeader/PackageView.test.tsx

@@ -101,8 +101,9 @@ afterEach(() => {
   spyOnUseDispatch.mockRestore();
 });
 
-const routePathParam = `/c/${defaultProps.cluster}/ns/${defaultProps.packageNamespace}/packages/${defaultProps.plugin.name}/${defaultProps.plugin.version}/${defaultProps.id}`;
-const routePath = "/c/:cluster/ns/:namespace/packages/:pluginName/:pluginVersion/:packageId";
+const routePathParam = `/c/${defaultProps.cluster}/ns/${defaultProps.namespace}/packages/${defaultProps.plugin.name}/${defaultProps.plugin.version}/${defaultProps.cluster}/${defaultProps.packageNamespace}/${defaultProps.id}`;
+const routePath =
+  "/c/:cluster/ns/:namespace/packages/:pluginName/:pluginVersion/:packageCluster/:packageNamespace/:packageId";
 const history = createMemoryHistory({ initialEntries: [routePathParam] });
 
 it("triggers the fetchAvailablePackageVersions when mounting", () => {

dashboard/src/components/PackageHeader/PackageView.tsx

@@ -23,9 +23,10 @@ import PackageReadme from "./PackageReadme";
 interface IRouteParams {
   cluster: string;
   namespace: string;
-  global: string;
   pluginName: string;
   pluginVersion: string;
+  packageCluster: string;
+  packageNamespace: string;
   packageId: string;
   packageVersion?: string;
 }
@@ -36,10 +37,11 @@ export default function PackageView() {
   const {
     cluster: targetCluster,
     namespace: targetNamespace,
-    global,
     packageId,
     pluginName,
     pluginVersion,
+    packageCluster,
+    packageNamespace,
     packageVersion,
   } = ReactRouter.useParams() as IRouteParams;
   const {
@@ -49,12 +51,8 @@ export default function PackageView() {
 
   const [pluginObj] = useState({ name: pluginName, version: pluginVersion } as Plugin);
 
-  const isGlobal = global === "global";
-
-  // Use the cluster/namespace from the URL unless it comes from a "global" repository.
-  // In that case, use the cluster/namespace from where kubeapps has been installed on
-  const packageCluster = isGlobal ? config.kubeappsCluster : targetCluster;
-  const packageNamespace = isGlobal ? config.kubeappsNamespace : targetNamespace;
+  const isGlobal =
+    packageCluster === config.kubeappsCluster && packageNamespace === config.kubeappsNamespace;
 
   // Fetch the selected/latest version on the initial load
   useEffect(() => {

dashboard/src/containers/RoutesContainer/Routes.tsx

@@ -34,12 +34,9 @@ const privateRoutes = {
   "/c/:cluster/ns/:namespace/apps/new-from-:global(global)/:pluginName/:pluginVersion/:packageId/versions/:packageVersion":
     DeploymentForm,
   "/c/:cluster/ns/:namespace/catalog": Catalog,
-  "/c/:cluster/ns/:namespace/packages/:pluginName/:pluginVersion/:packageId": PackageView,
-  "/c/:cluster/ns/:namespace/packages/:pluginName/:pluginVersion/:packageId/versions/:packageVersion":
+  "/c/:cluster/ns/:namespace/packages/:pluginName/:pluginVersion/:packageCluster/:packageNamespace/:packageId":
     PackageView,
-  "/c/:cluster/ns/:namespace/:global(global)-packages/:pluginName/:pluginVersion/:packageId":
-    PackageView,
-  "/c/:cluster/ns/:namespace/:global(global)-packages/:pluginName/:pluginVersion/:packageId/versions/:packageVersion":
+  "/c/:cluster/ns/:namespace/packages/:pluginName/:pluginVersion/:packageCluster/:packageNamespace/:packageId/versions/:packageVersion":
     PackageView,
   "/c/:cluster/ns/:namespace/operators": OperatorsListContainer,
   "/c/:cluster/ns/:namespace/operators/:operator": OperatorViewContainer,

dashboard/src/shared/url.ts

@@ -41,13 +41,16 @@ export const app = {
       cluster: string,
       namespace: string,
       availablePackageReference: AvailablePackageReference,
-      isGlobal: boolean,
     ) => {
       const pkgPluginName = availablePackageReference?.plugin?.name;
       const pkgPluginVersion = availablePackageReference?.plugin?.version;
       const pkgId = availablePackageReference?.identifier || "";
-      const globalSegment = isGlobal ? "global-packages" : "packages";
-      return `/c/${cluster}/ns/${namespace}/${globalSegment}/${pkgPluginName}/${pkgPluginVersion}/${encodeURIComponent(
+      // Some plugins may not be cluster-aware nor support multi-cluster, so
+      // if the returned available package ref doesn't set cluster, use the current
+      // one.
+      const pkgCluster = availablePackageReference?.context?.cluster || cluster;
+      const pkgNamespace = availablePackageReference?.context?.namespace;
+      return `/c/${cluster}/ns/${namespace}/packages/${pkgPluginName}/${pkgPluginVersion}/${pkgCluster}/${pkgNamespace}/${encodeURIComponent(
         pkgId,
       )}`;
     },