This is an automated email from the ASF dual-hosted git repository.
tbonelee pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/zeppelin.git
The following commit(s) were added to refs/heads/master by this push:
new 5ecc63ceda [ZEPPELIN-6342] Enable the endOfLine option in Prettier and
cover tsx files
5ecc63ceda is described below
commit 5ecc63ceda575fe0b9b741d0ca11f6b642ff6b12
Author: κΉμλ <[email protected]>
AuthorDate: Mon Jul 27 23:20:53 2026 +0900
[ZEPPELIN-6342] Enable the endOfLine option in Prettier and cover tsx files
### What is this PR for?
Two related gaps in the `zeppelin-web-angular` Prettier setup.
`.prettierrc` did not declare `endOfLine`, so the line ending the formatter
enforces was never stated in the project's own config. Prettier 3 defaults to
`lf` and `.editorconfig` already declares `end_of_line=lf`, so the effective
behavior does not change. Declaring it makes `.prettierrc` authoritative
instead of dependent on those fallbacks.
React `.tsx` sources were covered by no formatter at all. The `prettier`
glob in `lint` and `lint:fix` matched `{ts,js,json,css,html}` only, and
`lint:react` runs ESLint alone, so nothing formatted the tsx files under
`projects/zeppelin-react`. Adding `tsx` to both globs closes that gap. This PR
also includes the resulting `prettier --write` output for the three files that
were not formatted, `ImageRenderer.tsx`, `TableVisualization.tsx` and
`PublishedParagraph.tsx`. Those changes are [...]
`scss` and `less` are deliberately left out. There are no scss files, and
`.less` is intentionally listed in `.prettierignore`.
### What type of PR is it?
Improvement
### Todos
* [x] - Declare `"endOfLine": "lf"` in `.prettierrc`
* [x] - Add `tsx` to the `lint` and `lint:fix` prettier globs
* [x] - Apply `prettier --write` to the three unformatted tsx files
### What is the Jira issue?
* https://issues.apache.org/jira/browse/ZEPPELIN-6342
### How should this be tested?
* `cd zeppelin-web-angular && npm run lint` passes, including `prettier
--check` over the widened glob. The remaining `member-ordering` warnings are
pre-existing and unrelated to this change.
* `npm run lint:react` passes, and the zeppelin-react vitest suite (14
tests) still passes after the reformat.
* `prettier --check "**/*.tsx"` on master flags exactly
`ImageRenderer.tsx`, `TableVisualization.tsx` and `PublishedParagraph.tsx`, and
passes on this branch.
### Screenshots (if appropriate)
N/A
### Questions:
* Does the license files need to update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Closes #5347 from kimyenac/ZEPPELIN-6342.
Signed-off-by: ChanHo Lee <[email protected]>
---
zeppelin-web-angular/.prettierrc | 1 +
zeppelin-web-angular/package.json | 4 +-
.../src/components/renderers/ImageRenderer.tsx | 4 +-
.../visualizations/TableVisualization.tsx | 79 +++++++++++++---------
.../src/pages/PublishedParagraph.tsx | 1 -
5 files changed, 52 insertions(+), 37 deletions(-)
diff --git a/zeppelin-web-angular/.prettierrc b/zeppelin-web-angular/.prettierrc
index 950b5a8935..ae81bea59b 100644
--- a/zeppelin-web-angular/.prettierrc
+++ b/zeppelin-web-angular/.prettierrc
@@ -6,6 +6,7 @@
"htmlWhitespaceSensitivity": "ignore",
"trailingComma": "none",
"arrowParens": "avoid",
+ "endOfLine": "lf",
"overrides": [
{
"files": ".prettierrc",
diff --git a/zeppelin-web-angular/package.json
b/zeppelin-web-angular/package.json
index 55ae7ab835..e9d2b2ac15 100644
--- a/zeppelin-web-angular/package.json
+++ b/zeppelin-web-angular/package.json
@@ -14,8 +14,8 @@
"build:projects": "npm run build-project:sdk && npm run build-project:vis",
"build-project:sdk": "ng build --project zeppelin-sdk",
"build-project:vis": "ng build --project zeppelin-visualization",
- "lint": "cross-env NODE_OPTIONS='--max-old-space-size=8192' ng lint && npm
run lint:react && prettier --check \"**/*.{ts,js,json,css,html}\"",
- "lint:fix": "cross-env NODE_OPTIONS='--max-old-space-size=8192' ng lint
--fix && npm run lint:fix:react && prettier --write
\"**/*.{ts,js,json,css,html}\"",
+ "lint": "cross-env NODE_OPTIONS='--max-old-space-size=8192' ng lint && npm
run lint:react && prettier --check \"**/*.{ts,tsx,js,json,css,html}\"",
+ "lint:fix": "cross-env NODE_OPTIONS='--max-old-space-size=8192' ng lint
--fix && npm run lint:fix:react && prettier --write
\"**/*.{ts,tsx,js,json,css,html}\"",
"lint:react": "cd projects/zeppelin-react && npm run lint",
"lint:fix:react": "cd projects/zeppelin-react && npm run lint:fix",
"test:eslint-rules": "node --test eslint-rules/",
diff --git
a/zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/ImageRenderer.tsx
b/zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/ImageRenderer.tsx
index a025a37179..1bcc157925 100644
---
a/zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/ImageRenderer.tsx
+++
b/zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/ImageRenderer.tsx
@@ -17,7 +17,5 @@ export interface ImageRendererProps {
export const ImageRenderer = ({ imageData }: ImageRendererProps) => {
const imgSrc = `data:image/png;base64,${imageData}`;
- return (
- <img src={imgSrc} alt="Result" style={{ maxWidth: '100%', height: 'auto'
}} />
- );
+ return <img src={imgSrc} alt="Result" style={{ maxWidth: '100%', height:
'auto' }} />;
};
diff --git
a/zeppelin-web-angular/projects/zeppelin-react/src/components/visualizations/TableVisualization.tsx
b/zeppelin-web-angular/projects/zeppelin-react/src/components/visualizations/TableVisualization.tsx
index bec6bc8673..240f7ab3e6 100644
---
a/zeppelin-web-angular/projects/zeppelin-react/src/components/visualizations/TableVisualization.tsx
+++
b/zeppelin-web-angular/projects/zeppelin-react/src/components/visualizations/TableVisualization.tsx
@@ -101,11 +101,13 @@ export const TableVisualization = ({ result, config }:
TableVisualizationProps)
type: 'bar',
data: {
labels: data.map(d => d.category),
- datasets: [{
- label: 'Value',
- data: data.map(d => d.value),
- backgroundColor: '#1890ff'
- }]
+ datasets: [
+ {
+ label: 'Value',
+ data: data.map(d => d.value),
+ backgroundColor: '#1890ff'
+ }
+ ]
},
options: {
responsive: true,
@@ -118,13 +120,15 @@ export const TableVisualization = ({ result, config }:
TableVisualizationProps)
type: 'line',
data: {
labels: data.map(d => d.category),
- datasets: [{
- label: 'Value',
- data: data.map(d => d.value),
- borderColor: '#1890ff',
- backgroundColor: 'rgba(24, 144, 255, 0.1)',
- tension: 0.1
- }]
+ datasets: [
+ {
+ label: 'Value',
+ data: data.map(d => d.value),
+ borderColor: '#1890ff',
+ backgroundColor: 'rgba(24, 144, 255, 0.1)',
+ tension: 0.1
+ }
+ ]
},
options: {
responsive: true,
@@ -137,12 +141,21 @@ export const TableVisualization = ({ result, config }:
TableVisualizationProps)
type: 'pie',
data: {
labels: data.map(d => d.category),
- datasets: [{
- data: data.map(d => d.value),
- backgroundColor: [
- '#1890ff', '#2fc25b', '#facc14', '#223273', '#8543e0',
'#13c2c2', '#3436c7', '#f04864'
- ]
- }]
+ datasets: [
+ {
+ data: data.map(d => d.value),
+ backgroundColor: [
+ '#1890ff',
+ '#2fc25b',
+ '#facc14',
+ '#223273',
+ '#8543e0',
+ '#13c2c2',
+ '#3436c7',
+ '#f04864'
+ ]
+ }
+ ]
},
options: {
responsive: true,
@@ -154,11 +167,13 @@ export const TableVisualization = ({ result, config }:
TableVisualizationProps)
chartConfig = {
type: 'scatter',
data: {
- datasets: [{
- label: 'Value',
- data: data.map(d => ({ x: d.x, y: d.y })),
- backgroundColor: '#1890ff'
- }]
+ datasets: [
+ {
+ label: 'Value',
+ data: data.map(d => ({ x: d.x, y: d.y })),
+ backgroundColor: '#1890ff'
+ }
+ ]
},
options: {
responsive: true,
@@ -174,14 +189,16 @@ export const TableVisualization = ({ result, config }:
TableVisualizationProps)
type: 'line',
data: {
labels: data.map(d => d.category),
- datasets: [{
- label: 'Value',
- data: data.map(d => d.value),
- borderColor: '#1890ff',
- backgroundColor: 'rgba(24, 144, 255, 0.2)',
- fill: true,
- tension: 0.1
- }]
+ datasets: [
+ {
+ label: 'Value',
+ data: data.map(d => d.value),
+ borderColor: '#1890ff',
+ backgroundColor: 'rgba(24, 144, 255, 0.2)',
+ fill: true,
+ tension: 0.1
+ }
+ ]
},
options: {
responsive: true,
diff --git
a/zeppelin-web-angular/projects/zeppelin-react/src/pages/PublishedParagraph.tsx
b/zeppelin-web-angular/projects/zeppelin-react/src/pages/PublishedParagraph.tsx
index c33b2b911e..2d48314d5c 100644
---
a/zeppelin-web-angular/projects/zeppelin-react/src/pages/PublishedParagraph.tsx
+++
b/zeppelin-web-angular/projects/zeppelin-react/src/pages/PublishedParagraph.tsx
@@ -65,4 +65,3 @@ export const mount = (element: HTMLElement, props?:
PublishedParagraphProps) =>
root.unmount();
};
};
-
