refactor(account): migrate access tokens table to react [EE-4701] (#10669)

app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.controller.js

@@ -1,39 +0,0 @@
-export default class AccessTokensDatatableController {
-  /* @ngInject*/
-  constructor($scope, $state, $controller, DatatableService) {
-    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-
-    this.onClickAdd = () => {
-      if (this.uiCanExit()) {
-        $state.go('portainer.account.new-access-token');
-      }
-    };
-
-    this.$onInit = function () {
-      this.setDefaults();
-      this.prepareTableFromDataset();
-
-      const storedOrder = DatatableService.getDataTableOrder(this.tableKey);
-      if (storedOrder !== null) {
-        this.state.reverseOrder = storedOrder.reverse;
-        this.state.orderBy = storedOrder.orderBy;
-      }
-
-      const textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
-      if (textFilter !== null) {
-        this.state.textFilter = textFilter;
-        this.onTextFilterChange();
-      }
-
-      const storedFilters = DatatableService.getDataTableFilters(this.tableKey);
-      if (storedFilters !== null) {
-        this.filters = storedFilters;
-      }
-      if (this.filters && this.filters.state) {
-        this.filters.state.open = false;
-      }
-
-      this.onSettingsRepeaterChange();
-    };
-  }
-}

app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html

@@ -1,135 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar vertical-center">
-        <div class="toolBarTitle vertical-center">
-          <div class="widget-icon space-right">
-            <pr-icon icon="$ctrl.titleIcon"></pr-icon>
-          </div>
-          <span>{{ $ctrl.titleText }}</span>
-        </div>
-        <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" class="searchIcon"></pr-icon>
-          <input
-            type="text"
-            class="searchInput"
-            ng-model="$ctrl.state.textFilter"
-            ng-change="$ctrl.onTextFilterChange()"
-            placeholder="Search..."
-            ng-model-options="{ debounce: 300 }"
-          />
-        </div>
-        <div class="actionBar">
-          <button
-            ng-if="!$ctrl.endpointType"
-            type="button"
-            class="btn btn-sm btn-dangerlight vertical-center"
-            ng-disabled="$ctrl.state.selectedItemCount === 0"
-            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-          >
-            <pr-icon icon="'trash-2'" class-name="'icon-white'"></pr-icon>
-            <span>Remove</span>
-          </button>
-          <button type="button" class="btn btn-sm btn-primary vertical-center" ng-click="$ctrl.onClickAdd()">
-            <pr-icon icon="'plus'" class-name="'icon-white'"></pr-icon>
-            <span>Add access token</span>
-          </button>
-        </div>
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
-          <thead>
-            <tr>
-              <th>
-                <div class="vertical-center">
-                  <span class="md-checkbox">
-                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                    <label for="select_all"></label>
-                  </span>
-                  <table-column-header
-                    col-title="'Description'"
-                    can-sort="true"
-                    is-sorted="$ctrl.state.orderBy === 'description'"
-                    is-sorted-desc="$ctrl.state.orderBy === 'description' && $ctrl.state.reverseOrder"
-                    ng-click="$ctrl.changeOrderBy('description')"
-                  ></table-column-header>
-                </div>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Prefix'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'prefix'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'prefix' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('prefix')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Created'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'dateCreated'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'dateCreated' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('dateCreated')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Last Used'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'lastUsed'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'lastUsed' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('lastUsed')"
-                ></table-column-header>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-              ng-class="{ active: item.Checked }"
-            >
-              <td>
-                <span class="md-checkbox">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
-                  <label for="select_{{ $index }}"></label>
-                </span>
-                {{ item.description }}
-              </td>
-              <td>
-                {{ item.prefix }}
-              </td>
-              <td>
-                {{ item.dateCreated | getisodatefromtimestamp }}
-              </td>
-              <td>
-                <span ng-if="item.lastUsed > 0">{{ item.lastUsed | getisodatefromtimestamp }}</span>
-              </td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-muted text-center">Loading...</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-        <div class="paginationControls">
-          <form class="form-inline">
-            <span class="limitSelector">
-              <span style="margin-right: 5px"> Items per page </span>
-              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
-                <option value="0">All</option>
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-              </select>
-            </span>
-            <dir-pagination-controls max-size="5"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>

app/portainer/components/datatables/access-tokens-datatable/index.js

@@ -1,16 +0,0 @@
-import angular from 'angular';
-import controller from './access-tokens-datatable.controller';
-
-angular.module('portainer.app').component('accessTokensDatatable', {
-  templateUrl: './access-tokens-datatable.html',
-  controller,
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    removeAction: '<',
-    uiCanExit: '<',
-  },
-});

app/portainer/react/components/account.ts

@@ -4,6 +4,8 @@ import { r2a } from '@/react-tools/react2angular';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { withReactQuery } from '@/react-tools/withReactQuery';
+import { HelmRepositoryDatatable } from '@/react/portainer/account/AccountView/HelmRepositoryDatatable';
+import { AccessTokensDatatable } from '@/react/portainer/account/AccountView/AccessTokensDatatable';
 import { ApplicationSettingsWidget } from '@/react/portainer/account/AccountView/ApplicationSettings';
 
 export const accountModule = angular
@@ -14,4 +16,17 @@ export const accountModule = angular
       withUIRouter(withReactQuery(withCurrentUser(ApplicationSettingsWidget))),
       []
     )
+  )
+  .component(
+    'helmRepositoryDatatable',
+    r2a(
+      withUIRouter(withReactQuery(withCurrentUser(HelmRepositoryDatatable))),
+      []
+    )
+  )
+  .component(
+    'accessTokensDatatable',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(AccessTokensDatatable))), [
+      'canExit',
+    ])
   ).name;

app/portainer/react/components/index.ts

@@ -8,7 +8,6 @@ import { AnnotationsBeTeaser } from '@/react/kubernetes/annotations/AnnotationsB
 import { withFormValidation } from '@/react-tools/withFormValidation';
 import { GroupAssociationTable } from '@/react/portainer/environments/environment-groups/components/GroupAssociationTable';
 import { AssociatedEnvironmentsSelector } from '@/react/portainer/environments/environment-groups/components/AssociatedEnvironmentsSelector';
-import { HelmRepositoryDatatable } from '@/react/portainer/account/AccountView/HelmRepositoryDatatable';
 import { withControlledInput } from '@/react-tools/withControlledInput';
 
 import {
@@ -241,13 +240,6 @@ export const ngModule = angular
   .component(
     'associatedEndpointsSelector',
     r2a(withReactQuery(AssociatedEnvironmentsSelector), ['onChange', 'value'])
-  )
-  .component(
-    'helmRepositoryDatatable',
-    r2a(
-      withUIRouter(withReactQuery(withCurrentUser(HelmRepositoryDatatable))),
-      []
-    )
   );
 
 export const componentsModule = ngModule.name;

app/portainer/views/account/account.html

@@ -88,18 +88,6 @@
 
 <application-settings-widget></application-settings-widget>
 
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <access-tokens-datatable
-      title-text="Access tokens"
-      title-icon="key"
-      dataset="tokens"
-      table-key="tokens"
-      order-by="Description"
-      remove-action="removeAction"
-      ui-can-exit="uiCanExit"
-    ></access-tokens-datatable>
-  </div>
-</div>
+<access-tokens-datatable ui-can-exit="uiCanExit()"></access-tokens-datatable>
 
 <helm-repository-datatable></helm-repository-datatable>

app/portainer/views/account/accountController.js

@@ -1,4 +1,4 @@
-import { confirmChangePassword, confirmDelete } from '@@/modals/confirm';
+import { confirmChangePassword } from '@@/modals/confirm';
 import { openDialog } from '@@/modals/Dialog';
 import { buildConfirmButton } from '@@/modals/utils';
 
@@ -68,35 +68,7 @@ angular.module('portainer.app').controller('AccountController', [
       return this.uiCanExit();
     };
 
-    $scope.removeAction = (selectedTokens) => {
-      const msg = 'Do you want to remove the selected access token(s)? Any script or application using these tokens will no longer be able to invoke the Portainer API.';
-
-      confirmDelete(msg).then((confirmed) => {
-        if (!confirmed) {
-          return;
-        }
-        let actionCount = selectedTokens.length;
-        selectedTokens.forEach((token) => {
-          UserService.deleteAccessToken($scope.userID, token.id)
-            .then(() => {
-              Notifications.success('Success', 'Token successfully removed');
-              var index = $scope.tokens.indexOf(token);
-              $scope.tokens.splice(index, 1);
-            })
-            .catch((err) => {
-              Notifications.error('Failure', err, 'Unable to remove token');
-            })
-            .finally(() => {
-              --actionCount;
-              if (actionCount === 0) {
-                $state.reload();
-              }
-            });
-        });
-      });
-    };
-
-    async function initView() {
+    function initView() {
       const state = StateManager.getState();
       const userDetails = Authentication.getUserDetails();
       $scope.userID = userDetails.ID;
@@ -127,14 +99,6 @@ angular.module('portainer.app').controller('AccountController', [
         .catch(function error(err) {
           Notifications.error('Failure', err, 'Unable to retrieve application settings');
         });
-
-      UserService.getAccessTokens($scope.userID)
-        .then(function success(data) {
-          $scope.tokens = data;
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to retrieve user tokens');
-        });
     }
 
     initView();