mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Fix e2e (#71594)
This commit is contained in:
@@ -10,10 +10,7 @@ e2e.scenario({
|
|||||||
e2e.flows.openDashboard({ uid: '5SdHCadmz', queryParams: { editPanel: 3 } });
|
e2e.flows.openDashboard({ uid: '5SdHCadmz', queryParams: { editPanel: 3 } });
|
||||||
|
|
||||||
e2e.components.Tab.title('Transform').should('be.visible').click();
|
e2e.components.Tab.title('Transform').should('be.visible').click();
|
||||||
|
e2e.components.TransformTab.newTransform('Reduce').scrollIntoView().should('be.visible').click();
|
||||||
// Flacky tests. Error: cy.click() failed because this element is detached from the DOM.
|
e2e.components.Transforms.Reduce.calculationsLabel().should('be.visible');
|
||||||
// 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');
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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 <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>
|
|
||||||
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
{noTransforms && (
|
{noTransforms && (
|
||||||
@@ -487,7 +386,109 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
|
|||||||
</Container>
|
</Container>
|
||||||
)}
|
)}
|
||||||
{showPicker ? (
|
{showPicker ? (
|
||||||
<Picker />
|
<>
|
||||||
|
{config.featureToggles.transformationsRedesign && (
|
||||||
|
<>
|
||||||
|
{!noTransforms && (
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
fill="text"
|
||||||
|
icon="angle-left"
|
||||||
|
onClick={() => {
|
||||||
|
this.setState({ showPicker: false });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Go back to <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>
|
||||||
|
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
|
<Button
|
||||||
icon="plus"
|
icon="plus"
|
||||||
|
|||||||
Reference in New Issue
Block a user