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