[Flexible Layouts] Flexible Layout styling fixes #7319

khalidadil · 2023-12-20T11:53:39Z

Closes #6693

Describe your changes:

All Submissions:

Have you followed the guidelines in our Contributing document?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?
Is this change backwards compatible? For example, developers won't need to change how they are calling the API or how they've extended core plugins such as Tables or Plots.

Author Checklist

Changes address original issue?
Tests included and/or updated with changes?
Has this been smoke tested?
Have you associated this PR with a type: label? Note: this is not necessarily the same as the original issue.
Have you associated a milestone with this PR? Note: leave blank if unsure.
Is this a breaking change to be called out in the release notes?
Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

Changes appear to address issue?
Reviewer has tested changes by following the provided instructions?
Changes appear not to be breaking changes?
Appropriate automated tests included?
Code style and in-line documentation are appropriate?

…elections on save, disable styling on flexible layout containers, and fix styling on plots on flexible layouts

deploysentinel · 2023-12-20T11:58:06Z

Current Playwright Test Results Summary

✅ 15 Passing

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 01/04/2024 01:05:09am UTC)

Run Details

Running Workflow e2e-couchdb on Github Actions

Commit: 8cf081d

Started: 01/04/2024 01:02:35am UTC

View Detailed Build Results

Current Playwright Test Results Summary

✅ 172 Passing - ⚠️ 1 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 01/04/2024 01:05:10am UTC)

Run Details

Running Job e2e-stable on CircleCI

Commit: 8cf081d

Started: 01/04/2024 12:59:37am UTC

⚠️ Flakes

📄 functional/plugins/telemetryTable/telemetryTable.e2e.spec.js • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Telemetry Table unpauses and filters data when paused by button and user changes bounds Retry 1 • Initial Attempt	1.75% (1) 1 / 57 run failed over last 7 days	28.07% (16) 16 / 57 runs flaked over last 7 days

View Detailed Build Results

codecov · 2023-12-20T12:08:58Z

Codecov Report

Attention: Patch coverage is 68.42105% with 6 lines in your changes missing coverage. Please review.

Project coverage is 55.61%. Comparing base (6f3bb5f) to head (8cf081d).
Report is 152 commits behind head on master.

Files	Patch %	Lines
.../plugins/inspectorViews/styles/FontStyleEditor.vue	25.00%	3 Missing ⚠️
...gins/inspectorDataVisualization/TelemetryFrame.vue	0.00%	2 Missing ⚠️
src/plugins/notebook/components/NotebookEmbed.vue	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7319      +/-   ##
==========================================
- Coverage   55.70%   55.61%   -0.09%     
==========================================
  Files         656      657       +1     
  Lines       26192    26239      +47     
  Branches     2546     2549       +3     
==========================================
+ Hits        14589    14594       +5     
- Misses      10898    10934      +36     
- Partials      705      711       +6

Flag	Coverage Δ
e2e-full	`41.09% <ø> (+0.04%)`	⬆️
e2e-stable	`58.78% <100.00%> (+0.66%)`	⬆️
unit	`48.64% <68.42%> (-0.14%)`	⬇️

Files	Coverage Δ
src/api/menu/components/MenuComponent.vue	`50.00% <ø> (ø)`
src/api/menu/components/SuperMenu.vue	`66.66% <100.00%> (-8.34%)`	⬇️
...s/flexibleLayout/components/ContainerComponent.vue	`10.86% <100.00%> (ø)`
...ugins/flexibleLayout/components/FlexibleLayout.vue	`8.00% <ø> (ø)`
...spectorViews/styles/StylesInspectorViewProvider.js	`100.00% <100.00%> (+20.00%)`	⬆️
src/plugins/plot/stackedPlot/StackedPlot.vue	`59.80% <100.00%> (ø)`
src/ui/components/ObjectView.vue	`38.46% <100.00%> (-10.57%)`	⬇️
src/ui/layout/BrowseBar.vue	`45.83% <100.00%> (-1.48%)`	⬇️
src/ui/preview/PreviewHeader.vue	`45.71% <ø> (ø)`
src/ui/toolbar/ToolbarContainer.vue	`0.00% <ø> (ø)`
... and 5 more

... and 11 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

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

khalidadil · 2023-12-20T17:31:27Z

e2e/tests/visual-a11y/styling.visual.spec.js

+/**
+ * This test is dedicated to test styling of various plugins
+ */
+


I created this file as a general one that could be used for all "styling" related tests. Should I instead make this plugin specific (flexible layouts in this case)?

no this is great

khalidadil · 2023-12-20T17:31:50Z

src/plugins/flexibleLayout/components/FlexibleLayout.vue

@@ -29,7 +29,7 @@
    </div>

    <div
-      class="c-fl__container-holder"
+      class="c-fl__container-holder u-style-receiver js-style-receiver"


Added to fix styles not being applied properly

khalidadil · 2023-12-20T17:32:11Z

src/plugins/inspectorViews/styles/StylesInspectorViewProvider.js


      if (layoutItem) {
        return true;
      }

-      if (!domainObject) {
+      if (!domainObject || isFlexibleLayoutContainer) {


Added to disable the styles tab on flexible layout containers

khalidadil · 2023-12-20T17:33:04Z

src/plugins/plot/stackedPlot/StackedPlot.vue

@@ -23,7 +23,7 @@
 <template>
  <div
    v-if="loaded"
-    class="c-plot c-plot--stacked holder holder-plot has-control-bar"
+    class="c-plot c-plot--stacked holder holder-plot has-control-bar u-style-receiver js-style-receiver"


Added to fix the styles landing on the plot instead of the container. This created an issue where removing styles wasn't working properly since the add and remove targeted different elements.

src/ui/layout/BrowseBar.vue

e2e/tests/visual-a11y/styling.visual.spec.js

e2e/tests/functional/styling.e2e.spec.js

e2e/playwright-watch.config.js

unlikelyzero · 2023-12-26T16:57:02Z

.git-blame-ignore-revs

+# vue-eslint update 2019
+14a0f84c1bcd56886d7c9e4e6afa8f7d292734e5
+# eslint changes 2022
+d80b6923541704ab925abf0047cbbc58735c27e2


drive-by to make it easier to work with flex layouts

this is so cool

ozyx

Looks great! We should merge in the changes from master and update our imports/exports to be ESM syntax. Other than that, LGTM!

e2e/helper/stylingUtils.js

ozyx · 2024-01-03T00:10:57Z

e2e/helper/stylingUtils.js

+/**
+ * Sets the background and text color of a given element.
+ *
+ * @param {import('@playwright/test').Page} page - The Playwright page object.
+ * @param {string} borderColorHex - The hex value of the border color to set, or 'No Style'.
+ * @param {string} backgroundColorHex - The hex value of the background color to set, or 'No Style'.
+ * @param {string} textColorHex - The hex value of the text color to set, or 'No Style'.
+ * @param {import('@playwright/test').Locator} locator - The Playwright locator for the element whose style is to be set.
+ */
+async function setStyles(page, borderColorHex, backgroundColorHex, textColorHex, locator) {
+  await locator.click(); // Assuming the locator is clickable and opens the style setting UI
+  await page.getByLabel('Set border color').click();
+  await page.getByLabel(borderColorHex).click();
+  await page.getByLabel('Set background color').click();
+  await page.getByLabel(backgroundColorHex).click();
+  await page.getByLabel('Set text color').click();
+  await page.getByLabel(textColorHex).click();
+}


e2e/helper/stylingUtils.js

e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js

addressed

khalidadil added 5 commits November 9, 2023 11:56

Add css class to flexible layouts to allow them to be styled, reset s…

39f30c0

…elections on save, disable styling on flexible layout containers, and fix styling on plots on flexible layouts

Add tests

30b34a2

Merge branch 'master' into bugfix/issue-6693

ad290cb

Add tests

5889376

Remove accidental commit

6ab76ba

khalidadil linked an issue Dec 20, 2023 that may be closed by this pull request

Element styling unusable in Stacked Plots and Flex Layouts #6693

Closed

7 tasks

khalidadil changed the title ~~Bugfix/issue 6693~~ [Flexible Layouts] Flexible Layout styling fixes Dec 20, 2023

khalidadil requested a review from ozyx December 20, 2023 17:28

khalidadil added the type:bug label Dec 20, 2023

khalidadil added this to the Target:3.2.1 milestone Dec 20, 2023

khalidadil commented Dec 20, 2023

View reviewed changes

src/ui/layout/BrowseBar.vue Show resolved Hide resolved

khalidadil removed this from the Target:3.2.1 milestone Dec 20, 2023

unlikelyzero reviewed Dec 20, 2023

View reviewed changes

e2e/tests/visual-a11y/styling.visual.spec.js Outdated Show resolved Hide resolved

first pass

e28abcb

github-advanced-security bot found potential problems Dec 22, 2023

View reviewed changes

e2e/tests/functional/styling.e2e.spec.js Fixed Show fixed Hide fixed

e2e/tests/functional/styling.e2e.spec.js Fixed Show fixed Hide fixed

e2e/tests/functional/styling.e2e.spec.js Fixed Show fixed Hide fixed

e2e/tests/functional/styling.e2e.spec.js Fixed Show fixed Hide fixed

unlikelyzero added 4 commits December 22, 2023 15:04

drive-by to improve flex layout git blame

b462c6d

drive-by to improve watch mode

3aaf74b

fix flexlayout toolbar options

aef2432

fix roles for flexlayout to be a grid instead of group

8bd5757

github-advanced-security bot found potential problems Dec 22, 2023

View reviewed changes

e2e/playwright-watch.config.js Fixed Show fixed Hide fixed

unlikelyzero added 3 commits December 23, 2023 07:36

driveby git blame ignore

3b56b67

Some more testability improvements

8190388

Improving the tests

8165117

unlikelyzero reviewed Dec 26, 2023

View reviewed changes

ozyx previously requested changes Jan 3, 2024

View reviewed changes

fix imports

d0fadd3

github-advanced-security bot found potential problems Jan 3, 2024

View reviewed changes

e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js Fixed Show fixed Hide fixed

unlikelyzero added 3 commits January 2, 2024 22:49

Add visual test

ffdba24

update stackedplot test

46d4a29

Add a11y label

8eb5856

github-advanced-security bot found potential problems Jan 3, 2024

View reviewed changes

e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js Fixed Show fixed Hide fixed

unlikelyzero added 4 commits January 3, 2024 08:26

add font styles checks

f3409b3

add font checking

5371591

add visual tests

1b7f0b3

Update toolbar to use aria

cf2681e

unlikelyzero reviewed Jan 3, 2024

View reviewed changes

e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js Outdated Show resolved Hide resolved

unlikelyzero reviewed Jan 3, 2024

View reviewed changes

e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js Show resolved Hide resolved

linting and comments

4971bce

unlikelyzero requested a review from ozyx January 3, 2024 17:14

unlikelyzero self-requested a review January 3, 2024 17:15

unlikelyzero approved these changes Jan 3, 2024

View reviewed changes

unlikelyzero added 3 commits January 3, 2024 09:52

lint fix

1df1f72

update comments

6e5fd05

skip test for bug

8cf081d

unlikelyzero enabled auto-merge (squash) January 4, 2024 00:59

unlikelyzero added the pr:e2e:couchdb npm run test:e2e:couchdb label Jan 4, 2024

github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Jan 4, 2024

unlikelyzero merged commit 70de736 into master Jan 4, 2024
18 of 19 checks passed

unlikelyzero deleted the bugfix/issue-6693 branch January 4, 2024 01:11

unlikelyzero modified the milestones: Target:3.3.0, Target:4.0.0 Jan 17, 2024

ozyx added type:enhancement and removed type:feature Feature. Required intentional design labels Aug 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Flexible Layouts] Flexible Layout styling fixes #7319

[Flexible Layouts] Flexible Layout styling fixes #7319

khalidadil commented Dec 20, 2023 •

edited

Loading

deploysentinel bot commented Dec 20, 2023 •

edited

Loading

Test Case Results

codecov bot commented Dec 20, 2023 •

edited

Loading

khalidadil Dec 20, 2023

unlikelyzero Dec 22, 2023

khalidadil Dec 20, 2023

khalidadil Dec 20, 2023

khalidadil Dec 20, 2023

unlikelyzero Dec 26, 2023

davetsay Dec 29, 2023

ozyx left a comment

ozyx Jan 3, 2024

[Flexible Layouts] Flexible Layout styling fixes #7319

[Flexible Layouts] Flexible Layout styling fixes #7319

Conversation

khalidadil commented Dec 20, 2023 • edited Loading

Describe your changes:

All Submissions:

Author Checklist

Reviewer Checklist

deploysentinel bot commented Dec 20, 2023 • edited Loading

Current Playwright Test Results Summary

Current Playwright Test Results Summary

⚠️ Flakes

Test Case Results

codecov bot commented Dec 20, 2023 • 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

Choose a reason for hiding this comment

ozyx left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

khalidadil commented Dec 20, 2023 •

edited

Loading

deploysentinel bot commented Dec 20, 2023 •

edited

Loading

codecov bot commented Dec 20, 2023 •

edited

Loading