IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-23 09:26:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix e2e (#71594)

Browse Source
This commit is contained in:
Ludovic Viaud 2023-07-13 19:58:22 +02:00 committed by GitHub
parent e36a9a7b9d
commit 9b143a5043
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 105 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
e2e/panels-suite/panelEdit_transforms.spec.ts
View File

@ -10,10 +10,7 @@ e2e.scenario({
e2e.flows.openDashboard({ uid: '5SdHCadmz', queryParams: { editPanel: 3 } });
e2e.components.Tab.title('Transform').should('be.visible').click();
// Flacky tests. Error: cy.click() failed because this element is detached from the DOM.
// The element is visible and clickable manually.
// e2e.components.TransformTab.newTransform('Reduce').scrollIntoView().should('be.visible').click();
// e2e.components.Transforms.Reduce.calculationsLabel().should('be.visible');
e2e.components.TransformTab.newTransform('Reduce').scrollIntoView().should('be.visible').click();
e2e.components.Transforms.Reduce.calculationsLabel().should('be.visible');
},
});

205
public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
View File

@ -346,107 +346,6 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
);
}
const Picker = () => (
<>
{config.featureToggles.transformationsRedesign && (
<>
{!noTransforms && (
<Button
variant="secondary"
fill="text"
icon="angle-left"
onClick={() => {
this.setState({ showPicker: false });
}}
>
Go back to&nbsp;<i>Transformations in use</i>
</Button>
)}
<div className={styles.pickerInformationLine}>
<a href={getDocsLink(DocsId.Transformations)} className="external-link" target="_blank" rel="noreferrer">
<span className={styles.pickerInformationLineHighlight}>Transformations</span>{' '}
<Icon name="external-link-alt" />
</a>
&nbsp;allow you to manipulate your data before a visualization is applied.
</div>
</>
)}
<VerticalGroup>
{!config.featureToggles.transformationsRedesign && (
<Input
data-testid={selectors.components.Transforms.searchInput}
value={search ?? ''}
autoFocus={!noTransforms}
placeholder="Search for transformation"
onChange={this.onSearchChange}
onKeyDown={this.onSearchKeyDown}
suffix={suffix}
/>
)}
{!config.featureToggles.transformationsRedesign &&
xforms.map((t) => {
return (
<TransformationCard
key={t.name}
transform={t}
onClick={() => {
this.onTransformationAdd({ value: t.id });
}}
/>
);
})}
{config.featureToggles.transformationsRedesign && (
<div className={styles.searchWrapper}>
<Input
data-testid={selectors.components.Transforms.searchInput}
className={styles.searchInput}
value={search ?? ''}
autoFocus={!noTransforms}
placeholder="Search for transformation"
onChange={this.onSearchChange}
onKeyDown={this.onSearchKeyDown}
suffix={suffix}
/>
<div className={styles.showImages}>
<span className={styles.illustationSwitchLabel}>Show images</span>{' '}
<Switch
value={this.state.showIllustrations}
onChange={() => this.setState({ showIllustrations: !this.state.showIllustrations })}
/>
</div>
</div>
)}
{config.featureToggles.transformationsRedesign && (
<div className={styles.filterWrapper}>
{filterCategoriesLabels.map(([slug, label]) => {
return (
<FilterPill
key={slug}
onClick={() => this.setState({ selectedFilter: slug })}
label={label}
selected={this.state.selectedFilter === slug}
/>
);
})}
</div>
)}
{config.featureToggles.transformationsRedesign && (
<TransformationsGrid
showIllustrations={this.state.showIllustrations}
transformations={xforms}
onClick={(id) => {
this.onTransformationAdd({ value: id });
}}
/>
)}
</VerticalGroup>
</>
);
return (
<>
{noTransforms && (
@ -487,7 +386,109 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
</Container>
)}
{showPicker ? (
<Picker />
<>
{config.featureToggles.transformationsRedesign && (
<>
{!noTransforms && (
<Button
variant="secondary"
fill="text"
icon="angle-left"
onClick={() => {
this.setState({ showPicker: false });
}}
>
Go back to&nbsp;<i>Transformations in use</i>
</Button>
)}
<div className={styles.pickerInformationLine}>
<a
href={getDocsLink(DocsId.Transformations)}
className="external-link"
target="_blank"
rel="noreferrer"
>
<span className={styles.pickerInformationLineHighlight}>Transformations</span>{' '}
<Icon name="external-link-alt" />
</a>
&nbsp;allow you to manipulate your data before a visualization is applied.
</div>
</>
)}
<VerticalGroup>
{!config.featureToggles.transformationsRedesign && (
<Input
data-testid={selectors.components.Transforms.searchInput}
value={search ?? ''}
autoFocus={!noTransforms}
placeholder="Search for transformation"
onChange={this.onSearchChange}
onKeyDown={this.onSearchKeyDown}
suffix={suffix}
/>
)}
{!config.featureToggles.transformationsRedesign &&
xforms.map((t) => {
return (
<TransformationCard
key={t.name}
transform={t}
onClick={() => {
this.onTransformationAdd({ value: t.id });
}}
/>
);
})}
{config.featureToggles.transformationsRedesign && (
<div className={styles.searchWrapper}>
<Input
data-testid={selectors.components.Transforms.searchInput}
className={styles.searchInput}
value={search ?? ''}
autoFocus={!noTransforms}
placeholder="Search for transformation"
onChange={this.onSearchChange}
onKeyDown={this.onSearchKeyDown}
suffix={suffix}
/>
<div className={styles.showImages}>
<span className={styles.illustationSwitchLabel}>Show images</span>{' '}
<Switch
value={this.state.showIllustrations}
onChange={() => this.setState({ showIllustrations: !this.state.showIllustrations })}
/>
</div>
</div>
)}
{config.featureToggles.transformationsRedesign && (
<div className={styles.filterWrapper}>
{filterCategoriesLabels.map(([slug, label]) => {
return (
<FilterPill
key={slug}
onClick={() => this.setState({ selectedFilter: slug })}
label={label}
selected={this.state.selectedFilter === slug}
/>
);
})}
</div>
)}
{config.featureToggles.transformationsRedesign && (
<TransformationsGrid
showIllustrations={this.state.showIllustrations}
transformations={xforms}
onClick={(id) => {
this.onTransformationAdd({ value: id });
}}
/>
)}
</VerticalGroup>
</>
) : (
<Button
icon="plus"