Enable WithEvent to send an event to the AWS EventBridge

[kishaningithub]

Addresses https://github.com/grafana/redshift-datasource/discussions/131

[andresmgot]

Thanks for the PR @kishaningithub!

It should be possible to opt-out of this feature though. I think this setting is suitable to be included in the data source configuration page.

For doing so, it's necessary to:

• Add it to the Settings structure: https://github.com/grafana/redshift-datasource/blob/main/pkg/redshift/models/settings.go#L34 (and access it with c.settings.WithEvent where you are using it now).
• In the frontend:
  • Add it to the data source options: https://github.com/grafana/redshift-datasource/blob/main/src/types.ts#L49
  • Add it to the config page: https://github.com/grafana/redshift-datasource/blob/main/src/ConfigEditor/ConfigEditor.tsx#L211. Something like:

import { InlineField, Switch } from '@grafana/ui';

...

      <InlineField label="Send events to Amazon EventBridge" labelWidth={28}>
        <Switch
          value={props.options.jsonData.withEvent}
          onChange={(e) =>
            props.onOptionsChange({
              ...props.options,
              jsonData: {
                ...props.options.jsonData,
                withEvent: e.currentTarget.checked,
              },
            })
          }
        />
      </InlineField>

[kishaningithub]

@andresmgot Have addressed your feedback. Thanks for the detailed feedback though :-)

[andresmgot]

Great work here @kishaningithub! Only a couple more of minor comments to go.

[andresmgot]

If you add style={{ alignItems: 'center' }} the switch will be vertically aligned

[kishaningithub]

What is the easiest a way to view how the UI will look like in local machine? I tried yarn dev and yarn watch but they seem to be focussed on unit tests

[andresmgot]

I use yarn watch, that shouldn't run the tests. With more details, what I run in development is:

• make run in the main grafana/grafana repository
• yarn start in grafana/grafana
• grafana/grafana/data/plugins/redshift-datasource is a symbolic link pointing to my Redshift dist folder (grafana/redshift-datasource/dist)
• yarn watch in grafana/redshift-datasource

[kishaningithub]

@andresmgot What do you think of adding the above steps to CONTRIBUTING.md? Would be useful for people who are new to grafana plugin development like me :-)

[andresmgot]

that's a good point. Let me check if that's already written somewhere and if not I will add it there

[andresmgot]

can you add a simple test for this? If you go to ConfigEditor.test.tsx you can take inspiration from the test should allow user to enter a database. You will need to add a data-testid to this Switch to test it.

[kishaningithub]

@andresmgot I have added test for this, If you see the test currently fails because the onChange is not getting triggered. I am unable to find a reason for this. Need your help in getting this test case passing. Thanks in advance! :-)

[andresmgot]

I think it's because how Switch is internally implemented, if you do fireEvent.click(withEventField); rather than fireEvent.change(withEventField, { target: { checked: true } }); it should work.

[andresmgot]

Thanks for the changes!

[andresmgot]

I think it's because how Switch is internally implemented, if you do fireEvent.click(withEventField); rather than fireEvent.change(withEventField, { target: { checked: true } }); it should work.

[kishaningithub]

@andresmgot Have addressed your review comments.. Thanks for the detailed reviews :-)

[andresmgot]

Great! Thanks for the changes.