graphql-engine/console/console.code-workspace

{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "cSpell.words": ["clsx"],
    "tailwindCSS.experimental.classRegex": [
      "tw\\w+ ?= ?`([^`]*)`",
      "tw\\w+: ?`([^`]*)`"
    ]
  }
}
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](https://github.com/hasura/graphql-engine-mono/blob/5e88262628bf5827fe317cd68cda3732ebbcdb79/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-27 01:01:26 +03:00			`{`
			`"folders": [`
			`{`
			`"path": "."`
			`}`
			`],`
console: new drop down menu [GCU-49] PR-URL: https://github.com/hasura/graphql-engine-mono/pull/7269 Co-authored-by: Luca Restagno <59067245+lucarestagno@users.noreply.github.com> GitOrigin-RevId: e3625001b4196171d2f62920f56451a1984f9377 2022-12-21 16:10:41 +03:00			`"settings": {`
			`"cSpell.words": ["clsx"],`
			`"tailwindCSS.experimental.classRegex": [`
			"tw\\w+ ?= ?`([^`]*)`",
			"tw\\w+: ?`([^`]*)`"
			`]`
			`}`
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](https://github.com/hasura/graphql-engine-mono/blob/5e88262628bf5827fe317cd68cda3732ebbcdb79/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-27 01:01:26 +03:00			`}`