From 2a024274327d83ef572aca9f4ad77ec2e58126b9 Mon Sep 17 00:00:00 2001 From: Esther Schmitz Date: Tue, 6 Aug 2024 15:33:44 +0200 Subject: [PATCH 01/33] feat(templates): add context to template titles. Add epic template. (#173) * feat(templates): add context to template titles. Add epic template. * fix(templates): formatting * fix(templates): formatting again * update label for epic template --- .github/ISSUE_TEMPLATE/bug_report.md | 2 +- .github/ISSUE_TEMPLATE/epic.md | 47 +++++++++++++++++++++++ .github/ISSUE_TEMPLATE/feature_request.md | 2 +- .github/ISSUE_TEMPLATE/task.md | 2 +- 4 files changed, 50 insertions(+), 3 deletions(-) create mode 100644 .github/ISSUE_TEMPLATE/epic.md diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 4e70b5a15..65bfbd2ec 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -1,7 +1,7 @@ --- name: Bug report about: Report a bug to help us improve -title: "[Bug]: " +title: "[Bug](context): " labels: bug assignees: "" --- diff --git a/.github/ISSUE_TEMPLATE/epic.md b/.github/ISSUE_TEMPLATE/epic.md new file mode 100644 index 000000000..d2b8c447e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/epic.md @@ -0,0 +1,47 @@ +--- +name: Epic +about: Create an epic +title: "[EPIC](context): " +labels: epic +assignees: "" +--- + +### Description + +A concise description of the epic. What problem does it solve? Why is it important? + +### Objectives + +List the high-level objectives or goals of this epic. + +- Objective 1 +- Objective 2 +- Objective 3 + +### Acceptance Criteria + +Define the criteria that must be met for this epic to be considered complete. + +- [ ] Criterion 1 +- [ ] Criterion 2 +- [ ] Criterion 3 + +### Tasks + +Break down the epic into smaller, actionable tasks or user stories. Bigger tasks should be issues themselves. + +- [ ] Task 1 +- [ ] Task 2 +- [ ] Task 3 + +### Dependencies + +Identify any other epics, issues, or tasks that this epic depends on. + +- Dependency 1 +- Dependency 2 +- Dependency 3 + +### Additional Notes + +Any additional information, context, or considerations. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 885d9d7fa..938408119 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -1,7 +1,7 @@ --- name: Feature request about: Suggest an idea for this project -title: "[Feature]: " +title: "[Feature](context): " labels: enhancement assignees: "" --- diff --git a/.github/ISSUE_TEMPLATE/task.md b/.github/ISSUE_TEMPLATE/task.md index 50405a677..6553f0a16 100644 --- a/.github/ISSUE_TEMPLATE/task.md +++ b/.github/ISSUE_TEMPLATE/task.md @@ -1,7 +1,7 @@ --- name: Task about: Create a task for planned work or project -title: "[TASK]: " +title: "[Task](context): " labels: task assignees: "" --- From 55f53e34ee4323eb93181597235d49a53acff610 Mon Sep 17 00:00:00 2001 From: Andreas Pfau Date: Tue, 6 Aug 2024 15:34:16 +0200 Subject: [PATCH 02/33] chore(versions): fix changelog for oauth and ui-components (#180) --- .changeset/fuzzy-tables-lie.md | 5 +++++ .changeset/great-boats-eat.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/fuzzy-tables-lie.md create mode 100644 .changeset/great-boats-eat.md diff --git a/.changeset/fuzzy-tables-lie.md b/.changeset/fuzzy-tables-lie.md new file mode 100644 index 000000000..2aca973b3 --- /dev/null +++ b/.changeset/fuzzy-tables-lie.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-ui-components": minor +--- + +Add ThemeToggle component, store current theme in local storage, take SecretText component out of WiP diff --git a/.changeset/great-boats-eat.md b/.changeset/great-boats-eat.md new file mode 100644 index 000000000..5b3eab055 --- /dev/null +++ b/.changeset/great-boats-eat.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-oauth": patch +--- + +Fix polynomial regular expression used on uncontrolled data From ab6c2241de6450f98c5e5185f8f094671673e5e5 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 6 Aug 2024 16:02:19 +0200 Subject: [PATCH 03/33] chore: Automate Package Versioning and Publishing with Changesets (#181) * chore: Update versions with Changesets * chore(ui-components): remove duplicates from changelog * chore(oauth): remove duplicates from changelog --------- Co-authored-by: github-actions[bot] Co-authored-by: Andreas Pfau --- .changeset/fuzzy-tables-lie.md | 5 ----- .changeset/gorgeous-goats-tell.md | 11 ----------- .changeset/great-boats-eat.md | 5 ----- .changeset/rude-dots-tap.md | 5 ----- .changeset/theme-toggle.md | 5 ----- .changeset/young-chefs-decide.md | 5 ----- packages/communicator/CHANGELOG.md | 6 ++++++ packages/communicator/package.json | 2 +- packages/messages-provider/CHANGELOG.md | 10 ++++++++++ packages/messages-provider/package.json | 2 +- packages/oauth/CHANGELOG.md | 8 ++++++++ packages/oauth/package.json | 2 +- packages/ui-components/CHANGELOG.md | 10 ++++++++++ packages/ui-components/package.json | 2 +- packages/url-state-provider/CHANGELOG.md | 6 ++++++ packages/url-state-provider/package.json | 2 +- packages/url-state-router/CHANGELOG.md | 8 ++++++++ packages/url-state-router/package.json | 2 +- packages/utils/CHANGELOG.md | 6 ++++++ packages/utils/package.json | 2 +- 20 files changed, 61 insertions(+), 43 deletions(-) delete mode 100644 .changeset/fuzzy-tables-lie.md delete mode 100644 .changeset/gorgeous-goats-tell.md delete mode 100644 .changeset/great-boats-eat.md delete mode 100644 .changeset/rude-dots-tap.md delete mode 100644 .changeset/theme-toggle.md delete mode 100644 .changeset/young-chefs-decide.md diff --git a/.changeset/fuzzy-tables-lie.md b/.changeset/fuzzy-tables-lie.md deleted file mode 100644 index 2aca973b3..000000000 --- a/.changeset/fuzzy-tables-lie.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@cloudoperators/juno-ui-components": minor ---- - -Add ThemeToggle component, store current theme in local storage, take SecretText component out of WiP diff --git a/.changeset/gorgeous-goats-tell.md b/.changeset/gorgeous-goats-tell.md deleted file mode 100644 index 8d2ebc11d..000000000 --- a/.changeset/gorgeous-goats-tell.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -"@cloudoperators/juno-url-state-provider": patch -"@cloudoperators/juno-messages-provider": patch -"@cloudoperators/juno-url-state-router": patch -"@cloudoperators/juno-ui-components": patch -"@cloudoperators/juno-communicator": patch -"@cloudoperators/juno-oauth": patch -"@cloudoperators/juno-utils": patch ---- - -Update instructions in readme files diff --git a/.changeset/great-boats-eat.md b/.changeset/great-boats-eat.md deleted file mode 100644 index 5b3eab055..000000000 --- a/.changeset/great-boats-eat.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@cloudoperators/juno-oauth": patch ---- - -Fix polynomial regular expression used on uncontrolled data diff --git a/.changeset/rude-dots-tap.md b/.changeset/rude-dots-tap.md deleted file mode 100644 index 5b3eab055..000000000 --- a/.changeset/rude-dots-tap.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@cloudoperators/juno-oauth": patch ---- - -Fix polynomial regular expression used on uncontrolled data diff --git a/.changeset/theme-toggle.md b/.changeset/theme-toggle.md deleted file mode 100644 index 2aca973b3..000000000 --- a/.changeset/theme-toggle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@cloudoperators/juno-ui-components": minor ---- - -Add ThemeToggle component, store current theme in local storage, take SecretText component out of WiP diff --git a/.changeset/young-chefs-decide.md b/.changeset/young-chefs-decide.md deleted file mode 100644 index 8539ee2dc..000000000 --- a/.changeset/young-chefs-decide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@cloudoperators/juno-oauth": patch ---- - -Use a special email regex diff --git a/packages/communicator/CHANGELOG.md b/packages/communicator/CHANGELOG.md index 359849b55..01e0d3a7b 100644 --- a/packages/communicator/CHANGELOG.md +++ b/packages/communicator/CHANGELOG.md @@ -1,5 +1,11 @@ # @cloudoperators/juno-communicator +## 2.2.12 + +### Patch Changes + +- 3ca3d35: Update instructions in readme files + ## 2.2.11 ### Patch Changes diff --git a/packages/communicator/package.json b/packages/communicator/package.json index 6fc021d01..246322825 100644 --- a/packages/communicator/package.json +++ b/packages/communicator/package.json @@ -1,6 +1,6 @@ { "name": "@cloudoperators/juno-communicator", - "version": "2.2.11", + "version": "2.2.12", "description": "Send and receive across tabs", "author": "UI-Team", "contributors": [ diff --git a/packages/messages-provider/CHANGELOG.md b/packages/messages-provider/CHANGELOG.md index a89cd1fd6..59305fecd 100644 --- a/packages/messages-provider/CHANGELOG.md +++ b/packages/messages-provider/CHANGELOG.md @@ -1,5 +1,15 @@ # @cloudoperators/juno-messages-provider +## 0.1.18 + +### Patch Changes + +- 3ca3d35: Update instructions in readme files +- Updated dependencies [55f53e3] +- Updated dependencies [3ca3d35] +- Updated dependencies [ed9b963] + - @cloudoperators/juno-ui-components@2.16.0 + ## 0.1.17 ### Patch Changes diff --git a/packages/messages-provider/package.json b/packages/messages-provider/package.json index d9902c9a8..aace3624e 100644 --- a/packages/messages-provider/package.json +++ b/packages/messages-provider/package.json @@ -1,6 +1,6 @@ { "name": "@cloudoperators/juno-messages-provider", - "version": "0.1.17", + "version": "0.1.18", "description": "Messages provider", "author": "UI-Team", "contributors": [ diff --git a/packages/oauth/CHANGELOG.md b/packages/oauth/CHANGELOG.md index 284cda50a..9efb1f9b9 100644 --- a/packages/oauth/CHANGELOG.md +++ b/packages/oauth/CHANGELOG.md @@ -1,5 +1,13 @@ # @cloudoperators/juno-oauth +## 1.2.7 + +### Patch Changes + +- 3ca3d35: Update instructions in readme files +- c04ab20: Fix polynomial regular expression used on uncontrolled data +- faadcd4: Use a special email regex + ## 1.2.6 ### Patch Changes diff --git a/packages/oauth/package.json b/packages/oauth/package.json index ae9704c87..4055b5f9d 100644 --- a/packages/oauth/package.json +++ b/packages/oauth/package.json @@ -1,6 +1,6 @@ { "name": "@cloudoperators/juno-oauth", - "version": "1.2.6", + "version": "1.2.7", "description": "Authenticates user via OIDC", "author": "UI-Team", "contributors": [ diff --git a/packages/ui-components/CHANGELOG.md b/packages/ui-components/CHANGELOG.md index 91bdf57e4..2819f1aec 100644 --- a/packages/ui-components/CHANGELOG.md +++ b/packages/ui-components/CHANGELOG.md @@ -1,5 +1,15 @@ # @cloudoperators/juno-ui-components +## 2.16.0 + +### Minor Changes + +- ed9b963: Add ThemeToggle component, store current theme in local storage, take SecretText component out of WiP + +### Patch Changes + +- 3ca3d35: Update instructions in readme files + ## 2.15.4 ### Patch Changes diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index c10ea515a..c8e0e3452 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -5,7 +5,7 @@ "module": "build/index.js", "source": "src/index.js", "style": "build/lib/variables.css", - "version": "2.15.4", + "version": "2.16.0", "files": [ "build/*", "src/colors.css", diff --git a/packages/url-state-provider/CHANGELOG.md b/packages/url-state-provider/CHANGELOG.md index a567f84ef..e40eb254d 100644 --- a/packages/url-state-provider/CHANGELOG.md +++ b/packages/url-state-provider/CHANGELOG.md @@ -1,5 +1,11 @@ # @cloudoperators/juno-url-state-provider +## 2.0.6 + +### Patch Changes + +- 3ca3d35: Update instructions in readme files + ## 2.0.5 ### Patch Changes diff --git a/packages/url-state-provider/package.json b/packages/url-state-provider/package.json index 52efc9380..ec67b3d43 100644 --- a/packages/url-state-provider/package.json +++ b/packages/url-state-provider/package.json @@ -1,6 +1,6 @@ { "name": "@cloudoperators/juno-url-state-provider", - "version": "2.0.5", + "version": "2.0.6", "description": "Save several paths in the url. This makes it possible to manage the status of several apps such as micro frontends with the help of URL.", "author": "UI-Team", "contributors": [ diff --git a/packages/url-state-router/CHANGELOG.md b/packages/url-state-router/CHANGELOG.md index 1a283274b..fdcb710c4 100644 --- a/packages/url-state-router/CHANGELOG.md +++ b/packages/url-state-router/CHANGELOG.md @@ -1,5 +1,13 @@ # @cloudoperators/juno-url-state-router +## 1.0.10 + +### Patch Changes + +- 3ca3d35: Update instructions in readme files +- Updated dependencies [3ca3d35] + - @cloudoperators/juno-url-state-provider@2.0.6 + ## 1.0.9 ### Patch Changes diff --git a/packages/url-state-router/package.json b/packages/url-state-router/package.json index d0b9d9009..dc024d352 100644 --- a/packages/url-state-router/package.json +++ b/packages/url-state-router/package.json @@ -1,6 +1,6 @@ { "name": "@cloudoperators/juno-url-state-router", - "version": "1.0.9", + "version": "1.0.10", "description": "Router", "author": "UI-Team", "contributors": [ diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md index baad3fa8b..62354fca4 100644 --- a/packages/utils/CHANGELOG.md +++ b/packages/utils/CHANGELOG.md @@ -1,5 +1,11 @@ # @cloudoperators/juno-utils +## 1.1.13 + +### Patch Changes + +- 3ca3d35: Update instructions in readme files + ## 1.1.12 ### Patch Changes diff --git a/packages/utils/package.json b/packages/utils/package.json index 981380d95..b5770efe3 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@cloudoperators/juno-utils", - "version": "1.1.12", + "version": "1.1.13", "description": "Description of utils", "author": "UI-Team", "contributors": [ From a3f71badfccfdefef762f347d68f45e05de12bf1 Mon Sep 17 00:00:00 2001 From: Arturo Reuschenbach Date: Tue, 6 Aug 2024 17:06:43 +0200 Subject: [PATCH 04/33] feat(workflow) use gitHub pages from branch as preparation to deploy storybookPRs to github pages (#182) * rebuild the workflow as preparation to deploy PRs also in github actions * add a change to the ui-components folder --- .github/workflows/deploy-github-pages.yaml | 32 +++++++--------------- packages/ui-components/README.md | 4 +++ 2 files changed, 14 insertions(+), 22 deletions(-) diff --git a/.github/workflows/deploy-github-pages.yaml b/.github/workflows/deploy-github-pages.yaml index d2f4174fd..c4ed27fac 100644 --- a/.github/workflows/deploy-github-pages.yaml +++ b/.github/workflows/deploy-github-pages.yaml @@ -19,8 +19,12 @@ on: # Allows you to run this workflow manually from the Actions tab workflow_dispatch: +permissions: + contents: write + jobs: - build: + build-and-deploy: + concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession. runs-on: [default] steps: - uses: actions/checkout@v4 @@ -36,25 +40,9 @@ jobs: - name: Build storybook run: npm -w @cloudoperators/juno-ui-components run build-storybook - - name: Upload artifact - uses: actions/upload-pages-artifact@v3 + - name: Deploy 🚀 + uses: JamesIves/github-pages-deploy-action@v4 with: - path: packages/ui-components/storybook-static - - deploy: - env: - NODE_EXTRA_CA_CERTS: /etc/ssl/certs/ca-certificates.crt - NODE_OPTIONS: --use-openssl-ca - ACTIONS_RUNNER_DEBUG: true - permissions: - pages: write # to deploy to Pages - id-token: write # to verify the deployment originates from an appropriate source - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - runs-on: [default] - needs: [build] - steps: - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 + folder: packages/ui-components/storybook-static + clean-exclude: pr-preview/ + force: false diff --git a/packages/ui-components/README.md b/packages/ui-components/README.md index 3882cabe8..f7e39e37d 100644 --- a/packages/ui-components/README.md +++ b/packages/ui-components/README.md @@ -55,3 +55,7 @@ Run the test suite: ```bash npm -w @cloudoperators/juno-ui-components run test ``` + +## Continuous Deployment to GitHub Pages + +Any change to this library will automatically trigger a deployment to GitHub Pages. When changes are committed to the main branch, GitHub Actions will build and test the project. If successful, the latest version of the library will be deployed to GitHub Pages. From 14a6a0f35052d79fe10e60f1e5d176dda6704eac Mon Sep 17 00:00:00 2001 From: Arturo Reuschenbach Date: Wed, 7 Aug 2024 14:41:22 +0200 Subject: [PATCH 05/33] feat(workflows): Storybook pr preview on github pages (#183) * correct runs-on target * renamings * preview storybook PRs * trigger changes on ui-components * just trigger if ui-componets have changed * test new colors in pr preview * fix file colors * revert changes. There were just to check. * ignore checks or deploy PRs if just markdown files are touched * add new line * do not run checks for github checks * remove test * add colons * add new line * move this change to a different pr * ignore github after changing settings * move to another pr --- .github/workflows/ci-checks.yaml | 14 ++++---- .github/workflows/deploy-github-pages.yaml | 4 +-- .github/workflows/deploy-pr-preview.yaml | 42 ++++++++++++++++++++++ .github/workflows/release.yaml | 2 +- 4 files changed, 52 insertions(+), 10 deletions(-) create mode 100644 .github/workflows/deploy-pr-preview.yaml diff --git a/.github/workflows/ci-checks.yaml b/.github/workflows/ci-checks.yaml index 5b235596a..7138cee8c 100644 --- a/.github/workflows/ci-checks.yaml +++ b/.github/workflows/ci-checks.yaml @@ -14,7 +14,7 @@ on: jobs: install-dependencies: - runs-on: ubuntu-latest + runs-on: [default] steps: - uses: actions/checkout@v4 - name: Use Node.js @@ -34,7 +34,7 @@ jobs: run: npm ci reuse-compliance: - runs-on: [ubuntu-latest] + runs-on: [default] steps: - name: Checkout uses: actions/checkout@v4 @@ -44,7 +44,7 @@ jobs: uses: fsfe/reuse-action@v3 license-headers: - runs-on: [ubuntu-latest] + runs-on: [default] steps: - name: Checkout uses: actions/checkout@v4 @@ -61,7 +61,7 @@ jobs: allowed-licenses: needs: install-dependencies - runs-on: ubuntu-latest + runs-on: [default] steps: - uses: actions/checkout@v4 - name: Use Node.js @@ -85,7 +85,7 @@ jobs: lint: needs: install-dependencies - runs-on: ubuntu-latest + runs-on: [default] steps: - uses: actions/checkout@v4 - name: Use Node.js @@ -108,7 +108,7 @@ jobs: format: needs: install-dependencies - runs-on: ubuntu-latest + runs-on: [default] steps: - uses: actions/checkout@v4 - name: Use Node.js @@ -131,7 +131,7 @@ jobs: test: needs: install-dependencies - runs-on: ubuntu-latest + runs-on: [default] steps: - uses: actions/checkout@v4 - name: Use Node.js diff --git a/.github/workflows/deploy-github-pages.yaml b/.github/workflows/deploy-github-pages.yaml index c4ed27fac..986036074 100644 --- a/.github/workflows/deploy-github-pages.yaml +++ b/.github/workflows/deploy-github-pages.yaml @@ -8,7 +8,7 @@ # `{"pull_request": {"number": , "head": {"ref": "", "sha": "PR commit sha"}, "base": {"ref": "main"}}, "repository": {"name": "juno", "owner": {"login": "cloudoperators"}}}` # 2. Run the following command: # `act push --container-architecture linux/amd64 -P default=catthehacker/ubuntu:act-latest -e act_push.json -W .github/workflows/deploy-github-pages.yaml` -name: Storybook +name: Storybook to GitHub Pages on: push: @@ -24,7 +24,7 @@ permissions: jobs: build-and-deploy: - concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession. + concurrency: deploy-gh-pages-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession. runs-on: [default] steps: - uses: actions/checkout@v4 diff --git a/.github/workflows/deploy-pr-preview.yaml b/.github/workflows/deploy-pr-preview.yaml new file mode 100644 index 000000000..7251ca17c --- /dev/null +++ b/.github/workflows/deploy-pr-preview.yaml @@ -0,0 +1,42 @@ +name: Storybook PR Preview + +on: + pull_request: + types: + - opened + - reopened + - synchronize + - closed + paths: + - "packages/ui-components/**" + # The paths-ignore option only prevents the workflow from running if all the changed files match the ignore patterns + paths-ignore: + - '**.md' + +# Limit the concurrency of entire workflow +concurrency: deploy-pr-preview-${{ github.ref }} + +jobs: + deploy-preview: + runs-on: [default] + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: "20.x" + + - name: Install dependencies + if: github.event.action != 'closed' + run: | + npm install --force + + - name: Build storybook + run: npm -w @cloudoperators/juno-ui-components run build-storybook + + - uses: rossjrw/pr-preview-action@v1 + with: + source-dir: packages/ui-components/storybook-static + preview-branch: gh-pages + umbrella-dir: pr-preview + action: auto diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index cd6bcc621..ba9860a29 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -14,7 +14,7 @@ permissions: jobs: release: name: Release - runs-on: ubuntu-latest + runs-on: [default] steps: - name: Checkout Repo uses: actions/checkout@v3 From c219787ba0948010d849604105dc8ffe9d28f960 Mon Sep 17 00:00:00 2001 From: Arturo Reuschenbach Date: Wed, 7 Aug 2024 15:26:50 +0200 Subject: [PATCH 06/33] deactivate paths-ignore (#185) --- .github/workflows/deploy-pr-preview.yaml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/workflows/deploy-pr-preview.yaml b/.github/workflows/deploy-pr-preview.yaml index 7251ca17c..ee5fc9c21 100644 --- a/.github/workflows/deploy-pr-preview.yaml +++ b/.github/workflows/deploy-pr-preview.yaml @@ -9,9 +9,6 @@ on: - closed paths: - "packages/ui-components/**" - # The paths-ignore option only prevents the workflow from running if all the changed files match the ignore patterns - paths-ignore: - - '**.md' # Limit the concurrency of entire workflow concurrency: deploy-pr-preview-${{ github.ref }} From a594e3e7d2058ec25001a2b5653b1118f7b23134 Mon Sep 17 00:00:00 2001 From: Arturo Reuschenbach Date: Wed, 7 Aug 2024 16:03:22 +0200 Subject: [PATCH 07/33] skip steps when closing pr (#188) --- .github/workflows/deploy-pr-preview.yaml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/deploy-pr-preview.yaml b/.github/workflows/deploy-pr-preview.yaml index ee5fc9c21..ff4e2dd93 100644 --- a/.github/workflows/deploy-pr-preview.yaml +++ b/.github/workflows/deploy-pr-preview.yaml @@ -20,6 +20,7 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 + if: github.event.action != 'closed' with: node-version: "20.x" @@ -29,6 +30,7 @@ jobs: npm install --force - name: Build storybook + if: github.event.action != 'closed' run: npm -w @cloudoperators/juno-ui-components run build-storybook - uses: rossjrw/pr-preview-action@v1 From 3abe6e495bb02c775ae3f5de149f1e0360afde14 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Thu, 8 Aug 2024 09:50:28 +0200 Subject: [PATCH 08/33] fix(ui) fix complex form story (#166) * fix(ui) fix complex form story add decorator with Portalprovider to make sure Select menu is rendered correctly * Create small-poets-wink.md * fix(ui) : fix import that changed from js to ts --- .changeset/small-poets-wink.md | 5 +++++ .../src/components/Form/Form.stories.js | 12 +++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 .changeset/small-poets-wink.md diff --git a/.changeset/small-poets-wink.md b/.changeset/small-poets-wink.md new file mode 100644 index 000000000..1ea0c03c0 --- /dev/null +++ b/.changeset/small-poets-wink.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-ui-components": patch +--- + +fix(ui) fix complex form story: add `` to decorator to make sure the Select menu renders into a portal inside the scope of our `. diff --git a/packages/ui-components/src/components/Form/Form.stories.js b/packages/ui-components/src/components/Form/Form.stories.js index 116faf24e..9d0ce90a9 100644 --- a/packages/ui-components/src/components/Form/Form.stories.js +++ b/packages/ui-components/src/components/Form/Form.stories.js @@ -20,7 +20,8 @@ import { CheckboxGroup } from "../CheckboxGroup/index.js" import { Checkbox } from "../Checkbox/index.js" import { Button } from "../Button/index.js" import { ButtonRow } from "../ButtonRow/index.js" -import { IntroBox } from "../IntroBox/index" +import { IntroBox } from "../IntroBox/index.ts" +import { PortalProvider } from "../PortalProvider/PortalProvider.component" export default { title: "Forms/Form", @@ -35,6 +36,15 @@ export default { control: false, }, }, + decorators: [ + (Story) => ( +
+ + + +
+ ), + ], } const Template = ({ children, ...args }) =>
{children}
From 4d615c8a76b2848c6a83f72e976f95813421b330 Mon Sep 17 00:00:00 2001 From: Andreas Pfau Date: Thu, 8 Aug 2024 14:56:22 +0200 Subject: [PATCH 09/33] chore(deps): add missing dependencies in package.json (#194) --- package-lock.json | 211 ++++++++++++++++++++++++++++++++++-- packages/oauth/package.json | 3 + packages/utils/package.json | 3 + 3 files changed, 210 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e8dde6a9..a06d88bbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5813,6 +5813,7 @@ "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.4.tgz", "integrity": "sha512-YF7Y52kFdFT/xVSuVdjkV5ZdX/3YtmX0QulG+x0taQOtJdHYzVU61aSSkAgVJ7NOv6qPkIYiJSgSWWN/DM5sGw==", "dev": true, + "license": "MIT", "dependencies": { "@babel/helper-module-imports": "^7.18.6", "@rollup/pluginutils": "^5.0.1" @@ -5864,6 +5865,7 @@ "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz", "integrity": "sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==", "dev": true, + "license": "MIT", "dependencies": { "@rollup/pluginutils": "^5.0.1", "@types/resolve": "1.20.2", @@ -27810,6 +27812,7 @@ "resolved": "https://registry.npmjs.org/rollup-plugin-analyzer/-/rollup-plugin-analyzer-4.0.0.tgz", "integrity": "sha512-LL9GEt3bkXp6Wa19SNR5MWcvHNMvuTFYg+eYBZN2OIFhSWN+pEJUQXEKu5BsOeABob3x9PDaLKW7w5iOJnsESQ==", "dev": true, + "license": "MIT", "engines": { "node": ">=8.0.0" } @@ -27820,6 +27823,7 @@ "integrity": "sha512-tYZOhGtffvGp8VzTrB5u/kPYyIjEEshTPEauOLkshPNx/MvCJVd6PCc2HX4CO0TDH0cBnnGKQ+yQpTERJikK4Q==", "deprecated": "Please use rollup-plugin-terser instead.", "dev": true, + "license": "MIT", "dependencies": { "@babel/core": "^7.8.7", "@babel/plugin-syntax-dynamic-import": "^7.8.3", @@ -27839,6 +27843,7 @@ "resolved": "https://registry.npmjs.org/rollup-plugin-delete/-/rollup-plugin-delete-2.0.0.tgz", "integrity": "sha512-/VpLMtDy+8wwRlDANuYmDa9ss/knGsAgrDhM+tEwB1npHwNu4DYNmDfUL55csse/GHs9Q+SMT/rw9uiaZ3pnzA==", "dev": true, + "license": "MIT", "dependencies": { "del": "^5.1.0" }, @@ -34212,7 +34217,7 @@ }, "packages/communicator": { "name": "@cloudoperators/juno-communicator", - "version": "2.2.10", + "version": "2.2.12", "license": "Apache-2.0", "devDependencies": { "@cloudoperators/juno-eslint-config": "*", @@ -34257,7 +34262,7 @@ }, "packages/messages-provider": { "name": "@cloudoperators/juno-messages-provider", - "version": "0.1.16", + "version": "0.1.18", "license": "Apache-2.0", "dependencies": { "@cloudoperators/juno-ui-components": "*" @@ -34431,7 +34436,7 @@ }, "packages/oauth": { "name": "@cloudoperators/juno-oauth", - "version": "1.2.5", + "version": "1.2.7", "license": "Apache-2.0", "dependencies": { "oauth-pkce": "^0.0.6" @@ -34439,6 +34444,9 @@ "devDependencies": { "@babel/preset-env": "^7.20.2", "@cloudoperators/juno-eslint-config": "*", + "@rollup/plugin-babel": "^6.0.4", + "@rollup/plugin-commonjs": "^26.0.1", + "@rollup/plugin-node-resolve": "^15.2.3", "babel-jest": "^29.4.2", "esbuild": "^0.17.6", "jest": "^29.4.2", @@ -34456,6 +34464,42 @@ "npm": ">=10.0.0 <11.0.0" } }, + "packages/oauth/node_modules/@rollup/plugin-commonjs": { + "version": "26.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-26.0.1.tgz", + "integrity": "sha512-UnsKoZK6/aGIH6AdkptXhNvhaqftcjq3zZdT+LY5Ftms6JR06nADcDsYp5hTU9E2lbJUEOhdlY5J4DNTneM+jQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rollup/pluginutils": "^5.0.1", + "commondir": "^1.0.1", + "estree-walker": "^2.0.2", + "glob": "^10.4.1", + "is-reference": "1.2.1", + "magic-string": "^0.30.3" + }, + "engines": { + "node": ">=16.0.0 || 14 >= 14.17" + }, + "peerDependencies": { + "rollup": "^2.68.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "packages/oauth/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, "packages/oauth/node_modules/esbuild": { "version": "0.17.19", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz", @@ -34493,6 +34537,63 @@ "@esbuild/win32-x64": "0.17.19" } }, + "packages/oauth/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, + "license": "ISC", + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/oauth/node_modules/magic-string": { + "version": "0.30.11", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz", + "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0" + } + }, + "packages/oauth/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/oauth/node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "packages/template": { "name": "@cloudoperators/juno-template", "version": "1.0.5", @@ -34553,7 +34654,7 @@ }, "packages/ui-components": { "name": "@cloudoperators/juno-ui-components", - "version": "2.15.3", + "version": "2.16.0", "license": "Apache-2.0", "devDependencies": { "@babel/plugin-transform-parameters": "^7.22.5", @@ -34645,7 +34746,7 @@ }, "packages/url-state-provider": { "name": "@cloudoperators/juno-url-state-provider", - "version": "2.0.4", + "version": "2.0.6", "license": "Apache-2.0", "dependencies": { "juri": "^1.0.3" @@ -34927,7 +35028,7 @@ }, "packages/url-state-router": { "name": "@cloudoperators/juno-url-state-router", - "version": "1.0.8", + "version": "1.0.10", "license": "Apache-2.0", "dependencies": { "@cloudoperators/juno-url-state-provider": "*" @@ -35324,12 +35425,15 @@ }, "packages/utils": { "name": "@cloudoperators/juno-utils", - "version": "1.1.11", + "version": "1.1.13", "license": "Apache-2.0", "devDependencies": { "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@cloudoperators/juno-eslint-config": "*", + "@rollup/plugin-babel": "^6.0.4", + "@rollup/plugin-commonjs": "^26.0.1", + "@rollup/plugin-node-resolve": "^15.2.3", "@testing-library/react": "^16.0.0", "babel-jest": "^29.4.2", "esbuild": "^0.17.6", @@ -35354,6 +35458,42 @@ "react": "^18.2.0" } }, + "packages/utils/node_modules/@rollup/plugin-commonjs": { + "version": "26.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-26.0.1.tgz", + "integrity": "sha512-UnsKoZK6/aGIH6AdkptXhNvhaqftcjq3zZdT+LY5Ftms6JR06nADcDsYp5hTU9E2lbJUEOhdlY5J4DNTneM+jQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rollup/pluginutils": "^5.0.1", + "commondir": "^1.0.1", + "estree-walker": "^2.0.2", + "glob": "^10.4.1", + "is-reference": "1.2.1", + "magic-string": "^0.30.3" + }, + "engines": { + "node": ">=16.0.0 || 14 >= 14.17" + }, + "peerDependencies": { + "rollup": "^2.68.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "packages/utils/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, "packages/utils/node_modules/esbuild": { "version": "0.17.19", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz", @@ -35390,6 +35530,63 @@ "@esbuild/win32-ia32": "0.17.19", "@esbuild/win32-x64": "0.17.19" } + }, + "packages/utils/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, + "license": "ISC", + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/utils/node_modules/magic-string": { + "version": "0.30.11", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz", + "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0" + } + }, + "packages/utils/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/utils/node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } } } } diff --git a/packages/oauth/package.json b/packages/oauth/package.json index 4055b5f9d..0c760e73c 100644 --- a/packages/oauth/package.json +++ b/packages/oauth/package.json @@ -21,6 +21,9 @@ "devDependencies": { "@babel/preset-env": "^7.20.2", "@cloudoperators/juno-eslint-config": "*", + "@rollup/plugin-babel": "^6.0.4", + "@rollup/plugin-commonjs": "^26.0.1", + "@rollup/plugin-node-resolve": "^15.2.3", "babel-jest": "^29.4.2", "esbuild": "^0.17.6", "jest": "^29.4.2", diff --git a/packages/utils/package.json b/packages/utils/package.json index b5770efe3..7696320dc 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -23,6 +23,9 @@ "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@cloudoperators/juno-eslint-config": "*", + "@rollup/plugin-babel": "^6.0.4", + "@rollup/plugin-commonjs": "^26.0.1", + "@rollup/plugin-node-resolve": "^15.2.3", "@testing-library/react": "^16.0.0", "babel-jest": "^29.4.2", "esbuild": "^0.17.6", From b1ad1ae5fa4f823eebdf11be1599b3327ba17150 Mon Sep 17 00:00:00 2001 From: Arturo Reuschenbach Date: Thu, 8 Aug 2024 15:14:40 +0200 Subject: [PATCH 10/33] feat(storybook): point storybook Juno UI logo link to itself and add version (#193) * Point storybook logo link to itself * added custom brand title --- .../.storybook/juno-addon/themes.js | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/ui-components/.storybook/juno-addon/themes.js b/packages/ui-components/.storybook/juno-addon/themes.js index 382ea45f2..0a06189ae 100644 --- a/packages/ui-components/.storybook/juno-addon/themes.js +++ b/packages/ui-components/.storybook/juno-addon/themes.js @@ -5,12 +5,18 @@ import { create } from "@storybook/theming/create" import { LOGO_DARK_DATA_URL, LOGO_LIGHT_DATA_URL, STORAGE_KEY } from "./constants" -// import { themes } from "@storybook/theming" -// console.log(themes.dark) +import { version } from "../../package.json" + +function brandTitle(logoUrl) { + return ` +
+ Juno UI + v${version} +
` +} const staticOptions = { - brandTitle: "Juno UI", - brandUrl: "https://assets.juno.global.cloud.sap", + brandUrl: window.location.origin + window.location.pathname, brandTarget: "_self", // Fonts fontBase: @@ -22,8 +28,8 @@ const staticOptions = { const dark = create({ ...staticOptions, base: "dark", - brandImage: LOGO_DARK_DATA_URL, - // + brandTitle: brandTitle(LOGO_DARK_DATA_URL), + colorPrimary: "rgb(15, 167, 180)", colorSecondary: "rgb(21, 208, 224)", @@ -62,9 +68,8 @@ const dark = create({ const light = create({ ...staticOptions, base: "light", - brandImage: LOGO_LIGHT_DATA_URL, + brandTitle: brandTitle(LOGO_LIGHT_DATA_URL), - // colorPrimary: "rgb(30, 106, 146)", colorSecondary: "rgb(0, 125, 184)", From f9b09ecf6d9cdad8d73a4c3dbd0e1471f7df6c5d Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Mon, 12 Aug 2024 10:58:47 +0200 Subject: [PATCH 11/33] feat(ui) Appshell: render provided TopNavigation in embedded node (#178) * feat(ui) Appshell: render TopNavigation in embedded node if passed * feat(ui) AppShell: Update prop description * Create appshell-render-topnavigation-embedded.md * typo * feat(AppShell): add margin-top to MainContainer if TopNav present * feat(AppShell): add embedded stories * fix(AppShell): remove unnecessary async * fix(AppShell): formatting --------- Co-authored-by: Esther Schmitz Co-authored-by: D038721 --- .../appshell-render-topnavigation-embedded.md | 7 +++ .../components/AppShell/AppShell.component.js | 24 ++++--- .../components/AppShell/AppShell.stories.js | 62 ++++++++++++++++++- .../src/components/AppShell/AppShell.test.js | 32 +++++----- 4 files changed, 98 insertions(+), 27 deletions(-) create mode 100644 .changeset/appshell-render-topnavigation-embedded.md diff --git a/.changeset/appshell-render-topnavigation-embedded.md b/.changeset/appshell-render-topnavigation-embedded.md new file mode 100644 index 000000000..28f752420 --- /dev/null +++ b/.changeset/appshell-render-topnavigation-embedded.md @@ -0,0 +1,7 @@ +--- +"@cloudoperators/juno-ui-components": minor +--- + +The AppShell will now render a TopNavigation in embedded mode if passed. + +feat(ui) Appshell: render TopNavigation in embedded node if passed diff --git a/packages/ui-components/src/components/AppShell/AppShell.component.js b/packages/ui-components/src/components/AppShell/AppShell.component.js index 8b2d5f737..5888fc7d4 100644 --- a/packages/ui-components/src/components/AppShell/AppShell.component.js +++ b/packages/ui-components/src/components/AppShell/AppShell.component.js @@ -40,15 +40,19 @@ export const AppShell = ({ : ""} {embedded ? ( - - - {sideNavigation && sideNavigation} - {children} - - + <> + {topNavigation && topNavigation} + + + {sideNavigation && sideNavigation} + {children} + + + ) : ( <> {pageHeader && (typeof pageHeader === "string" || pageHeader instanceof String) ? ( @@ -91,7 +95,7 @@ AppShell.propTypes = { /** OBSOLETE: The contentHeading prop is obsolete and will be removed in a future version. In order to render a content heading, use a `` element as a child in your main content. */ contentHeading: PropTypes.string, /** Optional: Defaults to false. Set embedded to true if app is to be rendered embedded in another app/page. - * In this case only the content area and children are rendered, no header/footer or remaining layout components */ + * In this case only the content area and children are rendered, a TopNavigation if passed, but no header/footer or remaining layout components */ embedded: PropTypes.bool, /** Whether the main page / view content can spread over the full available width of the viewport or not. Default is `false` (resulting in a width-constrained, centred content column on very wide screens) UNLESS the AppShell is rendered with embedded as true, then the main content will be full-width by default. In embedded mode, `fullWidthContent` can still be passed as `false` explicitly. */ fullWidthContent: PropTypes.bool, diff --git a/packages/ui-components/src/components/AppShell/AppShell.stories.js b/packages/ui-components/src/components/AppShell/AppShell.stories.js index b823d112b..0509a5697 100644 --- a/packages/ui-components/src/components/AppShell/AppShell.stories.js +++ b/packages/ui-components/src/components/AppShell/AppShell.stories.js @@ -15,6 +15,7 @@ import { TopNavigationItem } from "../TopNavigationItem/index" import { TabNavigation } from "../TabNavigation/index" import { TabNavigationItem } from "../TabNavigationItem/index" import { ContentHeading } from "../ContentHeading/index" +import { Container } from "../Container/index" export default { title: "Layout/AppShell", @@ -38,7 +39,11 @@ export default { }, } -const Template = ({ children, ...args }) => {children} +const Template = ({ children, ...args }) => ( + + {children} + +) Template.propTypes = { children: PropTypes.node, } @@ -55,6 +60,61 @@ Default.args = { children: [My Page,

Content goes here

], } +export const Embedded = Template.bind({}) +Embedded.parameters = { + docs: { + description: { + story: + "Responsive shell for your application in embedded mode (typical use case for MFEs, i.e. if your app is to be embedded somewhere).", + }, + }, +} +Embedded.args = { + embedded: true, + children: [My Page,

Content goes here

], +} + +export const EmbeddedWithTopNav = Template.bind({}) +EmbeddedWithTopNav.parameters = { + docs: { + description: { + story: + "Responsive shell for your application in embedded mode (typical use case for MFEs, i.e. if your app is to be embedded somewhere). TopNavigation can be used in embedded mode.", + }, + }, +} +EmbeddedWithTopNav.args = { + embedded: true, + topNavigation: ( + + + + + ), + children: [My Page,

Content goes here

], +} + +export const EmbeddedWithSideNav = Template.bind({}) +EmbeddedWithSideNav.parameters = { + docs: { + description: { + story: + "Responsive shell for your application in embedded mode (typical use case for MFEs, i.e. if your app is to be embedded somewhere). SideNavigation can be used in embedded mode.", + }, + }, +} +EmbeddedWithSideNav.args = { + embedded: true, + sideNavigation: ( + + + + + + ), + children: [My Page,

Content goes here

], +} + export const AppName = Template.bind({}) AppName.parameters = { docs: { diff --git a/packages/ui-components/src/components/AppShell/AppShell.test.js b/packages/ui-components/src/components/AppShell/AppShell.test.js index 284e4def2..ec2867ae0 100644 --- a/packages/ui-components/src/components/AppShell/AppShell.test.js +++ b/packages/ui-components/src/components/AppShell/AppShell.test.js @@ -17,13 +17,13 @@ describe("AppShell", () => { jest.clearAllMocks() }) - test("renders an app shell", async () => { + test("renders an app shell", () => { render() expect(screen.getByTestId("app-shell")).toBeInTheDocument() expect(screen.getByTestId("app-shell")).toHaveClass("juno-body") }) - test("logs a deprecation warning to the console when user passed obsolete contentHeading prop", async () => { + test("logs a deprecation warning to the console when user passed obsolete contentHeading prop", () => { const consoleWarnSpy = jest.spyOn(console, "warn") render() expect(consoleWarnSpy).toHaveBeenCalled() @@ -32,13 +32,13 @@ describe("AppShell", () => { ) }) - test("renders an app shell with page header passed as String", async () => { + test("renders an app shell with page header passed as String", () => { render() expect(screen.getByTestId("app-shell")).toBeInTheDocument() expect(screen.getByText("My Page Header")).toBeInTheDocument() }) - test("renders an app shell with page header passed as component", async () => { + test("renders an app shell with page header passed as component", () => { render( { expect(screen.getByText("My Page Header")).toBeInTheDocument() }) - test("renders an app shell with custom page footer passed as component", async () => { + test("renders an app shell with custom page footer passed as component", () => { render( { expect(screen.getByText("My Page Footer")).toBeInTheDocument() }) - test("renders an app shell with top navigation passed as component", async () => { + test("renders an app shell with top navigation passed as component", () => { render( } /> ) @@ -70,14 +70,14 @@ describe("AppShell", () => { expect(screen.getByTestId("top-navigation")).toBeInTheDocument() }) - test("renders an app shell with a side navigation passed as a component", async () => { + test("renders an app shell with a side navigation passed as a component", () => { render(} />) expect(screen.getByTestId("app-shell")).toBeInTheDocument() expect(screen.getByRole("navigation")).toBeInTheDocument() expect(screen.getByRole("navigation")).toHaveClass("juno-sidenavigation") }) - test("renders an app shell with both a side and a top navigation as passed", async () => { + test("renders an app shell with both a side and a top navigation as passed", () => { render( { expect(screen.getByTestId("top-nav")).toBeInTheDocument() }) - test("renders an embeddable app shell without page heading or footer", async () => { + test("renders an embeddable app shell without page heading or footer", () => { render( { expect(screen.queryByText("My Page Footer")).not.toBeInTheDocument() }) - test("renders children as passed", async () => { + test("renders children as passed", () => { render( @@ -118,7 +118,7 @@ describe("AppShell", () => { }) // The following test whether the MainContainerInner element rendered by AppShell does the right thing depending of props passed to AppShell: - test("does not render a fullwidth main container in non-embedded mode by default", async () => { + test("does not render a fullwidth main container in non-embedded mode by default", () => { render( @@ -127,7 +127,7 @@ describe("AppShell", () => { expect(document.querySelector(".juno-main-inner")).not.toHaveClass("juno-main-inner-fullwidth") }) - test("renders a fullwidth main container in non-embedded mode if passed explicitly", async () => { + test("renders a fullwidth main container in non-embedded mode if passed explicitly", () => { render( @@ -136,7 +136,7 @@ describe("AppShell", () => { expect(document.querySelector(".juno-main-inner")).toHaveClass("juno-main-inner-fullwidth") }) - test("renders a fullwidth main inner container in embedded mode by default", async () => { + test("renders a fullwidth main inner container in embedded mode by default", () => { render( @@ -145,7 +145,7 @@ describe("AppShell", () => { expect(document.querySelector(".juno-main-inner")).toHaveClass("juno-main-inner-fullwidth") }) - test("renders a non-fullwidth, size-restricted main inner container in embedded mode if passed explicitly", async () => { + test("renders a non-fullwidth, size-restricted main inner container in embedded mode if passed explicitly", () => { render( @@ -154,13 +154,13 @@ describe("AppShell", () => { expect(document.querySelector(".juno-main-inner")).not.toHaveClass("juno-main-inner-fullwidth") }) - test("renders a custom className", async () => { + test("renders a custom className", () => { render() expect(screen.getByTestId("app-shell")).toBeInTheDocument() expect(screen.getByTestId("app-shell")).toHaveClass("my-custom-classname") }) - test("renders all props", async () => { + test("renders all props", () => { render() expect(screen.getByTestId("app-shell")).toBeInTheDocument() expect(screen.getByTestId("app-shell")).toHaveAttribute("data-lolol", "some-prop") From d4014b6f4946d448b9331ff582eed23163d0b44b Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Mon, 12 Aug 2024 19:22:54 +0200 Subject: [PATCH 12/33] feat(ui): optional wrapper class name for complex components (#192) * feat(ui) ComboBox: add `wrapperClassname` prop * feat(ui) DateTimePicker: add `wrapperClassname` prop * feat(ui) NativeSelect: add `wrapperClassname` prop * feat(ui) Select: add `wrapperClassname` prop * feat(ui) Switch: add `wrapperClassname` prop * feat(ui) TextInput: add `wrapperClassname` prop * feat(ui) Textarea: add `wrapperClassName` prop * Create wrapperClassName.md * doc(wrapperClassName): added more detailed explanation for wrapperClassname compared to className * fix(tests): remove unnecessary async --------- Co-authored-by: Esther Schmitz --- .changeset/wrapperClassName.md | 13 +++++ .../components/ComboBox/ComboBox.component.js | 6 +- .../src/components/ComboBox/ComboBox.test.js | 6 ++ .../DateTimePicker.component.js | 5 ++ .../DateTimePicker/DateTimePicker.test.js | 6 ++ .../NativeSelect/NativeSelect.component.js | 12 +++- .../NativeSelect/NativeSelect.test.js | 38 +++++++----- .../src/components/Select/Select.component.js | 6 +- .../src/components/Select/Select.test.js | 10 ++++ .../src/components/Switch/Switch.component.js | 6 +- .../src/components/Switch/Switch.test.js | 52 +++++++++-------- .../TextInput/TextInput.component.js | 6 +- .../components/TextInput/TextInput.test.js | 58 ++++++++++--------- .../components/Textarea/Textarea.component.js | 6 +- .../src/components/Textarea/Textarea.test.js | 48 ++++++++------- 15 files changed, 185 insertions(+), 93 deletions(-) create mode 100644 .changeset/wrapperClassName.md diff --git a/.changeset/wrapperClassName.md b/.changeset/wrapperClassName.md new file mode 100644 index 000000000..1d5ae9b75 --- /dev/null +++ b/.changeset/wrapperClassName.md @@ -0,0 +1,13 @@ +--- +"@cloudoperators/juno-ui-components": minor +--- + +`wrapperClassName` prop added to the following components: + +- ComboBox +- DateTimePicker +- NativeSelect +- Select +- Switch +- Textarea +- TextInput diff --git a/packages/ui-components/src/components/ComboBox/ComboBox.component.js b/packages/ui-components/src/components/ComboBox/ComboBox.component.js index 2a31f69c9..e7fc20d23 100644 --- a/packages/ui-components/src/components/ComboBox/ComboBox.component.js +++ b/packages/ui-components/src/components/ComboBox/ComboBox.component.js @@ -161,6 +161,7 @@ export const ComboBox = ({ value = "", valueLabel, width = "full", + wrapperClassName = "", ...props }) => { const isNotEmptyString = (str) => { @@ -286,6 +287,7 @@ export const ComboBox = ({ jn-relative ${width == "auto" ? "jn-inline-block" : "jn-block"} ${width == "auto" ? "jn-w-auto" : "jn-w-full"} + ${wrapperClassName} `} > element. This can be useful if you must add styling to the outermost wrapping element of this component, e.g. for positioning. */ + wrapperClassName: PropTypes.string, } diff --git a/packages/ui-components/src/components/ComboBox/ComboBox.test.js b/packages/ui-components/src/components/ComboBox/ComboBox.test.js index e14fdadc7..d165de214 100644 --- a/packages/ui-components/src/components/ComboBox/ComboBox.test.js +++ b/packages/ui-components/src/components/ComboBox/ComboBox.test.js @@ -533,6 +533,12 @@ describe("ComboBox", () => { expect(cbox).toHaveValue("option 2") }) + test("renders a wrapperClassName to the outer wrapping
element", async () => { + render() + expect(document.querySelector(".juno-combobox-wrapper")).toBeInTheDocument() + expect(document.querySelector(".juno-combobox-wrapper")).toHaveClass("my-wrapper-class") + }) + test("renders a ComboBox with a custom className as passed", async () => { await waitFor(() => render( diff --git a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js index 1b076bded..0645f4006 100644 --- a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js +++ b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js @@ -129,6 +129,7 @@ export const DateTimePicker = ({ value, weekNumbers, width, + wrapperClassName, ...props }) => { // always generate auto-id string using the useId hook to avoid "more hooks than in previous render" error when removing custom id: @@ -434,6 +435,7 @@ export const DateTimePicker = ({ juno-datetimepicker-wrapper ${width == "auto" ? "jn-inline-block" : "jn-block"} ${width == "auto" ? "jn-w-auto" : "jn-w-full"} + ${wrapperClassName} `} >
@@ -594,6 +596,8 @@ DateTimePicker.propTypes = { weekNumbers: PropTypes.bool, /** The width of the datepicker input. Either 'full' (default) or 'auto'. */ width: PropTypes.oneOf(["full", "auto"]), + /** Pass a custom className to the wrapping element. This can be useful if you must add styling to the outermost wrapping element of this component, e.g. for positioning. */ + wrapperClassName: PropTypes.string, } // can't get rid of this, as if we transform it to a default values using vanilla JS, two tests will fail @@ -646,4 +650,5 @@ DateTimePicker.defaultProps = { value: "", weekNumbers: false, width: "full", + wrapperClassName: "", } diff --git a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js index 009fe6806..ec8d48f76 100644 --- a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js +++ b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js @@ -941,6 +941,12 @@ describe("DateTimePicker", () => { expect(mockOnMonthChange).toHaveBeenCalled() }) + test("renders a wrapperClassName to the outer wrapping element", () => { + render() + expect(document.querySelector(".juno-datetimepicker-wrapper")).toBeInTheDocument() + expect(document.querySelector(".juno-datetimepicker-wrapper")).toHaveClass("my-wrapper-class") + }) + test("renders a className as passed", async () => { await waitFor(() => render( diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js b/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js index fc408926a..7d2e4bf1f 100644 --- a/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js +++ b/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js @@ -119,6 +119,7 @@ export const NativeSelect = ({ error = false, onChange, onClick, + wrapperClassName = "", ...props }) => { const [isLoading, setIsLoading] = useState(false) @@ -183,7 +184,12 @@ export const NativeSelect = ({ } return ( -
+
+ Option 1 + + ) + expect(document.querySelector(".juno-select-wrapper ")).toBeInTheDocument() + expect(document.querySelector(".juno-select-wrapper ")).toHaveClass("my-wrapper-class") +}) diff --git a/packages/ui-components/src/components/Switch/Switch.component.js b/packages/ui-components/src/components/Switch/Switch.component.js index 1dd1e1aea..814668bd0 100644 --- a/packages/ui-components/src/components/Switch/Switch.component.js +++ b/packages/ui-components/src/components/Switch/Switch.component.js @@ -124,6 +124,7 @@ export const Switch = ({ className = "", onChange = undefined, onClick = undefined, + wrapperClassName = "", ...props }) => { const isNotEmptyString = (str) => { @@ -171,6 +172,7 @@ export const Switch = ({ className={` juno-switch-wrapper ${switchWrapperStyles} + ${wrapperClassName} `} >