Skip to content
This repository was archived by the owner on Jul 30, 2025. It is now read-only.

Commit 1b11736

Browse files
myan9starpit
myan9
authored and
starpit
committed
feat: use Accordion for SourceRef
Fixes #6097
1 parent 9870267 commit 1b11736

File tree

9 files changed

+340
-32
lines changed

9 files changed

+340
-32
lines changed

‎packages/test/src/api/selectors.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -275,10 +275,9 @@ export const RADIO_BUTTON_IS_SELECTED = '[data-is-selected]'
275275
export const RADIO_BUTTON_SELECTED = `${RADIO_BUTTON}${RADIO_BUTTON_IS_SELECTED}`
276276

277277
/** SourceRef */
278-
export const SOURCE_REF_N = (N: number, splitIndex = 1) =>
279-
`${PROMPT_BLOCK_N_FOR_SPLIT(N, splitIndex)} .kui--expandable-section`
278+
export const SOURCE_REF_N = (N: number, splitIndex = 1) => `${PROMPT_BLOCK_N_FOR_SPLIT(N, splitIndex)} .kui--accordion`
280279
export const SOURCE_REF_TOGGLE_N = (N: number, expanded = false, splitIndex = 1) =>
281-
`${SOURCE_REF_N(N, splitIndex)} .pf-c-expandable-section__toggle[aria-expanded=${expanded.toString()}]`
280+
`${SOURCE_REF_N(N, splitIndex)} .kui--accordion-item button[aria-expanded=${expanded.toString()}]`
282281

283282
export const COMMENTARY_EDITOR_BUTTON_CANCEL =
284283
'.kui--commentary-editor-toolbar .kui--commentary-button.kui--commentary-cancel-button'

‎plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
*/
1616

1717
import React from 'react'
18-
import { basename } from 'path'
1918
import prettyPrintDuration from 'pretty-ms'
2019
import { dots as spinnerFrames } from 'cli-spinners'
21-
import { Tab as KuiTab, doCancel, i18n, isTable, hasSourceReferences, eventBus, getPrimaryTabId } from '@kui-shell/core'
20+
import { basename } from 'path'
21+
import { Tab as KuiTab, doCancel, i18n, isTable, hasSourceReferences, getPrimaryTabId } from '@kui-shell/core'
2222

2323
import Actions from './Actions'
2424
import onPaste from './OnPaste'
@@ -45,10 +45,9 @@ import { BlockViewTraits, BlockOperationTraits } from './'
4545

4646
import Tag from '../../../spi/Tag'
4747
import Icons from '../../../spi/Icons'
48-
import ExpandableSection from '../../../spi/ExpandableSection'
48+
import Accordion from '../../../spi/Accordion'
4949

5050
const SimpleEditor = React.lazy(() => import('../../../Content/Editor/SimpleEditor'))
51-
5251
const strings = i18n('plugin-client-common')
5352

5453
export interface InputOptions extends BlockOperationTraits {
@@ -237,6 +236,20 @@ export abstract class InputProvider<S extends State = State> extends React.PureC
237236
}
238237
}
239238

239+
/** render sourceRef content. Currently only use SimpleEditor. */
240+
protected sourceRefContent(content: string, contentType: string) {
241+
return (
242+
<SimpleEditor
243+
tabUUID={getPrimaryTabId(this.props.tab)}
244+
content={content.replace(/\n$/, '')} /* monaco's renderFinalNewline option doesn't seem to do what we need */
245+
contentType={contentType}
246+
className="kui--source-ref-editor kui--inverted-color-context"
247+
fontSize={12}
248+
simple
249+
/>
250+
)
251+
}
252+
240253
/** If contained in the model, present the sources associated with this Input operation */
241254
protected sourceRef() {
242255
const { model } = this.props
@@ -246,31 +259,12 @@ export abstract class InputProvider<S extends State = State> extends React.PureC
246259
return (
247260
<div className="repl-input-sourceref">
248261
<div className="repl-context"></div>
249-
<div className="flex-layout flex-fill">
250-
{sourceRef.templates.map((_, idx) => {
251-
const name = basename(_.filepath)
252-
return (
253-
<ExpandableSection
254-
key={idx}
255-
className={this.props.isWidthConstrained && 'flex-fill'}
256-
showMore={strings('Show X', name)}
257-
showLess={strings('Hide X', name)}
258-
onToggle={() => eventBus.emitTabLayoutChange(getPrimaryTabId(this.props.tab))}
259-
>
260-
<SimpleEditor
261-
tabUUID={getPrimaryTabId(this.props.tab)}
262-
content={
263-
_.data.replace(/\n$/, '') /* monaco's renderFinalNewline option doesn't seem to do what we need */
264-
}
265-
contentType={_.contentType}
266-
className="kui--source-ref-editor kui--inverted-color-context"
267-
fontSize={12}
268-
simple
269-
/>
270-
</ExpandableSection>
271-
)
272-
})}
273-
</div>
262+
<Accordion
263+
names={sourceRef.templates.map(_ => basename(_.filepath))}
264+
isWidthConstrained={this.props.isWidthConstrained}
265+
tab={this.props.tab}
266+
content={sourceRef.templates.map(_ => this.sourceRefContent(_.data, _.contentType))}
267+
/>
274268
</div>
275269
)
276270
}

‎plugins/plugin-client-common/src/components/spi/Accordion/impl/Carbon.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/*
2+
* Copyright 2020 IBM Corporation
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React from 'react'
18+
import { Accordion, AccordionItem } from 'carbon-components-react'
19+
20+
import { eventBus, getPrimaryTabId, i18n } from '@kui-shell/core'
21+
22+
import Props from '../model'
23+
24+
import '../../../../../web/scss/components/Accordion/Carbon.scss'
25+
26+
const strings = i18n('plugin-client-common')
27+
28+
interface State {
29+
expandedIdx: number
30+
}
31+
32+
export default class CarbonAccordion extends React.PureComponent<Props, State> {
33+
public constructor(props: Props) {
34+
super(props)
35+
36+
this.state = {
37+
expandedIdx: -1
38+
}
39+
}
40+
41+
public render() {
42+
return (
43+
<Accordion className={`kui--accordion ${this.props.isWidthConstrained ? 'flex-fill' : ''}`}>
44+
{this.props.names.map((name, idx) => (
45+
<AccordionItem
46+
className={'kui--accordion-item'}
47+
key={idx}
48+
title={this.state.expandedIdx !== idx ? strings('Show X', name) : strings('Hide X', name)}
49+
onClick={() => {
50+
this.setState(curState => ({ expandedIdx: curState.expandedIdx !== idx ? idx : -1 }))
51+
eventBus.emitTabLayoutChange(getPrimaryTabId(this.props.tab))
52+
}}
53+
>
54+
{this.props.content[idx]}
55+
</AccordionItem>
56+
))}
57+
</Accordion>
58+
)
59+
}
60+
}

‎plugins/plugin-client-common/src/components/spi/Accordion/impl/PatternFly.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
* Copyright 2020 IBM Corporation
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React from 'react'
18+
import { Accordion, AccordionItem, AccordionToggle, AccordionContent } from '@patternfly/react-core'
19+
20+
import { eventBus, getPrimaryTabId, i18n } from '@kui-shell/core'
21+
22+
import Props from '../model'
23+
24+
import '../../../../../web/scss/components/Accordion/PatternFly.scss'
25+
26+
const strings = i18n('plugin-client-common')
27+
28+
interface State {
29+
expandedIdx: number
30+
}
31+
32+
export default class PatternFlyAccordion extends React.PureComponent<Props, State> {
33+
public constructor(props: Props) {
34+
super(props)
35+
36+
this.state = {
37+
expandedIdx: -1
38+
}
39+
}
40+
41+
public render() {
42+
return (
43+
<Accordion
44+
asDefinitionList={false}
45+
className={`kui--accordion ${this.props.isWidthConstrained ? 'flex-fill' : ''}`}
46+
>
47+
{this.props.names.map((name, idx) => (
48+
<AccordionItem key={idx}>
49+
<AccordionToggle
50+
id={idx.toString()}
51+
onClick={() => {
52+
this.setState(curState => ({ expandedIdx: curState.expandedIdx !== idx ? idx : -1 }))
53+
eventBus.emitTabLayoutChange(getPrimaryTabId(this.props.tab))
54+
}}
55+
isExpanded={this.state.expandedIdx === idx}
56+
>
57+
{this.state.expandedIdx !== idx ? strings('Show X', name) : strings('Hide X', name)}
58+
</AccordionToggle>
59+
<AccordionContent isHidden={this.state.expandedIdx !== idx}>{this.props.content[idx]}</AccordionContent>
60+
</AccordionItem>
61+
))}
62+
</Accordion>
63+
)
64+
}
65+
}

‎plugins/plugin-client-common/src/components/spi/Accordion/index.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
* Copyright 2020 IBM Corporation
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React from 'react'
18+
19+
import Props from './model'
20+
import KuiContext from '../../Client/context'
21+
22+
const PatternFly4 = React.lazy(() => import('./impl/PatternFly'))
23+
const Carbon = React.lazy(() => import('./impl/Carbon'))
24+
25+
export default function Accordion(props: Props): React.ReactElement {
26+
return (
27+
<React.Suspense fallback={<div />}>
28+
<KuiContext.Consumer>
29+
{config => (config.components === 'patternfly' ? <PatternFly4 {...props} /> : <Carbon {...props} />)}
30+
</KuiContext.Consumer>
31+
</React.Suspense>
32+
)
33+
}

‎plugins/plugin-client-common/src/components/spi/Accordion/model.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/*
2+
* Copyright 2020 IBM Corporation
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { Tab } from '@kui-shell/core'
18+
19+
interface Props {
20+
className?: string
21+
names: string[]
22+
content: React.ReactNode[]
23+
isWidthConstrained?: boolean
24+
tab: Tab
25+
}
26+
27+
export default Props

‎plugins/plugin-client-common/web/scss/components/Accordion/Carbon.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/*
2+
* Copyright 2020 IBM Corporation
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
@import 'carbon-components/scss/components/accordion/_accordion.scss';
18+
@import 'carbon-components/scss/components/accordion/_keyframes.scss';
19+
20+
@import '_mixins';
21+
22+
@include Accordion {
23+
margin: 0.5rem 0 0;
24+
width: unset;
25+
}
26+
27+
@include AccordionToggle {
28+
font-size: 0.825rem;
29+
font-family: var(--font-sans-serif);
30+
}
31+
32+
@include AccordionToggleText {
33+
margin: 0 1rem;
34+
}

‎plugins/plugin-client-common/web/scss/components/Accordion/PatternFly.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*
2+
* Copyright 2020 IBM Corporation
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
@import '_mixins';
18+
19+
@include Accordion {
20+
margin: 0.5rem 0 0;
21+
}
22+
23+
@include AccordionToggle {
24+
font-size: 0.825rem;
25+
font-family: var(--font-sans-serif);
26+
&:focus {
27+
outline: none;
28+
}
29+
&:before {
30+
display: none;
31+
}
32+
}
33+
34+
@include AccordionToggleText {
35+
margin: 0 $accordion--spacing;
36+
max-width: unset;
37+
}
38+
39+
@include AccordionContentBody {
40+
&:before {
41+
display: none;
42+
}
43+
}

0 commit comments

Comments
 (0)