Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OperationEditor: Fix rendering of operation editor items #112

Merged
merged 3 commits into from
Jan 31, 2024

Conversation

ivanahuckova
Copy link
Member

@ivanahuckova ivanahuckova commented Jan 30, 2024

I have introduced an issue when I was refactoring OperationEditor (at that time in grafana/grafana , but because I wasn't passing props correctly to component, it was doing a lot of mounting - unmounting grafana/grafana@7be8301. I will have to do this fix also in grafana/grafana

This PR takes previously called StyledOperationHeader and moves it to separate file and makes it a proper component that doesn't cause -remounting of each operation editor.

Fixed:

fixed.mov

Broken:

broken.mov

How to test:

  • If you can use yarn link and test this locally, do that.
  • For me it works only by:
      1. renaming package in package.json to custom
    • in grafana/grafana package.json add "custom": "file: ../grafana-experimental"
    • import OperationList in Loki from custom
    • check the recording and do that/other interactions

@ivanahuckova ivanahuckova requested review from matyax, svennergr and gtk-grafana and removed request for svennergr January 30, 2024 14:35
@ivanahuckova ivanahuckova self-assigned this Jan 30, 2024
@ivanahuckova ivanahuckova added the bug Something isn't working label Jan 30, 2024
Comment on lines +35 to +52
const onParamValueChanged = (paramIdx: number, value: QueryBuilderOperationParamValue) => {
const update: QueryBuilderOperation = { ...operation, params: [...operation.params] };
update.params[paramIdx] = value;
callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);
};

const onAddRestParam = () => {
const update: QueryBuilderOperation = { ...operation, params: [...operation.params, ''] };
callParamChangedThenOnChange(definition, update, index, operation.params.length, onChange);
};

const onRemoveRestParam = (paramIdx: number) => {
const update: QueryBuilderOperation = {
...operation,
params: [...operation.params.slice(0, paramIdx), ...operation.params.slice(paramIdx + 1)],
};
callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would conside useCallback these, now that we're at it, as it doesn't need to change the children on every render.

Comment on lines +55 to +61
let restParam: React.ReactNode | undefined;
if (definition.params.length > 0) {
const lastParamDef = definition.params[definition.params.length - 1];
if (lastParamDef.restParam) {
restParam = renderAddRestParamButton(lastParamDef, onAddRestParam, index, operation.params.length, styles);
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And useMemo this.

Copy link
Contributor

@matyax matyax left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@ivanahuckova ivanahuckova merged commit 37001c0 into main Jan 31, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants