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

Transformations: Force QueryOperationRow to expand on showHelp click (#73958)

Browse Source 
* baldm0mma/help_button/ force QueryOperationRow to expand on showHelp click

* baldm0mma/help_button/ remove comment

* baldm0mma/help_button/ add comment to onClose()

* baldm0mma/help_button/ remove useToggle for showing help

* baldm0mma/help_button/ remove comment

* baldm0mma/help_button/ update comment

* baldm0mma/help_button/ add full toggle control for parent of QueryOperationRow

* baldm0mma/help_button/ update inline comments

* baldm0mma/help_button/ update annos
This commit is contained in:
Jev Forsberg 2023-08-29 09:41:44 -06:00 committed by GitHub
parent 0ca5ecbe7f
commit 6f368d51fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { useCallback, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { Draggable } from 'react-beautiful-dnd';
import { useUpdateEffect } from 'react-use';
@ -52,6 +52,14 @@ export function QueryOperationRow({
setIsContentVisible(!isContentVisible);
}, [isContentVisible, setIsContentVisible]);
// Force QueryOperationRow expansion when `isOpen` prop updates in parent component.
// `undefined` can be deliberately passed value here, but we only want booleans to trigger the effect.
useEffect(() => {
if (typeof isOpen === 'boolean') {
setIsContentVisible(isOpen);
}
}, [isOpen]);
const reportDragMousePosition = useCallback((e: React.MouseEvent) => {
// When drag detected react-beautiful-dnd will preventDefault the event
// Ref: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-use-dom-events.md#a-mouse-drag-has-started-and-the-user-is-now-dragging

24
public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx
View File

@ -40,8 +40,8 @@ export const TransformationOperationRow = ({
onChange,
}: TransformationOperationRowProps) => {
const [showDeleteModal, setShowDeleteModal] = useToggle(false);
const [showDebug, toggleDebug] = useToggle(false);
const [showHelp, toggleHelp] = useToggle(false);
const [showDebug, toggleShowDebug] = useToggle(false);
const [showHelp, toggleShowHelp] = useToggle(false);
const disabled = !!configs[index].transformation.disabled;
const filter = configs[index].transformation.filter != null;
const showFilter = filter || data.length > 1;
@ -57,6 +57,16 @@ export const TransformationOperationRow = ({
[onChange, configs]
);
const toggleExpand = useCallback(() => {
if (showHelp) {
return true;
}
// We return `undefined` here since the QueryOperationRow component ignores an `undefined` value for the `isOpen` prop.
// If we returned `false` here, the row would be collapsed when the user toggles off `showHelp`, which is not what we want.
return undefined;
}, [showHelp]);
// Adds or removes the frame filter
const toggleFilter = useCallback(() => {
let current = { ...configs[index].transformation };
@ -98,8 +108,9 @@ export const TransformationOperationRow = ({
<QueryOperationToggleAction
title="Show transform help"
icon="info-circle"
onClick={instrumentToggleCallback(toggleHelp, 'help', showHelp)}
active={showHelp}
// `instrumentToggleCallback` expects a function that takes a MouseEvent, is unused in the state setter. Instead, we simply toggle the state.
onClick={instrumentToggleCallback((_e) => toggleShowHelp(!showHelp), 'help', showHelp)}
active={!!showHelp}
/>
{showFilter && (
<QueryOperationToggleAction
@ -113,7 +124,7 @@ export const TransformationOperationRow = ({
title="Debug"
disabled={!isOpen}
icon="bug"
onClick={instrumentToggleCallback(toggleDebug, 'debug', showDebug)}
onClick={instrumentToggleCallback(toggleShowDebug, 'debug', showDebug)}
active={showDebug}
/>
<QueryOperationToggleAction
@ -153,6 +164,9 @@ export const TransformationOperationRow = ({
draggable
actions={renderActions}
disabled={disabled}
isOpen={toggleExpand()}
// Assure that showHelp is untoggled when the row becomes collapsed.
onClose={() => toggleShowHelp(false)}
>
{showHelp && <OperationRowHelp markdown={prepMarkdown(uiConfig)} />}
{filter && (