chore: migrate QueryTable component from jsx to tsx #17944

MayUWish · 2022-01-06T06:39:05Z

SUMMARY

updated Query type at superset-frontend/src/SqlLab/types.ts/Query and extended it into QueryTable
updated defaultQueryLimit to be optional at ResultSetProps of superset-frontend/src/SqlLab/components/ResultSet/index.tsx
moved statusAttributes into useMemo hook so that it will not make the dependencies of useMemo Hook change on every render and statusAttributes is only used within useMomo hook
QueryTable is used in the following places

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

chore: fix misspelling of button

codecov · 2022-01-06T07:09:43Z

Codecov Report

Merging #17944 (881cd1c) into master (765c72a) will decrease coverage by 1.02%.
The diff coverage is 100.00%.

❗ Current head 881cd1c differs from pull request most recent head 7cc7c73. Consider uploading reports for the commit 7cc7c73 to get more accurate results

@@            Coverage Diff             @@
##           master   #17944      +/-   ##
==========================================
- Coverage   67.08%   66.05%   -1.03%     
==========================================
  Files        1611     1591      -20     
  Lines       64919    62416    -2503     
  Branches     6871     6288     -583     
==========================================
- Hits        43548    41227    -2321     
- Misses      19504    19567      +63     
+ Partials     1867     1622     -245

Flag	Coverage Δ
javascript	`50.86% <100.00%> (-2.93%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...rt-controls/src/operators/rollingWindowOperator.ts	`100.00% <ø> (ø)`
...ui-chart-controls/src/operators/utils/constants.ts	`100.00% <ø> (ø)`
...-chart-controls/src/sections/advancedAnalytics.tsx	`33.33% <ø> (ø)`
.../superset-ui-core/src/connection/SupersetClient.ts	`100.00% <ø> (ø)`
...superset-ui-core/src/query/types/PostProcessing.ts	`100.00% <ø> (ø)`
.../src/time-format/TimeFormatterRegistrySingleton.ts	`100.00% <ø> (ø)`
...ackages/superset-ui-core/src/utils/featureFlags.ts	`100.00% <ø> (ø)`
...s/legacy-plugin-chart-country-map/src/countries.ts	`100.00% <ø> (ø)`
...legacy-plugin-chart-partition/src/controlPanel.tsx	`25.00% <ø> (ø)`
...gins/legacy-plugin-chart-rose/src/controlPanel.tsx	`50.00% <ø> (ø)`
... and 651 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 765c72a...7cc7c73. Read the comment docs.

AAfghahi · 2022-01-06T15:41:37Z

superset-frontend/package.json

-    "plugins:create-patch-version": "npm run prune && ./scripts/lernaVersion.sh patch",
+    "plugins:create-conventional-version": "npm run prune && lerna version --conventional-commits --create-release github --yes",
+    "plugins:create-minor-version": "npm run prune && lerna version minor --yes",
+    "plugins:create-patch-version": "npm run prune && lerna version patch --yes",


did you mean to change this?

Maybe you need to rebase?

May I know how I can do the rebase? I noticed that package.json and package.lock.json of my files were changed(probably due to installation), thus I copied these 2 files from master branch of this repo and pasted on mine, then I did this pull request. I just compared with master branch one more time, it has line 54-56 in green. Shall I just replace line 54-56 in green with the original line 56 in red?

do you have a remote tracking apache?

if so you can go to your master branch, do a git pull apache master, then go back to this branch and do a git rebase and walk through it. It is a little confusing and can be scary so I am happy to walk you through it if you want.

Yes, plz. Can I have your help to walk me through it? Thank you

AAfghahi

Really impressive job! I left some comments, and there seems to be something happening with your package.json that is messing things up. I think a rebase would help, happy to walk you through that.

AAfghahi · 2022-01-06T15:48:35Z

superset-frontend/package.json

-    "plugins:create-patch-version": "npm run prune && ./scripts/lernaVersion.sh patch",
+    "plugins:create-conventional-version": "npm run prune && lerna version --conventional-commits --create-release github --yes",
+    "plugins:create-minor-version": "npm run prune && lerna version minor --yes",
+    "plugins:create-patch-version": "npm run prune && lerna version patch --yes",


Maybe you need to rebase?

AAfghahi · 2022-01-06T15:49:03Z

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

-  onDbClicked: () => {},
-};
+// query's type is original Query; Shallow-copy of query, q's type is QueryTableQuery. So that prop, sql passed to another component will remain string, the type of original Query
+interface QueryTableQueryTemp1 extends Omit<Query, 'sql'> {


ohh I didn't know that you could do Omit!

Thank you! Without Omit, I cannot 'override' it :))

I thought you could with extend, but I guess since it is an already existing field then that would be weird

AAfghahi · 2022-01-06T15:50:45Z

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

  );

-  const user = useSelector(({ sqlLab: { user } }) => user);
+  const user = useSelector((state: any) => state.sqlLab.user);


Can we get more specific than state: any?

Updated it on line 38, 39, 94

AAfghahi · 2022-01-06T15:51:10Z

superset-frontend/src/SqlLab/components/QueryTable/index.tsx


  const data = useMemo(() => {
-    const restoreSql = query => {
-      props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
+    const restoreSql = (query: Record<string, any>) => {


can you use the Query object that you imported here instead of Record<string, any>?

Updated on line 97

AAfghahi · 2022-01-06T15:51:20Z

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

+      actions?.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
+    };
+
+    const openQueryInNewTab = (query: Record<string, any>) => {


There are a couple of them, same thought all the way

Updated on line 101, 105, 109, 113. Thank you!

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

AAfghahi · 2022-01-06T15:53:38Z

superset/translations/messages.pot

@@ -13138,7 +13138,7 @@ msgid ""
 msgstr ""

 #: superset/templates/superset/fab_overrides/list_with_checkboxes.html:82
-msgid "Use the edit buttom to change this field"
+msgid "Use the edit button to change this field"


I think you can rebase and this should go away

May I know how I can do the rebase to fix it? I though the green one 'button' is correct?(misspelling typo changed by other contributor I guess? not sure) Thank you

…QueryTable

…t-frontend/src/SqlLab/components/ResultSet/index.tsx

… dependencies of useMemo Hook change on every render and statusAttributes is only used within useMomo hook

…state)

…ne 178

betodealmeida

Thanks for this PR!

I have a question about the custom interface, in general we really don't want to have mixed types and it's not clear why we would need it here.

betodealmeida · 2022-01-07T21:38:35Z

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

+interface QueryTableQueryTemp1 extends Omit<Query, 'sql'> {
+  sql: string | Record<string, any>;
+}
+
+interface QueryTableQueryTemp2 extends Omit<QueryTableQueryTemp1, 'progress'> {
+  progress: number | Record<string, any>;
+}


Suggested change

interface QueryTableQueryTemp1 extends Omit<Query, 'sql'> {

sql: string | Record<string, any>;

}

interface QueryTableQueryTemp2 extends Omit<QueryTableQueryTemp1, 'progress'> {

progress: number | Record<string, any>;

}

Thank you! combination of types are eliminated.

betodealmeida · 2022-01-07T21:39:16Z

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

+interface QueryTableQuery extends Omit<QueryTableQueryTemp2, 'state'> {
+  state: string | Record<string, any>;
+}


You can Omit several keys:

Suggested change

interface QueryTableQuery extends Omit<QueryTableQueryTemp2, 'state'> {

state: string | Record<string, any>;

}

interface QueryTableQuery extends Omit<Query, 'state' | 'sql' | 'progress'> {

state: string | Record<string, any>;

sql: string | Record<string, any>;

progress: number | Record<string, any>;

}

But in general it's not a good idea to have attributes with multiple types like this. We've had a lot of errors in the past caused by storing attributes with different types, and it leads to complicated logic that needs to check types (like you did below where you check if state is a string).

Why do you need to store these attributes as records?

Hi ~ Thank you for the suggestion about omitting several keys all together. And for the question about union types string | Record<string, any> (or number | Record<string, any>), they(state, sql, progress) were string/number from Query initially, but then at useMemo function, they were assigned to be an element/component ( such as q.state, q.progress, q.state). Do you have any suggestion in such cases? Thank you very much!

updated and combination of types are eliminated.

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

eschutho · 2022-01-08T00:49:17Z

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

  );

-  const user = useSelector(({ sqlLab: { user } }) => user);
+  const user = useSelector((state: RootState) => state.sqlLab.user);


can we instead use the generics for useSelector, which are the RootState useSelector<RootState, User>and then the type for the return value, in this case, user. Also for the RootState, do you mind create a type file for SqlLab like we have for dashboards? https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/types.ts#L96

Sure, I just updated the PR for other comments, which did not include update for this comment. I expect to spend more time working on this. (plus learning more about redux vs typescript) Thank you

The type for sqlLab redux is defined at 'superset-frontend/src/SqlLab/types.ts', please let me know if there is any adjustment is needed. Especially for databases and tables, there are very general types , object. If more details are needed, Please let me know where I can refer to for their types? Thank you very much.

That looks good. The databases and tables will be intentionally left vague because we do not know the structure of the user's data.
If you were to write this line with generics as const user = useSelector<RootState, User>(state) => state.sqlLab.user); does it work ok with the type you have there for RootState?

Replaced it with 'const user = useSelector<RootState, User>(state => state.sqlLab.user)' and 'import { UserWithPermissionsAndRoles as User } from 'src/types/bootstrapTypes';'

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

AAfghahi · 2022-01-21T14:59:23Z

/testenv up

github-actions · 2022-01-21T15:01:50Z

@AAfghahi Ephemeral environment spinning up at http://54.70.159.149:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

AAfghahi · 2022-01-21T18:01:34Z

@yousoph and @rosemarie-chiu Meitong added screenshots for qa testing

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

superset-frontend/src/SqlLab/components/ResultSet/index.tsx

lyndsiWilliams

Just a couple of very tiny nits, otherwise this looks great! Awesome work on this 😁

superset-frontend/src/SqlLab/types.ts

lyndsiWilliams · 2022-01-28T13:31:25Z

superset-frontend/src/SqlLab/types.ts

+  noDuplicate: boolean;
+};
+
+/** Root state of redux */


Same as above, I think the code explains well enough without needing a comment.

removed. Thank you

eschutho

This looks great. Thank you @MayUWish!

betodealmeida

Thank you!

github-actions · 2022-02-11T12:55:05Z

Ephemeral environment shutdown and build artifacts deleted.

woolnerd and others added 2 commits December 21, 2021 13:46

chore: fix misspelling of button

69fdea9

Merge pull request #1 from DavidWoolner/davidwoolner/misspelling-chore

3f1c182

chore: fix misspelling of button

pull-request-size bot added the size/L label Jan 6, 2022

pull from repo

0d0263a

MayUWish changed the title ~~Meitong qu/query table type script conversion~~ chore: migrate QueryTable component from jsx to tsx Jan 6, 2022

AAfghahi reviewed Jan 6, 2022

View reviewed changes

MayUWish added 8 commits January 7, 2022 12:37

Merge branch 'master' of https://github.com/apache/superset

404be9f

Merge branch 'master' of https://github.com/apache/superset

db2a16b

changed QuerySearch/index.jsx to index.tsx

060d00d

updated Query type at src/SqlLab/types.ts/Query and extended it into …

7e22aff

…QueryTable

updated defaultQueryLimit to be optional at ResultSetProps of superse…

13c5838

…t-frontend/src/SqlLab/components/ResultSet/index.tsx

moved statusAttributes into useMemo hook so that it will not make the…

6746b54

… dependencies of useMemo Hook change on every render and statusAttributes is only used within useMomo hook

reset package-lock.json and package.json at frontend

7ec7feb

Acquired redux rootestate type for SqlLab, to be used at useSelector(…

0c1a6e7

…state)

MayUWish force-pushed the MeitongQu/QueryTableTypeScriptConversion branch from 2468fa0 to 2a37fc4 Compare January 7, 2022 20:51

updated query to be Query type and added a comment for q.status on li…

9a2cef4

…ne 178

MayUWish force-pushed the MeitongQu/QueryTableTypeScriptConversion branch from 2a37fc4 to 9a2cef4 Compare January 7, 2022 20:54

betodealmeida requested changes Jan 7, 2022

View reviewed changes

eschutho reviewed Jan 8, 2022

View reviewed changes