refactor(custom-templates): migrate list view to react [EE-2256] (#11611)

app/kubernetes/custom-templates/index.js

@@ -1,8 +1,6 @@
 import angular from 'angular';
 
-import { kubeCustomTemplatesView } from './kube-custom-templates-view';
-
-export default angular.module('portainer.kubernetes.custom-templates', []).config(config).component('kubeCustomTemplatesView', kubeCustomTemplatesView).name;
+export default angular.module('portainer.kubernetes.custom-templates', []).config(config).name;
 
 function config($stateRegistryProvider) {
   const templates = {
@@ -17,7 +15,7 @@ function config($stateRegistryProvider) {
 
     views: {
       'content@': {
-        component: 'kubeCustomTemplatesView',
+        component: 'customTemplatesView',
       },
     },
     data: {

app/kubernetes/custom-templates/kube-custom-templates-view/index.js

@@ -1,6 +0,0 @@
-import controller from './kube-custom-templates-view.controller.js';
-
-export const kubeCustomTemplatesView = {
-  templateUrl: './kube-custom-templates-view.html',
-  controller,
-};

app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.controller.js

@@ -1,83 +0,0 @@
-import _ from 'lodash-es';
-import { confirmDelete } from '@@/modals/confirm';
-
-export default class KubeCustomTemplatesViewController {
-  /* @ngInject */
-  constructor($async, $state, Authentication, CustomTemplateService, FormValidator, Notifications) {
-    Object.assign(this, { $async, $state, Authentication, CustomTemplateService, FormValidator, Notifications });
-
-    this.state = {
-      selectedTemplate: null,
-      formValidationError: '',
-      actionInProgress: false,
-    };
-
-    this.currentUser = {
-      isAdmin: false,
-      id: null,
-    };
-
-    this.isEditAllowed = this.isEditAllowed.bind(this);
-    this.getTemplates = this.getTemplates.bind(this);
-    this.validateForm = this.validateForm.bind(this);
-    this.confirmDelete = this.confirmDelete.bind(this);
-    this.selectTemplate = this.selectTemplate.bind(this);
-  }
-
-  selectTemplate(templateId) {
-    this.$state.go('kubernetes.deploy', { templateId });
-  }
-
-  isEditAllowed(template) {
-    // todo - check if current user is admin/endpointadmin/owner
-    return this.currentUser.isAdmin || this.currentUser.id === template.CreatedByUserId;
-  }
-
-  getTemplates() {
-    return this.$async(async () => {
-      try {
-        const templates = await this.CustomTemplateService.customTemplates(3);
-        this.templates = templates.filter((t) => !t.EdgeTemplate);
-      } catch (err) {
-        this.Notifications.error('Failed loading templates', err, 'Unable to load custom templates');
-      }
-    });
-  }
-
-  validateForm(accessControlData, isAdmin) {
-    this.state.formValidationError = '';
-    const error = this.FormValidator.validateAccessControl(accessControlData, isAdmin);
-
-    if (error) {
-      this.state.formValidationError = error;
-      return false;
-    }
-    return true;
-  }
-
-  confirmDelete(templateId) {
-    return this.$async(async () => {
-      const confirmed = await confirmDelete('Are you sure that you want to delete this template?');
-      if (!confirmed) {
-        return;
-      }
-
-      try {
-        var template = _.find(this.templates, { Id: templateId });
-        await this.CustomTemplateService.remove(templateId);
-        this.Notifications.success('Template successfully deleted', template && template.Title);
-        this.templates = this.templates.filter((template) => template.Id !== templateId);
-      } catch (err) {
-        this.Notifications.error('Failure', err, 'Failed to delete template');
-      }
-    });
-  }
-
-  $onInit() {
-    this.getTemplates();
-
-    this.currentUser.isAdmin = this.Authentication.isAdmin();
-    const user = this.Authentication.getUserDetails();
-    this.currentUser.id = user.ID;
-  }
-}

app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html

@@ -1,9 +0,0 @@
-<page-header title="'Custom Templates'" breadcrumbs="['Custom Templates']" reload="true"></page-header>
-
-<custom-templates-list
-  templates="$ctrl.templates"
-  on-select="($ctrl.selectTemplate)"
-  on-delete="($ctrl.confirmDelete)"
-  selected-id="$ctrl.state.selectedTemplate.Id"
-  storage-key="'kube-custom-templates'"
-></custom-templates-list>