github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(be-teaser): mute styles [EE-6035] (#10350)

pull/10370/head
Ali 2023-09-24 19:56:18 +01:00 committed by GitHub
parent 8f42ba0254
commit b60f32a25b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 604 additions and 616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/css/theme.css
View File

@ -87,7 +87,7 @@
--orange-1: #e86925;
--BE-only: var(--ui-warning-7);
--BE-only: var(--ui-gray-6);
--text-log-viewer-color-json-grey: var(--text-log-viewer-color);
--text-log-viewer-color-json-magenta: var(--text-log-viewer-color);
@ -259,8 +259,7 @@
/* Dark Theme */
[theme='dark'] {
--BE-only: var(--ui-blue-8);
--bg-BE-only: rgba(225, 223, 223, 0.08);
--BE-only: var(--ui-gray-6);
--text-log-viewer-color-json-grey: var(--text-log-viewer-color);
--text-log-viewer-color-json-magenta: var(--text-log-viewer-color);
@ -434,6 +433,7 @@
/* High Contrast Theme */
[theme='highcontrast'] {
--BE-only: var(--ui-gray-6);
--text-log-viewer-color-json-grey: var(--text-log-viewer-color);
--text-log-viewer-color-json-magenta: var(--text-log-viewer-color);
--text-log-viewer-color-json-yellow: var(--text-log-viewer-color);

2
app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html
View File

@ -1,5 +1,5 @@
<a class="vertical-center be-indicator ml-5" href="{{ $ctrl.url }}" target="_blank" rel="noopener" ng-if="$ctrl.limitedToBE">
<ng-transclude></ng-transclude>
<pr-icon icon="'briefcase'" class-name="'space-right be-indicator-icon'"></pr-icon>
<span class="be-indicator-label">Business Edition Feature</span>
<span class="be-indicator-label">Business Feature</span>
</a>

2
app/portainer/components/accessManagement/porAccessManagementController.js
View File

@ -76,7 +76,7 @@ class PorAccessManagementController {
}
if (this.isRoleLimitedToBE(role)) {
return `${role.Name} (Business Edition Feature)`;
return `${role.Name} (Business Feature)`;
}
return `${role.Name} (Default)`;

210
app/portainer/oauth/components/oauth-settings/oauth-settings.html
View File

@ -169,68 +169,46 @@
<oauth-providers-selector on-change="($ctrl.onSelectProvider)" value="$ctrl.state.provider"></oauth-providers-selector>
<div class="col-sm-12 form-section-title">OAuth Configuration</div>
<div class="form-group" ng-if="$ctrl.state.provider == 'microsoft'">
<label for="oauth_microsoft_tenant_id" class="col-sm-3 col-lg-2 control-label text-left">
Tenant ID
<portainer-tooltip message="'ID of the Azure Directory you wish to authenticate against. Also known as the Directory ID'"></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
<input
type="text"
class="form-control"
id="oauth_microsoft_tenant_id"
placeholder="xxxxxxxxxxxxxxxxxxxx"
ng-model="$ctrl.state.microsoftTenantID"
ng-change="$ctrl.onMicrosoftTenantIDChange()"
limited-feature-dir="{{::$ctrl.limitedFeature}}"
limited-feature-class="limited-be"
limited-feature-disabled
limited-feature-tabindex="-1"
required
/>
</div>
</div>
<div class="form-group">
<label for="oauth_client_id" class="col-sm-3 col-lg-2 control-label text-left">
{{ $ctrl.state.provider == 'microsoft' ? 'Application ID' : 'Client ID' }}
<portainer-tooltip message="'Public identifier of the OAuth application'"></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
<input
type="text"
id="oauth_client_id"
ng-model="$ctrl.settings.ClientID"
placeholder="xxxxxxxxxxxxxxxxxxxx"
ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
tabindex="{{ $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' ? -1 : 0 }}"
/>
</div>
</div>
<div class="form-group">
<label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left">
{{ $ctrl.state.provider == 'microsoft' ? 'Application key' : 'Client secret' }}
</label>
<div class="col-sm-9 col-lg-10">
<input
type="password"
class="form-control"
id="oauth_client_secret"
ng-model="$ctrl.settings.ClientSecret"
placeholder="xxxxxxxxxxxxxxxxxxxx"
autocomplete="new-password"
ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
tabindex="{{ $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' ? -1 : 0 }}"
/>
</div>
</div>
<div ng-if="$ctrl.state.provider == 'custom' || $ctrl.state.overrideConfiguration">
<div class="col-sm-12 form-section-title">OAuth Configuration</div>
<div class="form-group">
<label for="oauth_client_id" class="col-sm-3 col-lg-2 control-label text-left">
{{ $ctrl.state.provider == 'microsoft' ? 'Application ID' : 'Client ID' }}
<portainer-tooltip message="'Public identifier of the OAuth application'"></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
<input
type="text"
id="oauth_client_id"
ng-model="$ctrl.settings.ClientID"
placeholder="xxxxxxxxxxxxxxxxxxxx"
ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
tabindex="{{ $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' ? -1 : 0 }}"
/>
</div>
</div>
<div class="form-group">
<label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left">
{{ $ctrl.state.provider == 'microsoft' ? 'Application key' : 'Client secret' }}
</label>
<div class="col-sm-9 col-lg-10">
<input
type="password"
class="form-control"
id="oauth_client_secret"
ng-model="$ctrl.settings.ClientSecret"
placeholder="xxxxxxxxxxxxxxxxxxxx"
autocomplete="new-password"
ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
tabindex="{{ $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' ? -1 : 0 }}"
/>
</div>
</div>
<div class="form-group">
<label for="oauth_authorization_uri" class="col-sm-3 col-lg-2 control-label text-left">
Authorization URL
@ -363,26 +341,100 @@
/>
</div>
</div>
<save-auth-settings-button
on-save-settings="($ctrl.onSaveSettings)"
save-button-state="($ctrl.saveButtonState)"
save-button-disabled="!$ctrl.isOAuthTeamMembershipFormValid() || oauthSettingsForm.$invalid"
limited-feature-id="$ctrl.limitedFeature"
limited-feature-class="$ctrl.limitedFeatureClass"
class-name="'oauth-save-settings-button'"
></save-auth-settings-button>
</div>
<div class="form-group" ng-if="$ctrl.state.provider != 'custom'">
<div class="col-sm-12">
<a class="small interactive vertical-center" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
<pr-icon icon="'wrench'"></pr-icon>
Override default configuration
</a>
<a class="small interactive vertical-center" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.useDefaultProviderConfiguration($ctrl.state.provider)">
<pr-icon icon="'settings'"></pr-icon>
Use default configuration
</a>
<div ng-if="$ctrl.state.provider != 'custom'" class="limited-be">
<div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
<div class="limited-be-content">
<div class="col-sm-12 form-section-title">OAuth Configuration</div>
<div class="form-group" ng-if="$ctrl.state.provider == 'microsoft'">
<label for="oauth_microsoft_tenant_id" class="col-sm-3 col-lg-2 control-label text-left">
Tenant ID
<portainer-tooltip message="'ID of the Azure Directory you wish to authenticate against. Also known as the Directory ID'"></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
<input
type="text"
class="form-control"
id="oauth_microsoft_tenant_id"
placeholder="xxxxxxxxxxxxxxxxxxxx"
ng-model="$ctrl.state.microsoftTenantID"
ng-change="$ctrl.onMicrosoftTenantIDChange()"
limited-feature-dir="{{::$ctrl.limitedFeature}}"
limited-feature-class="limited-be"
limited-feature-disabled
limited-feature-tabindex="-1"
required
/>
</div>
</div>
<div class="form-group">
<label for="oauth_client_id" class="col-sm-3 col-lg-2 control-label text-left">
{{ $ctrl.state.provider == 'microsoft' ? 'Application ID' : 'Client ID' }}
<portainer-tooltip message="'Public identifier of the OAuth application'"></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
<input
type="text"
id="oauth_client_id"
ng-model="$ctrl.settings.ClientID"
placeholder="xxxxxxxxxxxxxxxxxxxx"
ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
tabindex="{{ $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' ? -1 : 0 }}"
/>
</div>
</div>
<div class="form-group">
<label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left">
{{ $ctrl.state.provider == 'microsoft' ? 'Application key' : 'Client secret' }}
</label>
<div class="col-sm-9 col-lg-10">
<input
type="password"
class="form-control"
id="oauth_client_secret"
ng-model="$ctrl.settings.ClientSecret"
placeholder="xxxxxxxxxxxxxxxxxxxx"
autocomplete="new-password"
ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
tabindex="{{ $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' ? -1 : 0 }}"
/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<a class="small interactive vertical-center" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
<pr-icon icon="'wrench'"></pr-icon>
Override default configuration
</a>
<a class="small interactive vertical-center" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.useDefaultProviderConfiguration($ctrl.state.provider)">
<pr-icon icon="'settings'"></pr-icon>
Use default configuration
</a>
</div>
</div>
<save-auth-settings-button
on-save-settings="($ctrl.onSaveSettings)"
save-button-state="($ctrl.saveButtonState)"
save-button-disabled="!$ctrl.isOAuthTeamMembershipFormValid() || oauthSettingsForm.$invalid"
limited-feature-id="$ctrl.limitedFeature"
limited-feature-class="$ctrl.limitedFeatureClass"
class-name="'oauth-save-settings-button'"
></save-auth-settings-button>
</div>
</div>
<save-auth-settings-button
on-save-settings="($ctrl.onSaveSettings)"
save-button-state="($ctrl.saveButtonState)"
save-button-disabled="!$ctrl.isOAuthTeamMembershipFormValid() || oauthSettingsForm.$invalid"
limited-feature-id="$ctrl.limitedFeature"
limited-feature-class="$ctrl.limitedFeatureClass"
class-name="'oauth-save-settings-button'"
></save-auth-settings-button>
</ng-form>

3
app/portainer/react/components/index.ts
View File

@ -71,7 +71,6 @@ export const ngModule = angular
'message',
'buttonText',
'className',
'icon',
'buttonClassName',
])
)
@ -82,7 +81,7 @@ export const ngModule = angular
.component(
'portainerTooltip',
r2a(Tooltip, ['message', 'position', 'className', 'setHtmlMessage'])
r2a(Tooltip, ['message', 'position', 'className', 'setHtmlMessage', 'size'])
)
.component('badge', r2a(Badge, ['type', 'className']))
.component('fileUploadField', fileUploadField)

7
app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
View File

@ -1,9 +1,6 @@
<ng-form class="ad-settings" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-class="limited-be">
<div class="overlay">
<div class="limited-be-link vertical-center"
><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator
><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
></div>
<div>
<div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator></div>
<div class="limited-be-content">
<auto-user-provision-toggle ng-model="$ctrl.settings.AutoCreateUsers">
<field-description>

124
app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
View File

@ -2,73 +2,71 @@
Auto-populate team admins <be-feature-indicator feature="$ctrl.limitedFeatureId" class="space-left" ng-if="$ctrl.isLimitedFeatureSelfContained"></be-feature-indicator>
</div>
<rd-widget ng-repeat="config in $ctrl.settings.AdminGroupSearchSettings | limitTo: (1 - $ctrl.settings.AdminGroupSearchSettings)">
<rd-widget-body>
<div class="form-group mb-3" ng-if="$index > 0">
<span class="col-sm-12 text-muted small"> Extra search configuration </span>
<div class="w-full px-5 pt-3" ng-repeat="config in $ctrl.settings.AdminGroupSearchSettings | limitTo: (1 - $ctrl.settings.AdminGroupSearchSettings)">
<div class="form-group mb-3" ng-if="$index > 0">
<span class="col-sm-12 text-muted small"> Extra search configuration </span>
</div>
<div class="form-group">
<label for="ldap_admin_group_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
Group Base DN
<portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for groups.'"></portainer-tooltip>
</label>
<div class="col-sm-8 col-md-4">
<input
type="text"
class="form-control"
id="ldap_admin_group_basedn_{{ $index }}"
ng-model="config.GroupBaseDN"
placeholder="dc=ldap,dc=domain,dc=tld"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
limited-feature-tabindex="-1"
/>
</div>
<div class="form-group">
<label for="ldap_admin_group_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
Group Base DN
<portainer-tooltip message="'The distinguished name of the element from which the LDAP server will search for groups.'"></portainer-tooltip>
</label>
<div class="col-sm-8 col-md-4">
<input
type="text"
class="form-control"
id="ldap_admin_group_basedn_{{ $index }}"
ng-model="config.GroupBaseDN"
placeholder="dc=ldap,dc=domain,dc=tld"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
limited-feature-tabindex="-1"
/>
</div>
<label for="ldap_admin_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
Group Membership Attribute
<portainer-tooltip message="'LDAP attribute which denotes the group membership.'"></portainer-tooltip>
</label>
<div class="col-sm-8 col-md-4">
<input
type="text"
class="form-control"
id="ldap_admin_group_att_{{ $index }}"
ng-model="config.GroupAttribute"
placeholder="member"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
limited-feature-tabindex="-1"
/>
</div>
<label for="ldap_admin_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
Group Membership Attribute
<portainer-tooltip message="'LDAP attribute which denotes the group membership.'"></portainer-tooltip>
</label>
<div class="col-sm-8 col-md-4">
<input
type="text"
class="form-control"
id="ldap_admin_group_att_{{ $index }}"
ng-model="config.GroupAttribute"
placeholder="member"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
limited-feature-tabindex="-1"
/>
</div>
<div class="form-group">
<label for="ldap_admin_group_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
Group Filter
<portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
</label>
<div class="col-sm-8 col-md-10 vertical-center">
<input
type="text"
class="form-control"
id="ldap_admin_group_filter_{{ $index }}"
ng-model="config.GroupFilter"
placeholder="(objectClass=groupOfNames)"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
limited-feature-tabindex="-1"
/>
<button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
<pr-icon icon="'trash-2'" size="'md'"></pr-icon>
</button>
</div>
</div>
<div class="form-group">
<label for="ldap_admin_group_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
Group Filter
<portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
</label>
<div class="col-sm-8 col-md-10 vertical-center">
<input
type="text"
class="form-control"
id="ldap_admin_group_filter_{{ $index }}"
ng-model="config.GroupFilter"
placeholder="(objectClass=groupOfNames)"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
limited-feature-tabindex="-1"
/>
<button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
<pr-icon icon="'trash-2'" size="'md'"></pr-icon>
</button>
</div>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="form-group mt-3">
<div class="col-sm-12">

154
app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
View File

@ -1,88 +1,78 @@
<rd-widget>
<rd-widget-body>
<div ng-if="$ctrl.index > 0" style="margin-bottom: 10px">
<span class="text-muted small"> Extra search configuration </span>
<button
class="btn btn-sm btn-danger"
type="button"
ng-click="$ctrl.onRemoveClick($ctrl.index)"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>
<pr-icon icon="'trash-2'"></pr-icon>
</button>
<div class="w-full px-5 pt-3">
<div ng-if="$ctrl.index > 0" style="margin-bottom: 10px">
<span class="text-muted small"> Extra search configuration </span>
<button
class="btn btn-sm btn-danger"
type="button"
ng-click="$ctrl.onRemoveClick($ctrl.index)"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>
<pr-icon icon="'trash-2'"></pr-icon>
</button>
</div>
<ldap-settings-dn-builder
label="Group Search Path (optional)"
suffix="{{ $ctrl.domainSuffix }}"
ng-model="$ctrl.config.GroupBaseDN"
on-change="($ctrl.onChangeBaseDN)"
limited-feature-id="$ctrl.limitedFeatureId"
></ldap-settings-dn-builder>
<div class="form-group">
<label class="col-sm-4 col-md-2 control-label text-left"> Group Base DN </label>
<div class="col-sm-8 col-md-10">
{{ $ctrl.config.GroupBaseDN }}
</div>
</div>
<ldap-settings-dn-builder
label="Group Search Path (optional)"
suffix="{{ $ctrl.domainSuffix }}"
ng-model="$ctrl.config.GroupBaseDN"
on-change="($ctrl.onChangeBaseDN)"
limited-feature-id="$ctrl.limitedFeatureId"
></ldap-settings-dn-builder>
<div class="form-group">
<label class="col-sm-4 col-md-2 control-label text-left"> Group Base DN </label>
<div class="col-sm-8 col-md-10">
{{ $ctrl.config.GroupBaseDN }}
<div class="form-group">
<div class="col-sm-12 vertical-center" style="margin-bottom: 5px">
<label class="control-label !pt-0 text-left">Groups</label>
<span class="label label-default interactive vertical-center" style="margin-left: 10px" ng-click="$ctrl.addGroup()">
<pr-icon icon="'plus-circle'"></pr-icon>
add another group
</span>
</div>
<div class="col-sm-12" ng-if="$ctrl.groups.length">
<div class="w-full px-5 pt-3">
<div class="form-group no-margin-last-child" ng-repeat="entry in $ctrl.groups">
<div class="col-sm-4">
<select class="form-control" ng-model="entry.type" ng-change="$ctrl.onGroupsChange()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
<option value="ou">OU Name</option>
<option value="cn">Folder Name</option>
</select>
</div>
<div class="col-sm-5">
<input
class="form-control"
ng-model="entry.value"
ng-change="$ctrl.onGroupsChange()"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
/>
</div>
<div class="col-sm-3 text-right">
<button
class="btn btn-md btn-danger"
type="button"
ng-click="$ctrl.removeGroup($index)"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>
<pr-icon icon="'trash-2'" size="'md'"></pr-icon>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12 vertical-center" style="margin-bottom: 5px">
<label class="control-label !pt-0 text-left">Groups</label>
<span class="label label-default interactive vertical-center" style="margin-left: 10px" ng-click="$ctrl.addGroup()">
<pr-icon icon="'plus-circle'"></pr-icon>
add another group
</span>
</div>
<div class="col-sm-12" ng-if="$ctrl.groups.length">
<rd-widget>
<rd-widget-body>
<div class="form-group no-margin-last-child" ng-repeat="entry in $ctrl.groups">
<div class="col-sm-4">
<select
class="form-control"
ng-model="entry.type"
ng-change="$ctrl.onGroupsChange()"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>
<option value="ou">OU Name</option>
<option value="cn">Folder Name</option>
</select>
</div>
<div class="col-sm-5">
<input
class="form-control"
ng-model="entry.value"
ng-change="$ctrl.onGroupsChange()"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
/>
</div>
<div class="col-sm-3 text-right">
<button
class="btn btn-md btn-danger"
type="button"
ng-click="$ctrl.removeGroup($index)"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>
<pr-icon icon="'trash-2'" size="'md'"></pr-icon>
</button>
</div>
</div>
</rd-widget-body>
</rd-widget>
</div>
<div class="form-group no-margin-last-child">
<label class="col-sm-4 col-md-2 control-label text-left"> Group Filter </label>
<div class="col-sm-8 col-md-10">
{{ $ctrl.config.GroupFilter }}
</div>
<div class="form-group no-margin-last-child">
<label class="col-sm-4 col-md-2 control-label text-left"> Group Filter </label>
<div class="col-sm-8 col-md-10">
{{ $ctrl.config.GroupFilter }}
</div>
</div>
</rd-widget-body>
</rd-widget>
</div>
</div>

7
app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
View File

@ -1,9 +1,6 @@
<ng-form limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-class="limited-be" class="ldap-settings-openldap">
<div class="overlay">
<div class="limited-be-link vertical-center"
><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator
><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
></div>
<div>
<div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator></div>
<div class="limited-be-content">
<div>
<div class="col-sm-12 form-section-title"> Information </div>

178
app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html
View File

@ -1,101 +1,99 @@
<rd-widget>
<rd-widget-body>
<div ng-if="$ctrl.index > 0" style="margin-bottom: 10px">
<span class="text-muted small"> Extra search configuration </span>
<div class="w-full px-5 pt-3">
<div ng-if="$ctrl.index > 0" style="margin-bottom: 10px">
<span class="text-muted small"> Extra search configuration </span>
<button
ng-if="$ctrl.index > 0"
class="btn btn-sm btn-danger"
type="button"
ng-click="$ctrl.onRemoveClick($ctrl.index)"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>
<pr-icon icon="'trash-2'"></pr-icon>
</button>
</div>
<div class="form-group" ng-if="$ctrl.showUsernameFormat">
<div class="col-sm-4" style="margin-bottom: 5px">
<label class="control-label text-left">Username Format</label>
</div>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-btn">
<button
class="btn btn-primary"
ng-model="$ctrl.config.UserNameAttribute"
uib-btn-radio="'sAMAccountName'"
style="margin-left: 0px"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>username</button
>
<button
class="btn btn-primary"
ng-model="$ctrl.config.UserNameAttribute"
uib-btn-radio="'userPrincipalName'"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>user@domainname</button
>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label text-left"> Root Domain </label>
<div class="col-sm-8">
{{ $ctrl.config.BaseDN }}
</div>
</div>
<ldap-settings-dn-builder
ng-model="$ctrl.config.BaseDN"
label="User Search Path (optional)"
suffix="{{ $ctrl.domainSuffix }}"
on-change="($ctrl.onBaseDNChange)"
limited-feature-id="$ctrl.limitedFeatureId"
></ldap-settings-dn-builder>
<div class="form-group no-margin-last-child">
<div class="col-sm-12" style="margin-bottom: 5px">
<label class="control-label text-left">Allowed Groups (optional)</label>
<button
ng-if="$ctrl.index > 0"
class="btn btn-sm btn-danger"
type="button"
ng-click="$ctrl.onRemoveClick($ctrl.index)"
class="label label-default interactive vertical-center"
style="margin-left: 10px; border: 0"
ng-click="$ctrl.addGroup()"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>
<pr-icon icon="'trash-2'"></pr-icon>
<pr-icon icon="'plus-circle'"></pr-icon>
add another group
</button>
</div>
<div class="form-group" ng-if="$ctrl.showUsernameFormat">
<div class="col-sm-4" style="margin-bottom: 5px">
<label class="control-label text-left">Username Format</label>
</div>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-btn">
<button
class="btn btn-primary"
ng-model="$ctrl.config.UserNameAttribute"
uib-btn-radio="'sAMAccountName'"
style="margin-left: 0px"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>username</button
>
<button
class="btn btn-primary"
ng-model="$ctrl.config.UserNameAttribute"
uib-btn-radio="'userPrincipalName'"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>user@domainname</button
>
</div>
</div>
<div class="col-sm-12">
<div ng-repeat="group in $ctrl.groups track by $index" style="margin-bottom: 10px">
<rd-widget>
<rd-widget-body>
<ldap-settings-group-dn-builder
ng-model="group"
index="$index"
suffix="{{ $ctrl.domainSuffix }}"
on-change="($ctrl.onGroupChange)"
on-remove-click="($ctrl.removeGroup)"
limited-feature-id="$ctrl.limitedFeatureId"
></ldap-settings-group-dn-builder>
</rd-widget-body>
</rd-widget>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label text-left"> Root Domain </label>
<div class="col-sm-8">
{{ $ctrl.config.BaseDN }}
</div>
<div class="form-group">
<label class="col-sm-4 control-label text-left"> User Filter </label>
<div class="col-sm-8">
{{ $ctrl.config.Filter }}
</div>
<ldap-settings-dn-builder
ng-model="$ctrl.config.BaseDN"
label="User Search Path (optional)"
suffix="{{ $ctrl.domainSuffix }}"
on-change="($ctrl.onBaseDNChange)"
limited-feature-id="$ctrl.limitedFeatureId"
></ldap-settings-dn-builder>
<div class="form-group no-margin-last-child">
<div class="col-sm-12" style="margin-bottom: 5px">
<label class="control-label text-left">Allowed Groups (optional)</label>
<button
type="button"
class="label label-default interactive vertical-center"
style="margin-left: 10px; border: 0"
ng-click="$ctrl.addGroup()"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>
<pr-icon icon="'plus-circle'"></pr-icon>
add another group
</button>
</div>
<div class="col-sm-12">
<div ng-repeat="group in $ctrl.groups track by $index" style="margin-bottom: 10px">
<rd-widget>
<rd-widget-body>
<ldap-settings-group-dn-builder
ng-model="group"
index="$index"
suffix="{{ $ctrl.domainSuffix }}"
on-change="($ctrl.onGroupChange)"
on-remove-click="($ctrl.removeGroup)"
limited-feature-id="$ctrl.limitedFeatureId"
></ldap-settings-group-dn-builder>
</rd-widget-body>
</rd-widget>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label text-left"> User Filter </label>
<div class="col-sm-8">
{{ $ctrl.config.Filter }}
</div>
</div>
</rd-widget-body>
</rd-widget>
</div>
</div>

14
app/portainer/user-activity/activity-logs-view/activity-logs-view.html
View File

@ -1,11 +1,8 @@
<page-header title="'User Activity'" breadcrumbs="['Activity Logs']" reload="true"> </page-header>
<div class="be-indicator-container limited-be mx-4">
<div class="overlay">
<div class="limited-be-link vertical-center"
><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
></div>
<div>
<div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
<div class="limited-be-content">
<rd-widget>
<rd-widget-body>
@ -34,11 +31,8 @@
</div>
<div class="be-indicator-container limited-be mx-4">
<div class="overlay">
<div class="limited-be-link vertical-center"
><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
></div>
<div>
<div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
<div class="limited-be-content">
<div class="row">
<activity-logs-datatable

14
app/portainer/user-activity/auth-logs-view/auth-logs-view.html
View File

@ -1,11 +1,8 @@
<page-header title="'User Activity'" breadcrumbs="['User authentication activity']" reload="true"> </page-header>
<div class="be-indicator-container limited-be mx-4">
<div class="overlay">
<div class="limited-be-link vertical-center"
><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
></div>
<div>
<div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
<div class="limited-be-content">
<rd-widget>
<rd-widget-body>
@ -33,11 +30,8 @@
</div>
<div class="be-indicator-container limited-be mx-4">
<div class="overlay">
<div class="limited-be-link vertical-center"
><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
></div>
<div>
<div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator></div>
<div class="limited-be-content">
<div class="row">
<auth-logs-datatable

10
app/react/components/BEFeatureIndicator/BEFeatureIndicator.css
View File

@ -1,5 +1,6 @@
.be-indicator {
border: solid 1px var(--BE-only);
@apply border border-solid border-gray-6;
@apply text-xs text-gray-6;
border-radius: 15px;
padding: 5px 10px;
font-weight: 400;
@ -9,11 +10,12 @@
}
.be-indicator .be-indicator-icon {
@apply text-black th-highcontrast:text-white th-dark:text-blue-8;
@apply text-inherit;
}
.be-indicator:hover {
@apply no-underline;
@apply underline;
@apply border-blue-9 text-blue-9;
}
.be-indicator:hover .be-indicator-label {
@ -21,5 +23,5 @@
}
.be-indicator-container {
border: solid 1px var(--BE-only);
@apply border border-solid border-gray-6;
}

6
app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx
View File

@ -29,16 +29,14 @@ export function BEFeatureIndicator({
}
return (
<a
className={clsx('be-indicator vertical-center', className)}
className={clsx('be-indicator vertical-center text-xs', className)}
href={url}
target="_blank"
rel="noopener noreferrer"
>
{children}
{showIcon && <Icon icon={Briefcase} className="be-indicator-icon mr-1" />}
<span className="be-indicator-label break-words">
Business Edition Feature
</span>
<span className="be-indicator-label break-words">Business Feature</span>
</a>
);
}

17
app/react/components/BEFeatureIndicator/BEOverlay.tsx
View File

@ -1,16 +1,18 @@
import clsx from 'clsx';
import { FeatureId } from '@/react/portainer/feature-flags/enums';
import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.service';
import { Tooltip } from '@@/Tip/Tooltip';
import { BEFeatureIndicator } from '.';
import { BEFeatureIndicator } from './BEFeatureIndicator';
export function BEOverlay({
featureId,
children,
className,
}: {
featureId: FeatureId;
children: React.ReactNode;
className?: string;
}) {
const isLimited = isLimitedToBE(featureId);
if (!isLimited) {
@ -19,13 +21,10 @@ export function BEOverlay({
return (
<div className="be-indicator-container limited-be">
<div className="overlay">
<div className="limited-be-link vertical-center">
<BEFeatureIndicator featureId={FeatureId.CA_FILE} />
<Tooltip message="This feature is currently limited to Business Edition users only. " />
</div>
<div className="limited-be-content">{children}</div>
<div className="limited-be-link vertical-center">
<BEFeatureIndicator featureId={featureId} />
</div>
<div className={clsx('limited-be-content', className)}>{children}</div>
</div>
);
}

8
app/react/components/BETeaserButton.tsx
View File

@ -1,4 +1,4 @@
import { ReactNode } from 'react';
import { Briefcase } from 'lucide-react';
import { FeatureId } from '@/react/portainer/feature-flags/enums';
@ -11,7 +11,6 @@ interface Props {
message: string;
buttonText: string;
className?: string;
icon?: ReactNode;
buttonClassName?: string;
}
@ -21,7 +20,6 @@ export function BETeaserButton({
message,
buttonText,
className,
icon,
buttonClassName,
}: Props) {
return (
@ -34,9 +32,9 @@ export function BETeaserButton({
<span>
<Button
className={buttonClassName}
icon={icon}
icon={Briefcase}
type="button"
color="warninglight"
color="default"
size="small"
onClick={() => {}}
disabled

8
app/react/components/BoxSelector/BoxSelectorItem.module.css
View File

@ -38,12 +38,12 @@
padding-left: 20px;
}
/* used for BE teaser. Dark theme specs defined by EE-5621 */
/* used for BE teaser */
.box-selector-item.limited.business label,
.box-selector-item.limited.business input:checked + label {
@apply border-warning-7 bg-warning-1 text-black;
@apply th-dark:border-blue-8 th-dark:bg-[color:var(--bg-BE-only)] th-dark:text-white;
@apply th-highcontrast:bg-warning-8 th-highcontrast:bg-opacity-10 th-highcontrast:text-white;
@apply border-gray-6 bg-gray-6 bg-opacity-10;
@apply th-dark:border-gray-6 th-dark:bg-gray-6 th-dark:bg-opacity-10;
@apply th-highcontrast:border-gray-6 th-highcontrast:bg-gray-6 th-highcontrast:bg-opacity-10;
filter: none;
}

13
app/react/components/BoxSelector/BoxSelectorItem.tsx
View File

@ -9,7 +9,7 @@ import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';
import styles from './BoxSelectorItem.module.css';
import { BoxSelectorOption, Value } from './types';
import { LimitedToBeIndicator } from './LimitedToBeIndicator';
import { LimitedToBeBoxSelectorIndicator } from './LimitedToBeBoxSelectorIndicator';
import { BoxOption } from './BoxOption';
import { LogoIcon } from './LogoIcon';
@ -40,8 +40,6 @@ export function BoxSelectorItem<T extends Value>({
option.feature
);
const beIndicatorTooltipId = `box-selector-item-${radioName}-${option.id}-limited`;
const ContentBox = slim ? 'div' : Fragment;
return (
@ -59,14 +57,9 @@ export function BoxSelectorItem<T extends Value>({
type={type}
checkIcon={checkIcon}
>
{limitedToBE && (
<LimitedToBeIndicator
tooltipId={beIndicatorTooltipId}
url={featureUrl}
/>
)}
{limitedToBE && <LimitedToBeBoxSelectorIndicator url={featureUrl} />}
<div
className={clsx('flex gap-2', {
className={clsx('flex min-w-[140px] gap-2', {
'opacity-30': limitedToBE,
'h-full flex-col justify-start': !slim,
'slim items-center': slim,

30
app/react/components/BoxSelector/LimitedToBeBoxSelectorIndicator.tsx Normal file
View File

@ -0,0 +1,30 @@
import { Briefcase } from 'lucide-react';
import { Icon } from '@@/Icon';
import { Tooltip } from '@@/Tip/Tooltip';
interface Props {
url?: string;
}
export function LimitedToBeBoxSelectorIndicator({ url }: Props) {
return (
<div className="absolute left-0 top-0 w-full">
<div className="mx-auto flex max-w-fit items-center rounded-b-lg border border-t-0 border-solid border-gray-6 bg-transparent px-3 py-1 text-gray-6">
<a
className="inline-flex items-center text-xs text-gray-6"
href={url}
target="_blank"
rel="noreferrer"
>
<Icon icon={Briefcase} className="!mr-1" />
<span>Business Feature</span>
</a>
<Tooltip
size="sm"
message="Select this option to preview this business feature."
/>
</div>
</div>
);
}

37
app/react/components/BoxSelector/LimitedToBeIndicator.tsx
View File

@ -1,37 +0,0 @@
import { HelpCircle } from 'lucide-react';
import clsx from 'clsx';
import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
interface Props {
tooltipId: string;
url?: string;
}
export function LimitedToBeIndicator({ tooltipId, url }: Props) {
return (
<div className="absolute left-0 top-0 w-full">
<div className="mx-auto flex max-w-fit items-center gap-1 rounded-b-lg bg-warning-4 py-1 px-3 text-sm th-dark:bg-[color:var(--bg-BE-only)]">
<a
className="text-warning-9 th-dark:text-blue-8"
href={url}
target="_blank"
rel="noreferrer"
>
BE Feature
</a>
<TooltipWithChildren
position="bottom"
className={clsx(tooltipId, 'portainer-tooltip')}
heading="Business Edition feature."
message="This feature is currently limited to Business Edition users only."
>
<HelpCircle
className="ml-1 !text-warning-7 th-dark:!text-blue-8"
aria-hidden="true"
/>
</TooltipWithChildren>
</div>
</div>
);
}

31
app/react/components/Tip/Tooltip/Tooltip.tsx
View File

@ -1,14 +1,26 @@
import { HelpCircle } from 'lucide-react';
import { ReactNode, useMemo } from 'react';
import sanitize from 'sanitize-html';
import clsx from 'clsx';
import { TooltipWithChildren, Position } from '../TooltipWithChildren';
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
const sizeClasses: Record<Size, string> = {
xs: 'text-xs',
sm: 'text-sm',
md: 'text-base',
lg: 'text-lg',
xl: 'text-xl',
};
export interface Props {
position?: Position;
message: ReactNode;
className?: string;
setHtmlMessage?: boolean;
size?: Size;
}
export function Tooltip({
@ -16,6 +28,7 @@ export function Tooltip({
position = 'bottom',
className,
setHtmlMessage,
size = 'md',
}: Props) {
// allow angular views to set html messages for the tooltip
const htmlMessage = useMemo(() => {
@ -27,14 +40,14 @@ export function Tooltip({
}, [setHtmlMessage, message]);
return (
<TooltipWithChildren
message={htmlMessage || message}
position={position}
className={className}
>
<span className="inline-flex text-base">
<HelpCircle className="lucide ml-1" aria-hidden="true" />
</span>
</TooltipWithChildren>
<span className={clsx('ml-1 inline-flex items-center', sizeClasses[size])}>
<TooltipWithChildren
message={htmlMessage || message}
position={position}
className={className}
>
<HelpCircle className="lucide" aria-hidden="true" />
</TooltipWithChildren>
</span>
);
}

6
app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css
View File

@ -34,9 +34,5 @@
}
.tooltip-beteaser {
@apply text-warning-5 th-dark:text-blue-8;
}
.tooltip-beteaser:hover {
@apply text-warning-5 th-dark:text-blue-8;
@apply text-blue-8 hover:text-blue-9;
}

2
app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx
View File

@ -49,7 +49,7 @@ export function TooltipWithChildren({
rel="noreferrer"
className={styles.tooltipBeteaser}
>
Business Edition Only
Business Feature
</a>
)}
</div>

3
app/react/kubernetes/annotations/AnnotationsBeTeaser.tsx
View File

@ -1,5 +1,3 @@
import { Plus } from 'lucide-react';
import { FeatureId } from '@/react/portainer/feature-flags/enums';
import { BETeaserButton } from '@@/BETeaserButton';
@ -42,7 +40,6 @@ export function AnnotationsBeTeaser() {
message="Allows specifying of annotations on this resource."
featureId={FeatureId.K8S_ANNOTATIONS}
buttonClassName="!ml-0"
icon={Plus}
/>
</div>
</div>

3
app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/RestartApplicationButton.tsx
View File

@ -1,5 +1,3 @@
import { RefreshCw } from 'lucide-react';
import { FeatureId } from '@/react/portainer/feature-flags/enums';
import { BETeaserButton } from '@@/BETeaserButton';
@ -10,7 +8,6 @@ export function RestartApplicationButton() {
buttonClassName="!ml-0"
data-cy="k8sAppDetail-restartButton"
heading="Rolling restart"
icon={RefreshCw}
featureId={FeatureId.K8S_ROLLING_RESTART}
message="A rolling restart of the application is performed."
buttonText="Rolling restart"

2
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
View File

@ -81,7 +81,7 @@ export function KubeConfigTeaserForm() {
<div className="form-group">
<div className="col-sm-12">
<LoadingButton
className="wizard-connect-button"
className="wizard-connect-button !ml-0"
loadingText="Connecting environment..."
isLoading={false}
disabled

11
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx
View File

@ -11,7 +11,7 @@ import EdgeAgentAsyncIcon from '@/react/edge/components/edge-agent-async.svg?c';
import { BoxSelectorOption } from '@@/BoxSelector/types';
import { BoxSelector } from '@@/BoxSelector';
import { BEFeatureIndicator } from '@@/BEFeatureIndicator';
import { BEOverlay } from '@@/BEFeatureIndicator/BEOverlay';
import { AnalyticsStateKey } from '../types';
import { EdgeAgentTab } from '../shared/EdgeAgentTab';
@ -112,11 +112,10 @@ export function WizardKubernetes({ onCreate }: Props) {
);
case 'kubeconfig':
return (
<div className="border border-solid border-orange-1 px-1 py-5">
<BEFeatureIndicator
featureId={options.find((o) => o.value === type)?.feature}
/>
<KubeConfigTeaserForm />
<div className="mb-3">
<BEOverlay featureId={FeatureId.K8S_CREATE_FROM_KUBECONFIG}>
<KubeConfigTeaserForm />
</BEOverlay>
</div>
);
default:

34
app/react/portainer/feature-flags/feature-flags.css
View File

@ -10,17 +10,19 @@ button.limited-be,
button[disabled].limited-be.oauth-save-settings-button {
background-color: var(--BE-only);
border-color: var(--BE-only);
margin-left: 0px;
}
button.limited-be.oauth-save-settings-button {
background-color: var(--blue-2);
border-color: transparent;
margin-left: 0px;
}
ng-form.limited-be,
form.limited-be,
div.limited-be {
border: solid 2px var(--BE-only);
border: solid 1px var(--BE-only);
border-radius: 8px;
pointer-events: none;
touch-action: none;
@ -28,49 +30,31 @@ div.limited-be {
}
.limited-be-content {
background: rgba(247, 144, 9, 0.1);
opacity: 0.5;
padding: 10px;
@apply border-gray-6 p-2.5 text-xs opacity-50;
}
.limited-be-link {
padding: 10px;
width: inherit;
z-index: 5;
position: relative;
width: 270px;
height: 40px;
top: 0px;
right: 0px;
float: right;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
@apply bg-warning-5 text-warning-9;
@apply th-dark:bg-[color:var(--bg-BE-only)] th-dark:text-blue-8;
padding: 5px 10px;
touch-action: auto;
cursor: hand;
pointer-events: auto;
}
.limited-be-link a {
@apply pointer-events-auto cursor-pointer;
@apply text-warning-9 th-dark:text-blue-8;
@apply text-gray-6;
}
.limited-be-link a:hover {
@apply text-warning-9 underline th-dark:text-blue-8;
}
.overlay {
@apply bg-center bg-no-repeat;
@apply bg-[url(~@/assets/ico/lock.svg)] th-dark:bg-[url(~@/assets/ico/lock-2.svg)];
}
.limited-be input,
.limited-be .widget-body {
background: rgba(247, 144, 9, 0.05);
@apply th-dark:bg-[color:var(--bg-BE-only)];
@apply underline;
@apply border-blue-9 text-blue-9;
}
.form-control.limited-be[disabled] {

273
app/react/portainer/settings/SettingsView/BackupSettingsView/BackupS3Form.tsx
View File

@ -13,6 +13,7 @@ import { FormControl } from '@@/form-components/FormControl';
import { LoadingButton } from '@@/buttons/LoadingButton';
import { Input } from '@@/form-components/Input';
import { SwitchField } from '@@/form-components/SwitchField';
import { BEOverlay } from '@@/BEFeatureIndicator/BEOverlay';
import {
useBackupS3Settings,
@ -57,159 +58,159 @@ export function BackupS3Form() {
validateOnMount
>
{({ values, errors, isSubmitting, setFieldValue, isValid }) => (
<Form className="form-horizontal">
<div className="form-group">
<div className="col-sm-12">
<SwitchField
name="schedule-automatic-backup"
labelClass="col-sm-3 col-lg-2"
label="Schedule automatic backups"
checked={values.scheduleAutomaticBackup}
featureId={FeatureId.S3_BACKUP_SETTING}
onChange={(e) => setFieldValue('scheduleAutomaticBackup', e)}
/>
<BEOverlay featureId={FeatureId.S3_BACKUP_SETTING}>
<Form className="form-horizontal">
<div className="form-group">
<div className="col-sm-12">
<SwitchField
name="schedule-automatic-backup"
labelClass="col-sm-3 col-lg-2"
label="Schedule automatic backups"
checked={values.scheduleAutomaticBackup}
onChange={(e) => setFieldValue('scheduleAutomaticBackup', e)}
/>
</div>
</div>
</div>
{values.scheduleAutomaticBackup && (
{values.scheduleAutomaticBackup && (
<FormControl
inputId="cron_rule"
label="Cron rule"
size="small"
errors={errors.cronRule}
required
>
<Field
id="cron_rule"
name="cronRule"
type="text"
as={Input}
placeholder="0 2 * * *"
data-cy="settings-backupCronRuleInput"
className={clsx({ 'limited-be': limitedToBE })}
disabled={limitedToBE}
/>
</FormControl>
)}
<FormControl
inputId="cron_rule"
label="Cron rule"
size="small"
errors={errors.cronRule}
required
label="Access key ID"
inputId="access_key_id"
errors={errors.accessKeyID}
>
<Field
id="cron_rule"
name="cronRule"
id="access_key_id"
name="accessKeyID"
type="text"
as={Input}
placeholder="0 2 * * *"
data-cy="settings-backupCronRuleInput"
data-cy="settings-accessKeyIdInput"
className={clsx({ 'limited-be': limitedToBE })}
disabled={limitedToBE}
/>
</FormControl>
)}
<FormControl
label="Access key ID"
inputId="access_key_id"
errors={errors.accessKeyID}
>
<Field
id="access_key_id"
name="accessKeyID"
type="text"
as={Input}
data-cy="settings-accessKeyIdInput"
className={clsx({ 'limited-be': limitedToBE })}
<FormControl
label="Secret access key"
inputId="secret_access_key"
errors={errors.secretAccessKey}
>
<Field
id="secret_access_key"
name="secretAccessKey"
type="password"
as={Input}
data-cy="settings-secretAccessKeyInput"
className={clsx({ 'limited-be': limitedToBE })}
disabled={limitedToBE}
/>
</FormControl>
<FormControl label="Region" inputId="region" errors={errors.region}>
<Field
id="region"
name="region"
type="text"
as={Input}
placeholder="default region is us-east-1 if left empty"
data-cy="settings-backupRegionInput"
className={clsx({ 'limited-be': limitedToBE })}
disabled={limitedToBE}
/>
</FormControl>
<FormControl
label="Bucket name"
inputId="bucket_name"
errors={errors.bucketName}
>
<Field
id="bucket_name"
name="bucketName"
type="text"
as={Input}
data-cy="settings-backupBucketNameInput"
className={clsx({ 'limited-be': limitedToBE })}
disabled={limitedToBE}
/>
</FormControl>
<FormControl
label="S3 compatible host"
inputId="s3_compatible_host"
tooltip="Hostname of a S3 service"
errors={errors.s3CompatibleHost}
>
<Field
id="s3_compatible_host"
name="s3CompatibleHost"
type="text"
as={Input}
placeholder="leave empty for AWS S3"
data-cy="settings-backupS3CompatibleHostInput"
className={clsx({ 'limited-be': limitedToBE })}
disabled={limitedToBE}
/>
</FormControl>
<SecurityFieldset
switchDataCy="settings-passwordProtectToggleS3"
inputDataCy="settings-backups3pw"
disabled={limitedToBE}
/>
</FormControl>
<FormControl
label="Secret access key"
inputId="secret_access_key"
errors={errors.secretAccessKey}
>
<Field
id="secret_access_key"
name="secretAccessKey"
type="password"
as={Input}
data-cy="settings-secretAccessKeyInput"
className={clsx({ 'limited-be': limitedToBE })}
disabled={limitedToBE}
/>
</FormControl>
<FormControl label="Region" inputId="region" errors={errors.region}>
<Field
id="region"
name="region"
type="text"
as={Input}
placeholder="default region is us-east-1 if left empty"
data-cy="settings-backupRegionInput"
className={clsx({ 'limited-be': limitedToBE })}
disabled={limitedToBE}
/>
</FormControl>
<FormControl
label="Bucket name"
inputId="bucket_name"
errors={errors.bucketName}
>
<Field
id="bucket_name"
name="bucketName"
type="text"
as={Input}
data-cy="settings-backupBucketNameInput"
className={clsx({ 'limited-be': limitedToBE })}
disabled={limitedToBE}
/>
</FormControl>
<FormControl
label="S3 compatible host"
inputId="s3_compatible_host"
tooltip="Hostname of a S3 service"
errors={errors.s3CompatibleHost}
>
<Field
id="s3_compatible_host"
name="s3CompatibleHost"
type="text"
as={Input}
placeholder="leave empty for AWS S3"
data-cy="settings-backupS3CompatibleHostInput"
className={clsx({ 'limited-be': limitedToBE })}
disabled={limitedToBE}
/>
</FormControl>
<SecurityFieldset
switchDataCy="settings-passwordProtectToggleS3"
inputDataCy="settings-backups3pw"
disabled={limitedToBE}
/>
<div className="form-group">
<div className="col-sm-12">
<LoadingButton
type="button"
loadingText="Exporting..."
isLoading={isSubmitting}
className={clsx('!ml-0', { 'limited-be': limitedToBE })}
disabled={!isValid || limitedToBE}
data-cy="settings-exportBackupS3Button"
icon={Upload}
onClick={() => {
handleExport(values);
}}
>
Export backup
</LoadingButton>
<div className="form-group">
<div className="col-sm-12">
<LoadingButton
type="button"
loadingText="Exporting..."
isLoading={isSubmitting}
className={clsx('!ml-0', { 'limited-be': limitedToBE })}
disabled={!isValid || limitedToBE}
data-cy="settings-exportBackupS3Button"
icon={Upload}
onClick={() => {
handleExport(values);
}}
>
Export backup
</LoadingButton>
</div>
</div>
</div>
<div className="form-group">
<hr />
<div className="col-sm-12">
<LoadingButton
loadingText="Saving settings..."
isLoading={isSubmitting}
className={clsx('!ml-0', { 'limited-be': limitedToBE })}
disabled={!isValid || limitedToBE}
data-cy="settings-saveBackupSettingsButton"
>
Save backup settings
</LoadingButton>
<div className="form-group">
<div className="col-sm-12">
<LoadingButton
loadingText="Saving settings..."
isLoading={isSubmitting}
className={clsx('!ml-0', { 'limited-be': limitedToBE })}
disabled={!isValid || limitedToBE}
data-cy="settings-saveBackupSettingsButton"
>
Save backup settings
</LoadingButton>
</div>
</div>
</div>
</Form>
</Form>
</BEOverlay>
)}
</Formik>
);

2
app/react/portainer/settings/SettingsView/HelmCertPanel.tsx
View File

@ -30,7 +30,7 @@ export function HelmCertPanel() {
};
return (
<BEOverlay featureId={FeatureId.CA_FILE}>
<BEOverlay featureId={FeatureId.CA_FILE} className="!p-0">
<Widget>
<Widget.Title
icon={Key}

3
app/react/sidebar/UpgradeBEBanner/UpgradeBEBanner.tsx
View File

@ -78,8 +78,7 @@ function UpgradeBEBanner() {
<ArrowUpCircle
className={clsx(
'lucide text-lg',
'fill-warning-6 stroke-[#023959] th-dark:stroke-black',
'th-highcontrast:fill-warning-6 th-highcontrast:stroke-black'
'fill-gray-6 stroke-[#023959] th-highcontrast:stroke-black th-dark:stroke-black'
)}
/>
{isSidebarOpen && <>Upgrade to Business Edition</>}