locationConfig hash param (#9514)

* add hash param to locationConfig object in extensions to allow fine-tune of application of an extension + change logic around extension table cols to better reflect col location based on page user is browsing

* remove commented line

* update docs

* improve docs with breaking changes warning

* address pr comments

* bump shell version

---------

Co-authored-by: Alexandre Alves <aalves@Alexandres-MBP.lan>

docusaurus/docs/extensions/api/common.md

@@ -66,7 +66,8 @@ The admissible parameters for the `LocationConfig` object are:
 |`id`| `v2.7.2` | Array | Array of the identifier for a given resource. Ex: `deployment-unt6xmz` |
 |`mode`| `v2.7.2` + `v2.7.7` | Array | Array of modes which relates to the type of view on which the given enhancement should be applied. Admissible values are: `edit` (v2.7.2), `config` (v2.7.2), `detail` (v2.7.2), `list` (v2.7.2) and `create` (v2.7.7) |
 |`context`| `v2.7.2`| Object | Requirements set by the context itself. This is a key value object that must match the object provided where the feature is used. For instance if a ResourceTab should only include a tab given specific information where the ResourceTab is used. Ex `{ provider: "digitalocean" }` |
-| `queryParam`| `v2.7.2` | Object | This is a key value object that must match the url's query param key values
+| `queryParam`| `v2.7.2` | Object | This is a key value object that must match the url's query param key values |
+|`hash`| `v2.8.0` | Array | Array of strings for url hash identifiers, commonly used in Tabs Ex: On a details view of a `provisioning.cattle.io.cluster`, you have several tabs identified in the hash portion of the url such as `node-pools`, `conditions` and `related`  |
 
 ### LocationConfig Examples
 

docusaurus/docs/extensions/api/table-columns.md

@@ -6,7 +6,9 @@ Table Columns are added to Rancher via the `addTableColumn` method.
 
 *(Rancher version v2.7.2)*
 
-This method adds a table column to a `SortableTable`/`ResourceList` element-based table on the UI.
+>**IMPORTANT NOTE:** on **Rancher version v2.8.0** we've introduced breaking changes to the behaviour of this extension enhancement (Table Columns). Previously, you would target the resource name of the table you were trying to extend, which was different from the usage of the [LocationConfig object](./common#locationconfig) in any of the other extension enhancements available. With these new changes, the [LocationConfig object](./common#locationconfig) will be used to target a specific page that contains a table and add it to that particular one, therefore having a better control of the new table column appearance.
+
+This method adds a table column to a `ResourceTable` element-based table on the UI.
 
 Method:
 

shell/components/ResourceTable.vue

@@ -7,6 +7,7 @@ import SortableTable from '@shell/components/SortableTable';
 import { NAMESPACE, AGE } from '@shell/config/table-headers';
 import { findBy } from '@shell/utils/array';
 import { ExtensionPoint, TableColumnLocation } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 
 // Default group-by in the case the group stored in the preference does not apply
 const DEFAULT_GROUP = 'namespace';
@@ -223,7 +224,6 @@ export default {
     _headers() {
       let headers;
       const showNamespace = this.showNamespaceColumn;
-      const type = this.schema?.id || this.$route?.params?.resource || undefined;
 
       if ( this.headers ) {
         headers = this.headers.slice();
@@ -234,7 +234,7 @@ export default {
       // add custom table columns provided by the extensions ExtensionPoint.TABLE_COL hook
       // gate it so that we prevent errors on older versions of dashboard
       if (this.$store.$plugin?.getUIConfig) {
-        const extensionCols = this.$store.$plugin.getUIConfig(ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE);
+        const extensionCols = getApplicableExtensionEnhancements(this, ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE, this.$route);
 
         // Try and insert the columns before the Age column
         let insertPosition = headers.length;
@@ -257,17 +257,11 @@ export default {
 
         // adding extension defined cols to the correct header config
         extensionCols.forEach((col) => {
-          if (col.locationConfig.resource) {
-            col.locationConfig.resource.forEach((resource) => {
-              if (resource && type === resource) {
-                // we need the 'value' prop to be populated in order for the rows to show the values
-                if (!col.value && col.getValue) {
-                  col.value = col.getValue;
-                }
-                headers.splice(insertPosition, 0, col);
-              }
-            });
+          // we need the 'value' prop to be populated in order for the rows to show the values
+          if (!col.value && col.getValue) {
+            col.value = col.getValue;
           }
+          headers.splice(insertPosition, 0, col);
         });
       }
 

shell/core/plugin-helpers.js

@@ -58,6 +58,7 @@ function checkExtensionRouteBinding($route, locationConfig, context) {
     'id',
     'mode',
     'path',
+    'hash',
     // url query params
     'queryParam',
     // Custom context specific params provided by the extension, not to be confused with location params
@@ -76,8 +77,10 @@ function checkExtensionRouteBinding($route, locationConfig, context) {
         const locationConfigParam = asArray[x];
 
         if (locationConfigParam) {
+          if (param === 'hash') {
+            res = $route.hash ? $route.hash.includes(locationConfigParam) : false;
           // handle "product" in a separate way...
-          if (param === 'product') {
+          } else if (param === 'product') {
             res = checkRouteProduct($route, locationConfigParam);
           // also handle "mode" in a separate way because it mainly depends on query params
           } else if (param === 'mode') {

shell/core/types.ts

@@ -139,6 +139,7 @@ export type LocationConfig = {
   cluster?: string[],
   id?: string[],
   mode?: string[],
+  hash?: string[],
   /**
    * path match from URL (excludes host address)
    */

shell/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",