From ddb89f71b47302e6226d55ea3635aba479f894f8 Mon Sep 17 00:00:00 2001 From: Chaim Lev-Ari Date: Mon, 8 Apr 2024 17:24:45 +0300 Subject: [PATCH] refactor(settings/auth): migrate ldap tables to react [EE-4712] (#10822) --- app/portainer/react/components/settings.ts | 26 +----- .../settings/authentication/ldap/index.js | 6 +- .../ldap-custom-group-search.html | 6 +- .../ldap-custom-user-search.html | 6 +- .../ldap-group-search/ldap-group-search.html | 6 +- .../ldap/ldap-groups-datatable/index.js | 12 --- .../ldap-groups-datatable.html | 80 ------------------- .../ldap-user-search/ldap-user-search.html | 6 +- .../ldap/ldap-users-datatable/index.js | 12 --- .../ldap-users-datatable.html | 74 ----------------- .../LDAPAuth/LDAPGroupsTable.tsx | 49 ++++++++++++ .../LDAPAuth/LDAPUsersTable.tsx | 37 +++++++++ 12 files changed, 95 insertions(+), 225 deletions(-) delete mode 100644 app/portainer/settings/authentication/ldap/ldap-groups-datatable/index.js delete mode 100644 app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html delete mode 100644 app/portainer/settings/authentication/ldap/ldap-users-datatable/index.js delete mode 100644 app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html create mode 100644 app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPGroupsTable.tsx create mode 100644 app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPUsersTable.tsx diff --git a/app/portainer/react/components/settings.ts b/app/portainer/react/components/settings.ts index 1e9811e33..47abf601f 100644 --- a/app/portainer/react/components/settings.ts +++ b/app/portainer/react/components/settings.ts @@ -6,11 +6,8 @@ import { InternalAuth } from '@/react/portainer/settings/AuthenticationView/Inte import { r2a } from '@/react-tools/react2angular'; import { withReactQuery } from '@/react-tools/withReactQuery'; import { withUIRouter } from '@/react-tools/withUIRouter'; -import { ApplicationSettingsPanel } from '@/react/portainer/settings/SettingsView/ApplicationSettingsPanel'; -import { KubeSettingsPanel } from '@/react/portainer/settings/SettingsView/KubeSettingsPanel'; -import { HelmCertPanel } from '@/react/portainer/settings/SettingsView/HelmCertPanel'; -import { HiddenContainersPanel } from '@/react/portainer/settings/SettingsView/HiddenContainersPanel/HiddenContainersPanel'; -import { SSLSettingsPanelWrapper } from '@/react/portainer/settings/SettingsView/SSLSettingsPanel/SSLSettingsPanel'; +import { LDAPUsersTable } from '@/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPUsersTable'; +import { LDAPGroupsTable } from '@/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPGroupsTable'; export const settingsModule = angular .module('portainer.app.react.components.settings', []) @@ -23,20 +20,5 @@ export const settingsModule = angular 'internalAuth', r2a(InternalAuth, ['onSaveSettings', 'isLoading', 'value', 'onChange']) ) - .component( - 'applicationSettingsPanel', - r2a(withReactQuery(ApplicationSettingsPanel), ['onSuccess', 'settings']) - ) - .component( - 'sslSettingsPanel', - r2a(withReactQuery(SSLSettingsPanelWrapper), []) - ) - .component('helmCertPanel', r2a(withReactQuery(HelmCertPanel), [])) - .component( - 'hiddenContainersPanel', - r2a(withUIRouter(withReactQuery(HiddenContainersPanel)), []) - ) - .component( - 'kubeSettingsPanel', - r2a(withUIRouter(withReactQuery(KubeSettingsPanel)), ['settings']) - ).name; + .component('ldapUsersDatatable', r2a(LDAPUsersTable, ['dataset'])) + .component('ldapGroupsDatatable', r2a(LDAPGroupsTable, ['dataset'])).name; diff --git a/app/portainer/settings/authentication/ldap/index.js b/app/portainer/settings/authentication/ldap/index.js index fae32a5a1..986ee9d25 100644 --- a/app/portainer/settings/authentication/ldap/index.js +++ b/app/portainer/settings/authentication/ldap/index.js @@ -6,7 +6,6 @@ import { ldapSettingsCustom } from './ldap-settings-custom'; import { ldapSettingsOpenLdap } from './ldap-settings-openldap'; import { ldapConnectivityCheck } from './ldap-connectivity-check'; -import { ldapGroupsDatatable } from './ldap-groups-datatable'; import { ldapGroupSearch } from './ldap-group-search'; import { ldapGroupSearchItem } from './ldap-group-search-item'; import { ldapUserSearch } from './ldap-user-search'; @@ -18,7 +17,6 @@ import { ldapCustomAdminGroup } from './ldap-custom-admin-group'; import { ldapSettingsSecurity } from './ldap-settings-security'; import { ldapSettingsTestLogin } from './ldap-settings-test-login'; import { ldapCustomUserSearch } from './ldap-custom-user-search'; -import { ldapUsersDatatable } from './ldap-users-datatable'; import { LDAPService } from './ldap.service'; import { LDAP } from './ldap.rest'; @@ -27,7 +25,6 @@ export default angular .service('LDAPService', LDAPService) .service('LDAP', LDAP) .component('ldapConnectivityCheck', ldapConnectivityCheck) - .component('ldapGroupsDatatable', ldapGroupsDatatable) .component('ldapSettings', ldapSettings) .component('adSettings', adSettings) .component('ldapGroupSearch', ldapGroupSearch) @@ -42,5 +39,4 @@ export default angular .component('ldapSettingsOpenLdap', ldapSettingsOpenLdap) .component('ldapSettingsSecurity', ldapSettingsSecurity) .component('ldapSettingsTestLogin', ldapSettingsTestLogin) - .component('ldapCustomUserSearch', ldapCustomUserSearch) - .component('ldapUsersDatatable', ldapUsersDatatable).name; + .component('ldapCustomUserSearch', ldapCustomUserSearch).name; diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html index 25ea00c9a..9583a476e 100644 --- a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html +++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html @@ -67,8 +67,4 @@ -
-
- -
-
+ diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html index 4f31caff6..d1c7843d8 100644 --- a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html +++ b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html @@ -56,8 +56,4 @@ -
-
- -
-
+ diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html index 6170defe6..9cc1f2468 100644 --- a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html +++ b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html @@ -25,8 +25,4 @@ -
-
- -
-
+ diff --git a/app/portainer/settings/authentication/ldap/ldap-groups-datatable/index.js b/app/portainer/settings/authentication/ldap/ldap-groups-datatable/index.js deleted file mode 100644 index 28cacef0c..000000000 --- a/app/portainer/settings/authentication/ldap/ldap-groups-datatable/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export const ldapGroupsDatatable = { - templateUrl: './ldap-groups-datatable.html', - controller: 'GenericDatatableController', - bindings: { - titleText: '@', - titleIcon: '@', - dataset: '<', - tableKey: '@', - orderBy: '@', - reverseOrder: '<', - }, -}; diff --git a/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html b/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html deleted file mode 100644 index 5e0227ba6..000000000 --- a/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html +++ /dev/null @@ -1,80 +0,0 @@ -
- - -
-
- - {{ $ctrl.titleText }} -
-
- - -
-
-
- - - - - - - - - - - - - - - - - - - -
- - - -
- {{ item.Name }} - -

{{ group }}

-
Loading...
No groups found.
-
-
-
-
- - Items per page - - - -
-
-
- - -
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html index a0d914014..027111d56 100644 --- a/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html +++ b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html @@ -32,8 +32,4 @@ -
-
- -
-
+ diff --git a/app/portainer/settings/authentication/ldap/ldap-users-datatable/index.js b/app/portainer/settings/authentication/ldap/ldap-users-datatable/index.js deleted file mode 100644 index 4c80771d4..000000000 --- a/app/portainer/settings/authentication/ldap/ldap-users-datatable/index.js +++ /dev/null @@ -1,12 +0,0 @@ -export const ldapUsersDatatable = { - templateUrl: './ldap-users-datatable.html', - controller: 'GenericDatatableController', - bindings: { - titleText: '@', - titleIcon: '@', - dataset: '<', - tableKey: '@', - orderBy: '@', - reverseOrder: '<', - }, -}; diff --git a/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html b/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html deleted file mode 100644 index 793554ede..000000000 --- a/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html +++ /dev/null @@ -1,74 +0,0 @@ -
- - -
-
- - {{ $ctrl.titleText }} -
-
- - -
-
-
- - - - - - - - - - - - - - - - - -
- -
- {{ item }} -
Loading...
No users found.
-
-
-
-
- - Items per page - - - -
-
-
- - -
diff --git a/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPGroupsTable.tsx b/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPGroupsTable.tsx new file mode 100644 index 000000000..a61df25eb --- /dev/null +++ b/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPGroupsTable.tsx @@ -0,0 +1,49 @@ +import { Users } from 'lucide-react'; +import { createColumnHelper } from '@tanstack/react-table'; + +import { Datatable } from '@@/datatables'; +import { useTableStateWithoutStorage } from '@@/datatables/useTableState'; + +const columns = getColumns(); + +interface Value { + Name: string; + Groups: string[]; +} + +export function LDAPGroupsTable({ dataset }: { dataset?: Value[] }) { + const tableState = useTableStateWithoutStorage(); + + return ( + + ); +} + +function getColumns() { + const helper = createColumnHelper(); + + return [ + helper.accessor('Name', {}), + helper.accessor((item) => item.Groups.join(','), { + header: 'Groups', + cell: ({ row: { original: item } }) => ( + <> + {item.Groups.map((g) => ( +

+ {g} +

+ ))} + + ), + }), + ]; +} diff --git a/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPUsersTable.tsx b/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPUsersTable.tsx new file mode 100644 index 000000000..c394d46e4 --- /dev/null +++ b/app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPUsersTable.tsx @@ -0,0 +1,37 @@ +import { Users } from 'lucide-react'; + +import { Datatable } from '@@/datatables'; +import { useTableStateWithoutStorage } from '@@/datatables/useTableState'; + +const columns = getColumns(); + +interface Value { + value: string; +} + +export function LDAPUsersTable({ dataset }: { dataset?: string[] }) { + const tableState = useTableStateWithoutStorage(); + const items = dataset?.map((value) => ({ value })); + + return ( + + ); +} + +function getColumns() { + return [ + { + header: 'Name', + accessorFn: ({ value }: Value) => value, + }, + ]; +}