refactor: sqleditorleftbar to typescript #17926

JosueLugaro · 2022-01-04T22:46:09Z

SUMMARY

Converted the SqlEditorLeftBar component to TypeScript, also want to make note that I removed dbId from being passed into TableSelector.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Should still function as it did before.

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

AAfghahi · 2022-01-11T15:15:09Z

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

+  id: number;
+};
+
+interface propTypes {


we should change this name to be more specific to the component that we are using. Maybe SqlEditorLeftBarProps, which is a mouthful, but I think more specific than what we have currently.

Thank you for the feed back, I changed the interface to SqlEditorLeftBarProps.

AAfghahi · 2022-01-11T15:15:42Z

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

+
+interface propTypes {
+  queryEditor: QueryEditor;
+  height: number;


both height and tables have a default value, which make me think that they are optional.

Made both of these properties optional👍.

…r different types, still a rough version of final product

…ponent functions

…ement

AAfghahi · 2022-01-27T20:39:11Z

/testenv up

github-actions · 2022-01-27T20:40:54Z

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

hughhhh · 2022-01-27T20:47:45Z

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

    }
  }
 `;

 export default function SqlEditorLeftBar({
  actions,
  database,
-  height,
+  height = 500,


nit: put height as the last param

Made height the last param👍

codecov · 2022-01-27T20:48:35Z

Codecov Report

Merging #17926 (cc9fada) into master (568b8e1) will increase coverage by 0.00%.
The diff coverage is 53.84%.

@@           Coverage Diff           @@
##           master   #17926   +/-   ##
=======================================
  Coverage   66.05%   66.05%           
=======================================
  Files        1591     1591           
  Lines       62418    62411    -7     
  Branches     6286     6289    +3     
=======================================
- Hits        41228    41225    -3     
+ Misses      19568    19564    -4     
  Partials     1622     1622

Flag	Coverage Δ
javascript	`50.86% <53.84%> (+<0.01%)`	⬆️

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

Impacted Files	Coverage Δ
...ntend/src/SqlLab/components/TableElement/index.tsx	`72.30% <ø> (ø)`
...d/src/SqlLab/components/SqlEditorLeftBar/index.tsx	`57.14% <53.84%> (ø)`

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 568b8e1...cc9fada. Read the comment docs.

AAfghahi · 2022-01-27T20:50:42Z

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

-  height: 500,
-  offline: false,
-  tables: [],
+type dbType = {


is there a reason that this is a type over an interface?

AAfghahi · 2022-01-27T20:52:00Z

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

    &: hover {
-      color: ${({ theme }) => theme.colors.primary.dark2} !important;
+      color: ${theme.colors.primary.dark2} !important;
    }
  }
 `;

 export default function SqlEditorLeftBar({


shouldn't offline be in here with a default variable?

Offline was removed in my functional conversion PR because the value was never read or used anywhere in the component.

AAfghahi · 2022-01-27T20:52:23Z

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

+  tables?: ExtendedTable[];
+  actions: actionsTypes & TableElementProps['actions'];
+  database: DatabaseObject;
+  offline: boolean;


since this has a default value, should it be required?

AAfghahi · 2022-01-27T20:53:42Z

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

-  const onDbChange = db => {
+  tables = [],
+}: SqlEditorLeftBarProps) {
+  const onDbChange = (db: dbType) => {


is there a reason we are putting in an entire DB in here if we just use the id? WOuld it be better if we passed in just the db.id and then you don't need the DbType type?

Good catch, will fix that asap.

…torLeftBarProps interface

lyndsiWilliams

Just one question, otherwise it looks great! 😁

lyndsiWilliams · 2022-01-27T23:31:16Z

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

-  offline: PropTypes.bool,
-};
+interface ExtendedTable extends Table {
+  expanded: any;


Is this able to be described by a type? I remember seeing this with you the other day but don't remember exactly what it was, I think this might have been a string or a boolean?

I'll have to look at a previous commit to see what it was previously. Once I do I'll change it to that type.

Changed the expanded type from any to boolean, which is what it was originally.👍

AAfghahi · 2022-01-28T01:26:26Z

@yousoph and @rosemarie-chiu could you test this?

AAfghahi · 2022-01-28T01:26:37Z

/testenv up

github-actions · 2022-01-28T01:30:52Z

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

github-actions · 2022-01-28T20:07:53Z

Ephemeral environment shutdown and build artifacts deleted.

* Creating draft PR to address bug * Still working on solving re rendering bug * Cleaning up in preparation for push * Starting conversion to TypeScript * Working on conversion * Continued working on typescript conversion, referenced other files for different types, still a rough version of final product * Added type assertion to actions in props, and added types to some component functions * Progress on typescript conversion * Fixed typing issue on collapseStyles * Fixed styling on div, child of StyledScrollbarContainer * Attempting to address issues with the actions passed into the TableElement * Resolved typescript warning on actions of the TableElement component * Made changes suggested by Arash * Tested the component without dbId, cleaned up lingering comments * Made more changes suggested by Arash, removed offline from the SqlEditorLeftBarProps interface * Made change suggested by Hugh * Changed the expanded type from any to boolean

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

JosueLugaro changed the title ~~Josue/sqleditorleftbar to typescript~~ refactor: sqleditorleftbar to typescript Jan 4, 2022

eschutho added the Superset-Community-Partners Preset community partner program participants label Jan 5, 2022

JosueLugaro force-pushed the josue/sqleditorleftbar-to-typescript branch from 3e070b1 to 94cc6aa Compare January 5, 2022 23:38

AAfghahi reviewed Jan 11, 2022

View reviewed changes

lyndsiWilliams mentioned this pull request Jan 27, 2022

[TRACKER] Migrate JavaScript files to TypeScript #10004

Closed

JosueLugaro added 12 commits January 27, 2022 12:51

Creating draft PR to address bug

88ccf68

Still working on solving re rendering bug

00c919d

Cleaning up in preparation for push

7fa4b7b

Starting conversion to TypeScript

d67c1ae

Working on conversion

efbb029

Continued working on typescript conversion, referenced other files fo…

7905ab3

…r different types, still a rough version of final product

Added type assertion to actions in props, and added types to some com…

7042b79

…ponent functions

Progress on typescript conversion

1f1b40f

Fixed typing issue on collapseStyles

d998f20

Fixed styling on div, child of StyledScrollbarContainer

ced28ef

Attempting to address issues with the actions passed into the TableEl…

38b91c8

…ement

Resolved typescript warning on actions of the TableElement component

2c327a4

JosueLugaro force-pushed the josue/sqleditorleftbar-to-typescript branch from 94cc6aa to 2c327a4 Compare January 27, 2022 18:53

JosueLugaro added 2 commits January 27, 2022 12:57

Made changes suggested by Arash

34c7645

Tested the component without dbId, cleaned up lingering comments

5d26a63

pull-request-size bot added size/M and removed size/L labels Jan 27, 2022

JosueLugaro marked this pull request as ready for review January 27, 2022 20:04

AAfghahi mentioned this pull request Jan 27, 2022

refactor: migrate Sqleditorleftbar component from jsx to tsx #18141

Closed

9 tasks

hughhhh reviewed Jan 27, 2022

View reviewed changes

AAfghahi requested changes Jan 27, 2022

View reviewed changes

JosueLugaro added 2 commits January 27, 2022 15:59

Made more changes suggested by Arash, removed offline from the SqlEdi…

1cc8a00

…torLeftBarProps interface

Made change suggested by Hugh

c07f7a7

lyndsiWilliams reviewed Jan 27, 2022

View reviewed changes

Changed the expanded type from any to boolean

cc9fada

AAfghahi approved these changes Jan 28, 2022

View reviewed changes

lyndsiWilliams approved these changes Jan 28, 2022

View reviewed changes

hughhhh merged commit a06e043 into apache:master Jan 28, 2022

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.5.0 labels Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: sqleditorleftbar to typescript #17926

refactor: sqleditorleftbar to typescript #17926

JosueLugaro commented Jan 4, 2022 •

edited

Loading

AAfghahi Jan 11, 2022

JosueLugaro Jan 27, 2022

AAfghahi Jan 11, 2022

JosueLugaro Jan 27, 2022

AAfghahi commented Jan 27, 2022

github-actions bot commented Jan 27, 2022

hughhhh Jan 27, 2022

JosueLugaro Jan 27, 2022

codecov bot commented Jan 27, 2022 •

edited

Loading

AAfghahi Jan 27, 2022

AAfghahi Jan 27, 2022

JosueLugaro Jan 27, 2022

AAfghahi Jan 27, 2022

AAfghahi Jan 27, 2022

JosueLugaro Jan 27, 2022

lyndsiWilliams left a comment

lyndsiWilliams Jan 27, 2022

JosueLugaro Jan 27, 2022

JosueLugaro Jan 28, 2022

AAfghahi commented Jan 28, 2022

AAfghahi commented Jan 28, 2022

github-actions bot commented Jan 28, 2022

github-actions bot commented Jan 28, 2022

refactor: sqleditorleftbar to typescript #17926

refactor: sqleditorleftbar to typescript #17926

Conversation

JosueLugaro commented Jan 4, 2022 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AAfghahi commented Jan 27, 2022

github-actions bot commented Jan 27, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Jan 27, 2022 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lyndsiWilliams left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AAfghahi commented Jan 28, 2022

AAfghahi commented Jan 28, 2022

github-actions bot commented Jan 28, 2022

github-actions bot commented Jan 28, 2022

JosueLugaro commented Jan 4, 2022 •

edited

Loading

codecov bot commented Jan 27, 2022 •

edited

Loading