From 4d4781cce55869f3fa685bf946d7ac29c0031ac0 Mon Sep 17 00:00:00 2001 From: Catalin <20538711+devcatalin@users.noreply.github.com> Date: Thu, 23 Nov 2023 13:39:08 +0200 Subject: [PATCH 1/3] chore: display names for styled components in development (#952) * chore: display names for styled comps in dev mode * chore: install dev dep * fix: craco config babel loader * fix: package json --- package-lock.json | 1 + packages/web/craco.config.js | 11 +++++++++++ packages/web/package.json | 1 + 3 files changed, 13 insertions(+) diff --git a/package-lock.json b/package-lock.json index d55cf3fae..3f6ac114d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24005,6 +24005,7 @@ "@types/react-transition-group": "4.4.4", "@types/semver": "^7.5.0", "@types/styled-components": "5.1.18", + "babel-plugin-styled-components": "^2.1.4", "file-loader": "6.2.0", "less": "4.1.2", "postcss-styled-syntax": "0.4.0", diff --git a/packages/web/craco.config.js b/packages/web/craco.config.js index 7adbdcf86..aaf224c45 100644 --- a/packages/web/craco.config.js +++ b/packages/web/craco.config.js @@ -77,6 +77,17 @@ module.exports = { return webpackConfig; }, }, + babel: { + loaderOptions: babelLoaderOptions => { + if (process.env.NODE_ENV === 'development') { + if (!babelLoaderOptions.plugins) { + babelLoaderOptions.plugins = []; + } + babelLoaderOptions.plugins.push('babel-plugin-styled-components'); + } + return babelLoaderOptions; + }, + }, jest: { configure: config => ({ ...config, diff --git a/packages/web/package.json b/packages/web/package.json index 76ff9dd7a..51304e168 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -40,6 +40,7 @@ "@types/react-transition-group": "4.4.4", "@types/semver": "^7.5.0", "@types/styled-components": "5.1.18", + "babel-plugin-styled-components": "^2.1.4", "file-loader": "6.2.0", "less": "4.1.2", "postcss-styled-syntax": "0.4.0", From 3f539b48e87c807881e5422b76d75e121656203d Mon Sep 17 00:00:00 2001 From: Bogdan Hanea Date: Thu, 23 Nov 2023 16:57:24 +0200 Subject: [PATCH 2/3] feat: adjust testkube naming (#941) --- CONTRIBUTING.md | 215 ++++++++++-------- README.md | 125 +++++----- .../GlobalSettings/General/ConnectCloud.tsx | 10 +- .../components/AiInsightsTab.spec.tsx | 12 +- .../components/AiInsightsTab.tsx | 6 +- .../plugins/sider-cloud-migrate/plugin.tsx | 2 +- .../components/StatusPagesPromoPage.tsx | 2 +- packages/web/src/utils/externalLinks.ts | 14 +- 8 files changed, 216 insertions(+), 170 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7d9a2a91a..cde93ff88 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -5,7 +5,7 @@ This document helps to start development of the Testkube Dashboard. ## Table of Contents 1. [Set Environment](#set-environment) - 1. [Running own Testkube](#running-own-testkube) + 1. [Running own Testkube](#running-own-testkube) 1. [Custom API Version](#custom-api-version) 2. [Environment Variables](#environment-variables) 3. [Starting Dashboard](#starting-dashboard) @@ -33,8 +33,9 @@ This document helps to start development of the Testkube Dashboard. The Dashboard is getting data from the Testkube installation. For development, you may either: -* use `https://demo.testkube.io/results/v1` or any other existing test environment -* run own Testkube installation + +- use `https://demo.testkube.io/results/v1` or any other existing test environment +- run own Testkube installation Either way, it may be useful to have [**Testkube CLI**](https://docs.testkube.io/articles/install-cli/) installed. @@ -45,21 +46,24 @@ To run the Testkube, you need to have Kubernetes cluster, and `kubectl` connecte >
> :eight_spoked_asterisk: Running Kubernetes cluster locally >
-> -> For local development it may be easiest to use [**K3D**](https://k3d.io/v5.6.0/), [**Minikube**](https://minikube.sigs.k8s.io/docs/start/), -> or the one built in [Docker Desktop](https://docs.docker.com/desktop/kubernetes/) (but it's heavy). +> +> For local development it may be easiest to use [**K3D**](https://k3d.io/v5.6.0/), +> [**Minikube**](https://minikube.sigs.k8s.io/docs/start/), or the one built in +> [Docker Desktop](https://docs.docker.com/desktop/kubernetes/) (but it's heavy). +> >
-To install the Testkube in your cluster, you may either run `testkube install` command, or install it from the [**helm chart**](https://docs.testkube.io/articles/helm-chart/). +To install the Testkube in your cluster, you may either run `testkube install` command, or install it from the +[**helm chart**](https://docs.testkube.io/articles/helm-chart/). -After the Testkube is installed, you should run `testkube dashboard` command, -that will forward ports for Testkube API from your cluster to `http://localhost:8088/v1`. +After the Testkube is installed, you should run `testkube dashboard` command, that will forward ports for Testkube API +from your cluster to `http://localhost:8088/v1`. #### Custom API Version -If you need to use custom API version, i.e. latest from the [**develop**](https://github.com/kubeshop/testkube/tree/develop) branch, -you may upgrade Testkube installation to a specific version, -by overriding the image tag in the Helm chart to the expected commit hash: +If you need to use custom API version, i.e. latest from the +[**develop**](https://github.com/kubeshop/testkube/tree/develop) branch, you may upgrade Testkube installation to a +specific version, by overriding the image tag in the Helm chart to the expected commit hash: ```bash helm repo add kubeshop https://kubeshop.github.io/helm-charts && \ @@ -80,70 +84,75 @@ Follow [**Running Dashboard > Repository**](README.md#repository) steps to start ## Code Quality -We aim to keep the best code quality. It doesn't mean that all the code great, -yet we try to have it covered with tests, standardize the syntax, and isolate problems. +We aim to keep the best code quality. It doesn't mean that all the code great, yet we try to have it covered with tests, +standardize the syntax, and isolate problems. ### Process -To ensure that we continuously deliver good quality, -most of our checks are performed automatically during the Pull Request review. +To ensure that we continuously deliver good quality, most of our checks are performed automatically during the Pull +Request review. ### Linter -We use modified Prettier configuration ([**config**](.prettierrc.js)) for code style, -and lint the code against it and common mistakes with ESLint ([**config**](.eslintrc.js)). +We use modified Prettier configuration ([**config**](.prettierrc.js)) for code style, and lint the code against it and +common mistakes with ESLint ([**config**](.eslintrc.js)). Additionally, for styles (including the styled-components) we are using StyleLint ([**config**](.stylelintrc.json)). -* To run ESLint, you may run `npm run lint` command -* To run Prettier, you may run `npm run format:all` command *(but we encourage to configure IDE to run Prettier on save)* -* To run StyleLint, you may run `npm run stylelint` +- To run ESLint, you may run `npm run lint` command +- To run Prettier, you may run `npm run format:all` command _(but we encourage to configure IDE to run Prettier on + save)_ +- To run StyleLint, you may run `npm run stylelint` ### Unit Tests -We use [**Jest**](https://jestjs.io/) as our main test runner. Additionally, you may use [**Wallaby.js**](https://wallabyjs.com/) to run them with better experience in the IDE. +We use [**Jest**](https://jestjs.io/) as our main test runner. Additionally, you may use +[**Wallaby.js**](https://wallabyjs.com/) to run them with better experience in the IDE. The tests are next to tested files, with `.spec.ts` or `.spec.tsx` extension. We aim into having unit tests for every new feature, along with the Pull Request. -* To run unit tests, you may run `npm test` command -* To run unit tests with watching for a changes, you may run `npm run test:watch` command +- To run unit tests, you may run `npm test` command +- To run unit tests with watching for a changes, you may run `npm run test:watch` command >
> :warning: Technical debt >
> -> Unfortunately, we have a technical debt for old components, -> that are not well covered. We try to write unit tests for them in spare time or when editing, -> but a lot is too complex to cover and needs a refactor before to reduce the complexity. +> Unfortunately, we have a technical debt for old components, that are not well covered. We try to write unit tests for +> them in spare time or when editing, but a lot is too complex to cover and needs a refactor before to reduce the +> complexity. +> >
### E2E Tests -We write E2E tests using [**Playwright**](https://playwright.dev/). The E2E tests are in the [`packages/e2e-tests`](packages/e2e-tests) directory. +We write E2E tests using [**Playwright**](https://playwright.dev/). The E2E tests are in the +[`packages/e2e-tests`](packages/e2e-tests) directory. We aim into having unit tests for bigger features, after the release. -During the Pull Request checks, the E2E tests are run against generated [**Vercel preview**](#preview) and `demo.testkube.dev`'s API. +During the Pull Request checks, the E2E tests are run against generated [**Vercel preview**](#preview) and +`demo.testkube.dev`'s API. -* Before running E2E tests, you need to install browser for Playwright with `npx playwright install` command -* To run E2E tests, you may run `npm run e2e` command -* To run E2E tests with better interface for development, you may run `npm run e2e:watch` +- Before running E2E tests, you need to install browser for Playwright with `npx playwright install` command +- To run E2E tests, you may run `npm run e2e` command +- To run E2E tests with better interface for development, you may run `npm run e2e:watch` >
> :warning: Technical debt >
> -> We have some critical paths not covered, and we aim into covering them before new features, -> in spare time, or allocated time after other features. +> We have some critical paths not covered, and we aim into covering them before new features, in spare time, or +> allocated time after other features. +> >
## Preview -For every Pull Request, we are deploying the frontend as a Vercel preview. -When the Pull Request is created, there is automatically added a comment there, -with link to the generated preview. +For every Pull Request, we are deploying the frontend as a Vercel preview. When the Pull Request is created, there is +automatically added a comment there, with link to the generated preview. It's not connected to any Testkube environment, so you have to put the API endpoint there. @@ -153,121 +162,135 @@ It has telemetry disabled - to override it, add `?~gtm_id=GTM-PQK4DKN&~disable_t ### Technology Stack -* [**TypeScript**](https://www.typescriptlang.org/) - we use TypeScript for all the code -* [**Zustand**](https://github.com/pmndrs/zustand) - we use for the state management -* [**RTK Query**](https://redux-toolkit.js.org/rtk-query/overview) - we use for communication with the [**Testkube REST API**](https://github.com/kubeshop/testkube/blob/develop/api/v1/testkube.yaml) -* [**Create React App**](https://create-react-app.dev/) with [**CRACO**](https://craco.js.org/) - we use for the build process -* [**Antd 4.x**](https://4x.ant.design/) - we use as the main UI library -* [**Jest**](https://jestjs.io/) and [**Testing Library**](https://testing-library.com/) - we use for unit tests -* [**Playwright**](https://playwright.dev/) - we use for E2E tests +- [**TypeScript**](https://www.typescriptlang.org/) - we use TypeScript for all the code +- [**Zustand**](https://github.com/pmndrs/zustand) - we use for the state management +- [**RTK Query**](https://redux-toolkit.js.org/rtk-query/overview) - we use for communication with the + [**Testkube REST API**](https://github.com/kubeshop/testkube/blob/develop/api/v1/testkube.yaml) +- [**Create React App**](https://create-react-app.dev/) with [**CRACO**](https://craco.js.org/) - we use for the build + process +- [**Antd 4.x**](https://4x.ant.design/) - we use as the main UI library +- [**Jest**](https://jestjs.io/) and [**Testing Library**](https://testing-library.com/) - we use for unit tests +- [**Playwright**](https://playwright.dev/) - we use for E2E tests >
> :warning: Deprecation: Create React App >
-> +> > As CRA is deprecated for long time, we plan to move to [**Vite**](https://vitejs.dev/). -> -> It has a significant effort though, especially that we are using Monaco Editor with its [**Webpack plugin**](https://www.npmjs.com/package/monaco-editor-webpack-plugin) to reduce bundle size. +> +> It has a significant effort though, especially that we are using Monaco Editor with its +> [**Webpack plugin**](https://www.npmjs.com/package/monaco-editor-webpack-plugin) to reduce bundle size. +> >
>
> :warning: Deprecation: RTK Query >
-> -> We plan to move to GraphQL (probably with Apollo) mutations, queries and subscriptions, -> but we need to finish ongoing back-end work before. +> +> We plan to move to GraphQL (probably with Apollo) mutations, queries and subscriptions, but we need to finish ongoing +> back-end work before. +> >
>
> :warning: Deprecation: Antd 4.x >
-> -> The Antd 5.x is alive for a long time, so we may consider migrating there. -> It will require significant effort though. +> +> The Antd 5.x is alive for a long time, so we may consider migrating there. It will require significant effort though. > > As a side note, after migrating, we would like to have light/dark mode introduced. +> >
>
> :warning: Consideration: Zustand >
-> -> We may consider getting rid of Zustand, -> as our [**plugin system**](#plugins-system) is able to store the data in a similar way. > -> It would make the code slightly simpler. The plugins system is a new thing though, so we are not fully familiar with it yet, during day-to-day development. +> We may consider getting rid of Zustand, as our [**plugin system**](#plugins-system) is able to store the data in a +> similar way. +> +> It would make the code slightly simpler. The plugins system is a new thing though, so we are not fully familiar with +> it yet, during day-to-day development. +> >
### Mono-repository -The `testkube-dashboard` repository is a mono-repository configured with the NPM. -All the packages are in the [`packages`](packages) directory, and have `@testkube/` name prefix. +The `testkube-dashboard` repository is a mono-repository configured with the NPM. All the packages are in the +[`packages`](packages) directory, and have `@testkube/` name prefix. The package that is exactly the Dashboard, is called [`web`](packages/web). -Running `npm install` from the root directory will install all the dependencies for all packages, -while running different commands like `npm run lint` or `npm test` will do that for all packages too. +Running `npm install` from the root directory will install all the dependencies for all packages, while running +different commands like `npm run lint` or `npm test` will do that for all packages too. >
> :warning: Technical debt: Monolithic `web` >
-> -> The mono-repository has been introduced lately, so we had no time yet to split the code to corresponding packages. -> We should improve that in the coming weeks. +> +> The mono-repository has been introduced lately, so we had no time yet to split the code to corresponding packages. We +> should improve that in the coming weeks. +> >
>
> :warning: We plan to use nx in future >
-> +> > Thanks to that, we will be able to build boilerplate code for i.e. plugins automatically. +> >
### Build Process -When `npm start` is run, the development build is performed and the application with hot reload is available at [**localhost:3000**](http://localhost:3000). +When `npm start` is run, the development build is performed and the application with hot reload is available at +[**localhost:3000**](http://localhost:3000). To build application for the production, you have to run `npm run build` command. -To test application with the production build, you may run `npm run start:prod` command, -that will build the package and serve it on [**localhost:3000**](http://localhost:3000). +To test application with the production build, you may run `npm run start:prod` command, that will build the package and +serve it on [**localhost:3000**](http://localhost:3000). ### Plugins System Lately we have started efforts towards the plugins system. -Thanks to that, we are able to prepare features that are OSS-only, Cloud-only or under the feature flag. +Thanks to that, we are able to prepare features that are OSS-only, Pro-only or under the feature flag. -At the moment the plugins are created in [`packages/web/src/plugins`](packages/web/src/plugins). You may read the [**plugin system documentation here**](packages/plugins/README.md). +At the moment the plugins are created in [`packages/web/src/plugins`](packages/web/src/plugins). You may read the +[**plugin system documentation here**](packages/plugins/README.md). To add a new plugin, update the list in [`packages/web/src/AppRoot.tsx`](packages/web/src/AppRoot.tsx#L47) file. >
> :warning: Technical debt: all the plugins are in `web` package >
-> -> At the moment, because of issues with TypeScript types across packages (due to aliases in `web` package), -> all the plugins are in [`packages/web/src/plugins`](packages/web/src/plugins) directory. -> +> +> At the moment, because of issues with TypeScript types across packages (due to aliases in `web` package), all the +> plugins are in [`packages/web/src/plugins`](packages/web/src/plugins) directory. +> > We plan to move them to separate packages in the future. +> >
>
> :warning: Technical debt: some plugins are more like stubs >
-> -> We have introduced the system lately, and most of the functionality is not migrated fully. -> Most often it's referring the components that are not lying directly in the plugin directory, -> but instead refer to the files from general codebase. -> +> +> We have introduced the system lately, and most of the functionality is not migrated fully. Most often it's referring +> the components that are not lying directly in the plugin directory, but instead refer to the files from general +> codebase. +> > We plan to migrate them with time. +> >
>
> :eight_spoked_asterisk: Future enhancement >
-> +> > We want to allow community plugins as well. +> >
## Releases @@ -280,29 +303,34 @@ When we have some features and bugfixes ready, we release them with the patch ve ### Release process -You may use the [**Create Release PR**](https://github.com/kubeshop/testkube-dashboard/blob/develop/.github/workflows/create-release-pr.yml) manual workflow. +You may use the +[**Create Release PR**](https://github.com/kubeshop/testkube-dashboard/blob/develop/.github/workflows/create-release-pr.yml) +manual workflow. Alternatively, you may do steps manually: -* Create a new release branch from `develop` (like `release/v1.16.3`) -* Rebase on top of `origin/main` branch (or merge if it's not possible) -* Create a PR to `main` branch -* Merge it (don't squash!) -* Tag the `main` branch to expected release (i.e. `git tag v1.16.3 && git push --tags`) +- Create a new release branch from `develop` (like `release/v1.16.3`) +- Rebase on top of `origin/main` branch (or merge if it's not possible) +- Create a PR to `main` branch +- Merge it (don't squash!) +- Tag the `main` branch to expected release (i.e. `git tag v1.16.3 && git push --tags`) ### Feature Flags For new features, we are able to use feature flags. -* To check the status of the feature flag, you may use [`useFeatureFlag`](packages/web/src/feature-flags/hooks.ts) hook -* The feature flags are added by [**GTM**](https://tagmanager.google.com/), mostly from the [**PostHog**](https://posthog.com/) -* To switch the feature flag locally, you may dispatch the feature-flags event (like `const event = new Event('feature-flags'); event.data = {flag1: true}; window.dispatchEvent(event)`) +- To check the status of the feature flag, you may use [`useFeatureFlag`](packages/web/src/feature-flags/hooks.ts) hook +- The feature flags are added by [**GTM**](https://tagmanager.google.com/), mostly from the + [**PostHog**](https://posthog.com/) +- To switch the feature flag locally, you may dispatch the feature-flags event (like + `const event = new Event('feature-flags'); event.data = {flag1: true}; window.dispatchEvent(event)`) >
> :eight_spoked_asterisk: Future enhancement >
-> +> > We could allow feature flags in a similar way as we handle environment variables overrides in the query string. +> >
### Telemetry @@ -325,9 +353,12 @@ Additionally, don't forget to update the [**Telemetry docs**](telemetry.md). ### Issue Tracking -We are using GitHub issues in the [**kubeshop/testkube**](https://github.com/kubeshop/testkube/issues?q=is%3Aopen+is%3Aissue+label%3A%22service%3Adashboard+%F0%9F%8E%A1%22) repository. +We are using GitHub issues in the +[**kubeshop/testkube**](https://github.com/kubeshop/testkube/issues?q=is%3Aopen+is%3Aissue+label%3A%22service%3Adashboard+%F0%9F%8E%A1%22) +repository. -Additionally, for internal project tracking we are using [**Linear**](https://linear.app/kubeshop/team/TKC/active), and [**Notion**](https://www.notion.so/) for specs. +Additionally, for internal project tracking we are using [**Linear**](https://linear.app/kubeshop/team/TKC/active), and +[**Notion**](https://www.notion.so/) for specs. ### Error Reporting diff --git a/README.md b/README.md index 5894aaec7..473569991 100644 --- a/README.md +++ b/README.md @@ -32,13 +32,13 @@ Dashboard to manage your [**Testkube**](https://testkube.io) cluster and monitor its real-time results. -The Dashboard is deployed as an application in the cluster. -It runs in a browser, and it communicates with the [**Testkube API Server**](https://github.com/kubeshop/testkube) via Ingress Controller (either provided or bundled). +The Dashboard is deployed as an application in the cluster. It runs in a browser, and it communicates with the +[**Testkube API Server**](https://github.com/kubeshop/testkube) via Ingress Controller (either provided or bundled). ## Table of Contents 1. [Running Dashboard](#running-dashboard) - 1. [Bundled](#bundled) + 1. [Bundled](#bundled) 2. [Repository](#repository) 3. [Docker](#docker) 2. [Configuring Application](#configuring-application) @@ -55,33 +55,38 @@ It runs in a browser, and it communicates with the [**Testkube API Server**](htt By default, Dashboard is installed in your cluster along with your Testkube system. -To use the bundled Dashboard, run `testkube dashboard` command with [**Testkube CLI**](https://docs.testkube.io/articles/install-cli/), -to forward the UI and API ports from the Kubernetes cluster. +To use the bundled Dashboard, run `testkube dashboard` command with +[**Testkube CLI**](https://docs.testkube.io/articles/install-cli/), to forward the UI and API ports from the Kubernetes +cluster. >
-> :warning: Testkube Cloud and Enterprise +> :warning: Testkube Pro and Enterprise >
-> -> This Dashboard works only for the Testkube Open Source installations. -> To manage the Testkube in Enterprise or Cloud offering, use their corresponding dashboards: -> * [**cloud.testkube.io**](https://cloud.testkube.io?utm_source=github-dashboard) for Testkube Cloud -> * Your Enterprise URL for Testkube Enterprise +> +> This Dashboard works only for the Testkube Open Source installations. To manage the Testkube in Enterprise or Pro +> offering, use their corresponding dashboards: +> +> - [**app.testkube.io**](https://app.testkube.io?utm_source=github-dashboard) for Testkube Pro +> - Your Enterprise URL for Testkube Enterprise >
>
> :eight_spoked_asterisk: Disable bundling dashboard >
-> -> To disable Dashboard installation with the Testkube system, you may use `testkube-dashboard.enabled=false` value in the [**Helm chart**](https://github.com/kubeshop/helm-charts/tree/main/charts/testkube). +> +> To disable Dashboard installation with the Testkube system, you may use `testkube-dashboard.enabled=false` value in +> the [**Helm chart**](https://github.com/kubeshop/helm-charts/tree/main/charts/testkube). +> >
### Repository To run the Testkube Dashboard for development: -* Install Node 20.x -* Fork the repository and clone it (or just clone it, if you are Testkube member or want to read it only) -* Install NPM dependencies -* Run `npm start` command + +- Install Node 20.x +- Fork the repository and clone it (or just clone it, if you are Testkube member or want to read it only) +- Install NPM dependencies +- Run `npm start` command ```bash git clone git@github.com:kubeshop/testkube-dashboard.git && cd testkube-dashboard @@ -89,27 +94,33 @@ npm install npm start ``` -To learn more about the Testkube Dashboard development and architecture, see the [**Contribution manual**](CONTRIBUTING.md). +To learn more about the Testkube Dashboard development and architecture, see the +[**Contribution manual**](CONTRIBUTING.md). >
> :eight_spoked_asterisk: Environment variables >
-> +> > To configure your [**environment variables**](#environment-variables), either: -> * create `.env` file in the repository, or -> * export the environment variables globally -> +> +> - create `.env` file in the repository, or +> - export the environment variables globally +> > You may use both [**build time**](#build-time-variables) and [**dynamic variables**](#dynamic-variables) here. > -> Please note, that you may want to use [**Create React App's variables**](https://create-react-app.dev/docs/advanced-configuration/) too, -> i.e. `BROWSER=none` to avoid opening the browser. +> Please note, that you may want to use +> [**Create React App's variables**](https://create-react-app.dev/docs/advanced-configuration/) too, i.e. `BROWSER=none` +> to avoid opening the browser. +> >
### Docker -The Docker images for the Testkube Dashboard are deployed to the Docker Hub as [**kubeshop/testkube-dashboard**](https://hub.docker.com/r/kubeshop/testkube-dashboard). +The Docker images for the Testkube Dashboard are deployed to the Docker Hub as +[**kubeshop/testkube-dashboard**](https://hub.docker.com/r/kubeshop/testkube-dashboard). -To start Dashboard using Docker, run the image with the [**dynamic environment variables**](#dynamic-variables) you would like to pass, i.e.: +To start Dashboard using Docker, run the image with the [**dynamic environment variables**](#dynamic-variables) you +would like to pass, i.e.: ```bash docker run --rm \ @@ -121,8 +132,10 @@ docker run --rm \ >
> :warning: Environment variables >
-> -> To override the [**build time environment variables**](#build-time-variables) too, you need to [**build the Docker image**](#building-docker-image) on your own. +> +> To override the [**build time environment variables**](#build-time-variables) too, you need to +> [**build the Docker image**](#building-docker-image) on your own. +> >
## Configuring Application @@ -131,24 +144,24 @@ docker run --rm \ All the Dashboard is configured with the environment variables. -Part of them is included directly in the production build, -while the rest may be modified for the running application. +Part of them is included directly in the production build, while the rest may be modified for the running application. -The latest variables are listed in [**env.ts**](packages/web/src/env.ts) file, -but for simplicity we keep them documented below too. +The latest variables are listed in [**env.ts**](packages/web/src/env.ts) file, but for simplicity we keep them +documented below too. >
> :eight_spoked_asterisk: Deep-linking overrides >
-> -> You may temporarily override the variables in the running application using the query string. -> The Dashboard seeks for query params starting with `~` and try to override any matching known variable. -> -> The query param name should be a variable name, -> but for simplicity it may omit `REACT_APP_` prefix and is case-insensitive. -> Short name from the tables above may be used. -> -> As an example, to change the API endpoint, you may use `https://demo.testkube.io?~api_server_endpoint=http://localhost:8088`. +> +> You may temporarily override the variables in the running application using the query string. The Dashboard seeks for +> query params starting with `~` and try to override any matching known variable. +> +> The query param name should be a variable name, but for simplicity it may omit `REACT_APP_` prefix and is +> case-insensitive. Short name from the tables above may be used. +> +> As an example, to change the API endpoint, you may use +> `https://demo.testkube.io?~api_server_endpoint=http://localhost:8088`. +> >
#### Build Time Variables @@ -156,7 +169,7 @@ but for simplicity we keep them documented below too. The build time environments are loaded from `process.env` during build time. | Name | Short Name | Description | -|------------------------|--------------|---------------------------------------------------------------------------| +| ---------------------- | ------------ | ------------------------------------------------------------------------- | | `REACT_APP_SENTRY_DSN` | `sentry_dsn` | [**Sentry**](https://sentry.io/) DSN for error reporting | | `REACT_APP_GTM_ID` | `gtm_id` | [**Google Tag Manager**](https://tagmanager.google.com/) ID for telemetry | | `REACT_APP_VERSION` | `version` | Dashboard version used for reporting and displaying | @@ -166,7 +179,7 @@ The build time environments are loaded from `process.env` during build time. The dynamic variables are loaded from automatically generated `env-config.js` file. | Name | Short Name | Description | -|-----------------------------------|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------| +| --------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | `REACT_APP_API_SERVER_ENDPOINT` | `api_server_endpoint` | URL for the Testkube API Server | | `REACT_APP_DISABLE_TELEMETRY` | `disable_telemetry` | Force disabling telemetry in the Dashboard | | `REACT_APP_DEBUG_TELEMETRY` | `debug_telemetry` | Display debugging information about telemetry in the console log | @@ -175,8 +188,8 @@ The dynamic variables are loaded from automatically generated `env-config.js` fi ### Building Docker Image -To build the Docker image of Testkube Dashboard locally, -simply build the [**Dockerfile**](Dockerfile), optionally with the [**environment variables**](#environment-variables) from above. +To build the Docker image of Testkube Dashboard locally, simply build the [**Dockerfile**](Dockerfile), optionally with +the [**environment variables**](#environment-variables) from above. ```bash docker build \ @@ -187,27 +200,29 @@ docker build \ >
> :eight_spoked_asterisk: Environment variables >
-> -> When you are building images with `docker build`, you may either both set the [**build time variables**](#build-time-variables), -> and set defaults for the [**dynamic variables**](#dynamic-variables). +> +> When you are building images with `docker build`, you may either both set the +> [**build time variables**](#build-time-variables), and set defaults for the +> [**dynamic variables**](#dynamic-variables). +> >
## Learn more ### Contributing and Architecture -To learn more about the Testkube Dashboard development and architecture, see the [**Contribution manual**](CONTRIBUTING.md). +To learn more about the Testkube Dashboard development and architecture, see the +[**Contribution manual**](CONTRIBUTING.md). ### Telemetry -To learn more about what custom events we expose to [**Google Tag Manager**](https://tagmanager.google.com/), -see [**Telemetry**](telemetry.md) document. +To learn more about what custom events we expose to [**Google Tag Manager**](https://tagmanager.google.com/), see +[**Telemetry**](telemetry.md) document. ### Testkube -* For the documentation of the Testkube system, see [**docs.testkube.io**](https://docs.testkube.io). -* To see the live demo, you may take a look at [**demo.testkube.io**](https://demo.testkube.io) *(some API endpoints are disabled there though, to avoid modifications)* +- For the documentation of the Testkube system, see [**docs.testkube.io**](https://docs.testkube.io). +- To see the live demo, you may take a look at [**demo.testkube.io**](https://demo.testkube.io) _(some API endpoints are + disabled there though, to avoid modifications)_ > **Unleash the power of cloud native testing in Kubernetes with Testkube.** -> -> Consider [**Testkube Cloud**](https://cloud.testkube.io?utm_source=github-dashboard) for simpler integration and more features! diff --git a/packages/web/src/components/pages/GlobalSettings/General/ConnectCloud.tsx b/packages/web/src/components/pages/GlobalSettings/General/ConnectCloud.tsx index 218eb5774..c864d97f1 100644 --- a/packages/web/src/components/pages/GlobalSettings/General/ConnectCloud.tsx +++ b/packages/web/src/components/pages/GlobalSettings/General/ConnectCloud.tsx @@ -13,13 +13,13 @@ import {externalLinks} from '@utils/externalLinks'; const ConnectCloud: React.FC = () => { return ( Learn more about{' '} - connecting to Testkube Cloud + connecting to Testkube Pro } readOnly @@ -32,11 +32,11 @@ const ConnectCloud: React.FC = () => { Multiple environments, Teams, RBAC and unique collaboration features. - Learn more about Testkube Cloud + Learn more about Testkube Pro diff --git a/packages/web/src/plugins/ai-insights-promo/components/AiInsightsTab.spec.tsx b/packages/web/src/plugins/ai-insights-promo/components/AiInsightsTab.spec.tsx index 15088c70c..88d408931 100644 --- a/packages/web/src/plugins/ai-insights-promo/components/AiInsightsTab.spec.tsx +++ b/packages/web/src/plugins/ai-insights-promo/components/AiInsightsTab.spec.tsx @@ -9,24 +9,24 @@ describe('AiInsightsTab', () => { expect(ossAiTab).toBeInTheDocument(); }); - it('should render the "This feature is available only in Testkube Cloud." text', () => { + it('should render the "This feature is available only in Testkube Pro." text', () => { render(); - const text = screen.getByText(/This feature is available only in Testkube Cloud./i); + const text = screen.getByText(/This feature is available only in Testkube Pro./i); expect(text).toBeInTheDocument(); }); - it('should render the "Start using Testkube Cloud to get AI insights for your test executions, as well as other exclusive features." text', () => { + it('should render the "Start using Testkube Pro to get AI insights for your test executions, as well as other exclusive features." text', () => { render(); const text = screen.getByText( - /Start using Testkube Cloud to get AI insights for your test executions, as well as other exclusive features./i + /Start using Testkube Pro to get AI insights for your test executions, as well as other exclusive features./i ); expect(text).toBeInTheDocument(); }); - it('should render the "Go to Testkube Cloud" button', () => { + it('should render the "Go to Testkube Pro" button', () => { render(); const button = screen.getByTestId('cloud-cta-button'); expect(button).toBeInTheDocument(); - expect(button).toHaveTextContent('Go to Testkube Cloud'); + expect(button).toHaveTextContent('Go to Testkube Pro'); }); }); diff --git a/packages/web/src/plugins/ai-insights-promo/components/AiInsightsTab.tsx b/packages/web/src/plugins/ai-insights-promo/components/AiInsightsTab.tsx index c43dadbea..90d5dd34f 100644 --- a/packages/web/src/plugins/ai-insights-promo/components/AiInsightsTab.tsx +++ b/packages/web/src/plugins/ai-insights-promo/components/AiInsightsTab.tsx @@ -14,9 +14,9 @@ const AiInsightsTab = () => ( - This feature is available only in Testkube Cloud. + This feature is available only in Testkube Pro. - Start using Testkube Cloud to get AI insights for your test executions, as well as other exclusive features. + Start using Testkube Pro to get AI insights for your test executions, as well as other exclusive features. Learn more diff --git a/packages/web/src/plugins/sider-cloud-migrate/plugin.tsx b/packages/web/src/plugins/sider-cloud-migrate/plugin.tsx index b52829caf..d3a4aea1f 100644 --- a/packages/web/src/plugins/sider-cloud-migrate/plugin.tsx +++ b/packages/web/src/plugins/sider-cloud-migrate/plugin.tsx @@ -12,7 +12,7 @@ export default createPlugin('oss/sider-cloud-migrate') .init(tk => { tk.slots.siderOtherItems.add({ icon: 'cloudMigrate', - title: 'Connect to Testkube Cloud', + title: 'Connect to Testkube Pro', size: 32, onClick: () => window.open(externalLinks.OSStoCloudMigration), }); diff --git a/packages/web/src/plugins/status-pages-promo/components/StatusPagesPromoPage.tsx b/packages/web/src/plugins/status-pages-promo/components/StatusPagesPromoPage.tsx index e3bd8a04f..0c28d7360 100644 --- a/packages/web/src/plugins/status-pages-promo/components/StatusPagesPromoPage.tsx +++ b/packages/web/src/plugins/status-pages-promo/components/StatusPagesPromoPage.tsx @@ -45,7 +45,7 @@ const StatusPagesPromoPage = () => ( - Status pages work only on Testkube Cloud. + Status pages work only on Testkube Pro.