search

grafana / opensearch-datasource

Apache License 2.0
27 stars 21 forks source link

Chore: update dependencies #476

Closed kevinwcyu closed 4 weeks ago

kevinwcyu commented 1 month ago

What this PR does / why we need it: Updating dependencies

Which issue(s) this PR fixes:

Fixes https://github.com/grafana/oss-plugin-partnerships/issues/922 Fixes https://github.com/grafana/oss-plugin-partnerships/issues/923

Special notes for your reviewer:

I've organized the changes into different commits to make it easier to review:

@reduxjs/toolkit updates After updating @reduxjs/toolkit there were a lot of type errors with the actions/reducers. Before the update, we manually defined the action types and action creators. Something about the manually created action types was clashing with the updated types so I ended up removing the manually defined action types and action creators and used the createAction help from @reduxjs/toolkit which is a helper for creating an action creator that can also be used in place of the action type. This allowed me to delete the manually created action types and action creators.

Here's an example of the changes to the changeBucketAggregationType action to make it a bit more concrete

Previously

/* src/components/QueryEditor/BucketAggregationsEditor/state/types.ts */
// action creator is manually created and we need to specify the payload it returns and make sure to set the type to `CHANGE_BUCKET_AGG_TYPE`
export const changeBucketAggregationType = (
  id: BucketAggregation['id'],
  newType: BucketAggregation['type']
): BucketAggregationAction => ({
  type: CHANGE_BUCKET_AGG_TYPE,
  payload: {
    id,
    newType,
  },
});

/* src/components/QueryEditor/BucketAggregationsEditor/state/types.ts */
// action type `ChangeBucketAggregationTypeAction` defined
export interface ChangeBucketAggregationTypeAction extends Action<typeof CHANGE_BUCKET_AGG_TYPE> {
  payload: {
    id: BucketAggregation['id'];
    newType: BucketAggregation['type'];
  };
}

// union type for all bucket aggregation action types
export type BucketAggregationAction<T extends BucketAggregation = BucketAggregation> =
  | AddBucketAggregationAction
  | RemoveBucketAggregationAction
  | ChangeBucketAggregationTypeAction // `ChangeBucketAggregationTypeAction` needs to be included here
  | ChangeBucketAggregationFieldAction
  | ChangeBucketAggregationSettingAction<T>;

/* src/components/QueryEditor/BucketAggregationsEditor/state/reducer.ts */
// reducer creator needs to include the `BucketAggregationAction` union type in its function signature
  (
    state: OpenSearchQuery['bucketAggs'],
    action: BucketAggregationAction | ChangeMetricTypeAction | InitAction
  ): OpenSearchQuery['bucketAggs'] => {
// the reducer needs to check the `action.type` that the action creator includes in its payload to make sure it matches `CHANGE_BUCKET_AGG_TYPE` that is set in the action creator
switch (action.type) {
  // ... other code excluded
  case CHANGE_BUCKET_AGG_TYPE:

After updates

/* src/components/QueryEditor/BucketAggregationsEditor/state/actions.ts */
// `createAction just needs `CHANGE_BUCKET_AGG_TYPE` to identify the action and we just pass the type for the expected payload
export const changeBucketAggregationType = createAction<{
  id: BucketAggregation['id'];
  newType: BucketAggregation['type'];
}>(CHANGE_BUCKET_AGG_TYPE);

/* src/components/QueryEditor/BucketAggregationsEditor/state/reducer.ts */
// the reducer creator can just use the `Action` type from `@reduxjs/toolkit` in its function signature instead of us needing to create a separate union type of all the bucket aggregation action types
// the reducer can just import the action creator we created above and use the `match` function to check if the action is the type we expect. This acts as a type predicate so we also get properly typed payloads in the reducer.
if (changeBucketAggregationType.match(action)) {

This is the bulk of the changes to the actions/reducers. The logic in the reducers is the exact same as before.

The only other thing to note about the action creators is that they now take a single argument for its payload. E.g.

Previously

export const changeBucketAggregationType = (
  id: BucketAggregation['id'],
  newType: BucketAggregation['type']
): BucketAggregationAction => ({
  type: CHANGE_BUCKET_AGG_TYPE,
  payload: {
    id,
    newType,
  },
});

// example usage

changeBucketAggregationType('newId', 'newType'); // <- multiple arguments

After updates

export const changeBucketAggregationType = createAction<{
  id: BucketAggregation['id'];
  newType: BucketAggregation['type'];
}>(CHANGE_BUCKET_AGG_TYPE);

// example usage
changeBucketAggregationType( { id: 'newId', newType: 'some-other-type' }) // <- pass arguments as an object