IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Change VariableEditorList overflow styling & tidy markup (#94394)

Browse Source 
Chore: Channge VariableEditorList overflow styling & tidy markup
This commit is contained in:
kay delaney 2024-10-10 15:49:48 +01:00 committed by GitHub
parent 86fc8da703
commit 42eb033b03
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 51 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
public/app/features/dashboard-scene/settings/variables/VariableEditorList.tsx
View File

@ -1,5 +1,6 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd'; import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
import classNames from 'classnames';
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
@ -30,76 +31,66 @@ export function VariableEditorList({
onEdit, onEdit,
}: Props): ReactElement { }: Props): ReactElement {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const onDragEnd = (result: DropResult) => { const onDragEnd = (result: DropResult) => {
if (!result.destination || !result.source) { if (!result.destination || !result.source) {
return; return;
} }
reportInteraction('Variable drag and drop'); reportInteraction('Variable drag and drop');
onChangeOrder(result.source.index, result.destination.index); onChangeOrder(result.source.index, result.destination.index);
}; };
return ( return variables.length <= 0 ? (
<div> <EmptyVariablesList onAdd={onAdd} />
<div> ) : (
{variables.length === 0 && <EmptyVariablesList onAdd={onAdd} />} <Stack direction="column" gap={3}>
<table
{variables.length > 0 && ( className={classNames('filter-table', 'filter-table--hover', styles.tableContainer)}
<Stack direction="column" gap={3}> data-testid={selectors.pages.Dashboard.Settings.Variables.List.table}
<div className={styles.tableContainer}> role="grid"
<table >
className="filter-table filter-table--hover" <thead>
data-testid={selectors.pages.Dashboard.Settings.Variables.List.table} <tr>
role="grid" <th>Variable</th>
> <th>Definition</th>
<thead> <th colSpan={5} />
<tr> </tr>
<th>Variable</th> </thead>
<th>Definition</th> <DragDropContext onDragEnd={onDragEnd}>
<th colSpan={5} /> <Droppable droppableId="variables-list" direction="vertical">
</tr> {(provided) => (
</thead> <tbody ref={provided.innerRef} {...provided.droppableProps}>
<DragDropContext onDragEnd={onDragEnd}> {variables.map((variableScene, index) => {
<Droppable droppableId="variables-list" direction="vertical"> const variableState = variableScene.state;
{(provided) => ( return (
<tbody ref={provided.innerRef} {...provided.droppableProps}> <VariableEditorListRow
{variables.map((variableScene, index) => { index={index}
const variableState = variableScene.state; key={`${variableState.name}-${index}`}
return ( variable={variableScene}
<VariableEditorListRow onDelete={onDelete}
index={index} onDuplicate={onDuplicate}
key={`${variableState.name}-${index}`} onEdit={onEdit}
variable={variableScene} />
onDelete={onDelete} );
onDuplicate={onDuplicate} })}
onEdit={onEdit} {provided.placeholder}
/> </tbody>
); )}
})} </Droppable>
{provided.placeholder} </DragDropContext>
</tbody> </table>
)} <Stack>
</Droppable> <VariablesDependenciesButton variables={variables} />
</DragDropContext> <Button data-testid={selectors.pages.Dashboard.Settings.Variables.List.newButton} onClick={onAdd} icon="plus">
</table> New variable
</div> </Button>
<Stack> </Stack>
<VariablesDependenciesButton variables={variables} /> </Stack>
<Button
data-testid={selectors.pages.Dashboard.Settings.Variables.List.newButton}
onClick={onAdd}
icon="plus"
>
New variable
</Button>
</Stack>
</Stack>
)}
</div>
</div>
); );
} }
function EmptyVariablesList({ onAdd }: { onAdd: () => void }): ReactElement { function EmptyVariablesList({ onAdd }: { onAdd: () => void }) {
return ( return (
<Stack direction="column"> <Stack direction="column">
<EmptyState <EmptyState
@ -138,7 +129,6 @@ function EmptyVariablesList({ onAdd }: { onAdd: () => void }): ReactElement {
const getStyles = () => ({ const getStyles = () => ({
tableContainer: css({ tableContainer: css({
overflow: 'scroll', overflow: 'auto',
width: '100%',
}), }),
}); });