Loki: Add functionality to revert to initial query in log context

[ivanahuckova]

What is this feature?

In this PR, we are introducing Revert to initial query button. The goal is to give users a quick way to reset query to initial query after they changed it.

Why do we need this feature?

This button is going to be crucial in preserve labels from previous context session functionality. - #68089

Which issue(s) does this PR fix?:

Part of #68089

revert_button.mov

Special notes for your reviewer:

• The button had to be removed from Collapse component because Collapse is button and there is css button in button conflict. Therefore I had to move it from Collapse.
• Currently, the button only appears when you change the query. I have also considered showing button all the time but there were couple of issues:
  • Tooltip doesn't show up if button is disabled. So you end up with disabled button and you don't understand its purpose. Also, this means that nowhere in grafana we use tooltip for disabled button (I don't think we have many disabled buttons in general) and therefore we would have to customize code and create new pattern.
  • for me it can seem confusing if you have there button if you've never changed the log context query and you don't see editor.
    So I decided to only show it when query is changed. We can re-evaluate this, if someone have strong feelings about it.

[github-actions]

Backend code coverage report for PR #68484
No changes

[github-actions]

Frontend code coverage report for PR #68484

Plugin	Main	PR	Difference
loki	84.67%	84.65%	-.02%

[matyax]

This is a very nice addition!

[matyax]

Looks good!

[svennergr]

I played around with it and I think I'd prefer to go with the disabled button way.

Basically you can use a Tooltip on disabled buttons if you implement the button like this:

      <Tooltip content="Revert to initial log context query.">
        <div className={styles.iconButton}>
          <Button
            icon="history-alt"
            variant="secondary"
            disabled={isInitialQuery}
            onClick={(e) => {
              e.stopPropagation();
              setContextFilters((contextFilters) => {
                return contextFilters.map((contextFilter) => {
                  return {
                    ...contextFilter,
                    // For revert to initial query we need to enable all labels and disable all parsed labels
                    enabled: !contextFilter.fromParser,
                  };
                });
              });
            }}
          />
        </div>
      </Tooltip>

Screen.Recording.2023-05-16.at.16.47.30.mov

Potentially we can also change the tooltip message to something else when the button is disabled. WDYT?

[ivanahuckova]

I played around with it and I think I'd prefer to go with the disabled button way.

Hahaha, I still prefer when button is not there cause it seems less confusing to me why it is disabled. And it appears only when you need it. But if both of you @niat22 and @svennergr think that disabled is better, then let's do it.

Fixed in:: https://github.com/grafana/grafana/pull/68484/files/50414156b6896ba392672a4c216f07c791dccfb9..b326e95a302debe470374be5b81cae1b182244ec

For disabled state, we should probably have different tooltip, so I will create a separate PR and ask docs team for help with this.

[svennergr]