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

fix(teasers): updated muted styles from qa feedback [EE-6035] (#10390) 

* fix(teasers): updated muted styles from qa feedback [EE-6035]
pull/10401/head
Ali 2023-09-28 11:32:58 +01:00 committed by GitHub
parent 99625cd35f
commit d678b155ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 290 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -351,7 +351,7 @@
></save-auth-settings-button>
</div>
<div ng-if="$ctrl.state.provider != 'custom'" class="limited-be">
<div ng-if="$ctrl.state.provider != 'custom'" class="limited-be be-indicator-container">
<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>

44
app/portainer/rbac/components/access-viewer/access-viewer.html
View File

@ -1,24 +1,26 @@
<div class="col-sm-12" style="margin-bottom: 0px">
<rd-widget>
<rd-widget-header icon="user-x">
<header-title>
Effective access viewer
<be-feature-indicator feature="$ctrl.limitedFeature" class="space-left"></be-feature-indicator>
</header-title>
</rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<div class="col-sm-12 form-section-title"> User </div>
<div class="form-group">
<div class="col-sm-12">
<span class="small text-muted" ng-if="$ctrl.users.length === 0"> No user available </span>
<div class="be-indicator-container limited-be">
<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-header icon="user-x">
<header-title> Effective access viewer </header-title>
</rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<div class="col-sm-12 form-section-title"> User </div>
<div class="form-group">
<div class="col-sm-12">
<span class="small text-muted" ng-if="$ctrl.users.length === 0"> No user available </span>
<por-select ng-if="$ctrl.users.length > 0" value="$ctrl.selectedUserId" options="$ctrl.users" on-change="($ctrl.onUserSelect)" placeholder="'Select a user'">
</por-select>
</div>
</div>
<access-viewer-datatable table-key="access_viewer" dataset="$ctrl.userRoles" order-by="EndpointName" is-admin="$ctrl.isAdmin"> </access-viewer-datatable>
</form>
</rd-widget-body>
</rd-widget>
<por-select ng-if="$ctrl.users.length > 0" value="$ctrl.selectedUserId" options="$ctrl.users" on-change="($ctrl.onUserSelect)" placeholder="'Select a user'">
</por-select>
</div>
</div>
<access-viewer-datatable table-key="access_viewer" dataset="$ctrl.userRoles" order-by="EndpointName" is-admin="$ctrl.isAdmin"> </access-viewer-datatable>
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>
</div>

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

@ -1,5 +1,5 @@
<ng-form class="ad-settings" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-class="limited-be">
<div>
<div class="be-indicator-container">
<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">

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

@ -1,129 +1,127 @@
<div class="col-sm-12 form-section-title ldap-custom-admin-group-title" ng-style="$ctrl.isLimitedFeatureSelfContained && { 'padding-bottom': '15px' }">
<div class="col-sm-12 form-section-title flex items-center" style="float: initial">
Auto-populate team admins <be-feature-indicator feature="$ctrl.limitedFeatureId" class="space-left" ng-if="$ctrl.isLimitedFeatureSelfContained"></be-feature-indicator>
</div>
<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>
<rd-widget>
<rd-widget-body>
<div class="w-full 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 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>
</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>
<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 class="form-group mt-3">
<div class="col-sm-12">
<button disabled class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()">
<pr-icon icon="'plus'"></pr-icon>
Add group search configuration
</button>
</div>
<div class="col-sm-12 vertical-center mt-2">
<button
class="btn btm-sm btn-primary !ml-0"
type="button"
ng-click="$ctrl.search()"
limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
limited-feature-tabindex="-1"
>
Fetch Admin Group(s)
</button>
<span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="vertical-center ml-6">
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
No groups found
</span>
</div>
</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 class="form-group">
<div class="col-sm-12 vertical-center">
<label for="admin-auto-populate" class="control-label text-muted !pt-0 text-left" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }">
Assign admin rights to group(s)
</label>
<label class="switch my-0 ml-7" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
<input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" />
<span class="slider round before:content-['']"></span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group mt-3">
<div class="col-sm-12">
<button
class="label label-default interactive no-border vertical-center"
ng-click="$ctrl.onAddClick()"
limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
limited-feature-disabled
>
<pr-icon icon="'plus-circle'"></pr-icon>
add group search configuration
</button>
</div>
<div class="col-sm-12 vertical-center mt-2">
<button
class="btn btm-sm btn-primary"
type="button"
ng-click="$ctrl.search()"
limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
limited-feature-tabindex="-1"
>
Fetch Admin Group(s)
</button>
<span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="vertical-center ml-6">
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
No groups found
</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-12 vertical-center">
<label for="admin-auto-populate" class="control-label text-muted !pt-0 text-left" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }">
Assign admin rights to group(s)
</label>
<label class="switch my-0 ml-7" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
<input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" />
<span class="slider round before:content-['']"></span>
</label>
</div>
</div>
<div class="form-group" ng-if="$ctrl.settings.AdminAutoPopulate && $ctrl.groups">
<label for="group-access" class="control-label col-sm-2 text-left"> Select Group(s) </label>
<div class="col-sm-8">
<por-select
data-cy="'group-access-selector'"
input-id="'group-access'"
value="$ctrl.selectedAdminGroups"
on-change="($ctrl.onAdminGroupChange)"
options="$ctrl.groups"
placeholder="'Select one or more groups'"
is-multi="true"
>
</por-select>
</div>
</div>
<div class="form-group" ng-if="$ctrl.settings.AdminAutoPopulate && $ctrl.groups">
<label for="group-access" class="control-label col-sm-2 text-left"> Select Group(s) </label>
<div class="col-sm-8">
<por-select
data-cy="'group-access-selector'"
input-id="'group-access'"
value="$ctrl.selectedAdminGroups"
on-change="($ctrl.onAdminGroupChange)"
options="$ctrl.groups"
placeholder="'Select one or more groups'"
is-multi="true"
>
</por-select>
</div>
</div>
</rd-widget-body>
</rd-widget>

25
app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
View File

@ -51,24 +51,19 @@
<div class="form-group" style="margin-top: 10px">
<div class="col-sm-12">
<button class="label label-default interactive vertical-center" style="border: 0" ng-click="$ctrl.onAddClick()">
<pr-icon icon="'plus-circle'"></pr-icon>
add group search configuration
<button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()">
<pr-icon icon="'plus'"></pr-icon>
Add group search configuration
</button>
</div>
<div class="col-sm-12" style="margin-top: 10px">
<button
class="btn btm-sm btn-primary"
type="button"
ng-click="$ctrl.search()"
limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
limited-feature-tabindex="-1"
limited-feature-disabled
limited-feature-class="limited-be"
>
Display User/Group matching
</button>
<be-feature-indicator feature="$ctrl.limitedFeatureId" class="space-left"></be-feature-indicator>
<be-teaser-button
feature-id="$ctrl.limitedFeatureId"
heading="'Display User/Group matching'"
message="'Show the list of users and groups that match the Portainer search configurations'"
button-text="'Display User/Group matching'"
button-class-name="'!ml-0'"
></be-teaser-button>
</div>
</div>

25
app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
View File

@ -40,24 +40,19 @@
<div class="form-group" style="margin-top: 10px">
<div class="col-sm-12">
<button class="label label-default interactive vertical-center" style="border: 0" ng-click="$ctrl.onAddClick()">
<pr-icon icon="'plus-circle'"></pr-icon>
add user search configuration
<button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()">
<pr-icon icon="'plus'"></pr-icon>
Add user search configuration
</button>
</div>
<div class="col-sm-12" style="margin-top: 10px">
<button
class="btn btm-sm btn-primary"
type="button"
ng-click="$ctrl.search()"
limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
limited-feature-disabled
limited-feature-class="limited-be"
limited-feature-tabindex="-1"
>
Display Users
</button>
<be-feature-indicator feature="$ctrl.limitedFeatureId" class="space-left"></be-feature-indicator>
<be-teaser-button
feature-id="$ctrl.limitedFeatureId"
heading="'Display Users'"
message="'Allows you to display users from your LDAP server'"
button-text="'Display Users'"
button-class-name="'!ml-0'"
></be-teaser-button>
</div>
</div>

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

@ -13,15 +13,9 @@
<div class="form-group" style="margin-top: 10px">
<div class="col-sm-12">
<button
class="label label-default interactive vertical-center"
style="border: 0"
ng-click="$ctrl.onAddClick()"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-tabindex="-1"
>
<pr-icon icon="'plus-circle'"></pr-icon>
add group search configuration
<button class="btn btn-sm btn-light vertical-center !ml-0" ng-click="$ctrl.onAddClick()" disabled>
<pr-icon icon="'plus'"></pr-icon>
Add group search configuration
</button>
</div>
<div class="col-sm-12" style="margin-top: 10px">

24
app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
View File

@ -18,20 +18,7 @@
</div>
<div class="form-group">
<label for="ldap_url" class="col-sm-3 col-lg-2 control-label flex flex-wrap text-left">
LDAP Server
<button
type="button"
class="label label-default interactive no-border vertical-center"
ng-click="$ctrl.addLDAPUrl()"
limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
limited-feature-disabled
limited-feature-class="limited-be"
>
<pr-icon icon="'plus-circle'"></pr-icon>
Add additional server
</button>
</label>
<label for="ldap_url" class="col-sm-3 col-lg-2 control-label flex flex-wrap text-left"> LDAP Server </label>
<div class="col-sm-9 col-lg-10">
<div class="mb-3 flex" ng-repeat="url in $ctrl.settings.URLs track by $index">
<input type="text" class="form-control" id="ldap_url" ng-model="$ctrl.settings.URLs[$index]" placeholder="e.g. 10.0.0.10:389 or myldap.domain.tld:389" required />
@ -40,6 +27,15 @@
</button>
</div>
</div>
<div class="col-sm-12">
<be-teaser-button
feature-id="$ctrl.limitedFeatureId"
heading="'Add additional server'"
message="'Allows you to add an additional LDAP server'"
button-text="'Add additional server'"
button-class-name="'!ml-0'"
></be-teaser-button>
</div>
</div>
<div class="form-group">

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

@ -1,5 +1,5 @@
<ng-form limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-class="limited-be" class="ldap-settings-openldap">
<div>
<div class="be-indicator-container">
<div class="limited-be-link vertical-center"><be-feature-indicator feature="$ctrl.limitedFeatureId"></be-feature-indicator></div>
<div class="limited-be-content">
<div>

99
app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
View File

@ -1,4 +1,4 @@
<div class="col-sm-12 form-section-title" ng-style="$ctrl.isLimitedFeatureSelfContained && { 'padding-bottom': '15px' }">
<div class="col-sm-12 form-section-title flex items-center" style="float: initial">
Test login
<be-feature-indicator
ng-if="$ctrl.showBeIndicatorIfNeeded"
@ -7,52 +7,57 @@
ng-if="$ctrl.isLimitedFeatureSelfContained"
></be-feature-indicator>
</div>
<div class="form-inline">
<div class="form-group" style="margin: 0">
<label for="ldap_test_username" style="font-size: 0.9em; margin-right: 5px"> Username </label>
<input
type="text"
class="form-control"
id="ldap_test_username"
ng-model="$ctrl.username"
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 no-margin">
<label for="ldap_test_password"> Password </label>
<input
type="password"
class="form-control"
id="ldap_test_password"
ng-model="$ctrl.password"
autocomplete="new-password"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
limited-feature-tabindex="-1"
/>
</div>
<rd-widget>
<rd-widget-body>
<div class="form-inline">
<div class="form-group" style="margin: 0">
<label for="ldap_test_username" style="font-size: 0.9em; margin-right: 5px"> Username </label>
<input
type="text"
class="form-control"
id="ldap_test_username"
ng-model="$ctrl.username"
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 !ml-0">
<div class="vertical-center">
<button
type="submit"
class="btn btn-primary"
ng-disabled="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING || !$ctrl.username || !$ctrl.password"
ng-click="$ctrl.testLogin($ctrl.username, $ctrl.password)"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
limited-feature-tabindex="-1"
>
<span ng-if="$ctrl.state.testStatus !== $ctrl.TEST_STATUS.LOADING">Test</span>
<span ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING">Testing...</span>
</button>
<pr-icon icon="'check'" class="icon-success" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.SUCCESS"></pr-icon>
<pr-icon icon="'x'" class="icon-danger" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.FAILURE"></pr-icon>
<div class="form-group no-margin">
<label for="ldap_test_password"> Password </label>
<input
type="password"
class="form-control"
id="ldap_test_password"
ng-model="$ctrl.password"
autocomplete="new-password"
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 !ml-0">
<div class="vertical-center">
<button
type="submit"
class="btn btn-primary"
ng-disabled="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING || !$ctrl.username || !$ctrl.password"
ng-click="$ctrl.testLogin($ctrl.username, $ctrl.password)"
limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
limited-feature-tabindex="-1"
>
<span ng-if="$ctrl.state.testStatus !== $ctrl.TEST_STATUS.LOADING">Test</span>
<span ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING">Testing...</span>
</button>
<pr-icon icon="'check'" class="icon-success" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.SUCCESS"></pr-icon>
<pr-icon icon="'x'" class="icon-danger" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.FAILURE"></pr-icon>
</div>
</div>
</div>
</div>
</div>
</rd-widget-body>
</rd-widget>

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

@ -22,7 +22,7 @@
limited-feature-tabindex="-1"
>
<pr-icon icon="'plus-circle'"></pr-icon>
add user search configuration
Add user search configuration
</button>
</div>
<div class="col-sm-12" style="margin-top: 10px">

2
app/portainer/settings/authentication/save-auth-settings-button/save-auth-settings-button.html
View File

@ -3,7 +3,7 @@
<div class="col-sm-12">
<button
type="button"
ng-class="[$ctrl.className, 'btn btn-primary btn-sm']"
ng-class="[$ctrl.className, 'btn btn-primary btn-sm !ml-0']"
ng-click="$ctrl.onSaveSettings()"
ng-disabled="$ctrl.saveButtonDisabled || $ctrl.saveButtonState"
button-spinner="$ctrl.saveButtonState"

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

@ -6,9 +6,7 @@
<div class="widget-icon space-right">
<pr-icon icon="'history'"></pr-icon>
</div>
Activity Logs
<be-feature-indicator feature="$ctrl.feature"></be-feature-indicator>
</div>
<div class="vertical-center">
<datatable-searchbar on-change="($ctrl.onChangeKeyword)" value="$ctrl.keyword"></datatable-searchbar>

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

@ -26,15 +26,7 @@
</div>
</rd-widget-body>
</rd-widget>
</div>
</div>
</div>
<div class="be-indicator-container limited-be mx-4">
<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">
<div class="row mt-5">
<activity-logs-datatable
logs="$ctrl.state.logs"
keyword="$ctrl.state.keyword"

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

@ -6,9 +6,7 @@
<div class="widget-icon space-right">
<pr-icon icon="'history'"></pr-icon>
</div>
Authentication Events
<be-feature-indicator feature="$ctrl.feature"></be-feature-indicator>
</div>
<div class="vertical-center">
<datatable-searchbar on-change="($ctrl.onChangeKeyword)"></datatable-searchbar>

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

@ -25,15 +25,7 @@
</div>
</rd-widget-body>
</rd-widget>
</div>
</div>
</div>
<div class="be-indicator-container limited-be mx-4">
<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">
<div class="row mt-5">
<auth-logs-datatable
logs="$ctrl.state.logs"
keyword="$ctrl.state.keyword"

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

@ -1,6 +1,6 @@
.be-indicator {
@apply border-solid border border-gray-6;
@apply text-gray-6 text-xs;
@apply border border-solid border-gray-6;
@apply text-xs text-gray-6;
border-radius: 15px;
padding: 5px 10px;
font-weight: 400;
@ -23,5 +23,5 @@
}
.be-indicator-container {
@apply border-solid border border-gray-6;
@apply relative;
}

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

@ -57,7 +57,13 @@ export function BoxSelectorItem<T extends Value>({
type={type}
checkIcon={checkIcon}
>
{limitedToBE && <LimitedToBeBoxSelectorIndicator url={featureUrl} />}
{limitedToBE && (
<LimitedToBeBoxSelectorIndicator
url={featureUrl}
// show tooltip only for radio type options because be-only checkbox options can't be selected
showTooltip={type === 'radio'}
/>
)}
<div
className={clsx('flex min-w-[140px] gap-2', {
'opacity-30': limitedToBE,

16
app/react/components/BoxSelector/LimitedToBeBoxSelectorIndicator.tsx
View File

@ -5,9 +5,13 @@ import { Tooltip } from '@@/Tip/Tooltip';
interface Props {
url?: string;
showTooltip?: boolean;
}
export function LimitedToBeBoxSelectorIndicator({ url }: Props) {
export function LimitedToBeBoxSelectorIndicator({
url,
showTooltip = true,
}: 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">
@ -20,10 +24,12 @@ export function LimitedToBeBoxSelectorIndicator({ url }: Props) {
<Icon icon={Briefcase} className="!mr-1" />
<span>Business Feature</span>
</a>
<Tooltip
size="sm"
message="Select this option to preview this business feature."
/>
{showTooltip && (
<Tooltip
size="sm"
message="Select this option to preview this business feature."
/>
)}
</div>
</div>
);

50
app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/RollbackApplicationButton.tsx
View File

@ -11,6 +11,7 @@ import { Icon } from '@@/Icon';
import { confirm } from '@@/modals/confirm';
import { ModalType } from '@@/modals';
import { buildConfirmButton } from '@@/modals/utils';
import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
import {
useApplicationRevisionList,
@ -60,27 +61,38 @@ export function RollbackApplicationButton({
appName
);
const isRollbackNotAvailable =
!app ||
!appRevisions ||
appRevisions?.length < 2 ||
appDeployMethod !== 'application form' ||
patchAppMutation.isLoading;
const rollbackButton = (
<Button
ng-if="!ctrl.isExternalApplication()"
type="button"
color="light"
size="small"
className="!ml-0"
disabled={isRollbackNotAvailable}
onClick={() => rollbackApplication()}
data-cy="k8sAppDetail-rollbackButton"
>
<Icon icon={RotateCcw} className="mr-1" />
Rollback to previous configuration
</Button>
);
return (
<Authorized authorizations="K8sApplicationDetailsW">
<Button
ng-if="!ctrl.isExternalApplication()"
type="button"
color="light"
size="small"
className="!ml-0"
disabled={
!app ||
!appRevisions ||
appRevisions?.length < 2 ||
appDeployMethod !== 'application form' ||
patchAppMutation.isLoading
}
onClick={() => rollbackApplication()}
data-cy="k8sAppDetail-rollbackButton"
>
<Icon icon={RotateCcw} className="mr-1" />
Rollback to previous configuration
</Button>
{isRollbackNotAvailable ? (
<TooltipWithChildren message="Cannot roll back to previous configuration as none currently exists">
<span>{rollbackButton}</span>
</TooltipWithChildren>
) : (
rollbackButton
)}
</Authorized>
);

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

@ -21,9 +21,8 @@ export function KubeConfigTeaserForm() {
return (
<Formik initialValues={initialValues} onSubmit={() => {}} validateOnMount>
{() => (
<Form className="mt-5">
<Form>
<FormSectionTitle>Environment details</FormSectionTitle>
<div className="form-group">
<div className="col-sm-12">
<TextTip color="blue">
@ -32,10 +31,9 @@ export function KubeConfigTeaserForm() {
href="https://docs.portainer.io/admin/environments/add/kubernetes/import"
target="_blank"
rel="noreferrer"
className="mx-1"
>
Import the kubeconfig file
</a>
</a>{' '}
of an existing Kubernetes cluster located on-premise or on a
cloud platform. This will create a corresponding environment
in Portainer and install the agent on the cluster. Please
@ -43,7 +41,7 @@ export function KubeConfigTeaserForm() {
</span>
</TextTip>
</div>
<div className="col-sm-12 text-muted small">
<div className="col-sm-12 text-muted text-xs">
<ul className="p-2 pl-4">
<li>You have a load balancer enabled in your cluster</li>
<li>You specify current-context in your kubeconfig</li>

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

@ -30,14 +30,14 @@ div.limited-be {
}
.limited-be-content {
@apply border-gray-6 p-2.5 text-xs opacity-50;
@apply border-gray-6 p-2.5 opacity-50;
}
.limited-be-link {
padding: 10px;
width: inherit;
z-index: 5;
position: relative;
position: absolute;
top: 0px;
right: 0px;
float: right;