diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index e85c6b12a..000000000
--- a/.babelrc
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "plugins": ["lodash", "angularjs-annotate"],
- "presets": [
- [
- "@babel/preset-env",
- {
- "modules": false,
- "useBuiltIns": "entry",
- "corejs": "2"
- }
- ]
- ]
-}
diff --git a/.eslintrc.yml b/.eslintrc.yml
index 9a3201f96..ef7f9f088 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -17,12 +17,75 @@ plugins:
parserOptions:
ecmaVersion: 2018
sourceType: module
+ project: './tsconfig.json'
ecmaFeatures:
modules: true
rules:
- no-control-regex: off
+ no-control-regex: 'off'
no-empty: warn
no-empty-function: warn
- no-useless-escape: off
- import/order: error
+ no-useless-escape: 'off'
+ import/order:
+ [
+ 'error',
+ {
+ pathGroups: [{ pattern: '@/**', group: 'internal' }, { pattern: '{Kubernetes,Portainer,Agent,Azure,Docker}/**', group: 'internal' }],
+ groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+ pathGroupsExcludedImportTypes: ['internal'],
+ },
+ ]
+
+settings:
+ 'import/resolver':
+ alias:
+ map:
+ - ['@', './app']
+ extensions: ['.js', '.ts', '.tsx']
+
+overrides:
+ - files:
+ - app/**/*.ts{,x}
+ parserOptions:
+ project: './tsconfig.json'
+ parser: '@typescript-eslint/parser'
+ plugins:
+ - '@typescript-eslint'
+ extends:
+ - airbnb
+ - airbnb-typescript
+ - 'plugin:eslint-comments/recommended'
+ - 'plugin:react-hooks/recommended'
+ - 'plugin:react/jsx-runtime'
+ - 'plugin:@typescript-eslint/recommended'
+ - 'plugin:@typescript-eslint/eslint-recommended'
+ - 'plugin:promise/recommended'
+ - prettier # should be last
+ settings:
+ react:
+ version: 'detect'
+ rules:
+ import/order:
+ ['error', { pathGroups: [{ pattern: '@/**', group: 'internal' }], groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], 'newlines-between': 'always' }]
+ func-style: [error, 'declaration']
+ import/prefer-default-export: off
+ no-use-before-define: ['error', { functions: false }]
+ '@typescript-eslint/no-use-before-define': ['error', { functions: false }]
+ no-shadow: 'off'
+ '@typescript-eslint/no-shadow': off
+ jsx-a11y/no-autofocus: warn
+ react/forbid-prop-types: off
+ react/require-default-props: off
+ react/no-array-index-key: off
+ react/jsx-filename-extension: [0]
+ import/no-extraneous-dependencies: ['error', { devDependencies: true }]
+ '@typescript-eslint/explicit-module-boundary-types': off
+ '@typescript-eslint/no-unused-vars': 'error'
+ '@typescript-eslint/no-explicit-any': 'error'
+ - files:
+ - app/**/*.test.*
+ extends:
+ - 'plugin:jest/recommended'
+ - 'plugin:jest/style'
+ env:
+ 'jest/globals': true
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..53c37a166
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+dist
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
index 3217d14ee..86d3c52f2 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,10 +4,20 @@
"htmlWhitespaceSensitivity": "strict",
"overrides": [
{
- "files": ["*.html"],
+ "files": [
+ "*.html"
+ ],
"options": {
"parser": "angular"
}
+ },
+ {
+ "files": [
+ "*.{j,t}sx"
+ ],
+ "options": {
+ "printWidth": 80,
+ }
}
]
-}
+}
\ No newline at end of file
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 000000000..3d6e08219
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,31 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+module.exports = {
+ stories: ['../app/**/*.stories.mdx', '../app/**/*.stories.@(ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ {
+ name: '@storybook/addon-postcss',
+ options: {
+ cssLoaderOptions: {
+ importLoaders: 1,
+ modules: {
+ localIdentName: '[path][name]__[local]',
+ auto: true,
+ exportLocalsConvention: 'camelCaseOnly',
+ },
+ },
+ },
+ },
+ ],
+ webpackFinal: (config) => {
+ config.resolve.plugins = [
+ ...(config.resolve.plugins || []),
+ new TsconfigPathsPlugin({
+ extensions: config.resolve.extensions,
+ }),
+ ];
+ return config;
+ },
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 000000000..9a31caa06
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,11 @@
+import '../app/assets/css';
+
+export const parameters = {
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
+ },
+};
diff --git a/api/http/handler/handler.go b/api/http/handler/handler.go
index 62b072e36..bed74146a 100644
--- a/api/http/handler/handler.go
+++ b/api/http/handler/handler.go
@@ -27,6 +27,7 @@ import (
"github.com/portainer/portainer/api/http/handler/ssl"
"github.com/portainer/portainer/api/http/handler/stacks"
"github.com/portainer/portainer/api/http/handler/status"
+ "github.com/portainer/portainer/api/http/handler/storybook"
"github.com/portainer/portainer/api/http/handler/tags"
"github.com/portainer/portainer/api/http/handler/teammemberships"
"github.com/portainer/portainer/api/http/handler/teams"
@@ -63,6 +64,7 @@ type Handler struct {
SSLHandler *ssl.Handler
StackHandler *stacks.Handler
StatusHandler *status.Handler
+ StorybookHandler *storybook.Handler
TagHandler *tags.Handler
TeamMembershipHandler *teammemberships.Handler
TeamHandler *teams.Handler
@@ -227,6 +229,8 @@ func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
http.StripPrefix("/api", h.WebSocketHandler).ServeHTTP(w, r)
case strings.HasPrefix(r.URL.Path, "/api/webhooks"):
http.StripPrefix("/api", h.WebhookHandler).ServeHTTP(w, r)
+ case strings.HasPrefix(r.URL.Path, "/storybook"):
+ http.StripPrefix("/storybook", h.StorybookHandler).ServeHTTP(w, r)
case strings.HasPrefix(r.URL.Path, "/"):
h.FileHandler.ServeHTTP(w, r)
}
diff --git a/api/http/handler/storybook/handler.go b/api/http/handler/storybook/handler.go
new file mode 100644
index 000000000..55bd28a87
--- /dev/null
+++ b/api/http/handler/storybook/handler.go
@@ -0,0 +1,23 @@
+package storybook
+
+import (
+ "net/http"
+ "path"
+)
+
+// Handler represents an HTTP API handler for managing static files.
+type Handler struct {
+ http.Handler
+}
+
+// NewHandler creates a handler to serve static files.
+func NewHandler(assetsPath string) *Handler {
+ h := &Handler{
+ http.FileServer(http.Dir(path.Join(assetsPath, "storybook"))),
+ }
+ return h
+}
+
+func (handler *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+ handler.Handler.ServeHTTP(w, r)
+}
diff --git a/api/http/server.go b/api/http/server.go
index 3dfe047f3..0981be1c0 100644
--- a/api/http/server.go
+++ b/api/http/server.go
@@ -38,6 +38,7 @@ import (
sslhandler "github.com/portainer/portainer/api/http/handler/ssl"
"github.com/portainer/portainer/api/http/handler/stacks"
"github.com/portainer/portainer/api/http/handler/status"
+ "github.com/portainer/portainer/api/http/handler/storybook"
"github.com/portainer/portainer/api/http/handler/tags"
"github.com/portainer/portainer/api/http/handler/teammemberships"
"github.com/portainer/portainer/api/http/handler/teams"
@@ -213,6 +214,8 @@ func (server *Server) Start() error {
stackHandler.ComposeStackManager = server.ComposeStackManager
stackHandler.StackDeployer = server.StackDeployer
+ var storybookHandler = storybook.NewHandler(server.AssetsPath)
+
var tagHandler = tags.NewHandler(requestBouncer)
tagHandler.DataStore = server.DataStore
@@ -271,6 +274,7 @@ func (server *Server) Start() error {
SSLHandler: sslHandler,
StatusHandler: statusHandler,
StackHandler: stackHandler,
+ StorybookHandler: storybookHandler,
TagHandler: tagHandler,
TeamHandler: teamHandler,
TeamMembershipHandler: teamMembershipHandler,
diff --git a/app/__mocks__/fileMock.js b/app/__mocks__/fileMock.js
new file mode 100644
index 000000000..86059f362
--- /dev/null
+++ b/app/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
diff --git a/app/__mocks__/styleMock.js b/app/__mocks__/styleMock.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/app/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/app/__module.js b/app/__module.js
index 074121e19..06502aa36 100644
--- a/app/__module.js
+++ b/app/__module.js
@@ -2,6 +2,7 @@ import './assets/css';
import '@babel/polyfill';
import angular from 'angular';
+import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
import './matomo-setup';
import analyticsModule from './angulartics.matomo';
@@ -15,6 +16,7 @@ import './portainer/__module';
angular.module('portainer', [
'ui.bootstrap',
'ui.router',
+ UI_ROUTER_REACT_HYBRID,
'ui.select',
'isteven-multi-select',
'ngSanitize',
@@ -44,7 +46,10 @@ angular.module('portainer', [
if (require) {
var req = require.context('./', true, /^(.*\.(js$))[^.]*$/im);
- req.keys().forEach(function (key) {
- req(key);
- });
+ req
+ .keys()
+ .filter((path) => !path.includes('.test'))
+ .forEach(function (key) {
+ req(key);
+ });
}
diff --git a/app/assets/css/index.js b/app/assets/css/index.js
index b812316ab..e4a01560b 100644
--- a/app/assets/css/index.js
+++ b/app/assets/css/index.js
@@ -1,4 +1,21 @@
import './rdash.css';
import './app.css';
+
+import 'ui-select/dist/select.css';
+import 'bootstrap/dist/css/bootstrap.css';
+import '@fortawesome/fontawesome-free/css/brands.css';
+import '@fortawesome/fontawesome-free/css/solid.css';
+import '@fortawesome/fontawesome-free/css/fontawesome.css';
+import 'toastr/build/toastr.css';
+import 'xterm/dist/xterm.css';
+import 'angularjs-slider/dist/rzslider.css';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/addon/lint/lint.css';
+import 'angular-json-tree/dist/angular-json-tree.css';
+import 'angular-loading-bar/build/loading-bar.css';
+import 'angular-moment-picker/dist/angular-moment-picker.min.css';
+import 'angular-multiselect/isteven-multi-select.css';
+import 'spinkit/spinkit.min.css';
+
import './theme.css';
import './vendor-override.css';
diff --git a/app/docker/views/configs/create/createConfigController.js b/app/docker/views/configs/create/createConfigController.js
index 7921bf5ac..968a2279a 100644
--- a/app/docker/views/configs/create/createConfigController.js
+++ b/app/docker/views/configs/create/createConfigController.js
@@ -1,7 +1,6 @@
import _ from 'lodash-es';
-import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
-
import angular from 'angular';
+import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
class CreateConfigController {
/* @ngInject */
diff --git a/app/docker/views/containers/create/createContainerController.js b/app/docker/views/containers/create/createContainerController.js
index 0ef8ce3d7..c626691ec 100644
--- a/app/docker/views/containers/create/createContainerController.js
+++ b/app/docker/views/containers/create/createContainerController.js
@@ -1,8 +1,8 @@
import _ from 'lodash-es';
-import * as envVarsUtils from '@/portainer/helpers/env-vars';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
+import * as envVarsUtils from '@/portainer/helpers/env-vars';
import { ContainerCapabilities, ContainerCapability } from '../../../models/containerCapabilities';
import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
import { ContainerDetailsViewModel } from '../../../models/container';
diff --git a/app/docker/views/services/create/createServiceController.js b/app/docker/views/services/create/createServiceController.js
index 0458ed513..0c9d83ded 100644
--- a/app/docker/views/services/create/createServiceController.js
+++ b/app/docker/views/services/create/createServiceController.js
@@ -1,7 +1,7 @@
import _ from 'lodash-es';
-import * as envVarsUtils from '@/portainer/helpers/env-vars';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
+import * as envVarsUtils from '@/portainer/helpers/env-vars';
import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
require('./includes/update-restart.html');
diff --git a/app/docker/views/services/edit/serviceController.js b/app/docker/views/services/edit/serviceController.js
index 717ee0218..64dccbcad 100644
--- a/app/docker/views/services/edit/serviceController.js
+++ b/app/docker/views/services/edit/serviceController.js
@@ -19,9 +19,8 @@ require('./includes/updateconfig.html');
import _ from 'lodash-es';
-import * as envVarsUtils from '@/portainer/helpers/env-vars';
-
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
+import * as envVarsUtils from '@/portainer/helpers/env-vars';
angular.module('portainer.docker').controller('ServiceController', [
'$q',
diff --git a/app/global.d.ts b/app/global.d.ts
new file mode 100644
index 000000000..95ad34bd9
--- /dev/null
+++ b/app/global.d.ts
@@ -0,0 +1,8 @@
+declare module '*.jpg' {
+ export default '' as string;
+}
+declare module '*.png' {
+ export default '' as string;
+}
+
+declare module '*.css';
diff --git a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js
index cbb423cfb..d8ba54165 100644
--- a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js
+++ b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js
@@ -1,8 +1,8 @@
+import _ from 'lodash-es';
import { KubernetesApplicationDeploymentTypes, KubernetesApplicationTypes } from 'Kubernetes/models/application/models';
import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
import { KubernetesConfigurationTypes } from 'Kubernetes/models/configuration/models';
-import _ from 'lodash-es';
angular.module('portainer.docker').controller('KubernetesApplicationsDatatableController', [
'$scope',
diff --git a/app/kubernetes/components/helm/helm-templates/helm-templates.controller.js b/app/kubernetes/components/helm/helm-templates/helm-templates.controller.js
index abfed0c44..cb5b3e35f 100644
--- a/app/kubernetes/components/helm/helm-templates/helm-templates.controller.js
+++ b/app/kubernetes/components/helm/helm-templates/helm-templates.controller.js
@@ -1,5 +1,5 @@
-import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
import _ from 'lodash-es';
+import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
export default class HelmTemplatesController {
/* @ngInject */
diff --git a/app/kubernetes/converters/secret.js b/app/kubernetes/converters/secret.js
index 16920f784..8f824e631 100644
--- a/app/kubernetes/converters/secret.js
+++ b/app/kubernetes/converters/secret.js
@@ -1,7 +1,7 @@
+import _ from 'lodash-es';
import { KubernetesSecretCreatePayload, KubernetesSecretUpdatePayload } from 'Kubernetes/models/secret/payloads';
import { KubernetesApplicationSecret } from 'Kubernetes/models/secret/models';
import { KubernetesPortainerConfigurationDataAnnotation } from 'Kubernetes/models/configuration/models';
-import _ from 'lodash-es';
import { KubernetesPortainerConfigurationOwnerLabel } from 'Kubernetes/models/configuration/models';
import { KubernetesConfigurationFormValuesEntry } from 'Kubernetes/models/configuration/formvalues';
diff --git a/app/kubernetes/endpoint/converter.js b/app/kubernetes/endpoint/converter.js
index 6dd728785..2d63e67ad 100644
--- a/app/kubernetes/endpoint/converter.js
+++ b/app/kubernetes/endpoint/converter.js
@@ -1,5 +1,5 @@
-import { KubernetesEndpoint, KubernetesEndpointAnnotationLeader, KubernetesEndpointSubset } from 'Kubernetes/endpoint/models';
import _ from 'lodash-es';
+import { KubernetesEndpoint, KubernetesEndpointAnnotationLeader, KubernetesEndpointSubset } from 'Kubernetes/endpoint/models';
class KubernetesEndpointConverter {
static apiToEndpoint(data) {
diff --git a/app/kubernetes/helpers/configurationHelper.js b/app/kubernetes/helpers/configurationHelper.js
index 93e29af43..1393905b2 100644
--- a/app/kubernetes/helpers/configurationHelper.js
+++ b/app/kubernetes/helpers/configurationHelper.js
@@ -1,7 +1,7 @@
-import { KubernetesConfigurationTypes } from 'Kubernetes/models/configuration/models';
-import { KubernetesConfigurationFormValuesEntry } from 'Kubernetes/models/configuration/formvalues';
import _ from 'lodash-es';
import YAML from 'yaml';
+import { KubernetesConfigurationTypes } from 'Kubernetes/models/configuration/models';
+import { KubernetesConfigurationFormValuesEntry } from 'Kubernetes/models/configuration/formvalues';
class KubernetesConfigurationHelper {
static getUsingApplications(config, applications) {
diff --git a/app/kubernetes/helpers/stackHelper.test.js b/app/kubernetes/helpers/stackHelper.test.js
new file mode 100644
index 000000000..0d5056331
--- /dev/null
+++ b/app/kubernetes/helpers/stackHelper.test.js
@@ -0,0 +1,12 @@
+import KubernetesStackHelper from './stackHelper';
+
+describe('stacksFromApplications', () => {
+ const { stacksFromApplications } = KubernetesStackHelper;
+ test('should return an empty array when passed an empty array', () => {
+ expect(stacksFromApplications([])).toHaveLength(0);
+ });
+
+ test('should return an empty array when passed a list of applications without stacks', () => {
+ expect(stacksFromApplications([{ StackName: '' }, { StackName: '' }, { StackName: '' }, { StackName: '' }])).toHaveLength(0);
+ });
+});
diff --git a/app/kubernetes/node/converter.js b/app/kubernetes/node/converter.js
index a7dc4d313..1abe1df77 100644
--- a/app/kubernetes/node/converter.js
+++ b/app/kubernetes/node/converter.js
@@ -1,10 +1,10 @@
import _ from 'lodash-es';
+import * as JsonPatch from 'fast-json-patch';
import { KubernetesNode, KubernetesNodeDetails, KubernetesNodeTaint, KubernetesNodeAvailabilities, KubernetesPortainerNodeDrainLabel } from 'Kubernetes/node/models';
import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
import { KubernetesNodeFormValues, KubernetesNodeTaintFormValues, KubernetesNodeLabelFormValues } from 'Kubernetes/node/formValues';
import { KubernetesNodeCreatePayload, KubernetesNodeTaintPayload } from 'Kubernetes/node/payload';
-import * as JsonPatch from 'fast-json-patch';
class KubernetesNodeConverter {
static apiToNode(data, res) {
diff --git a/app/kubernetes/views/volumes/edit/volumeController.js b/app/kubernetes/views/volumes/edit/volumeController.js
index 8d52bb9a3..0a6e77c51 100644
--- a/app/kubernetes/views/volumes/edit/volumeController.js
+++ b/app/kubernetes/views/volumes/edit/volumeController.js
@@ -1,9 +1,9 @@
import angular from 'angular';
import _ from 'lodash-es';
+import filesizeParser from 'filesize-parser';
import KubernetesVolumeHelper from 'Kubernetes/helpers/volumeHelper';
import KubernetesEventHelper from 'Kubernetes/helpers/eventHelper';
import { KubernetesStorageClassAccessPolicies } from 'Kubernetes/models/storage-class/models';
-import filesizeParser from 'filesize-parser';
import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
class KubernetesVolumeController {
diff --git a/app/portainer/components/Link.tsx b/app/portainer/components/Link.tsx
new file mode 100644
index 000000000..2a3540921
--- /dev/null
+++ b/app/portainer/components/Link.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { UISref, UISrefProps } from '@uirouter/react';
+
+export function Link({
+ children,
+ ...props
+}: { children: ReactNode } & UISrefProps) {
+ return (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+
+ {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+ {children}
+
+ );
+}
diff --git a/app/portainer/components/ReactExample.module.css b/app/portainer/components/ReactExample.module.css
new file mode 100644
index 000000000..d168e5304
--- /dev/null
+++ b/app/portainer/components/ReactExample.module.css
@@ -0,0 +1,3 @@
+.red-bg {
+ background: red;
+}
diff --git a/app/portainer/components/ReactExample.stories.tsx b/app/portainer/components/ReactExample.stories.tsx
new file mode 100644
index 000000000..afe921214
--- /dev/null
+++ b/app/portainer/components/ReactExample.stories.tsx
@@ -0,0 +1,23 @@
+import { UIRouter, pushStateLocationPlugin } from '@uirouter/react';
+import { Meta } from '@storybook/react';
+
+import { ReactExample } from './ReactExample';
+
+const meta: Meta = {
+ title: 'ReactExample',
+ component: ReactExample,
+};
+
+export default meta;
+
+interface Props {
+ text: string;
+}
+
+export function Example({ text }: Props) {
+ return (
+
+
+
+ );
+}
diff --git a/app/portainer/components/ReactExample.test.tsx b/app/portainer/components/ReactExample.test.tsx
new file mode 100644
index 000000000..2245dcada
--- /dev/null
+++ b/app/portainer/components/ReactExample.test.tsx
@@ -0,0 +1,11 @@
+import { render } from '@/react-tools/test-utils';
+
+import { ReactExample } from './ReactExample';
+
+test('loads component', async () => {
+ const text = 'hello';
+
+ const { getByText } = render();
+
+ expect(getByText(text)).toBeInTheDocument();
+});
diff --git a/app/portainer/components/ReactExample.tsx b/app/portainer/components/ReactExample.tsx
new file mode 100644
index 000000000..a1c21bbc6
--- /dev/null
+++ b/app/portainer/components/ReactExample.tsx
@@ -0,0 +1,34 @@
+import { useSref } from '@uirouter/react';
+
+import { react2angular } from '@/react-tools/react2angular';
+
+import { Link } from './Link';
+import styles from './ReactExample.module.css';
+
+export interface ReactExampleProps {
+ /**
+ * Example text to displayed in the component.
+ */
+ text: string;
+}
+
+export function ReactExample({ text }: ReactExampleProps) {
+ const route = 'portainer.registries';
+ const { onClick, href } = useSref(route);
+
+ return (
+
+ {text}
+
+
+ Registries Link
+
+