diff --git a/docusaurus/docs/extensions/api/common.md b/docusaurus/docs/extensions/api/common.md index 4bbd56ec46..25bc0ff8ca 100644 --- a/docusaurus/docs/extensions/api/common.md +++ b/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 diff --git a/docusaurus/docs/extensions/api/table-columns.md b/docusaurus/docs/extensions/api/table-columns.md index 9384c0ed9d..d3900b63ec 100644 --- a/docusaurus/docs/extensions/api/table-columns.md +++ b/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: diff --git a/shell/components/ResourceTable.vue b/shell/components/ResourceTable.vue index e54dc677d5..e5f05b660d 100644 --- a/shell/components/ResourceTable.vue +++ b/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); }); } diff --git a/shell/core/plugin-helpers.js b/shell/core/plugin-helpers.js index be37f66aff..d69535475d 100644 --- a/shell/core/plugin-helpers.js +++ b/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') { diff --git a/shell/core/types.ts b/shell/core/types.ts index 82c2dbd2ad..76cb5a37d7 100644 --- a/shell/core/types.ts +++ b/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) */ diff --git a/shell/package.json b/shell/package.json index 9b6c5be7bb..c292c4d65a 100644 --- a/shell/package.json +++ b/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",