diff --git a/app/assets/ico/oauth.svg b/app/assets/ico/oauth.svg index 8a5a83e02..09faac70f 100644 --- a/app/assets/ico/oauth.svg +++ b/app/assets/ico/oauth.svg @@ -1,4 +1,8 @@ - - - - + + + + \ No newline at end of file diff --git a/app/assets/ico/vendor/dockercompose.svg b/app/assets/ico/vendor/docker-compose.svg similarity index 100% rename from app/assets/ico/vendor/dockercompose.svg rename to app/assets/ico/vendor/docker-compose.svg diff --git a/app/docker/views/images/build/buildimage.html b/app/docker/views/images/build/buildimage.html index 3e7488149..ae900da87 100644 --- a/app/docker/views/images/build/buildimage.html +++ b/app/docker/views/images/build/buildimage.html @@ -76,37 +76,39 @@
Build method
-
-
-
- - -
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
+
+ + +
diff --git a/app/edge/components/edge-job-form/edgeJobForm.html b/app/edge/components/edge-job-form/edgeJobForm.html index a7e293257..2cd229adc 100644 --- a/app/edge/components/edge-job-form/edgeJobForm.html +++ b/app/edge/components/edge-job-form/edgeJobForm.html @@ -34,27 +34,29 @@
Edge job configuration
-
-
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
@@ -151,28 +153,29 @@
Job content
-
-
-
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
diff --git a/app/edge/components/edge-stack-deployment-type-selector/edge-stack-deployment-type-selector.controller.js b/app/edge/components/edge-stack-deployment-type-selector/edge-stack-deployment-type-selector.controller.js index d0f2de8d7..d28847ae9 100644 --- a/app/edge/components/edge-stack-deployment-type-selector/edge-stack-deployment-type-selector.controller.js +++ b/app/edge/components/edge-stack-deployment-type-selector/edge-stack-deployment-type-selector.controller.js @@ -1,13 +1,15 @@ +import { compose, kubernetes } from '@@/BoxSelector/common-options/deployment-methods'; + export default class EdgeStackDeploymentTypeSelectorController { /* @ngInject */ constructor() { this.deploymentOptions = [ - { id: 'deployment_compose', icon: 'fab fa-docker', label: 'Compose', description: 'Docker compose format', value: 0 }, { - id: 'deployment_kube', - icon: 'fa fa-cubes', - label: 'Kubernetes', - description: 'Kubernetes manifest format', + ...compose, + value: 0, + }, + { + ...kubernetes, value: 1, disabled: () => { return this.hasDockerEndpoint(); diff --git a/app/edge/components/group-form/groupForm.html b/app/edge/components/group-form/groupForm.html index e4aa984b3..9bbb584b6 100644 --- a/app/edge/components/group-form/groupForm.html +++ b/app/edge/components/group-form/groupForm.html @@ -26,27 +26,29 @@
Group type
-
-
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
@@ -78,27 +80,29 @@
Tags
-
-
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
diff --git a/app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.controller.js b/app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.controller.js index cb4f0c73e..4a0def6a1 100644 --- a/app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.controller.js +++ b/app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.controller.js @@ -1,14 +1,11 @@ +import { editor, git, template, upload } from '@@/BoxSelector/common-options/build-methods'; + class DockerComposeFormController { /* @ngInject */ constructor($async, EdgeTemplateService, Notifications) { Object.assign(this, { $async, EdgeTemplateService, Notifications }); - this.methodOptions = [ - { id: 'method_editor', icon: 'edit', featherIcon: true, label: 'Web editor', description: 'Use our Web editor', value: 'editor' }, - { id: 'method_upload', icon: 'upload', featherIcon: true, label: 'Upload', description: 'Upload from your computer', value: 'upload' }, - { id: 'method_repository', icon: 'github', featherIcon: true, label: 'Repository', description: 'Use a git repository', value: 'repository' }, - { id: 'method_template', icon: 'file-text', featherIcon: true, label: 'Template', description: 'Use an Edge stack template', value: 'template' }, - ]; + this.methodOptions = [editor, upload, git, template]; this.selectedTemplate = null; diff --git a/app/edge/views/edge-stacks/createEdgeStackView/kube-manifest-form/kube-manifest-form.controller.js b/app/edge/views/edge-stacks/createEdgeStackView/kube-manifest-form/kube-manifest-form.controller.js index 0e2b415d4..f60476d3f 100644 --- a/app/edge/views/edge-stacks/createEdgeStackView/kube-manifest-form/kube-manifest-form.controller.js +++ b/app/edge/views/edge-stacks/createEdgeStackView/kube-manifest-form/kube-manifest-form.controller.js @@ -1,13 +1,11 @@ +import { editor, git, upload } from '@@/BoxSelector/common-options/build-methods'; + class KubeManifestFormController { /* @ngInject */ constructor($async) { Object.assign(this, { $async }); - this.methodOptions = [ - { id: 'method_editor', icon: 'edit', featherIcon: true, label: 'Web editor', description: 'Use our Web editor', value: 'editor' }, - { id: 'method_upload', icon: 'upload', featherIcon: true, label: 'Upload', description: 'Upload from your computer', value: 'upload' }, - { id: 'method_repository', icon: 'github', featherIcon: true, label: 'Repository', description: 'Use a git repository', value: 'repository' }, - ]; + this.methodOptions = [editor, upload, git]; this.onChangeFileContent = this.onChangeFileContent.bind(this); this.onChangeFormValues = this.onChangeFormValues.bind(this); diff --git a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js index 2a32a3e76..91ec7b4b5 100644 --- a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js +++ b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.controller.js @@ -1,17 +1,14 @@ -import { buildOption } from '@/portainer/components/BoxSelector'; import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel'; import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils'; import { isBE } from '@/portainer/feature-flags/feature-flags.service'; +import { editor, upload } from '@@/BoxSelector/common-options/build-methods'; class KubeCreateCustomTemplateViewController { /* @ngInject */ constructor($async, $state, Authentication, CustomTemplateService, FormValidator, ModalService, Notifications, ResourceControlService) { Object.assign(this, { $async, $state, Authentication, CustomTemplateService, FormValidator, ModalService, Notifications, ResourceControlService }); - this.methodOptions = [ - buildOption('method_editor', 'svg-custom', 'Web editor', 'Use our Web editor', 'editor'), - buildOption('method_upload', 'svg-upload', 'Upload', 'Upload from your computer', 'upload'), - ]; + this.methodOptions = [editor, upload]; this.templates = null; this.isTemplateVariablesEnabled = isBE; diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html index cd067de08..7c472ff11 100644 --- a/app/kubernetes/views/applications/create/createApplication.html +++ b/app/kubernetes/views/applications/create/createApplication.html @@ -709,83 +709,85 @@
-
-
-
- - -
-
- -
@@ -897,56 +899,58 @@
-
-
-
- - -
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
+
+ + +
@@ -1234,39 +1238,41 @@
-
-
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
diff --git a/app/kubernetes/views/configurations/create/createConfiguration.html b/app/kubernetes/views/configurations/create/createConfiguration.html index 8da37f7cd..3c22b350f 100644 --- a/app/kubernetes/views/configurations/create/createConfiguration.html +++ b/app/kubernetes/views/configurations/create/createConfiguration.html @@ -87,27 +87,29 @@
-
-
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
diff --git a/app/kubernetes/views/deploy/deployController.js b/app/kubernetes/views/deploy/deployController.js index cbb106f80..f8059d447 100644 --- a/app/kubernetes/views/deploy/deployController.js +++ b/app/kubernetes/views/deploy/deployController.js @@ -5,9 +5,10 @@ import uuidv4 from 'uuid/v4'; import PortainerError from '@/portainer/error'; import { KubernetesDeployManifestTypes, KubernetesDeployBuildMethods, KubernetesDeployRequestMethods, RepositoryMechanismTypes } from 'Kubernetes/models/deploy'; -import { buildOption } from '@/portainer/components/BoxSelector'; import { renderTemplate } from '@/react/portainer/custom-templates/components/utils'; import { isBE } from '@/portainer/feature-flags/feature-flags.service'; +import { compose, kubernetes } from '@@/BoxSelector/common-options/deployment-methods'; +import { editor, git, template, url } from '@@/BoxSelector/common-options/build-methods'; class KubernetesDeployController { /* @ngInject */ @@ -27,15 +28,15 @@ class KubernetesDeployController { this.isTemplateVariablesEnabled = isBE; this.deployOptions = [ - buildOption('method_kubernetes', 'svg-kubernetes', 'Kubernetes', 'Kubernetes manifest format', KubernetesDeployManifestTypes.KUBERNETES), - buildOption('method_compose', 'svg-dockercompose', 'Compose', 'Docker compose format', KubernetesDeployManifestTypes.COMPOSE), + { ...kubernetes, value: KubernetesDeployManifestTypes.KUBERNETES }, + { ...compose, value: KubernetesDeployManifestTypes.COMPOSE }, ]; this.methodOptions = [ - buildOption('method_repo', 'svg-git', 'Git Repository', 'Use a git repository', KubernetesDeployBuildMethods.GIT), - buildOption('method_editor', 'svg-custom', 'Web editor', 'Use our Web editor', KubernetesDeployBuildMethods.WEB_EDITOR), - buildOption('method_url', 'svg-url', 'URL', 'Specify a URL to a file', KubernetesDeployBuildMethods.URL), - buildOption('method_template', 'svg-template', 'Custom Template', 'Use a custom template', KubernetesDeployBuildMethods.CUSTOM_TEMPLATE), + { ...git, value: KubernetesDeployBuildMethods.GIT }, + { ...editor, value: KubernetesDeployBuildMethods.WEB_EDITOR }, + { ...url, value: KubernetesDeployBuildMethods.URL }, + { ...template, value: KubernetesDeployBuildMethods.CUSTOM_TEMPLATE }, ]; this.state = { diff --git a/app/portainer/access-control/EditDetails/EditDetails.tsx b/app/portainer/access-control/EditDetails/EditDetails.tsx index 50126076a..ce870e891 100644 --- a/app/portainer/access-control/EditDetails/EditDetails.tsx +++ b/app/portainer/access-control/EditDetails/EditDetails.tsx @@ -47,16 +47,12 @@ export function EditDetails({ return ( <> -
-
- handleChangeOwnership(ownership)} - /> -
-
+ handleChangeOwnership(ownership)} + /> {values.ownership === ResourceControlOwnership.RESTRICTED && (
diff --git a/app/portainer/access-control/EditDetails/useOptions.ts b/app/portainer/access-control/EditDetails/useOptions.tsx similarity index 86% rename from app/portainer/access-control/EditDetails/useOptions.ts rename to app/portainer/access-control/EditDetails/useOptions.tsx index d5c10b26e..3b5f19715 100644 --- a/app/portainer/access-control/EditDetails/useOptions.ts +++ b/app/portainer/access-control/EditDetails/useOptions.tsx @@ -6,6 +6,7 @@ import { ownershipIcon } from '@/portainer/filters/filters'; import { Team } from '@/portainer/teams/types'; import { BoxSelectorOption } from '@@/BoxSelector/types'; +import { BadgeIcon } from '@@/BoxSelector/BadgeIcon'; import { ResourceControlOwnership } from '../types'; @@ -15,7 +16,7 @@ const publicOption: BoxSelectorOption = { id: 'access_public', description: 'I want any user with access to this environment to be able to manage this resource', - icon: ownershipIcon('public'), + icon: , }; export function useOptions( @@ -40,14 +41,14 @@ function adminOptions() { return [ buildOption( 'access_administrators', - ownershipIcon('administrators'), + , 'Administrators', 'I want to restrict the management of this resource to administrators only', ResourceControlOwnership.ADMINISTRATORS ), buildOption( 'access_restricted', - ownershipIcon('restricted'), + , 'Restricted', 'I want to restrict the management of this resource to a set of users and/or teams', ResourceControlOwnership.RESTRICTED @@ -58,7 +59,7 @@ function nonAdminOptions(teams?: Team[]) { return _.compact([ buildOption( 'access_private', - ownershipIcon('private'), + , 'Private', 'I want to this resource to be manageable by myself only', ResourceControlOwnership.PRIVATE @@ -67,7 +68,7 @@ function nonAdminOptions(teams?: Team[]) { teams.length > 0 && buildOption( 'access_restricted', - ownershipIcon('restricted'), + , 'Restricted', teams.length === 1 ? `I want any member of my team (${teams[0].Name}) to be able to manage this resource` diff --git a/app/portainer/components/BoxSelector/utils.ts b/app/portainer/components/BoxSelector/utils.ts index 97524780c..6fb1dbc09 100644 --- a/app/portainer/components/BoxSelector/utils.ts +++ b/app/portainer/components/BoxSelector/utils.ts @@ -1,15 +1,16 @@ import { FeatureId } from '@/portainer/feature-flags/enums'; import { BoxSelectorOption } from '@@/BoxSelector/types'; +import { IconProps } from '@@/Icon'; export function buildOption( id: string, - icon: string, + icon: IconProps['icon'], label: string, description: string, value: T, feature?: FeatureId, - featherIcon?: boolean + featherIcon?: IconProps['featherIcon'] ): BoxSelectorOption { return { id, icon, label, description, value, feature, featherIcon }; } diff --git a/app/portainer/components/accessControlForm/porAccessControlForm.html b/app/portainer/components/accessControlForm/porAccessControlForm.html index 756b47c7a..645c9cfaa 100644 --- a/app/portainer/components/accessControlForm/porAccessControlForm.html +++ b/app/portainer/components/accessControlForm/porAccessControlForm.html @@ -15,51 +15,54 @@
-
-
-
- - -
-
- - -
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
diff --git a/app/portainer/components/endpointSecurity/porEndpointSecurity.html b/app/portainer/components/endpointSecurity/porEndpointSecurity.html index 841cd4841..57592cccd 100644 --- a/app/portainer/components/endpointSecurity/porEndpointSecurity.html +++ b/app/portainer/components/endpointSecurity/porEndpointSecurity.html @@ -24,47 +24,49 @@
-
-
-
- - -
-
- - -
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
diff --git a/app/portainer/components/theme/theme-settings.html b/app/portainer/components/theme/theme-settings.html index 4aa471045..58da733ba 100644 --- a/app/portainer/components/theme/theme-settings.html +++ b/app/portainer/components/theme/theme-settings.html @@ -2,10 +2,8 @@ -
- + -

diff --git a/app/portainer/filters/filters.js b/app/portainer/filters/filters.js index d984d2199..3dd4493da 100644 --- a/app/portainer/filters/filters.js +++ b/app/portainer/filters/filters.js @@ -2,6 +2,7 @@ import moment from 'moment'; import _ from 'lodash-es'; import filesize from 'filesize'; +import { Eye, EyeOff, Users } from 'react-feather'; import { ResourceControlOwnership as RCO } from '@/portainer/access-control/types'; export function truncateLeftRight(text, max, left, right) { @@ -106,13 +107,13 @@ export function environmentTypeIcon(type) { export function ownershipIcon(ownership) { switch (ownership) { case RCO.PRIVATE: - return 'eye-off'; + return EyeOff; case RCO.ADMINISTRATORS: - return 'eye-off'; + return EyeOff; case RCO.RESTRICTED: - return 'users'; + return Users; default: - return 'eye'; + return Eye; } } diff --git a/app/portainer/oauth/components/oauth-providers-selector/oauth-options.tsx b/app/portainer/oauth/components/oauth-providers-selector/oauth-options.tsx index f33bb95d2..38f9a5197 100644 --- a/app/portainer/oauth/components/oauth-providers-selector/oauth-options.tsx +++ b/app/portainer/oauth/components/oauth-providers-selector/oauth-options.tsx @@ -1,8 +1,11 @@ +import { Edit } from 'react-feather'; + import { FeatureId } from '@/portainer/feature-flags/enums'; import Microsoft from '@/assets/ico/vendor/microsoft.svg?c'; import Google from '@/assets/ico/vendor/google.svg?c'; import Github from '@/assets/ico/vendor/github.svg?c'; -import Custom from '@/assets/ico/custom.svg?c'; + +import { BadgeIcon } from '@@/BoxSelector/BadgeIcon'; export const options = [ { @@ -32,7 +35,7 @@ export const options = [ }, { id: 'custom', - icon: Custom, + icon: , label: 'Custom', description: 'Custom OAuth provider', value: 'custom', diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts index 825dd9052..4b8ba672d 100644 --- a/app/portainer/react/components/index.ts +++ b/app/portainer/react/components/index.ts @@ -15,6 +15,7 @@ import { TableColumnHeaderAngular } from '@@/datatables/TableHeaderCell'; import { DashboardItem } from '@@/DashboardItem'; import { SearchBar } from '@@/datatables/SearchBar'; import { FallbackImage } from '@@/FallbackImage'; +import { BadgeIcon } from '@@/BoxSelector/BadgeIcon'; import { fileUploadField } from './file-upload-field'; import { switchField } from './switch-field'; @@ -83,4 +84,8 @@ export const componentsModule = angular .component( 'datatableSearchbar', r2a(SearchBar, ['data-cy', 'onChange', 'value', 'placeholder']) + ) + .component( + 'boxSelectorBadgeIcon', + react2angular(BadgeIcon, ['featherIcon', 'icon']) ).name; diff --git a/app/portainer/settings/authentication/ldap/ldap-settings/ldap-options.tsx b/app/portainer/settings/authentication/ldap/ldap-settings/ldap-options.tsx index c08a72c0e..9b381bda3 100644 --- a/app/portainer/settings/authentication/ldap/ldap-settings/ldap-options.tsx +++ b/app/portainer/settings/authentication/ldap/ldap-settings/ldap-options.tsx @@ -1,6 +1,9 @@ +import { Edit } from 'react-feather'; + import { FeatureId } from '@/portainer/feature-flags/enums'; import Openldap from '@/assets/ico/vendor/openldap.svg?c'; -import Custom from '@/assets/ico/custom.svg?c'; + +import { BadgeIcon } from '@@/BoxSelector/BadgeIcon'; const SERVER_TYPES = { CUSTOM: 0, @@ -11,7 +14,7 @@ const SERVER_TYPES = { export const options = [ { id: 'ldap_custom', - icon: Custom, + icon: , label: 'Custom', value: SERVER_TYPES.CUSTOM, }, diff --git a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html index bab837018..0c9643c9a 100644 --- a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html +++ b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html @@ -15,38 +15,39 @@

Build method
-
-
-
-
- - -
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
+
+ + +
diff --git a/app/portainer/views/devices/profiles/add/addProfile.html b/app/portainer/views/devices/profiles/add/addProfile.html index c735533ca..b2bfddcb1 100644 --- a/app/portainer/views/devices/profiles/add/addProfile.html +++ b/app/portainer/views/devices/profiles/add/addProfile.html @@ -16,18 +16,19 @@
Profile configuration
-
-
-
-
- - +
+
+
+
+ + +
diff --git a/app/portainer/views/devices/profiles/edit/editProfile.html b/app/portainer/views/devices/profiles/edit/editProfile.html index a243ad8a2..212591704 100644 --- a/app/portainer/views/devices/profiles/edit/editProfile.html +++ b/app/portainer/views/devices/profiles/edit/editProfile.html @@ -17,17 +17,19 @@
Profile configuration
-
-
-
- - +
+
+
+
+ + +
diff --git a/app/portainer/views/init/admin/initAdmin.html b/app/portainer/views/init/admin/initAdmin.html index b8987163a..88f46d8bd 100644 --- a/app/portainer/views/init/admin/initAdmin.html +++ b/app/portainer/views/init/admin/initAdmin.html @@ -138,29 +138,33 @@
-
-
- -