refactor(containers): migrate view to react [EE-2212] (#6577)

Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>

app/portainer/environments/useEnvironment.tsx

@@ -1,27 +0,0 @@
-import { createContext, ReactNode, useContext } from 'react';
-
-import type { Environment } from './types';
-
-const EnvironmentContext = createContext<Environment | null>(null);
-
-export function useEnvironment() {
-  const context = useContext(EnvironmentContext);
-  if (context === null) {
-    throw new Error('must be nested under EnvironmentProvider');
-  }
-
-  return context;
-}
-
-interface Props {
-  children: ReactNode;
-  environment: Environment;
-}
-
-export function EnvironmentProvider({ children, environment }: Props) {
-  return (
-    <EnvironmentContext.Provider value={environment}>
-      {children}
-    </EnvironmentContext.Provider>
-  );
-}

app/portainer/hooks/useCurrentEnvironment.ts

@@ -0,0 +1,8 @@
+import { useEnvironment } from '../environments/queries/useEnvironment';
+
+import { useEnvironmentId } from './useEnvironmentId';
+
+export function useCurrentEnvironment() {
+  const id = useEnvironmentId();
+  return useEnvironment(id);
+}

app/portainer/hooks/useLocalStorage.ts

@@ -2,7 +2,7 @@ import { useState, useCallback, useMemo } from 'react';
 
 const localStoragePrefix = 'portainer';
 
-function keyBuilder(key: string) {
+export function keyBuilder(key: string) {
   return `${localStoragePrefix}.${key}`;
 }
 

app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatable.tsx

@@ -20,7 +20,7 @@ import {
 import {
   PaginationTableSettings,
   SortableTableSettings,
-} from '@@/datatables/types';
+} from '@@/datatables/types-old';
 
 import { useFDOProfiles } from './useFDOProfiles';
 import { useColumns } from './columns';

app/portainer/views/stacks/edit/stack.html

@@ -132,10 +132,10 @@
             <uib-tab-heading> <i class="fa fa-pencil-alt space-right" aria-hidden="true"></i> Editor </uib-tab-heading>
             <form class="form-horizontal" ng-if="state.showEditorTab" style="margin-top: 10px" name="stackUpdateForm">
               <div class="form-group">
-                <span class="col-sm-12 text-muted small" style="margin-bottom: 7px" ng-if="stackType == 2 && composeSyntaxMaxVersion == 2">
+                <span class="col-sm-12 text-muted small" style="margin-bottom: 7px" ng-if="stackType == STACK_TYPES.DockerCompose && composeSyntaxMaxVersion == 2">
                   This stack will be deployed using the equivalent of <code>docker compose</code>. Only Compose file format version <b>2</b> is supported at the moment.
                 </span>
-                <span class="col-sm-12 text-muted small" style="margin-bottom: 7px" ng-if="stackType == 2 && composeSyntaxMaxVersion > 2">
+                <span class="col-sm-12 text-muted small" style="margin-bottom: 7px" ng-if="stackType == STACK_TYPES.DockerCompose && composeSyntaxMaxVersion > 2">
                   This stack will be deployed using <code>docker compose</code>.
                 </span>
                 <span class="col-sm-12 text-muted small">
@@ -222,11 +222,11 @@
   </div>
 </div>
 
-<div class="row" ng-if="containers && (!orphaned || orphanedRunning)">
-  <div class="col-sm-12">
-    <containers-datatable dataset="containers" endpoint="endpoint" table-key="stack-containers"></containers-datatable>
-  </div>
-</div>
+<stack-containers-datatable
+  ng-if="stackType !== STACK_TYPES.DockerSwarm && (!orphaned || orphanedRunning)"
+  stack-name="stackName"
+  environment="endpoint"
+></stack-containers-datatable>
 
 <div class="row" ng-if="services && (!orphaned || orphanedRunning)">
   <div class="col-sm-12">

app/portainer/views/stacks/edit/stackController.js

@@ -2,6 +2,7 @@ import { ResourceControlType } from '@/portainer/access-control/types';
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
 import { FeatureId } from 'Portainer/feature-flags/enums';
 import { getEnvironments } from '@/portainer/environments/environment.service';
+import { StackStatus, StackType } from '@/react/docker/stacks/types';
 
 angular.module('portainer.app').controller('StackController', [
   '$async',
@@ -54,6 +55,8 @@ angular.module('portainer.app').controller('StackController', [
     ContainerHelper,
     endpoint
   ) {
+    $scope.STACK_TYPES = StackType;
+
     $scope.resourceType = ResourceControlType.Stack;
 
     $scope.onUpdateResourceControlSuccess = function () {
@@ -363,19 +366,15 @@ angular.module('portainer.app').controller('StackController', [
             });
           })
           .then(function success(data) {
-            const isSwarm = $scope.stack.Type === 1;
+            const isSwarm = $scope.stack.Type === StackType.DockerSwarm;
             $scope.stackFileContent = data.stackFile;
             // workaround for missing status, if stack has resources, set the status to 1 (active), otherwise to 2 (inactive) (https://github.com/portainer/portainer/issues/4422)
             if (!$scope.stack.Status) {
               $scope.stack.Status = data.resources && ((isSwarm && data.resources.services.length) || data.resources.containers.length) ? 1 : 2;
             }
 
-            if ($scope.stack.Status === 1) {
-              if (isSwarm) {
-                assignSwarmStackResources(data.resources, agentProxy);
-              } else {
-                assignComposeStackResources(data.resources);
-              }
+            if (isSwarm && $scope.stack.Status === StackStatus.Active) {
+              assignSwarmStackResources(data.resources, agentProxy);
             }
 
             $scope.state.yamlError = StackHelper.validateYAML($scope.stackFileContent, $scope.containerNames);
@@ -431,21 +430,15 @@ angular.module('portainer.app').controller('StackController', [
       });
     }
 
-    function assignComposeStackResources(resources) {
-      $scope.containers = resources.containers;
-    }
-
     function loadExternalStack(name) {
-      var stackType = $transition$.params().type;
-      if (!stackType || (stackType !== '1' && stackType !== '2')) {
+      const stackType = $scope.stackType;
+      if (!stackType || (stackType !== StackType.DockerSwarm && stackType !== StackType.DockerCompose)) {
         Notifications.error('Failure', null, 'Invalid type URL parameter.');
         return;
       }
 
-      if (stackType === '1') {
+      if (stackType === StackType.DockerSwarm) {
         loadExternalSwarmStack(name);
-      } else {
-        loadExternalComposeStack(name);
       }
     }
 
@@ -461,16 +454,6 @@ angular.module('portainer.app').controller('StackController', [
         });
     }
 
-    function loadExternalComposeStack(name) {
-      retrieveComposeStackResources(name)
-        .then(function success(data) {
-          assignComposeStackResources(data);
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to retrieve stack details');
-        });
-    }
-
     this.uiCanExit = async function () {
       if ($scope.stackFileContent && $scope.state.isEditorDirty) {
         return ModalService.confirmWebEditorDiscard();
@@ -515,6 +498,7 @@ angular.module('portainer.app').controller('StackController', [
       $scope.composeSyntaxMaxVersion = endpoint.ComposeSyntaxMaxVersion;
 
       $scope.stackType = $transition$.params().type;
+      $scope.editorReadOnly = !Authentication.hasAuthorizations(['PortainerStackUpdate']);
     }
 
     initView();