relation selector component (close #2296) #4089

beerose · 2020-03-11T18:56:01Z

Description

This PR adds a select component for columns with foreign key relation. For example, if we have table users with columns id and name, and table articles with columns id, author_id (referencing users.id), then when adding/editing foreign we can specify display_column:

Then in insert row and edit row view, we can choose a value from a dropdown where column specified as display column is used as a label. By default, only 20 rows are displayed in the dropdown. When typing data is filtered by the current input value.

We're not limited to using the dropdown and filtering the data by display column. Providing own value (in this case user.id) also works.

Affected components

Console

Design solution

Modify Table

Insert/edit item

When the user goes to insert/edit row, the user will now see a new dropdown called "Display Name" if the column is having a foreign
Whenever the user choose the display name, display name preference in every table is stored in the local storage as a single object.
based on the display name, when the user types the input column value, UI shows a helper dropdown through which the user can select the foreign row by display name (example: shows name instead of confusing with user id)

Limitations

Since I'm using ilike for filtering data, the user can only choose column of type text, varchar or citext for display column.

Affected console components

Migrated SearchableSelect.js to TypeScript. Extended custom filter to full-text filtering. Added two optional props:

onSearchValueChange

Migrated jsUtils.js to TypeScript.
Migrated v1QueryUtils.js to TypeScript.
Migrated TypedInput to TypeScript. Extended implementation. (Described above)
EditItem, InsertItem -- added handling selecting value from the dropdown.
Migrated Data/utils.js to TypeScript. Changed implementation a bit in two places (same issue): https://github.com/hasura/graphql-engine/pull/4089/files#diff-089d4fb070627c2802e8853d6bb14f30R190
It was done because we were taking advantage of JavaScript accepting the following code:

rcol = [foreignKeyConstraintOn.column]; // rcol = ["example"]
lcol = [column_mapping[rco]]; // column_mapping[["example"]] <- valid JS

I changed it because TypeScript doesn't accept it: link.

Ideas

Make common abstraction on insert row and edit row.

hasura-bot · 2020-03-11T19:08:40Z

Review app for commit 8371f43 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-8371f432

netlify · 2020-03-17T14:45:17Z

Deploy preview for hasura-docs ready!

Built with commit 66c8244

https://deploy-preview-4089--hasura-docs.netlify.app

hasura-bot · 2020-03-25T21:44:43Z

Review app for commit 88493f3 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-88493f30

hasura-bot · 2020-03-25T22:32:49Z

Review app for commit 01fec00 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-01fec003

hasura-bot · 2020-03-26T16:01:22Z

Review app for commit e224a48 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-e224a485

hasura-bot · 2020-03-26T19:27:58Z

Review app for commit ccf0657 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-ccf0657b

hasura-bot · 2020-03-26T20:39:30Z

Review app for commit 364a35c deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-364a35cf

hasura-bot · 2020-03-26T21:22:22Z

Review app for commit 404e67a deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-404e67a5

hasura-bot · 2020-03-30T22:22:30Z

Review app for commit bc1298b deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-bc1298b8

hasura-bot · 2020-03-31T16:58:00Z

Review app for commit ef36206 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-ef362067

hasura-bot · 2020-03-31T17:32:08Z

Review app for commit f46ef08 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-f46ef080

hasura-bot · 2020-05-11T10:19:55Z

Review app for commit eb0720b deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-eb0720b4

hasura-bot · 2020-06-04T19:43:42Z

Review app for commit ff45f55 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-ff45f552

beerose · 2020-06-12T09:46:35Z

console/src/components/Services/Data/DataActions.js

@@ -196,6 +238,127 @@ const initQueries = {
  },
 };

+const loadConsoleOpts = () => {


Get rid of this

beerose · 2020-06-12T09:46:57Z

console/src/components/Services/Data/DataActions.js

+  };
+};
+
+const getForeignKeyOptions = () => {


Get rid of this — move to LS

console/src/components/Services/Data/DataActions.js

beerose · 2020-06-12T09:57:12Z

console/src/components/Services/Data/DataActions.js

+ *
+ * @param {DisplayConfig} displayConfig
+ */
+const setConsoleFKOptions = displayConfig => (dispatch, getState) => {


Get rid of in favor of LS

hasura-bot · 2020-06-25T06:19:52Z

Review app for commit 5deaded deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-5deadede

hasura-bot · 2020-06-25T09:41:22Z

Review app for commit ab8fbab deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-ab8fbabf

hasura-bot · 2020-06-25T10:06:08Z

Review app for commit f1b64df deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-f1b64df9

hasura-bot · 2020-06-25T10:45:00Z

Review app for commit 00a72d2 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-00a72d2d

hasura-bot · 2020-06-25T11:53:23Z

Review app for commit 9c54750 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-9c547502

hasura-bot · 2020-06-25T12:31:21Z

Review app for commit 7961226 deployed to Heroku: https://hge-ci-pull-4089.herokuapp.com
Docker image for server: hasura/graphql-engine:pull4089-79612265

beerose · 2020-07-13T08:30:32Z

@soorajshankar could you fix the conflicts?

soorajshankar · 2020-09-18T08:55:42Z

/heroku deploy

beerose added the c/console Related to console label Mar 11, 2020

beerose marked this pull request as ready for review March 31, 2020 17:37

beerose requested a review from a team as a code owner March 31, 2020 17:37

beerose assigned wawhal and rikinsk and unassigned wawhal Apr 2, 2020

rikinsk assigned beerose and unassigned rikinsk May 20, 2020

beerose assigned soorajshankar and unassigned beerose Jun 11, 2020

beerose marked this pull request as draft June 11, 2020 15:58

beerose commented Jun 12, 2020

View reviewed changes

console/src/components/Services/Data/DataActions.js Show resolved Hide resolved

beerose commented Jun 12, 2020

View reviewed changes

soorajshankar force-pushed the feat/fk-select branch from a7a8d31 to e9e7698 Compare June 16, 2020 16:00

soorajshankar added the s/do-not-merge Do not merge this pull request to master label Jun 16, 2020

soorajshankar removed the s/do-not-merge Do not merge this pull request to master label Jun 25, 2020

soorajshankar requested a review from rikinsk June 25, 2020 09:46

soorajshankar assigned beerose Jun 25, 2020

soorajshankar force-pushed the feat/fk-select branch from 9c54750 to 7961226 Compare June 25, 2020 12:09

beerose assigned rikinsk and unassigned beerose Jul 13, 2020

rikinsk removed their assignment Aug 24, 2020

soorajshankar force-pushed the feat/fk-select branch from 99af5e2 to 7961226 Compare September 7, 2020 10:21

soorajshankar marked this pull request as draft September 14, 2020 17:12

soorajshankar force-pushed the feat/fk-select branch from 66c8244 to e017643 Compare September 14, 2020 17:29

git config

fea6776

soorajshankar force-pushed the feat/fk-select branch from e017643 to fea6776 Compare September 14, 2020 17:30

soorajshankar added 3 commits September 14, 2020 23:07

format

be54236

ts fixed

c78d1b1

formatting

4aebfd4

soorajshankar marked this pull request as ready for review September 18, 2020 05:13

soorajshankar and others added 2 commits September 18, 2020 10:45

Merge branch 'master' into feat/fk-select

0c04758

specific versioning

06611d6

beerose assigned beerose and unassigned soorajshankar Nov 18, 2020

beerose closed this Jul 23, 2021

beerose deleted the feat/fk-select branch July 23, 2021 12:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

relation selector component (close #2296) #4089

relation selector component (close #2296) #4089

beerose commented Mar 11, 2020 •

edited by soorajshankar

Loading

hasura-bot commented Mar 11, 2020

netlify bot commented Mar 17, 2020 •

edited

Loading

hasura-bot commented Mar 25, 2020

hasura-bot commented Mar 25, 2020

hasura-bot commented Mar 26, 2020

hasura-bot commented Mar 26, 2020

hasura-bot commented Mar 26, 2020

hasura-bot commented Mar 26, 2020

hasura-bot commented Mar 30, 2020

hasura-bot commented Mar 31, 2020

hasura-bot commented Mar 31, 2020

hasura-bot commented May 11, 2020

hasura-bot commented Jun 4, 2020

beerose Jun 12, 2020

beerose Jun 12, 2020

beerose Jun 12, 2020

hasura-bot commented Jun 25, 2020

hasura-bot commented Jun 25, 2020

hasura-bot commented Jun 25, 2020

hasura-bot commented Jun 25, 2020

hasura-bot commented Jun 25, 2020

hasura-bot commented Jun 25, 2020

beerose commented Jul 13, 2020

soorajshankar commented Sep 18, 2020

relation selector component (close #2296) #4089

relation selector component (close #2296) #4089

Conversation

beerose commented Mar 11, 2020 • edited by soorajshankar Loading

Description

Affected components

Design solution

Modify Table

Limitations

Affected console components

Ideas

hasura-bot commented Mar 11, 2020

netlify bot commented Mar 17, 2020 • edited Loading

hasura-bot commented Mar 25, 2020

hasura-bot commented Mar 25, 2020

hasura-bot commented Mar 26, 2020

hasura-bot commented Mar 26, 2020

hasura-bot commented Mar 26, 2020

hasura-bot commented Mar 26, 2020

hasura-bot commented Mar 30, 2020

hasura-bot commented Mar 31, 2020

hasura-bot commented Mar 31, 2020

hasura-bot commented May 11, 2020

hasura-bot commented Jun 4, 2020

beerose Jun 12, 2020

Choose a reason for hiding this comment

beerose Jun 12, 2020

Choose a reason for hiding this comment

beerose Jun 12, 2020

Choose a reason for hiding this comment

hasura-bot commented Jun 25, 2020

hasura-bot commented Jun 25, 2020

hasura-bot commented Jun 25, 2020

hasura-bot commented Jun 25, 2020

hasura-bot commented Jun 25, 2020

hasura-bot commented Jun 25, 2020

beerose commented Jul 13, 2020

soorajshankar commented Sep 18, 2020

beerose commented Mar 11, 2020 •

edited by soorajshankar

Loading

netlify bot commented Mar 17, 2020 •

edited

Loading