From 71b44a1736f1e7877a18bb987cb117b2c5b2351f Mon Sep 17 00:00:00 2001 From: Sagar Khalasi Date: Thu, 12 Sep 2024 20:59:52 +0530 Subject: [PATCH 01/16] chore: Updated error handling (#36288) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Added extra checks for better reporting Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.ImportExport" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 2a5049d9cb17fc099c10e863b90a0694287c38fe > Cypress dashboard. > Tags: `@tag.ImportExport` > Spec: >
Thu, 12 Sep 2024 13:31:10 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## Summary by CodeRabbit - **New Features** - Enhanced CI workflow to provide clearer test results through improved commenting on pull requests based on test outcomes. - Introduced a failure flag mechanism to explicitly record test execution status. - **Bug Fixes** - Improved reliability of CI process by ensuring important logs and results are preserved and uploaded even on test failures. --- .../workflows/build-client-server-count.yml | 86 ++++++++++++++----- .../workflows/ci-test-limited-with-count.yml | 41 ++++++--- 2 files changed, 93 insertions(+), 34 deletions(-) diff --git a/.github/workflows/build-client-server-count.yml b/.github/workflows/build-client-server-count.yml index 7f2210f32063..824d53be2b1e 100644 --- a/.github/workflows/build-client-server-count.yml +++ b/.github/workflows/build-client-server-count.yml @@ -149,6 +149,7 @@ jobs: with: pr: ${{fromJson(needs.file-check.outputs.pr)}} run_count: ${{fromJson(needs.file-check.outputs.run_count)}} + ci-test-limited-existing-docker-image: needs: [file-check] @@ -260,39 +261,62 @@ jobs: with: name: cypress-repeat-logs path: app/client + + - name: Download the ci_test_status + uses: actions/download-artifact@v4 + with: + name: ci_test_status + path: app/client - name: Read and Set File Content as ENV Variable id: set-summary-content run: | summary_content=$(cat app/client/cy-repeat-summary.txt | tr '\n' ' ') - echo "summary_content=$summary_content" >> $GITHUB_ENV + echo "summary_content=$summary_content" >> $GITHUB_ENV + + - name: Check CI Test Result + id: check-ci-test + run: | + # Check if the ci_test_failed flag is set + if [ -f app/client/ci_test_status.txt ]; then + if grep -q "ci_test_failed=true" app/client/ci_test_status.txt; then + echo "Tests failed. Please review the test results." + echo "ci_test_failed=true" >> $GITHUB_ENV + else + echo "Tests passed." + echo "ci_test_failed=false" >> $GITHUB_ENV + fi + else + echo "ci_test_status.txt file not found." + echo "ci_test_failed=unknown" >> $GITHUB_ENV + fi - name: Add a comment on the PR with new CI failures - if: needs.ci-test-limited.result != 'success' && needs.file-check.outputs.pr != '0' + if: env.ci_test_failed == 'true' && needs.file-check.outputs.pr != '0' uses: peter-evans/create-or-update-comment@v3 with: issue-number: ${{fromJson(needs.file-check.outputs.pr)}} body: | - Workflow run: <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>. - Cypress dashboard: Click here! - The following are new failures, please fix them before merging the PR: ${{env.new_failed_spec_env}} - To know the list of identified flaky tests - Refer here - ``` - ${{ env.summary_content }} - ``` - - - name: Add a comment on the PR when ci-test-limited is success - if: needs.ci-test-limited.result == 'success' && needs.file-check.outputs.pr != '0' + Workflow run: <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>. + Cypress dashboard: Click here! + The following are new failures, please fix them before merging the PR: ${{env.new_failed_spec_env}} + To know the list of identified flaky tests - Refer here + ``` + ${{ env.summary_content }} + ``` + + - name: Add a comment on the PR when ci-test-limited is successful + if: env.ci_test_failed != 'true' && needs.file-check.outputs.pr != '0' uses: peter-evans/create-or-update-comment@v3 with: issue-number: ${{fromJson(needs.file-check.outputs.pr)}} body: | - Workflow run: <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>. - Cypress dashboard url: Click here! - All cypress tests have passed 🎉🎉🎉 - ``` - ${{ env.summary_content }} - ``` + Workflow run: <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>. + Cypress dashboard url: Click here! + All Cypress tests have passed 🎉🎉🎉 + ``` + ${{ env.summary_content }} + ``` - name: Check ci-test-limited set status if: needs.ci-test-limited.result != 'success' @@ -396,6 +420,12 @@ jobs: with: name: cypress-repeat-logs path: app/client + + - name: Download the ci_test_status + uses: actions/download-artifact@v4 + with: + name: ci_test_status + path: app/client - name: Read and Set File Content as ENV Variable id: set-summary-content @@ -403,9 +433,25 @@ jobs: summary_content=$(cat app/client/cy-repeat-summary.txt | tr '\n' ' ') echo "summary_content=$summary_content" >> $GITHUB_ENV + - name: Check CI Test Result + id: check-ci-test + run: | + # Check if the ci_test_failed flag is set + if [ -f app/client/ci_test_status.txt ]; then + if grep -q "ci_test_failed=true" app/client/ci_test_status.txt; then + echo "Tests failed. Please review the test results." + echo "ci_test_failed=true" >> $GITHUB_ENV + else + echo "Tests passed." + echo "ci_test_failed=false" >> $GITHUB_ENV + fi + else + echo "ci_test_status.txt file not found." + echo "ci_test_failed=unknown" >> $GITHUB_ENV + fi - name: Add a comment on the PR with new CI failures - if: needs.ci-test-limited-existing-docker-image.result != 'success' && needs.file-check.outputs.pr != '0' + if: env.ci_test_failed == 'true' && needs.file-check.outputs.pr != '0' uses: peter-evans/create-or-update-comment@v3 with: issue-number: ${{fromJson(needs.file-check.outputs.pr)}} @@ -419,7 +465,7 @@ jobs: ``` - name: Add a comment on the PR when ci-test-limited-existing-docker-image is success - if: needs.ci-test-limited-existing-docker-image.result == 'success' && needs.file-check.outputs.pr != '0' + if: env.ci_test_failed != 'true' && needs.file-check.outputs.pr != '0' uses: peter-evans/create-or-update-comment@v3 with: issue-number: ${{fromJson(needs.file-check.outputs.pr)}} diff --git a/.github/workflows/ci-test-limited-with-count.yml b/.github/workflows/ci-test-limited-with-count.yml index 3399eaddb703..ac2b686f0f5e 100644 --- a/.github/workflows/ci-test-limited-with-count.yml +++ b/.github/workflows/ci-test-limited-with-count.yml @@ -350,14 +350,19 @@ jobs: --spec ${{ env.specs_to_run }} \ --config-file "cypress_ci_custom.config.ts" cat cy-repeat-summary.txt - # Check if "Total Failed: 0" is present + # Define the path for the failure flag file + FAILURE_FLAG_FILE="ci_test_status.txt" + + # Check for test results and store the status in the file if ! grep -q "Total Failed: 0" cy-repeat-summary.txt; then - echo "Tests failed, failing the GitHub Action." - exit 1 # Fails the step if tests failed - fi - + echo "ci_test_failed=true" > "$FAILURE_FLAG_FILE" + else + echo "ci_test_failed=false" > "$FAILURE_FLAG_FILE" + fi + cat "$FAILURE_FLAG_FILE" + - name: Trim number of cypress log files - if: failure() + if: always() run: | find ${{ github.workspace }}/app/client/cypress/cypress-logs -name '*.json' -type f | tail -n +11 | xargs -I {} rm -- {} @@ -368,9 +373,17 @@ jobs: name: cypress-repeat-logs path: ${{ github.workspace }}/app/client/cy-repeat-summary.txt overwrite: true + + - name: Upload ci_test_status.txt artifact + if: always() + uses: actions/upload-artifact@v4 + with: + name: ci_test_status + path: ${{ github.workspace }}/app/client/ci_test_status.txt + overwrite: true - name: Upload failed test cypress logs artifact - if: failure() + if: always() uses: actions/upload-artifact@v4 with: name: cypress-console-logs @@ -386,7 +399,7 @@ jobs: overwrite: true - name: Collect CI container logs - if: failure() + if: always() working-directory: "." run: | mkdir -p ~/dockerlogs @@ -394,7 +407,7 @@ jobs: # Upload docker logs - name: Upload failed test list artifact - if: failure() + if: always() uses: actions/upload-artifact@v4 with: name: dockerlogs @@ -402,13 +415,13 @@ jobs: overwrite: true - name: Rename reports - if: failure() + if: always() run: | mkdir -p ~/results mv ${{ github.workspace }}/app/client/results ~/results - name: Upload cypress report - if: failure() + if: always() uses: actions/upload-artifact@v4 with: name: results-${{github.run_attempt}} @@ -417,13 +430,13 @@ jobs: # Set status = failedtest - name: Set fail if there are test failures - if: failure() + if: always() run: | echo "failedtest" > ~/run_result # Force store previous run result to cache - name: Store the previous run result - if: failure() + if: always() uses: actions/cache/save@v4 with: path: | @@ -433,7 +446,7 @@ jobs: # Upload the log artifact so that it can be used by the test & deploy job in the workflow - name: Upload server logs bundle on failure uses: actions/upload-artifact@v4 - if: failure() + if: always() with: name: server-logs path: app/server/server-logs.log From 049a8a9c67edc4f28ecc3c3ee4b1e81b07c8334a Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 13 Sep 2024 11:19:26 +0530 Subject: [PATCH 02/16] chore: remove typography selection in app theming (#36110) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit /ok-to-test tags="@tag.All" ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Introduced new hooks for icon management: `useIconDensity` and `useIconSizing`. - **Improvements** - Refactored hooks to enhance performance by using `useMemo` instead of state management, leading to more efficient calculations for icon size, density, spacing, and typography. - Streamlined theme management by consolidating logic and removing unnecessary properties, improving clarity and maintainability. - Optimized CSS class name management within the `useCssTokens` hook for better performance. - **Bug Fixes** - Removed `fontFamily` property from various components, which may affect text rendering but simplifies font management. - **Documentation** - Updated comments and documentation to reflect changes in typography and theme handling. > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: a0d12586c130252d4164305c5293c1b6fb67b5eb > Cypress dashboard. > Tags: `@tag.All` > Spec: >
Tue, 10 Sep 2024 06:00:30 UTC --------- Co-authored-by: Pawan Kumar --- .../AnvilAppThemingSnapshot_spec.ts | 18 +- .../theming/src/hooks/src/index.ts | 2 + .../theming/src/hooks/src/useCssTokens.tsx | 55 +++--- .../theming/src/hooks/src/useIconDensity.tsx | 20 +- .../theming/src/hooks/src/useIconSizing.tsx | 20 +- .../theming/src/hooks/src/useSizing.tsx | 12 +- .../theming/src/hooks/src/useSpacing.tsx | 19 +- .../theming/src/hooks/src/useTheme.tsx | 184 +++++------------- .../theming/src/hooks/src/useTypography.tsx | 29 +-- .../theming/src/theme/src/ThemeProvider.tsx | 2 +- .../theming/src/theme/src/types.ts | 11 +- .../theming/src/token/src/TokensAccessor.ts | 13 -- .../theming/src/token/src/types.ts | 33 ---- .../addons/theming/ThemingPopup.tsx | 2 - .../.storybook/decorators/theming.tsx | 1 - .../src/components/ThemeSettings.tsx | 33 ---- app/client/src/pages/AppViewer/index.tsx | 16 +- app/client/src/pages/Editor/Canvas.tsx | 1 - .../Editor/WDSThemePropertyPane/index.tsx | 54 +---- 19 files changed, 129 insertions(+), 396 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts index 7000e5d226dc..df1b1b0575d8 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts @@ -36,17 +36,7 @@ describe( anvilSnapshot.setAccentColor("#0080ff"); }); - it("3. Typography", () => { - anvilSnapshot.setTypography("Inter"); - - anvilSnapshot.matchSnapshotForCanvasMode("AppThemingTypography"); - anvilSnapshot.matchSnapshotForPreviewMode("AppThemingTypography"); - anvilSnapshot.matchSnapshotForDeployMode("AppThemingTypography"); - - anvilSnapshot.setTypography("System Default"); - }); - - it("4. Density", () => { + it("3. Density", () => { ["Tight", "Regular", "Loose"].forEach((density) => { anvilSnapshot.setDensity(density); @@ -58,7 +48,7 @@ describe( }); }); - it("5. Sizing", () => { + it("4. Sizing", () => { ["Small", "Regular", "Big"].forEach((size) => { anvilSnapshot.setSizing(size); @@ -68,7 +58,7 @@ describe( }); }); - it("6. Corners", () => { + it("5. Corners", () => { ["0px", "6px", "20px"].forEach((corner) => { anvilSnapshot.setCorners(corner); @@ -78,7 +68,7 @@ describe( }); }); - it("7. Icon Style", () => { + it("6. Icon Style", () => { ["Filled", "Outlined"].forEach((iconStyle) => { anvilSnapshot.setIconStyle(iconStyle); diff --git a/app/client/packages/design-system/theming/src/hooks/src/index.ts b/app/client/packages/design-system/theming/src/hooks/src/index.ts index f8d6541c98fa..7c0c56efa008 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/index.ts +++ b/app/client/packages/design-system/theming/src/hooks/src/index.ts @@ -3,3 +3,5 @@ export * from "./useSpacing"; export * from "./useTypography"; export * from "./useTheme"; export * from "./useCssTokens"; +export * from "./useIconDensity"; +export * from "./useIconSizing"; diff --git a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx index 56deb1ea41db..b5e30df72fe3 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx @@ -1,22 +1,21 @@ import { css } from "@emotion/css"; -import { useEffect, useState } from "react"; -import { cssRule, getTypographyClassName } from "../../utils"; +import { useMemo } from "react"; +import { objectKeys } from "@appsmith/utils"; import type { Theme } from "../../theme"; -import type { FontFamily, ThemeToken, Typography } from "../../token"; +import type { ThemeToken, Typography } from "../../token"; +import { cssRule, getTypographyClassName } from "../../utils"; -const fontFamilyCss = (fontFamily?: FontFamily) => { +const fontFamilyCss = () => { const fontFamilyCss = - fontFamily && fontFamily !== "System Default" - ? `${fontFamily}, sans-serif` - : "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif"; + "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif"; return `font-family: ${fontFamilyCss}; --font-family: ${fontFamilyCss}`; }; const getTypographyCss = (typography: Typography) => { return css` - ${Object.keys(typography).reduce((prev, key) => { + ${objectKeys(typography).reduce((prev, key) => { const currentKey = key as keyof Typography; const { after, before, fontSize, lineHeight } = typography[currentKey]; return ( @@ -55,47 +54,39 @@ const getColorCss = (color: ThemeToken["color"]) => { }; export function useCssTokens(props: Theme) { - const { color, colorMode, fontFamily, typography, ...restTokens } = props; + const { color, colorMode, typography, ...restTokens } = props; - const [colorClassName, setColorClassName] = useState(); - const [colorModeClassName, setColorModeClassName] = useState(); - const [fontFamilyClassName, setFontFamilyClassName] = useState(); - const [typographyClassName, setTypographyClassName] = useState(); - const [providerClassName, setProviderClassName] = useState(); - - useEffect(() => { + const colorClassName = useMemo(() => { if (color != null) { - setColorClassName(css` + return css` ${getColorCss(color)} - `); + `; } }, [color]); - useEffect(() => { + const typographyClassName = useMemo(() => { if (typography != null) { - setTypographyClassName(css` + return css` ${getTypographyCss(typography)} - `); + `; } }, [typography]); - useEffect(() => { - setFontFamilyClassName(css` - ${fontFamilyCss(fontFamily)} - `); - }, [fontFamily]); + const fontFamilyClassName = css` + ${fontFamilyCss()} + `; - useEffect(() => { - setProviderClassName(css` + const providerClassName = useMemo(() => { + return css` ${cssRule(restTokens)}; - `); + `; }, [restTokens]); - useEffect(() => { + const colorModeClassName = useMemo(() => { if (colorMode != null) { - setColorModeClassName(css` + return css` color-scheme: ${colorMode}; - `); + `; } }, [colorMode]); diff --git a/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx b/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx index 8d4b3dad0e1b..e8e170a1994c 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx @@ -1,23 +1,17 @@ -import { useEffect, useState } from "react"; -import type { IconDensity, TokenObj } from "../../token"; +import { useMemo } from "react"; +import type { IconDensity } from "../../token"; export const useIconDensity = (density: IconDensity, userDensity = 1) => { - const [strokeWidth, setStrokeWidth] = useState(); - - useEffect(() => { + const strokeWidth = useMemo(() => { switch (true) { case userDensity < 1: - setStrokeWidth(density.tight); - break; + return density.tight; case userDensity === 1: - setStrokeWidth(density.regular); - break; + return density.regular; case userDensity > 1: - setStrokeWidth(density.loose); - break; + return density.loose; default: - setStrokeWidth(density.regular); - break; + return density.regular; } }, [userDensity, density]); diff --git a/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx b/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx index 51ddc60c7a71..02c1da490056 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx @@ -1,23 +1,17 @@ -import { useEffect, useState } from "react"; -import type { IconSizing, TokenObj } from "../../token"; +import { useMemo } from "react"; +import type { IconSizing } from "../../token"; export const useIconSizing = (sizing: IconSizing, userSizing = 1) => { - const [iconSize, setIconSize] = useState(); - - useEffect(() => { + const iconSize = useMemo(() => { switch (true) { case userSizing < 1: - setIconSize(sizing.small); - break; + return sizing.small; case userSizing === 1: - setIconSize(sizing.regular); - break; + return sizing.regular; case userSizing > 1: - setIconSize(sizing.big); - break; + return sizing.big; default: - setIconSize(sizing.regular); - break; + return sizing.regular; } }, [userSizing, sizing]); diff --git a/app/client/packages/design-system/theming/src/hooks/src/useSizing.tsx b/app/client/packages/design-system/theming/src/hooks/src/useSizing.tsx index 047ed16f138a..14cde9b5f7ec 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useSizing.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useSizing.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useMemo } from "react"; import { calculateScales } from "./calculateScales"; import type { TokenObj, TokenScaleConfig } from "../../token"; @@ -8,7 +8,7 @@ export const getSizing = ( userDensity = 1, userSizing = 1, count = 200, -) => { +): TokenObj => { const { userDensityRatio = 1, userSizingRatio = 1, V, ...rest } = sizing; const ratio = userDensity * userDensityRatio + userSizing * userSizingRatio; @@ -35,11 +35,9 @@ export const useSizing = ( userDensity = 1, userSizing = 1, ) => { - const [sizing, setSizing] = useState(); - - useEffect(() => { - setSizing(getSizing(config, userDensity, userSizing)); - }, [userDensity, userSizing, config]); + const sizing = useMemo(() => { + return getSizing(config, userDensity, userSizing); + }, [config, userDensity, userSizing]); return { sizing, diff --git a/app/client/packages/design-system/theming/src/hooks/src/useSpacing.tsx b/app/client/packages/design-system/theming/src/hooks/src/useSpacing.tsx index 7cbc7bb65868..aeba5c8907b6 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useSpacing.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useSpacing.tsx @@ -1,7 +1,7 @@ -import { useEffect, useState } from "react"; +import { useMemo } from "react"; import { calculateScales } from "./calculateScales"; -import type { TokenObj, TokenScaleConfig } from "../../token"; +import type { TokenScaleConfig } from "../../token"; export const getSpacing = ( spacing: TokenScaleConfig, @@ -36,16 +36,13 @@ export const useSpacing = ( userDensity = 1, userSizing = 1, ) => { - const [outerSpacing, setOuterSpacing] = useState(); - const [innerSpacing, setInnerSpacing] = useState(); + const outerSpacing = useMemo(() => { + return getSpacing(outerSpacingConfig, userDensity, userSizing); + }, [outerSpacingConfig, userDensity, userSizing]); - useEffect(() => { - setOuterSpacing(getSpacing(outerSpacingConfig, userDensity, userSizing)); - }, [userDensity, userSizing, outerSpacingConfig]); - - useEffect(() => { - setInnerSpacing(getSpacing(innerSpacingConfig, userDensity, userSizing)); - }, [userDensity, userSizing, innerSpacingConfig]); + const innerSpacing = useMemo(() => { + return getSpacing(innerSpacingConfig, userDensity, userSizing); + }, [innerSpacingConfig, userDensity, userSizing]); return { outerSpacing, diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx index 908f268f56eb..27840f4cf483 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx @@ -1,12 +1,16 @@ import Color from "colorjs.io"; -import { useEffect, useState } from "react"; +import { useMemo } from "react"; import { TokensAccessor, defaultTokens, tokensConfigs } from "../../token"; -import { useSizing, useSpacing, useTypography } from "./"; +import { + useSizing, + useSpacing, + useTypography, + useIconSizing, + useIconDensity, +} from "./"; import type { ColorMode } from "../../color"; -import type { TokenSource, FontFamily, IconStyle } from "../../token"; -import { useIconDensity } from "./useIconDensity"; -import { useIconSizing } from "./useIconSizing"; +import type { TokenSource, IconStyle } from "../../token"; const tokensAccessor = new TokensAccessor({ ...(defaultTokens as TokenSource), @@ -16,7 +20,6 @@ export interface UseThemeProps { seedColor?: string; colorMode?: ColorMode; borderRadius?: string; - fontFamily?: FontFamily; userDensity?: number; userSizing?: number; iconStyle?: IconStyle; @@ -26,7 +29,6 @@ export function useTheme(props: UseThemeProps = {}) { const { borderRadius, colorMode = "light", - fontFamily, iconStyle = "outlined", seedColor, userDensity = 1, @@ -42,168 +44,88 @@ export function useTheme(props: UseThemeProps = {}) { ); const { typography } = useTypography( tokensConfigs.typography, - fontFamily, userDensity, userSizing, ); - const { iconSize } = useIconSizing(tokensConfigs.icon.sizing, userSizing); - const { strokeWidth } = useIconDensity( tokensConfigs.icon.density, userDensity, ); - const [theme, setTheme] = useState(tokensAccessor.getAllTokens); - - useEffect(() => { - if (colorMode) { - tokensAccessor.updateColorMode(colorMode); + const theme = useMemo(() => { + // Color mode + tokensAccessor.updateColorMode(colorMode); - setTheme((prevState) => { - return { - ...prevState, - ...tokensAccessor.getColors(), - colorMode: tokensAccessor.getColorMode(), - }; - }); - } - }, [colorMode]); - - useEffect(() => { + // Border radius if (borderRadius != null) { tokensAccessor.updateBorderRadiusElevation({ ...defaultTokens.borderRadiusElevation, base: borderRadius, }); - - setTheme((prevState) => { - return { - ...prevState, - ...tokensAccessor.getBorderRadiusElevation(), - }; - }); } - }, [borderRadius]); - useEffect(() => { + // Seed color if (seedColor != null) { - let color; - try { - color = Color.parse(seedColor); + Color.parse(seedColor); + tokensAccessor.updateSeedColor(seedColor); } catch (error) { // eslint-disable-next-line no-console console.error(error); - return; // Prevent further execution if color parsing fails - } - - if (color != null) { - tokensAccessor.updateSeedColor(seedColor); - - setTheme((prevState) => { - return { - ...prevState, - ...tokensAccessor.getColors(), - }; - }); } } - }, [seedColor]); - useEffect(() => { - // Check typography, as fontFamily may be undefined + // Typography if (typography != null) { - tokensAccessor.updateFontFamily(fontFamily); tokensAccessor.updateTypography(typography); - - setTheme((prevState) => { - return { - ...prevState, - typography: tokensAccessor.getTypography(), - fontFamily: tokensAccessor.getFontFamily(), - }; - }); } - }, [typography, fontFamily]); - useEffect(() => { - if (sizing) { - tokensAccessor.updateSizing(sizing); + // Sizing + tokensAccessor.updateSizing(sizing); - setTheme((prevState) => { - return { - ...prevState, - ...tokensAccessor.getSizing(), - }; - }); - } - }, [sizing]); + // Spacing + tokensAccessor.updateOuterSpacing(outerSpacing); + tokensAccessor.updateInnerSpacing(innerSpacing); - useEffect(() => { - if (outerSpacing) { - tokensAccessor.updateOuterSpacing(outerSpacing); + // Icon style + tokensAccessor.updateIconStyle(iconStyle); - setTheme((prevState) => { - return { - ...prevState, - ...tokensAccessor.getOuterSpacing(), - }; - }); - } - }, [outerSpacing]); - - useEffect(() => { - if (innerSpacing) { - tokensAccessor.updateInnerSpacing(innerSpacing); - - setTheme((prevState) => { - return { - ...prevState, - ...tokensAccessor.getInnerSpacing(), - }; - }); - } - }, [innerSpacing]); - - useEffect(() => { - if (iconStyle) { - tokensAccessor.updateIconStyle(iconStyle); - - setTheme((prevState) => { - return { - ...prevState, - iconStyle: tokensAccessor.getIconStyle(), - }; - }); - } - }, [iconStyle]); - - useEffect(() => { + // Icon size if (iconSize != null) { tokensAccessor.updateIconSize(iconSize); - - setTheme((prevState) => { - return { - ...prevState, - ...tokensAccessor.getIconSize(), - }; - }); } - }, [iconSize]); - useEffect(() => { + // Stroke width if (strokeWidth != null) { tokensAccessor.updateStrokeWidth(strokeWidth); - - setTheme((prevState) => { - return { - ...prevState, - ...tokensAccessor.getStrokeWidth(), - }; - }); } - }, [strokeWidth]); - return { theme, setTheme }; + return { + ...tokensAccessor.getAllTokens(), + ...tokensAccessor.getColors(), + colorMode: tokensAccessor.getColorMode(), + ...tokensAccessor.getBorderRadiusElevation(), + typography: tokensAccessor.getTypography(), + ...tokensAccessor.getSizing(), + ...tokensAccessor.getOuterSpacing(), + ...tokensAccessor.getInnerSpacing(), + iconStyle: tokensAccessor.getIconStyle(), + ...tokensAccessor.getIconSize(), + ...tokensAccessor.getStrokeWidth(), + }; + }, [ + colorMode, + borderRadius, + seedColor, + typography, + sizing, + outerSpacing, + innerSpacing, + iconStyle, + iconSize, + strokeWidth, + ]); + + return { theme }; } diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx index 21cfaaa61258..05380e99d634 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx @@ -1,29 +1,20 @@ -import { useEffect, useState } from "react"; -import { FONT_METRICS, TYPOGRAPHY_VARIANTS } from "../../token"; +import { useMemo } from "react"; import { calculateScales } from "./calculateScales"; import { createStyleObject } from "@capsizecss/core"; import appleSystem from "@capsizecss/metrics/appleSystem"; import type { - FontFamily, Typography, TypographyVariantMetric, TokenScaleConfig, } from "../../token"; - -const getFontMetrics = (fontFamily?: FontFamily) => { - return !Boolean(fontFamily) || - fontFamily == null || - fontFamily === "System Default" - ? appleSystem - : FONT_METRICS[fontFamily]; -}; +import { TYPOGRAPHY_VARIANTS } from "../../token/src/types"; +import { objectKeys } from "@appsmith/utils"; export const getTypography = ( typography: TokenScaleConfig, userDensity = 1, userSizing = 1, - fontFamily?: FontFamily, ) => { const { userDensityRatio = 1, userSizingRatio = 1, V, ...rest } = typography; const ratio = userDensity * userDensityRatio + userSizing * userSizingRatio; @@ -37,7 +28,7 @@ export const getTypography = ( const typographyStyle = createStyleObject({ capHeight: currentValue, lineGap: currentValue, - fontMetrics: getFontMetrics(fontFamily), + fontMetrics: appleSystem, }); metrics.push({ @@ -46,12 +37,13 @@ export const getTypography = ( before: typographyStyle["::before"], after: typographyStyle["::after"], }); + return metrics; }, [], ); - return Object.keys(TYPOGRAPHY_VARIANTS).reduce((prev, current, index) => { + return objectKeys(TYPOGRAPHY_VARIANTS).reduce((prev, current, index) => { return { ...prev, [current]: styles[index], @@ -61,15 +53,12 @@ export const getTypography = ( export const useTypography = ( config: TokenScaleConfig, - fontFamily?: FontFamily, userDensity = 1, userSizing = 1, ) => { - const [typography, setTypography] = useState(null); - - useEffect(() => { - setTypography(getTypography(config, userDensity, userSizing, fontFamily)); - }, [userDensity, userSizing, fontFamily, config]); + const typography = useMemo(() => { + return getTypography(config, userDensity, userSizing); + }, [config, userDensity, userSizing]); return { typography, diff --git a/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx b/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx index 8dddca61b732..1cfb2f1bb634 100644 --- a/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx +++ b/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx @@ -20,7 +20,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => { fontFamilyClassName, providerClassName, typographyClassName, - } = useCssTokens({ ...theme }); + } = useCssTokens(theme); return ( diff --git a/app/client/packages/design-system/theming/src/theme/src/types.ts b/app/client/packages/design-system/theming/src/theme/src/types.ts index e7d56e2af57a..d4972b616737 100644 --- a/app/client/packages/design-system/theming/src/theme/src/types.ts +++ b/app/client/packages/design-system/theming/src/theme/src/types.ts @@ -1,16 +1,11 @@ -import type { CSSProperties } from "react"; import type { ReactNode } from "react"; +import type { CSSProperties } from "react"; + import type { ColorMode } from "../../color"; -import type { - FontFamily, - Typography, - ThemeToken, - IconStyle, -} from "../../token"; +import type { Typography, ThemeToken, IconStyle } from "../../token"; export type Theme = ThemeToken & { typography?: Typography; - fontFamily?: FontFamily; colorMode?: ColorMode; iconStyle?: IconStyle; }; diff --git a/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts b/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts index 5e2c14d3d726..da53c0a5b7cf 100644 --- a/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts +++ b/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts @@ -7,7 +7,6 @@ import type { TokenObj, TokenSource, TokenType, - FontFamily, Typography, IconStyle, } from "./types"; @@ -20,7 +19,6 @@ export class TokensAccessor { private borderWidth?: TokenObj; private opacity?: TokenObj; private typography?: Typography; - private fontFamily?: FontFamily; private outerSpacing?: TokenObj; private innerSpacing?: TokenObj; private sizing?: TokenObj; @@ -34,7 +32,6 @@ export class TokensAccessor { borderWidth, boxShadow, colorMode, - fontFamily, iconSize, iconStyle, innerSpacing, @@ -52,7 +49,6 @@ export class TokensAccessor { this.boxShadow = boxShadow; this.borderWidth = borderWidth; this.opacity = opacity; - this.fontFamily = fontFamily; this.sizing = sizing; this.outerSpacing = outerSpacing; this.innerSpacing = innerSpacing; @@ -63,10 +59,6 @@ export class TokensAccessor { this.iconSize = iconSize; } - updateFontFamily = (fontFamily?: FontFamily) => { - this.fontFamily = fontFamily; - }; - updateTypography = (typography: Typography) => { this.typography = typography; }; @@ -135,7 +127,6 @@ export class TokensAccessor { getAllTokens = () => { return { typography: this.getTypography(), - fontFamily: this.getFontFamily(), ...this.getOuterSpacing(), ...this.getInnerSpacing(), ...this.getSizing(), @@ -156,10 +147,6 @@ export class TokensAccessor { return this.typography; }; - getFontFamily = () => { - return this.fontFamily; - }; - getColors = () => { if (this.seedColor == null) return {} as ThemeToken; diff --git a/app/client/packages/design-system/theming/src/token/src/types.ts b/app/client/packages/design-system/theming/src/token/src/types.ts index e94859a4ab3c..262e54218cdb 100644 --- a/app/client/packages/design-system/theming/src/token/src/types.ts +++ b/app/client/packages/design-system/theming/src/token/src/types.ts @@ -1,17 +1,3 @@ -import arial from "@capsizecss/metrics/arial"; -import inter from "@capsizecss/metrics/inter"; -import rubik from "@capsizecss/metrics/rubik"; -import roboto from "@capsizecss/metrics/roboto"; -import ubuntu from "@capsizecss/metrics/ubuntu"; -import poppins from "@capsizecss/metrics/poppins"; -import segoeUI from "@capsizecss/metrics/segoeUI"; -import openSans from "@capsizecss/metrics/openSans"; -import notoSans from "@capsizecss/metrics/notoSans"; -import montserrat from "@capsizecss/metrics/montserrat"; -import nunitoSans from "@capsizecss/metrics/nunitoSans12pt"; -import appleSystem from "@capsizecss/metrics/appleSystem"; -import BlinkMacSystemFont from "@capsizecss/metrics/blinkMacSystemFont"; - import type { ColorMode, ColorTypes } from "../../color"; export type ThemeToken = { @@ -44,7 +30,6 @@ export interface TokenSource { boxShadow?: TokenObj; borderWidth?: TokenObj; opacity?: TokenObj; - fontFamily?: FontFamily; zIndex?: TokenObj; sizing?: TokenObj; outerSpacing?: TokenObj; @@ -80,22 +65,6 @@ export interface TokenScaleConfig { userDensityRatio?: number; } -export const FONT_METRICS = { - Poppins: poppins, - Inter: inter, - Roboto: roboto, - Rubik: rubik, - Ubuntu: ubuntu, - "Noto Sans": notoSans, - "Open Sans": openSans, - Montserrat: montserrat, - "Nunito Sans": nunitoSans, - Arial: arial, - "-apple-system": appleSystem, - BlinkMacSystemFont: BlinkMacSystemFont, - "Segoe UI": segoeUI, -} as const; - // we use "as const" here because we need to iterate by variants export const TYPOGRAPHY_VARIANTS = { footnote: "footnote", @@ -118,8 +87,6 @@ export const TYPOGRAPHY_FONT_WEIGHTS = { 900: 900, } as const; -export type FontFamily = keyof typeof FONT_METRICS | "System Default"; - export interface TypographyVariantMetric { fontSize: string; lineHeight: string; diff --git a/app/client/packages/storybook/.storybook/addons/theming/ThemingPopup.tsx b/app/client/packages/storybook/.storybook/addons/theming/ThemingPopup.tsx index 390763d83558..f7ebfb17dde9 100644 --- a/app/client/packages/storybook/.storybook/addons/theming/ThemingPopup.tsx +++ b/app/client/packages/storybook/.storybook/addons/theming/ThemingPopup.tsx @@ -61,8 +61,6 @@ export const ThemingPopup: React.FC = ({ leftShift, onClose }) => { setBorderRadius={(value) => updateGlobal("borderRadius", value)} seedColor={globals.seedColor} setSeedColor={(value) => updateGlobal("seedColor", value)} - fontFamily={globals.fontFamily} - setFontFamily={(value) => updateGlobal("fontFamily", value)} userDensity={globals.userDensity} userSizing={globals.userSizing} setUserDensity={(value) => updateGlobal("userDensity", value)} diff --git a/app/client/packages/storybook/.storybook/decorators/theming.tsx b/app/client/packages/storybook/.storybook/decorators/theming.tsx index 23b58e53a837..9efe5e3cd2ec 100644 --- a/app/client/packages/storybook/.storybook/decorators/theming.tsx +++ b/app/client/packages/storybook/.storybook/decorators/theming.tsx @@ -18,7 +18,6 @@ export const theming = (Story, args) => { seedColor: args.globals.seedColor, colorMode: args.parameters.colorMode || args.globals.colorMode, borderRadius: args.globals.borderRadius, - fontFamily: args.globals.fontFamily, userDensity: args.globals.userDensity, userSizing: args.globals.userSizing, }); diff --git a/app/client/packages/storybook/src/components/ThemeSettings.tsx b/app/client/packages/storybook/src/components/ThemeSettings.tsx index f9b227934de0..b3d77aa3b3db 100644 --- a/app/client/packages/storybook/src/components/ThemeSettings.tsx +++ b/app/client/packages/storybook/src/components/ThemeSettings.tsx @@ -2,7 +2,6 @@ import { Form } from "@storybook/components"; import React, { useCallback } from "react"; import { Flex, Text } from "@appsmith/wds"; import { ColorControl, BooleanControl, RangeControl } from "@storybook/blocks"; -import { FONT_METRICS } from "@appsmith/wds-theming"; import styled from "styled-components"; import { debounce } from "lodash"; import { AddonPanel } from "@storybook/components"; @@ -42,12 +41,10 @@ interface ThemeSettingsProps { export const ThemeSettings = ({ borderRadius, direction = "column", - fontFamily, isDarkMode, seedColor, setBorderRadius, setDarkMode, - setFontFamily, setSeedColor, setUserDensity, setUserSizing, @@ -106,36 +103,6 @@ export const ThemeSettings = ({ )} - {setFontFamily && ( - - Font Family - setFontFamily(e.target.value)} - size="100%" - title="Font Family" - > - - {Object.keys(FONT_METRICS) - .filter((item) => { - return ( - [ - "-apple-system", - "BlinkMacSystemFont", - "Segoe UI", - ].includes(item) === false - ); - }) - .map((font) => ( - - ))} - - - )} - {setUserDensity && ( Density diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index 8ac8d38e651f..249a0f84ae70 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -46,10 +46,11 @@ import { } from "ee/selectors/applicationSelectors"; import { editorInitializer } from "../../utils/editor/EditorUtils"; import { widgetInitialisationSuccess } from "../../actions/widgetActions"; -import type { FontFamily } from "@appsmith/wds-theming"; import { ThemeProvider as WDSThemeProvider, useTheme, + type ColorMode, + type IconStyle, } from "@appsmith/wds-theming"; import { KBViewerFloatingButton } from "ee/pages/AppViewer/KnowledgeBase/KBViewerFloatingButton"; import urlBuilder from "ee/entities/URLRedirect/URLAssembly"; @@ -110,21 +111,16 @@ function AppViewer(props: Props) { ); const isAnvilLayout = useSelector(getIsAnvilLayout); const themeSetting = useSelector(getAppThemeSettings); - const themeProps = { - borderRadius: selectedTheme.properties.borderRadius.appBorderRadius, - seedColor: selectedTheme.properties.colors.primaryColor, - fontFamily: selectedTheme.properties.fontFamily.appFont as FontFamily, - }; const wdsThemeProps = { borderRadius: themeSetting.borderRadius, seedColor: themeSetting.accentColor, - colorMode: themeSetting.colorMode.toLowerCase(), - fontFamily: themeSetting.fontFamily as FontFamily, + colorMode: themeSetting.colorMode.toLowerCase() as ColorMode, userSizing: themeSetting.sizing, userDensity: themeSetting.density, - iconStyle: themeSetting.iconStyle.toLowerCase(), + iconStyle: themeSetting.iconStyle.toLowerCase() as IconStyle, }; - const { theme } = useTheme(isAnvilLayout ? wdsThemeProps : themeProps); + const { theme } = useTheme(isAnvilLayout ? wdsThemeProps : {}); + const focusRef = useWidgetFocus(); const isAutoLayout = useSelector(getIsAutoLayout); diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx index 5d310f366b66..eff0d078ea77 100644 --- a/app/client/src/pages/Editor/Canvas.tsx +++ b/app/client/src/pages/Editor/Canvas.tsx @@ -56,7 +56,6 @@ const Canvas = (props: CanvasProps) => { borderRadius: themeSetting.borderRadius, seedColor: themeSetting.accentColor, colorMode: themeSetting.colorMode.toLowerCase(), - fontFamily: themeSetting.fontFamily, userSizing: themeSetting.sizing, userDensity: themeSetting.density, iconStyle: themeSetting.iconStyle.toLowerCase(), diff --git a/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx b/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx index 5d64737db88a..729ea98b417d 100644 --- a/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx +++ b/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx @@ -1,7 +1,6 @@ import { debounce } from "lodash"; import styled from "styled-components"; import { isValidColor } from "utils/helpers"; -import { FONT_METRICS } from "@appsmith/wds-theming"; import { useDispatch, useSelector } from "react-redux"; import React, { useCallback, useRef, useState } from "react"; import type { ThemeSetting } from "constants/AppConstants"; @@ -13,7 +12,7 @@ import { LeftIcon, StyledInputGroup, } from "components/propertyControls/ColorPickerComponentV2"; -import { SegmentedControl, Tooltip, Select, Option, Icon } from "@appsmith/ads"; +import { SegmentedControl, Tooltip, Icon } from "@appsmith/ads"; import styles from "./styles.module.css"; @@ -35,14 +34,6 @@ const SubText = styled.p` color: var(--ads-v2-color-fg); `; -const FontText = styled.div` - border-radius: var(--ads-v2-border-radius); - border: 1px solid var(--ads-v2-color-border); - font-size: 11px; - height: 18px; - width: 18px; -`; - const buttonGroupOptions = THEME_SETTINGS_BORDER_RADIUS_OPTIONS.map( (optionKey) => ({ label: ( @@ -185,49 +176,6 @@ function WDSThemePropertyPane() { - -
- -
- - {/* Dimensions */} Date: Fri, 13 Sep 2024 12:26:57 +0530 Subject: [PATCH 03/16] fix: IDE Header Height usage (#36297) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Fixes incorrect usage of IDE Header Height which caused bug in the Menu location Fixes #36284 ## Automation /ok-to-test tags="@tag.IDE" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 0868d06021b2cf16bd7c7172068cf476d26c3a6f > Cypress dashboard. > Tags: `@tag.IDE` > Spec: >
Fri, 13 Sep 2024 05:28:39 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit - **Style** - Enhanced CSS properties for better rendering consistency across browsers in the Editor component. - Improved formatting for better readability. --- app/client/src/pages/Editor/EditorName/components.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/app/client/src/pages/Editor/EditorName/components.ts b/app/client/src/pages/Editor/EditorName/components.ts index b9fb3c7177da..8aaa930f461f 100644 --- a/app/client/src/pages/Editor/EditorName/components.ts +++ b/app/client/src/pages/Editor/EditorName/components.ts @@ -7,25 +7,30 @@ import { IDE_HEADER_HEIGHT } from "IDE"; export const Container = styled.div` display: flex; cursor: pointer; + &:hover { background-color: var(--ads-v2-color-bg-subtle); } + & .${Classes.EDITABLE_TEXT} { - height: ${IDE_HEADER_HEIGHT} !important; + height: ${IDE_HEADER_HEIGHT}px !important; display: block; cursor: pointer; } + &&&& .${Classes.EDITABLE_TEXT}, &&&& .${Classes.EDITABLE_TEXT_EDITING} { padding: 0; width: 100%; } + &&&& .${Classes.EDITABLE_TEXT_CONTENT}, &&&& .${Classes.EDITABLE_TEXT_INPUT} { display: block; ${getTypographyByKey("h5")}; - line-height: ${IDE_HEADER_HEIGHT} !important; + line-height: ${IDE_HEADER_HEIGHT}px !important; padding: 0 ${(props) => props.theme.spaces[2]}px; - height: ${IDE_HEADER_HEIGHT} !important; + height: ${IDE_HEADER_HEIGHT}px !important; } + &&&& .${Classes.EDITABLE_TEXT_INPUT} { margin-right: 20px; } From 1760132c2894bf945586b4c30a70132ad8721afc Mon Sep 17 00:00:00 2001 From: Apeksha Bhosale <7846888+ApekshaBhosale@users.noreply.github.com> Date: Fri, 13 Sep 2024 12:46:54 +0530 Subject: [PATCH 04/16] chore: JFR 24 hour script with logs file (#36041) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description > [!TIP] > _Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team)._ > > _Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR._ Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Sanity" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 660a59d4d52c8bf00e6126e2eb147465626a1989 > Cypress dashboard. > Tags: `@tag.Sanity` > Spec: >
Wed, 11 Sep 2024 08:50:21 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Introduced a new automated script for recording Java Flight Recorder (JFR) data over a 24-hour period, enhancing monitoring capabilities for Java applications. - The script captures thread profiles at hourly intervals, streamlining performance data collection without manual intervention. - Added a monitoring setup function that conditionally executes the JFR recording script based on environment configuration. --------- Co-authored-by: Goutham Pratapa --- .../fs/opt/appsmith/JFR-recording-24-hours.sh | 54 +++++++++++++++++++ deploy/docker/fs/opt/appsmith/entrypoint.sh | 9 ++++ 2 files changed, 63 insertions(+) create mode 100644 deploy/docker/fs/opt/appsmith/JFR-recording-24-hours.sh diff --git a/deploy/docker/fs/opt/appsmith/JFR-recording-24-hours.sh b/deploy/docker/fs/opt/appsmith/JFR-recording-24-hours.sh new file mode 100644 index 000000000000..ea26f0247a51 --- /dev/null +++ b/deploy/docker/fs/opt/appsmith/JFR-recording-24-hours.sh @@ -0,0 +1,54 @@ +#!/bin/bash + +set -o errexit +set -o pipefail +set -o nounset +set -o noglob + +# Define the log file path +log_dir=$1 +log_file=$log_dir/loop.log + +# Ensure the log directory exists +mkdir -p $log_dir + +# Start logging +echo "Script started at $(date)" > $log_file + +echo "Sleep 180 seconds to wait for backend to be ready at $(date)" >> $log_file +sleep 180 + +# Run the loop for 24 hours (or 24 attempts) +for i in {1..24}; do + echo "Attempt $i at $(date)" >> $log_file + + location=$log_dir/heap_dumps/ad-hoc-24-hours/${HOSTNAME}/thread-profile/profile-$(date "+%Y_%m_%d_%H_%M_%S") + mkdir -p $location + echo "Created directory $location" >> $log_file + + # Get the PID of the Java process + pid=$(pgrep -f -- "-jar\sserver.jar") + echo "Found java process at $pid...." >> $log_file + if [ -z "$pid" ]; then + echo "Java process not found, skipping this attempt." >> $log_file + continue + fi + + echo "Found Java PID: $pid" >> $log_file + + # Stop any ongoing JFR recording + jcmd $pid JFR.stop name=profile || true + echo "Stopped previous JFR recording (if any)" >> $log_file + + # Start a new JFR recording + jcmd $pid JFR.start name=profile filename=$location.jfr + echo "Started new JFR recording: $location.jfr" >> $log_file + + # Wait for an hour before taking the next thread dump + echo "Sleeping for 1 hour..." >> $log_file + sleep 3600 + jcmd $pid JFR.stop name=profile || true +done >> $log_file 2>&1 & + +# Detach the process from the terminal +echo "Script disowned, running in background." >> $log_file \ No newline at end of file diff --git a/deploy/docker/fs/opt/appsmith/entrypoint.sh b/deploy/docker/fs/opt/appsmith/entrypoint.sh index 17eaf3a72dd6..1d5bd59fde6d 100644 --- a/deploy/docker/fs/opt/appsmith/entrypoint.sh +++ b/deploy/docker/fs/opt/appsmith/entrypoint.sh @@ -477,6 +477,14 @@ function setup_auto_heal(){ fi } +function setup_monitoring(){ + if [[ ${APPSMITH_MONITORING-} = 1 ]]; then + # By default APPSMITH_MONITORING=0 + # To enable auto heal set APPSMITH_MONITORING=1 + bash /opt/appsmith/JFR-recording-24-hours.sh $APPSMITH_LOG_DIR 2>&1 & + fi +} + print_appsmith_info(){ tr '\n' ' ' < /opt/appsmith/info.json } @@ -530,6 +538,7 @@ mkdir -p "$APPSMITH_LOG_DIR"/{supervisor,backend,cron,editor,rts,mongodb,redis,p setup_auto_heal capture_infra_details +setup_monitoring || echo true # Handle CMD command exec "$@" From f593ed3465c4804b75f35bfc3678f018c01df02c Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Fri, 13 Sep 2024 14:29:20 +0530 Subject: [PATCH 05/16] chore: [Plugin Action Editor] Convert to Module (#36305) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description CE PR for: https://github.com/appsmithorg/appsmith-ee/pull/5134 ## Automation /ok-to-test tags="@tag.Sanity" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 1f40848b28f4a3fbb3461578334ee613f608c7bd > Cypress dashboard. > Tags: `@tag.Sanity` > Spec: >
Fri, 13 Sep 2024 08:48:25 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## Summary by CodeRabbit - **New Features** - Enhanced flexibility for child components in the Plugin Action Editor, allowing single or multiple React nodes. - Introduced a new toolbar with a dropdown menu for additional actions. - Added components for converting actions into modules, including callouts and disablers for better user feedback. - **Bug Fixes** - Improved user experience by providing notifications during the action conversion process. --- .../PluginActionContext.tsx | 2 +- .../PluginActionEditor/PluginActionEditor.tsx | 2 +- .../components/PluginActionToolbar.tsx | 24 +++++++---- .../AppPluginActionEditor.tsx | 15 +++++-- .../components/AppPluginActionToolbar.tsx | 9 +++++ .../ConvertToModule/ConvertToModuleCTA.tsx | 35 ++++++++++++++++ .../ConvertToModuleCallout.tsx | 40 +++++++++++++++++++ .../ConvertToModuleDisabler.tsx | 19 +++++++++ .../components/ConvertToModule/index.tsx | 3 ++ 9 files changed, 135 insertions(+), 14 deletions(-) create mode 100644 app/client/src/ce/pages/Editor/AppPluginActionEditor/components/AppPluginActionToolbar.tsx create mode 100644 app/client/src/ce/pages/Editor/AppPluginActionEditor/components/ConvertToModule/ConvertToModuleCTA.tsx create mode 100644 app/client/src/ce/pages/Editor/AppPluginActionEditor/components/ConvertToModule/ConvertToModuleCallout.tsx create mode 100644 app/client/src/ce/pages/Editor/AppPluginActionEditor/components/ConvertToModule/ConvertToModuleDisabler.tsx create mode 100644 app/client/src/ce/pages/Editor/AppPluginActionEditor/components/ConvertToModule/index.tsx diff --git a/app/client/src/PluginActionEditor/PluginActionContext.tsx b/app/client/src/PluginActionEditor/PluginActionContext.tsx index 0b99f9dc363d..21c76f6c8985 100644 --- a/app/client/src/PluginActionEditor/PluginActionContext.tsx +++ b/app/client/src/PluginActionEditor/PluginActionContext.tsx @@ -20,7 +20,7 @@ interface PluginActionContextType { const PluginActionContext = createContext(null); interface ChildrenProps { - children: ReactNode[]; + children: ReactNode | ReactNode[]; } export const PluginActionContextProvider = ( diff --git a/app/client/src/PluginActionEditor/PluginActionEditor.tsx b/app/client/src/PluginActionEditor/PluginActionEditor.tsx index d8e480403064..bfdad62b30b7 100644 --- a/app/client/src/PluginActionEditor/PluginActionEditor.tsx +++ b/app/client/src/PluginActionEditor/PluginActionEditor.tsx @@ -18,7 +18,7 @@ import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper"; import { Text } from "@appsmith/ads"; interface ChildrenProps { - children: React.ReactNode[]; + children: React.ReactNode | React.ReactNode[]; } const PluginActionEditor = (props: ChildrenProps) => { diff --git a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx index ee90ecc960ba..75ee4dc86bd2 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx @@ -1,11 +1,12 @@ import React from "react"; import { IDEToolbar } from "IDE"; -import { Button, Tooltip } from "@appsmith/ads"; -import { modText } from "../../utils/helpers"; +import { Button, Menu, MenuContent, MenuTrigger, Tooltip } from "@appsmith/ads"; +import { modText } from "utils/helpers"; interface PluginActionToolbarProps { runOptions?: React.ReactNode; children?: React.ReactNode[] | React.ReactNode; + menuContent?: React.ReactNode[] | React.ReactNode; } const PluginActionToolbar = (props: PluginActionToolbarProps) => { @@ -29,12 +30,19 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => { size="sm" startIcon="settings-2-line" /> -