feat: preserve changes of table view state in Notebook

Partof #5399
kubernetes-sigs · Feb 2, 2021 · 9c97a14 · 9c97a14
1 parent 57251d0
commit 9c97a14
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/packages/test/src/api/selectors.ts b/packages/test/src/api/selectors.ts
@@ -207,7 +207,7 @@ export const TABLE_FOOTER_MESSAGE = (N: number, M: number) =>
   `${TABLE_FOOTER(N)} .kui--data-table-footer-message:nth-child(${M})`
 export const TABLE_FOOTER_MESSAGE_LINK = (N: number, M: number) => `${TABLE_FOOTER_MESSAGE(N, M)} a`
 
-const _TABLE_AS_GRID = '.kui--data-table-as-grid'
+export const _TABLE_AS_GRID = '.kui--data-table-as-grid'
 export const TABLE_AS_GRID = (N: number) => `${OUTPUT_N(N)} ${_TABLE_AS_GRID}`
 export const TABLE_AS_GRID_CELL = (N: number, name: string) =>
   `${TABLE_AS_GRID(N)} [data-tag="badge"][data-entity-name="${name}"]`

diff --git a/plugins/plugin-client-common/src/components/Content/Table/PaginatedTable.tsx b/plugins/plugin-client-common/src/components/Content/Table/PaginatedTable.tsx
@@ -262,19 +262,34 @@ export default class PaginatedTable<P extends Props, S extends State> extends Re
             repl={this.props.repl}
             asGrid={this.state.asGrid}
             gridableColumn={gridableColumn}
-            setAsGrid={(asGrid: boolean) => this.setState({ asGrid })}
+            setAsGrid={(asGrid: boolean) => {
+              this.setState({ asGrid })
+              if (asGrid) {
+                this.props.response.defaultPresentation = 'grid'
+              }
+            }}
             paginate={this.isPaginated()}
             setPage={(page: number) => this.setState({ page })}
             page={this.state.page}
             totalItems={this.state.body.length}
             pageSize={this.state.pageSize}
             hasSequenceButton={hasSequenceButton}
             asSequence={this.state.asSequence}
-            setAsSequence={(asSequence: boolean) => this.setState({ asSequence })}
+            setAsSequence={(asSequence: boolean) => {
+              this.setState({ asSequence })
+              if (asSequence) {
+                this.props.response.defaultPresentation = 'sequence-diagram'
+              }
+            }}
             hasTimelineButton={hasTimelineButton}
             asTimeline={this.state.asTimeline}
             caption={this.caption() || undefined}
-            setAsTimeline={(asTimeline: boolean) => this.setState({ asTimeline })}
+            setAsTimeline={(asTimeline: boolean) => {
+              this.setState({ asTimeline })
+              if (asTimeline) {
+                this.props.response.defaultPresentation = 'timeline'
+              }
+            }}
           />
         )}
       </React.Fragment>

diff --git a/plugins/plugin-kubectl/src/test/k8s3/replay.ts b/plugins/plugin-kubectl/src/test/k8s3/replay.ts
@@ -26,6 +26,9 @@ import {
   deleteNS
 } from '@kui-shell/plugin-kubectl/tests/lib/k8s/utils'
 
+import { dirname } from 'path'
+const ROOT = dirname(require.resolve('@kui-shell/plugin-kubectl/tests/package.json'))
+
 describe(`kubectl replay ${process.env.MOCHA_RUN_TARGET || ''}`, function(this: Common.ISuite) {
   before(Common.before(this))
   after(Common.after(this))
@@ -142,3 +145,37 @@ describe(`kubectl replay with clicks ${process.env.MOCHA_RUN_TARGET || ''}`, asy
 
   deleteNS(this, ns, 'kubectl')
 })
+
+describe(`kubectl replay with grid table ${process.env.MOCHA_RUN_TARGET || ''}`, async function(this: Common.ISuite) {
+  before(Common.before(this))
+  after(Common.after(this))
+
+  const ns: string = createNS()
+  const inNamespace = `-n ${ns}`
+  const file = Util.uniqueFileForSnapshot()
+
+  allocateNS(this, ns, 'kubectl')
+
+  it(`should replay a kubectl get pods table with grid using snapshot file ${file}`, async () => {
+    try {
+      const res = await CLI.command(`kubectl create -f ${ROOT}/data/k8s/headless ${inNamespace}`, this.app)
+
+      const selector = await ReplExpect.okWithCustom<string>({ selector: Selectors.BY_NAME('nginx') })(res)
+
+      await waitForGreen(this.app, selector)
+
+      await this.app.client.$(Selectors.TABLE_SHOW_AS_GRID(res.count)).then(_ => _.click())
+      await this.app.client.$(Selectors.TABLE_AS_GRID(res.count)).then(_ => _.waitForDisplayed())
+
+      await CLI.command(`snapshot ${file}`, this.app).then(ReplExpect.justOK)
+
+      await CLI.command(`replay ${file}`, this.app)
+
+      await this.app.client.$(`${Selectors.OUTPUT_LAST} ${Selectors._TABLE_AS_GRID}`).then(_ => _.waitForDisplayed())
+    } catch (err) {
+      await Common.oops(this, true)(err)
+    }
+  })
+
+  deleteNS(this, ns, 'kubectl')
+})