graphql-engine

mirror of https://github.com/hasura/graphql-engine.git synced 2024-12-15 09:22:43 +03:00

History

Matthew Goodwin b3b9ff269a console: GQL Customization while tracking a table ## Description 🔖 This adds the ability to "customize & track" using the [new tracking ui](https://github.com/hasura/graphql-engine-mono/pull/5391). A new button was added to implement this: <img width="870" alt="Screen Shot 2022-09-16 at 12 37 14 PM" src="https://user-images.githubusercontent.com/49927862/190701948-1ad86717-f6be-4f67-8e0c-17b618790795.png"> ## Solution and Design 🎨 This feature mostly makes use of components and hooks already created. I was able to refactor some code to reduce code duplication and type duplication. A few highlights on the refactor: - `useTrackTable`, `useUntrackTable` and `useTrackSelectedTables` were all refactored into a single hook: `useTrackTable`. This hook has one main function but returns 4 wrapper functions: `trackTable`, `untrackTable`, `trackTables`, and `untrackTables`. This should make maintaining easier in the future. - Synced up types between `MetadataTableConfig` and the customization form. Previously, the customization form had duplicated this same type, and there was some slight discrepancies between them. - Modified `TableTrackingCustomizationModal` `onSubmit` return with a 2nd argument that's in the exact shape of `MetadataTableConfig` for convenience. - Did some refactoring of the `DropDownMenu` component that should not interfere with anything. Exposed a few of the inner components for export and used these modular pieces in the current implementation. This ended up not being used in the feature, but left it in as it's a slight improvement. I also added a function called `delayAsyncAction` [here](`5e88262628/console/src/components/Common/utils/jsUtils.tsx (L416)`) to create an artificial delay for `async` functions. This allows us to create a more confident UX when requests happen near-instantly. Introducing a tiny delay of around 300ms with good UI feedback (i.e. loading spinner) shows the user something is happening. I wanted to document this as I'm not sure it's something other will agree on. If it's against our UX philosophy, I can remove it, but I found it nice. ## Review Setup 💻 1. Run the code locally and go to `http://localhost:3000/data/v2/manage?database=YOUR_DATABASE_NAME_HERE` 2. You should see the new button as shown above to `Customize & Track` 3. Try it out with various field custom roots 4. Also try tracking and untracking tables both from the individual rows as well as the checkboxes as this logic was also modified in the refactor. I am not totally sure how much I need to put here for testing, I may want some help here from the team. ## Review checklist. 📋 ### Functionality - [ ] Steps to verify console behaviour ### Tests Going to open another PR for adding testing to the relevant areas. Will update this PR with a link once that's been done. PR-URL: https://github.com/hasura/graphql-engine-mono/pull/5922 GitOrigin-RevId: e7c14be5b9bcc255a7b9ecfd43f1f84aa8aabba2	2022-09-26 22:02:40 +00:00
..
legacy-oss	console: GQL Customization while tracking a table	2022-09-26 22:02:40 +00:00
legacy-pro	platform(nx): initial oss migration	2022-08-18 19:37:56 +00:00

Matthew Goodwin b3b9ff269a console: GQL Customization while tracking a table

## Description 🔖

This adds the ability to "customize & track" using the [new tracking ui](https://github.com/hasura/graphql-engine-mono/pull/5391).

A new button was added to implement this:

<img width="870" alt="Screen Shot 2022-09-16 at 12 37 14 PM" src="https://user-images.githubusercontent.com/49927862/190701948-1ad86717-f6be-4f67-8e0c-17b618790795.png">

## Solution and Design 🎨

This feature mostly makes use of components and hooks already created.

I was able to refactor some code to reduce code duplication and type duplication.

A few highlights on the refactor:

- `useTrackTable`, `useUntrackTable` and `useTrackSelectedTables` were all refactored into a single hook: `useTrackTable`. This hook has one main function but returns 4 wrapper functions: `trackTable`, `untrackTable`, `trackTables`, and `untrackTables`. This should make maintaining easier in the future.
- Synced up types between `MetadataTableConfig` and the customization form. Previously, the customization form had duplicated this same type, and there was some slight discrepancies between them.
- Modified `TableTrackingCustomizationModal` `onSubmit` return with a 2nd argument that's in the exact shape of `MetadataTableConfig` for convenience.
- Did some refactoring of the `DropDownMenu` component that should not interfere with anything. Exposed a few of the inner components for export and used these modular pieces in the current implementation. This ended up not being used in the feature, but left it in as it's a slight improvement.

I also added a function called `delayAsyncAction` [here](5e88262628/console/src/components/Common/utils/jsUtils.tsx (L416)) to create an artificial delay for `async` functions. This allows us to create a more confident UX when requests happen near-instantly. Introducing a tiny delay of around 300ms with good UI feedback (i.e. loading spinner) shows the user something is happening. I wanted to document this as I'm not sure it's something other will agree on. If it's against our UX philosophy, I can remove it, but I found it nice.

## Review Setup 💻

1. Run the code locally and go to `http://localhost:3000/data/v2/manage?database=YOUR_DATABASE_NAME_HERE`
2. You should see the new button as shown above to `Customize & Track`
3. Try it out with various field custom roots
4. Also try tracking and untracking tables both from the individual rows as well as the checkboxes as this logic was also modified in the refactor.

 ** I am not totally sure how much I need to put here for testing, I may want some help here from the team. **

## Review checklist. 📋

### Functionality

- [ ] Steps to verify console behaviour

### Tests

Going to open another PR for adding testing to the relevant areas. Will update this PR with a link once that's been done.

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/5922
GitOrigin-RevId: e7c14be5b9bcc255a7b9ecfd43f1f84aa8aabba2

2022-09-26 22:02:40 +00:00

legacy-oss console: GQL Customization while tracking a table 2022-09-26 22:02:40 +00:00

legacy-pro platform(nx): initial oss migration 2022-08-18 19:37:56 +00:00