-
- This stack was created outside of Portainer. Control over this stack is limited.
- This stack is orphaned. You can re-associate it with the current environment using the "Associate to this environment" feature.
-
-
-
-
-
-
-
-
Stack details
-
- {{ stackName }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Associate to this environment
-
This feature allows you to re-associate this stack to the current environment.
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/app/portainer/views/stacks/edit/stackController.js b/app/portainer/views/stacks/edit/stackController.js
index 5fcd19625..e0ec4095d 100644
--- a/app/portainer/views/stacks/edit/stackController.js
+++ b/app/portainer/views/stacks/edit/stackController.js
@@ -3,10 +3,6 @@ import { AccessControlFormData } from 'Portainer/components/accessControlForm/po
import { FeatureId } from '@/react/portainer/feature-flags/enums';
import { StackStatus, StackType } from '@/react/common/stacks/types';
import { extractContainerNames } from '@/react/docker/stacks/ItemView/container-names';
-import { confirmStackUpdate } from '@/react/common/stacks/common/confirm-stack-update';
-import { confirm, confirmDelete } from '@@/modals/confirm';
-import { ModalType } from '@@/modals';
-import { buildConfirmButton } from '@@/modals/utils';
angular.module('portainer.app').controller('StackController', [
'$async',
@@ -25,7 +21,6 @@ angular.module('portainer.app').controller('StackController', [
'Notifications',
'FormHelper',
'StackHelper',
- 'ResourceControlService',
'Authentication',
'ContainerHelper',
'endpoint',
@@ -46,7 +41,6 @@ angular.module('portainer.app').controller('StackController', [
Notifications,
FormHelper,
StackHelper,
- ResourceControlService,
Authentication,
ContainerHelper,
endpoint
@@ -60,7 +54,6 @@ angular.module('portainer.app').controller('StackController', [
};
$scope.endpoint = endpoint;
- $scope.isAdmin = Authentication.isAdmin();
$scope.stackWebhookFeature = FeatureId.STACK_WEBHOOK;
$scope.stackPullImageFeature = FeatureId.STACK_PULL_IMAGE;
$scope.state = {
@@ -78,68 +71,6 @@ angular.module('portainer.app').controller('StackController', [
$scope.state.showEditorTab = true;
};
- $scope.removeStack = function () {
- confirmDelete('Do you want to remove the stack? Associated services will be removed as well').then((confirmed) => {
- if (!confirmed) {
- return;
- }
- deleteStack();
- });
- };
-
- $scope.detachStackFromGit = function () {
- confirmDetachment().then(function onConfirm(confirmed) {
- if (!confirmed) {
- return;
- }
-
- deployStack({
- stackFileContent: $scope.stackFileContent,
- environmentVariables: FormHelper.removeInvalidEnvVars($scope.stack.Env),
- prune: false,
- });
- });
- };
-
- function deleteStack() {
- var endpointId = +$state.params.endpointId;
- var stack = $scope.stack;
-
- StackService.remove(stack, $transition$.params().external, endpointId)
- .then(function success() {
- Notifications.success('Stack successfully removed', stack.Name);
- $state.go('docker.stacks');
- })
- .catch(function error(err) {
- Notifications.error('Failure', err, 'Unable to remove stack ' + stack.Name);
- });
- }
-
- $scope.associateStack = function () {
- var endpointId = +$state.params.endpointId;
- var stack = $scope.stack;
- var accessControlData = $scope.formValues.AccessControlData;
- $scope.state.actionInProgress = true;
-
- StackService.associate(stack, endpointId, $scope.orphanedRunning)
- .then(function success(data) {
- const resourceControl = data.ResourceControl;
- const userDetails = Authentication.getUserDetails();
- const userId = userDetails.ID;
- return ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
- })
- .then(function success() {
- Notifications.success('Stack successfully associated', stack.Name);
- $state.go('docker.stacks');
- })
- .catch(function error(err) {
- Notifications.error('Failure', err, 'Unable to associate stack ' + stack.Name);
- })
- .finally(function final() {
- $scope.state.actionInProgress = false;
- });
- };
-
$scope.onEditorSubmit = function () {
$scope.state.actionInProgress = true;
};
@@ -148,86 +79,6 @@ angular.module('portainer.app').controller('StackController', [
$scope.state.actionInProgress = false;
};
- /**
- * Deploy a stack
- * @param {Object} stack
- * @param {string} stack.stackFileContent - The stack file content to deploy
- * @param {import('@@/form-components/EnvironmentVariablesFieldset').EnvVarValues} stack.environmentVariables - Array of environment variables
- * @param {boolean} stack.prune - Whether to prune services that are no longer referenced
- * @returns {void}
- */
- function deployStack({ stackFileContent, environmentVariables, prune }) {
- const stack = $scope.stack;
- const isSwarmStack = stack.Type === 1;
- confirmStackUpdate('Do you want to force an update of the stack?', isSwarmStack).then(function (result) {
- if (!result) {
- return;
- }
-
- // TODO: this is a work-around for stacks created with Portainer version >= 1.17.1
- // The EndpointID property is not available for these stacks, we can pass
- // the current endpoint identifier as a part of the update request. It will be used if
- // the EndpointID property is not defined on the stack.
- if (!stack.EndpointId) {
- stack.EndpointId = endpoint.Id;
- }
-
- $scope.state.actionInProgress = true;
- StackService.updateStack(stack, stackFileContent, environmentVariables, prune, result.pullImage)
- .then(function success() {
- Notifications.success('Success', 'Stack successfully deployed');
- $state.reload();
- })
- .catch(function error(err) {
- Notifications.error('Failure', err, 'Unable to create stack');
- })
- .finally(function final() {
- $scope.state.actionInProgress = false;
- });
- });
- }
-
- $scope.stopStack = stopStack;
- function stopStack() {
- return $async(stopStackAsync);
- }
- async function stopStackAsync() {
- const confirmed = await confirm({
- title: 'Are you sure?',
- modalType: ModalType.Warn,
- message: 'Are you sure you want to stop this stack?',
- confirmButton: buildConfirmButton('Stop', 'danger'),
- });
- if (!confirmed) {
- return;
- }
-
- $scope.state.actionInProgress = true;
- try {
- await StackService.stop(endpoint.Id, $scope.stack.Id);
- $state.reload();
- } catch (err) {
- Notifications.error('Failure', err, 'Unable to stop stack');
- }
- $scope.state.actionInProgress = false;
- }
-
- $scope.startStack = startStack;
- function startStack() {
- return $async(startStackAsync);
- }
- async function startStackAsync() {
- $scope.state.actionInProgress = true;
- const id = $scope.stack.Id;
- try {
- await StackService.start(endpoint.Id, id);
- $state.reload();
- } catch (err) {
- Notifications.error('Failure', err, 'Unable to start stack');
- }
- $scope.state.actionInProgress = false;
- }
-
function loadStack(id) {
return $async(async () => {
var agentProxy = $scope.applicationState.endpoint.mode.agentProxy;
@@ -399,12 +250,3 @@ angular.module('portainer.app').controller('StackController', [
initView();
},
]);
-
-function confirmDetachment() {
- return confirm({
- modalType: ModalType.Warn,
- title: 'Are you sure?',
- message: 'Do you want to detach the stack from Git?',
- confirmButton: buildConfirmButton('Detach', 'danger'),
- });
-}
diff --git a/app/react/common/stacks/queries/query-keys.ts b/app/react/common/stacks/queries/query-keys.ts
index eb27c7682..4ccdd662a 100644
--- a/app/react/common/stacks/queries/query-keys.ts
+++ b/app/react/common/stacks/queries/query-keys.ts
@@ -1,7 +1,7 @@
import { StackId } from '../types';
export const queryKeys = {
- base: () => ['stacks'],
+ base: () => ['stacks'] as const,
stack: (stackId?: StackId) => [...queryKeys.base(), stackId] as const,
stackFile: (stackId?: StackId, params?: unknown) =>
[...queryKeys.stack(stackId), 'file', params] as const,
diff --git a/app/react/common/stacks/queries/useDeleteStackByNameMutation.ts b/app/react/common/stacks/queries/useDeleteStackByNameMutation.ts
new file mode 100644
index 000000000..a8a7066e1
--- /dev/null
+++ b/app/react/common/stacks/queries/useDeleteStackByNameMutation.ts
@@ -0,0 +1,50 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { withGlobalError } from '@/react-tools/react-query';
+
+import { StackId } from '../types';
+
+import { queryKeys } from './query-keys';
+
+interface DeleteStackParams {
+ stackId: StackId;
+ stackName: string;
+ environmentId: EnvironmentId;
+ namespace: string;
+}
+
+export function useDeleteStackByNameMutation() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: deleteStackByName,
+ onSuccess: (_, variables) => {
+ // Invalidate the specific stack query
+ queryClient.invalidateQueries(queryKeys.stack(variables.stackId));
+ // Invalidate all stacks queries
+ queryClient.invalidateQueries(queryKeys.base());
+ },
+ ...withGlobalError('Unable to delete stack'),
+ });
+}
+
+async function deleteStackByName({
+ environmentId,
+ namespace,
+ stackName,
+}: DeleteStackParams) {
+ try {
+ await axios.delete(`/stacks/name/${stackName}`, {
+ params: {
+ external: false,
+ name: stackName,
+ endpointId: environmentId,
+ namespace,
+ },
+ });
+ } catch (error) {
+ throw parseAxiosError(error, 'Unable to delete stack');
+ }
+}
diff --git a/app/react/common/stacks/queries/useDeleteStackMutation.ts b/app/react/common/stacks/queries/useDeleteStackMutation.ts
new file mode 100644
index 000000000..d19acaec7
--- /dev/null
+++ b/app/react/common/stacks/queries/useDeleteStackMutation.ts
@@ -0,0 +1,44 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { withGlobalError } from '@/react-tools/react-query';
+
+import { StackId } from '../types';
+
+import { queryKeys } from './query-keys';
+
+interface DeleteStackParams {
+ id?: StackId;
+ name?: string;
+ external: boolean;
+ environmentId: EnvironmentId;
+}
+
+export function useDeleteStackMutation() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: deleteStack,
+ onSuccess: () => queryClient.invalidateQueries(queryKeys.base()),
+ ...withGlobalError('Unable to delete stack'),
+ });
+}
+
+async function deleteStack({
+ id,
+ name,
+ external,
+ environmentId,
+}: DeleteStackParams) {
+ try {
+ await axios.delete(`/stacks/${id || name}`, {
+ params: {
+ external,
+ endpointId: environmentId,
+ },
+ });
+ } catch (error) {
+ throw parseAxiosError(error, 'Unable to delete stack');
+ }
+}
diff --git a/app/react/components/buttons/Button.tsx b/app/react/components/buttons/Button.tsx
index 24be9f640..f53561a9c 100644
--- a/app/react/components/buttons/Button.tsx
+++ b/app/react/components/buttons/Button.tsx
@@ -24,6 +24,7 @@ type Color =
| 'dangerlight'
| 'warninglight'
| 'warning'
+ | 'success'
| 'none';
type Size = 'xsmall' | 'small' | 'medium' | 'large';
diff --git a/app/react/docker/stacks/ItemView/StackInfoTab/AssociateStackForm.test.tsx b/app/react/docker/stacks/ItemView/StackInfoTab/AssociateStackForm.test.tsx
new file mode 100644
index 000000000..ea29b567b
--- /dev/null
+++ b/app/react/docker/stacks/ItemView/StackInfoTab/AssociateStackForm.test.tsx
@@ -0,0 +1,310 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { delay, http, HttpResponse } from 'msw';
+
+import { server } from '@/setup-tests/server';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { createMockUsers } from '@/react-tools/test-mocks';
+import { useSwarmId } from '@/react/docker/proxy/queries/useSwarm';
+
+import { AssociateStackForm } from './AssociateStackForm';
+
+// Mock the useSwarmId hook to avoid React Query complexity
+vi.mock('@/react/docker/proxy/queries/useSwarm', () => ({
+ useSwarmId: vi.fn(),
+}));
+
+// Mock the AccessControlForm to simplify testing
+vi.mock('@/react/portainer/access-control', () => ({
+ AccessControlForm: vi.fn(({ onChange, values }) => (
+
+
+ {isExternal && (
+
+ This stack was created outside of Portainer. Control over this
+ stack is limited.
+
+ )}
+ {isOrphaned && (
+
+ This stack is orphaned. You can re-associate it with the current
+ environment using the "Associate to this environment"
+ feature.
+
+ )}
+