diff --git a/cypress/e2e/po/components/fleet/fleet-dashboard-workspace-card.po.ts b/cypress/e2e/po/components/fleet/fleet-dashboard-workspace-card.po.ts index 0e1278a45c..236f527249 100644 --- a/cypress/e2e/po/components/fleet/fleet-dashboard-workspace-card.po.ts +++ b/cypress/e2e/po/components/fleet/fleet-dashboard-workspace-card.po.ts @@ -12,7 +12,7 @@ class ResourcePanelPo extends ComponentPo { } stateBadge(state: string) { - return this.self().find(`.bg-${ state }`); + return this.self().find(`.badge.bg-${ state }`); } } @@ -32,6 +32,14 @@ class ExpandedPanelPo extends ComponentPo { tablePanel() { return new TablePanelPo(this.self(), this.workspace); } + + gitReposFilter() { + return CheckboxInputPo.byLabel(this.self(), 'Show Git Repos'); + } + + helmOpsFilter() { + return CheckboxInputPo.byLabel(this.self(), 'Show Helm Ops'); + } } class CardPanelPo extends ComponentPo { @@ -43,14 +51,6 @@ class CardPanelPo extends ComponentPo { this.workspace = workspace; } - gitReposFilter() { - return CheckboxInputPo.byLabel(this.self(), 'Show Git Repos'); - } - - helmOpsFilter() { - return CheckboxInputPo.byLabel(this.self(), 'Show Helm Ops'); - } - statePanel(stateDisplay) { return new StatePanelPo(`[data-testid="state-panel-${ stateDisplay }"]`, this.self(), this.workspace); } @@ -76,11 +76,11 @@ class StatePanelPo extends ComponentPo { } title() { - return this.self().find(`.title .label`); + return this.self().find('.title .state-title'); } - card(name) { - return this.self().find(`[data-testid="card-${ this.workspace }/${ name }"]`); + card(name: string) { + return this.self().find(`[data-testid="item-card-header-title"]`).contains(name); } } @@ -102,6 +102,6 @@ export default class FleetDashboardWorkspaceCardPo extends ComponentPo { } expandButton() { - return this.self().find('[data-testid="expand-button"]'); + return this.self().find(`[data-testid="workspace-expand-btn-${ this.workspace }"]`); } } diff --git a/cypress/e2e/po/pages/fleet/fleet-dashboard.po.ts b/cypress/e2e/po/pages/fleet/fleet-dashboard.po.ts index 63ab06a44b..f5b2b937fc 100644 --- a/cypress/e2e/po/pages/fleet/fleet-dashboard.po.ts +++ b/cypress/e2e/po/pages/fleet/fleet-dashboard.po.ts @@ -41,7 +41,7 @@ export class FleetDashboardListPagePo extends BaseListPagePo { } slideInPanel() { - return cy.get('[data-testid="slide-in-panel-component"] [data-testid="fleet-dashboard-resource-details-header"]'); + return cy.get('[data-testid="slide-in-panel-component"]'); } fleetDashboardEmptyState() { diff --git a/cypress/e2e/tests/pages/fleet/dashboard.spec.ts b/cypress/e2e/tests/pages/fleet/dashboard.spec.ts index ccaead66e3..8a3f914a7f 100644 --- a/cypress/e2e/tests/pages/fleet/dashboard.spec.ts +++ b/cypress/e2e/tests/pages/fleet/dashboard.spec.ts @@ -100,15 +100,16 @@ describe('Fleet Dashboard', { tags: ['@fleet', '@adminUser', '@jenkins'] }, () = expandButton.should('be.visible'); expandButton.click(); - const cardsPanel = workspaceCard.expandedPanel().cardsPanel(); + const expandedPanel = workspaceCard.expandedPanel(); + const cardsPanel = expandedPanel.cardsPanel(); cardsPanel.self().should('be.visible'); - cardsPanel.gitReposFilter().checkVisible(); - cardsPanel.gitReposFilter().isChecked(); + expandedPanel.gitReposFilter().checkVisible(); + expandedPanel.gitReposFilter().isChecked(); - cardsPanel.helmOpsFilter().checkVisible(); - cardsPanel.helmOpsFilter().isChecked(); + expandedPanel.helmOpsFilter().checkVisible(); + expandedPanel.helmOpsFilter().isChecked(); const activeStatePanel = cardsPanel.statePanel('Active'); @@ -117,10 +118,7 @@ describe('Fleet Dashboard', { tags: ['@fleet', '@adminUser', '@jenkins'] }, () = activeStatePanel.title().should('contain.text', '/1'); activeStatePanel.title().click(); - const card = activeStatePanel.card(repoName); - - card.should('be.visible'); - card.find('.title').should('contain.text', repoName); + activeStatePanel.card(repoName).should('be.visible'); }); it('Should filter by GitRepo type', () => { @@ -132,9 +130,10 @@ describe('Fleet Dashboard', { tags: ['@fleet', '@adminUser', '@jenkins'] }, () = expandButton.click(); - const cardsPanel = workspaceCard.expandedPanel().cardsPanel(); + const expandedPanel = workspaceCard.expandedPanel(); + const cardsPanel = expandedPanel.cardsPanel(); - cardsPanel.gitReposFilter().set(); + expandedPanel.gitReposFilter().set(); const activeStatePanel = cardsPanel.statePanel('Active'); activeStatePanel.self().should('not.be.visible'); @@ -151,16 +150,16 @@ describe('Fleet Dashboard', { tags: ['@fleet', '@adminUser', '@jenkins'] }, () = const cardsPanel = workspaceCard.expandedPanel().cardsPanel(); - cardsPanel.checkExists(); + cardsPanel.self().should('be.visible'); - // click 'card' mode + // click 'table' mode (first button is table mode) fleetDashboardPage.viewModeButton().self().find('[data-testid="button-group-child-0"]').click(); cardsPanel.checkNotExists(); const tablePanel = workspaceCard.expandedPanel().tablePanel(); - tablePanel.checkExists(); + tablePanel.checkVisible(); }); it('Should open slide-in panel', () => { @@ -202,10 +201,12 @@ describe('Fleet Dashboard', { tags: ['@fleet', '@adminUser', '@jenkins'] }, () = const activeStatePanel = cardsPanel.statePanel('Active'); activeStatePanel.title().click(); + activeStatePanel.card(repoName).should('be.visible').click(); - const card = activeStatePanel.card(repoName); + const details = fleetDashboardPage.slideInPanel(); - card.find('.title a').click(); + details.should('be.visible'); + details.find('.title').should('contain.text', repoName).click(); appDetails.waitForPage(null, 'bundles'); }); diff --git a/docusaurus/docs/extensions/api/table-columns.md b/docusaurus/docs/extensions/api/table-columns.md index d3900b63ec..4dd7ecfeff 100644 --- a/docusaurus/docs/extensions/api/table-columns.md +++ b/docusaurus/docs/extensions/api/table-columns.md @@ -13,12 +13,12 @@ This method adds a table column to a `ResourceTable` element-based table on the Method: ```ts -plugin.addTableColumn(where: String, when: LocationConfig, options: Object); +plugin.addTableColumn(where: String, when: LocationConfig, column: TableColumn); ``` _Arguments_ -`where` string parameter admissable values for this method: +`where` string parameter admissible values for this method: | Key | Type | Description | |---|---|---| @@ -26,28 +26,35 @@ _Arguments_
-`when` Object admissable values: +`when` Object admissible values: `LocationConfig` as described above for the [LocationConfig object](./common#locationconfig). -
-
+*(Rancher version v2.13.0)* -### TableColumnLocation.RESOURCE options +An addition parameter can be provided which will be used to support the column when server-side pagination is enabled. For more information and other changes required to server-side pagination see [here](../performance/scaling/lists.md). + +```ts +plugin.addTableColumn(where: String, when: LocationConfig, column: TableColumn, paginationColumn?: PaginationTableColumn)); +``` + +### TableColumnLocation.RESOURCE column ![Table Col](../screenshots/table-cols.png) -`options` config object. Admissable parameters for the `options` with `'TableColumnLocation.RESOURCE'` are: +`column` config object. Admissible parameters for the `column` with `'TableColumnLocation.RESOURCE'` are: | Key | Type | Description | |---|---|---| |`name`| String | Label for column | -|`labelKey`| String | Same as "name" but allows for translation. Will superseed "name" | +|`labelKey`| String | Same as "name" but allows for translation. Will supersede "name" | |`value`| String | Object property to obtain the value from | -|`getValue`| Fuction | Same as "value", but it can be a function. Will superseed "value" | +|`getValue`| Function | Same as "value", but it can be a function. Will supersede "value" | |`width`| Int | Column width (in `px`). Optional | -|`sort`| Array | Object properties to be bound to the table sorting. Optional | -|`search`| Array | Object properties to be bound to the table search. Optional | +|`sort`| boolean,string,Array | Object properties to be bound to the table sorting. Optional | +|`search`| boolean,string,Array | Object properties to be bound to the table search. Optional | +| `formatter`| string | Name of a `formatter` component used to render the cell. Components should be in the extension `formatters` folder +| `formatterOpts`| any | Provide additional values to the `formatter` component via a `formatterOpts` component param Usage example for `'TableColumnLocation.RESOURCE'`: diff --git a/package.json b/package.json index 406f72758f..9c402299d8 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,7 @@ "express": "4.17.1", "file-saver": "2.0.2", "floating-vue": "5.2.2", - "focus-trap": "7.6.2", + "focus-trap": "7.6.5", "https": "1.0.0", "identicon.js": "2.3.3", "intl-messageformat": "7.8.4", diff --git a/shell/components/FilterPanel.vue b/shell/components/FilterPanel.vue index e1c128280c..a259a94c58 100644 --- a/shell/components/FilterPanel.vue +++ b/shell/components/FilterPanel.vue @@ -20,6 +20,8 @@ type FilterOption = { componentProps?: Record; /** Label to show next to the checkbox, or a custom component next to the checkbox */ label?: string | { component: ComponentType; componentProps: Record; }; + /** Tooltip to be displayed above the checkbox on hover */ + labelTooltip?: string; }; /** @@ -97,7 +99,12 @@ const updateFilter = (key: string, value: string[]) => { @update:value="updateFilter(filter.key, $event)" >