graphql-engine/dc-agents/reference
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
..
src console: GQL Customization while tracking a table 2022-09-26 22:02:40 +00:00
.gitignore Replace Haskell DC Reference Agent with TypeScript DC Reference Agent in HSpec tests 2022-06-23 08:09:46 +00:00
.nvmrc Move Typescript types for Data Connector agent into their own package 2022-09-05 06:09:23 +00:00
Dockerfile Replace Haskell DC Reference Agent with TypeScript DC Reference Agent in HSpec tests 2022-06-23 08:09:46 +00:00
package-lock.json Raw Query Support for Data Connectors - GDW-394 2022-09-22 21:09:06 +00:00
package.json Raw Query Support for Data Connectors - GDW-394 2022-09-22 21:09:06 +00:00
README.md server: Support the namespacing of table names in Data Connectors 2022-08-04 08:35:52 +00:00
tsconfig.json Replace Haskell DC Reference Agent with TypeScript DC Reference Agent in HSpec tests 2022-06-23 08:09:46 +00:00

Data Connector Agent Reference Implementation

This directory contains a barebones implementation of the Data Connector agent specification which fetches its data from static JSON files. It can be used as a reference implementation for testing, and as a reference for developers working on backend services.

Requirements

  • NodeJS 16

Build & Run

> npm install
> npm start

Docker Build & Run

> docker build . -t dc-reference-agent:latest
> docker run -it --rm -p 8100:8100 dc-reference-agent:latest

Dataset

The dataset exposed by the reference agent is sourced from https://github.com/lerocha/chinook-database/

More specifically, the ChinookData.xml.gz file is a GZipped version of https://raw.githubusercontent.com/lerocha/chinook-database/ce27c48d9f375f81b7b68bacdfddf3c4458acc49/ChinookDatabase/DataSources/_Xml/ChinookData.xml

The schema-tables.json is manually derived from the schema of the data as can be seen from the CREATE TABLE etc DML statements in the various per-database-vendor SQL scripts that can be found in /ChinookDatabase/DataSources in that repo.

Configuration

The reference agent supports some configuration properties that can be set via the value property of configuration on a source in Hasura metadata. The configuration is passed to the agent on each request via the X-Hasura-DataConnector-Config header.

The configuration that the reference agent can take supports two properties:

  • tables: This is a list of table names that should be exposed by the agent. If omitted all Chinook dataset tables are exposed. If specified, it filters all available table names by the specified list.
  • schema: If specified, this places all the tables within a schema of the specified name. For example, if schema is set to my_schema, all table names will be namespaced under my_schema, for example ["my_schema","Album"]. If not specified, then tables are not namespaced, for example ["Album"].

Here's an example configuration that only exposes the Artist and Album tables, and namespaces them under my_schema:

{
  "tables": ["Artist", "Album"],
  "schema": "my_schema"
}

Here's an example configuration that exposes all tables, un-namespaced:

{}