fix: UI issues with code editor #23332

arunvjn · 2023-05-15T07:08:02Z

Description

#22652 introduced new styles to code in Appsmith. Along with it was some unintentional changes.
Bundle optimization PR introduced, CodeEditorFallback component which incorrectly renders borders and causes UI to flicker. It also broke styles of lint message popover. This PR fixes these issues.

Code changes

Added 6px padding to code editor lines
Use class variables instead of ref
Removed border for JSEditor's CodeEditorFallback component
Fixes lint message style

Links to Notion, Figma or any other documents that might be relevant to the PR
https://www.notion.so/appsmith/Visual-changes-to-code-in-Appsmith-8bb530c60ee844e5b44adec039bf9280#d99e8450f022439f845b5a0d7deb1d3f

PR fixes following issue(s)

Fixes # (issue number)

if no issue exists, please create an issue and ask the maintainers about this first

Media

A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video

Type of change

Bug fix (non-breaking change which fixes an issue)

Testing

How Has This Been Tested?

Manual

Test Plan

Visual checks to test for changes as per this Notion doc

Issues raised during DP testing

None

Checklist:

Dev activity

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
PR is being merged under a feature flag

QA activity:

Speedbreak features have been covered
Test plan covers all impacted features and areas of interest
Test plan has been peer reviewed by project stakeholders and other QA members
Manually tested functionality on DP
We had an implementation alignment call with stakeholders post QA Round 2
Cypress test cases have been added and approved by SDET/manual QA
Added Test Plan Approved label after Cypress tests were reviewed
Added Test Plan Approved label after JUnit tests were reviewed

- Added 6px x padding - Use class variables instead of ref

arunvjn · 2023-05-15T07:14:52Z

/ok-to-test sha=fea4749

github-actions · 2023-05-15T07:15:14Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4977578355.
Workflow: Appsmith External Integration Test Workflow.
Commit: fea4749.
PR: 23332.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=23332&runId=4977578355_1

arunvjn · 2023-05-15T07:15:17Z

/build-deploy-preview env=release

github-actions · 2023-05-15T07:15:45Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/4977582413.
Workflow: On demand build Docker image and deploy preview.
skip-tests: ``.
env: release.
PR: 23332.
recreate: .

github-actions · 2023-05-15T07:42:14Z

Deploy-Preview-URL: https://appsmith-onnbjow0i-get-appsmith.vercel.app

github-actions · 2023-05-15T08:48:24Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/4977578355.
Commit: fea4749.
The following are new failures, please fix them before merging the PR:

cypress/integration/Regression_TestSuite/ClientSideTests/ActionExecution/ActionSelector_JsToNonJSMode_spec.ts
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitImport/GitImport_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_container_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV1/TableFilter2_Spec.ts
cypress/integration/Regression_TestSuite/ClientSideTests/Workspace/DeleteWorkspace_spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/ApiTests/API_CurlPOSTImport_spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/Postgres_DataTypes/BooleanEnum_Spec.ts
cypress/integration/Regression_TestSuite/ServerSideTests/QueryPane/S3_1_spec.js

To know the list of identified flaky tests - Refer here

…de-editor-ui

arunvjn · 2023-05-15T11:43:09Z

/ok-to-test sha=2d54c36

github-actions · 2023-05-15T11:43:34Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4979924785.
Workflow: Appsmith External Integration Test Workflow.
Commit: 2d54c36.
PR: 23332.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=23332&runId=4979924785_1

arunvjn · 2023-05-15T11:53:14Z

/ok-to-test sha=d987d9d

github-actions · 2023-05-15T11:53:38Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4980001560.
Workflow: Appsmith External Integration Test Workflow.
Commit: d987d9d.
PR: 23332.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=23332&runId=4980001560_1

arunvjn · 2023-05-15T12:29:28Z

/build-deploy-preview env=release

github-actions · 2023-05-15T12:29:51Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/4980352802.
Workflow: On demand build Docker image and deploy preview.
skip-tests: ``.
env: release.
PR: 23332.
recreate: .

github-actions · 2023-05-15T12:52:17Z

Deploy-Preview-URL: https://appsmith-rfy9bfhks-get-appsmith.vercel.app

…de-editor-ui

arunvjn · 2023-05-16T02:38:11Z

/ok-to-test sha=e342e2a

arunvjn · 2023-05-16T02:38:27Z

/build-deploy-preview env=release

github-actions · 2023-05-16T02:38:38Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4987283926.
Workflow: Appsmith External Integration Test Workflow.
Commit: e342e2a.
PR: 23332.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=23332&runId=4987283926_1

github-actions · 2023-05-16T02:38:49Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/4987284913.
Workflow: On demand build Docker image and deploy preview.
skip-tests: ``.
env: release.
PR: 23332.
recreate: .

github-actions · 2023-05-16T02:57:42Z

Deploy-Preview-URL: https://appsmith-mmj7qern7-get-appsmith.vercel.app

arunvjn · 2023-05-16T03:13:34Z

/ok-to-test sha=45868bf

ravikp7 · 2023-05-16T07:25:15Z

app/client/src/components/editorComponents/LazyCodeEditor/styles.tsx


    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    word-break: normal !important;

    color: ${({ contentKind }) =>
      contentKind === ContentKind.CODE
-        ? "#063289"
+        ? "#304eaa"


If the same color is being used in the code editor component, can we use a constant at both places instead of hard coding the hex value?

app/client/src/components/editorComponents/CodeEditor/styledComponents.ts

app/client/src/components/editorComponents/CodeEditor/index.tsx

arunvjn · 2023-05-16T09:48:10Z

/ok-to-test sha=356f67c

arunvjn · 2023-05-16T09:48:32Z

/build-deploy-preview env=release

github-actions · 2023-05-16T09:48:34Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4990403567.
Workflow: Appsmith External Integration Test Workflow.
Commit: 356f67c.
PR: 23332.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=23332&runId=4990403567_1

github-actions · 2023-05-16T09:48:56Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/4990406988.
Workflow: On demand build Docker image and deploy preview.
skip-tests: ``.
env: release.
PR: 23332.
recreate: .

…mponents.ts Co-authored-by: Ravi Kumar Prasad <[email protected]>

arunvjn · 2023-05-16T09:58:19Z

/ok-to-test sha=b7bf9f2

github-actions · 2023-05-16T09:58:43Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4990488939.
Workflow: Appsmith External Integration Test Workflow.
Commit: b7bf9f2.
PR: 23332.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=23332&runId=4990488939_1

arunvjn · 2023-05-16T10:00:54Z

/ok-to-test sha=0a6f175

github-actions · 2023-05-16T10:01:20Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4990513946.
Workflow: Appsmith External Integration Test Workflow.
Commit: 0a6f175.
PR: 23332.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=23332&runId=4990513946_1

github-actions · 2023-05-16T10:10:46Z

Deploy-Preview-URL: https://appsmith-ep4zpazz5-get-appsmith.vercel.app

github-actions · 2023-05-16T11:34:10Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/4990513946.
Commit: 0a6f175.
The following are new failures, please fix them before merging the PR:

cypress/integration/Regression_TestSuite/ClientSideTests/BugTests/Moment_Spec.ts
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitImport/GitImport_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/OtherUIFeatures/Omnibar_spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/GenerateCRUD/Mongo_Spec.ts

To know the list of identified flaky tests - Refer here

github-actions · 2023-05-16T12:06:17Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/4990513946.
Commit: 0a6f175.
The following are new failures, please fix them before merging the PR:

cypress/integration/Regression_TestSuite/ClientSideTests/BugTests/Moment_Spec.ts
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitImport/GitImport_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/OtherUIFeatures/Omnibar_spec.js

To know the list of identified flaky tests - Refer here

…de-editor-ui

arunvjn · 2023-05-17T02:16:19Z

/ok-to-test sha=012b6cf

github-actions · 2023-05-17T02:16:45Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4998608259.
Workflow: Appsmith External Integration Test Workflow.
Commit: 012b6cf.
PR: 23332.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=23332&runId=4998608259_1

github-actions · 2023-05-17T03:49:52Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/4998608259.
Commit: 012b6cf.
The following are new failures, please fix them before merging the PR:

cypress/integration/Regression_TestSuite/ClientSideTests/AppNavigation/TopStacked_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitImport/GitImport_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/GitSyncedApps_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Workspace/LeaveWorkspaceTest_spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/GenerateCRUD/Postgres2_Spec.ts
cypress/integration/Regression_TestSuite/ServerSideTests/OnLoadTests/PostgresConnections_spec.ts
cypress/integration/Regression_TestSuite/ServerSideTests/Postgres_DataTypes/Binary_Spec.ts

To know the list of identified flaky tests - Refer here

github-actions · 2023-05-17T04:21:23Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/4998608259.
Commit: 012b6cf.
All cypress tests have passed 🎉

github-actions · 2023-05-17T04:57:02Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/4998608259.
Commit: 012b6cf.
All cypress tests have passed 🎉

Fixes minor UI issues with code editor.

fea4749

- Added 6px x padding - Use class variables instead of ref

github-actions bot added the Bug Something isn't working label May 15, 2023

match code editor fallback styles with the new changes

5a683d0

arunvjn added 3 commits May 15, 2023 15:37

Merge branch 'release' of github.com:appsmithorg/appsmith into fix/co…

2764b2f

…de-editor-ui

Match fallback component styles to that of code editor

f0496fd

Merge branch 'release' of github.com:appsmithorg/appsmith into fix/co…

2d54c36

…de-editor-ui

Adjust fallback padding

d987d9d

arunvjn requested review from rishabhrathod01 and ravikp7 May 16, 2023 01:27

Merge branch 'release' of github.com:appsmithorg/appsmith into fix/co…

e342e2a

…de-editor-ui

Fixed lint styles

45868bf

ravikp7 reviewed May 16, 2023

View reviewed changes

app/client/src/components/editorComponents/CodeEditor/styledComponents.ts Outdated Show resolved Hide resolved

ravikp7 reviewed May 16, 2023

View reviewed changes

app/client/src/components/editorComponents/CodeEditor/index.tsx Show resolved Hide resolved

arunvjn added 2 commits May 16, 2023 13:55

Removes isReadOnly prop from ReadOnlyEditor

a515356

Address review comments

356f67c

Update app/client/src/components/editorComponents/CodeEditor/styledCo…

b7bf9f2

…mponents.ts Co-authored-by: Ravi Kumar Prasad <[email protected]>

Fixed lint error with commit suggestion

0a6f175

Merge branch 'release' of github.com:appsmithorg/appsmith into fix/co…

012b6cf

…de-editor-ui

arunvjn requested a review from ravikp7 May 17, 2023 04:31

arunvjn enabled auto-merge (squash) May 17, 2023 04:31

ravikp7 approved these changes May 17, 2023

View reviewed changes

arunvjn merged commit d1f1a19 into release May 17, 2023

arunvjn deleted the fix/code-editor-ui branch May 17, 2023 05:02

fix: UI issues with code editor #23332

fix: UI issues with code editor #23332

Conversation

arunvjn commented May 15, 2023 • edited Loading

Description

PR fixes following issue(s)

Media

Type of change

Testing

How Has This Been Tested?

Test Plan

Issues raised during DP testing

Checklist:

Dev activity

QA activity:

arunvjn commented May 15, 2023

github-actions bot commented May 15, 2023

arunvjn commented May 15, 2023

github-actions bot commented May 15, 2023

github-actions bot commented May 15, 2023

github-actions bot commented May 15, 2023

arunvjn commented May 15, 2023

github-actions bot commented May 15, 2023

arunvjn commented May 15, 2023

github-actions bot commented May 15, 2023

arunvjn commented May 15, 2023

github-actions bot commented May 15, 2023

github-actions bot commented May 15, 2023

arunvjn commented May 16, 2023

arunvjn commented May 16, 2023

github-actions bot commented May 16, 2023

github-actions bot commented May 16, 2023

github-actions bot commented May 16, 2023

arunvjn commented May 16, 2023

ravikp7 May 16, 2023

Choose a reason for hiding this comment

arunvjn May 17, 2023

Choose a reason for hiding this comment

arunvjn commented May 16, 2023

arunvjn commented May 16, 2023

github-actions bot commented May 16, 2023

github-actions bot commented May 16, 2023

arunvjn commented May 16, 2023

github-actions bot commented May 16, 2023

arunvjn commented May 16, 2023

github-actions bot commented May 16, 2023

github-actions bot commented May 16, 2023

github-actions bot commented May 16, 2023

github-actions bot commented May 16, 2023

arunvjn commented May 17, 2023

github-actions bot commented May 17, 2023

github-actions bot commented May 17, 2023

github-actions bot commented May 17, 2023

github-actions bot commented May 17, 2023

arunvjn commented May 15, 2023 •

edited

Loading