diff --git a/app/react/edge/components/EdgeGroupAssociationTable.tsx b/app/react/edge/components/EdgeGroupAssociationTable.tsx
index d2f9c9d8a..70ff66a08 100644
--- a/app/react/edge/components/EdgeGroupAssociationTable.tsx
+++ b/app/react/edge/components/EdgeGroupAssociationTable.tsx
@@ -2,15 +2,15 @@ import { createColumnHelper } from '@tanstack/react-table';
import { truncate } from 'lodash';
import { useMemo, useState } from 'react';
+import { useTags } from '@/portainer/tags/queries';
+import { useGroups } from '@/react/portainer/environments/environment-groups/queries';
+import { EnvironmentsQueryParams } from '@/react/portainer/environments/environment.service';
import { useEnvironmentList } from '@/react/portainer/environments/queries';
import { Environment } from '@/react/portainer/environments/types';
-import { useGroups } from '@/react/portainer/environments/environment-groups/queries';
-import { useTags } from '@/portainer/tags/queries';
-import { EnvironmentsQueryParams } from '@/react/portainer/environments/environment.service';
import { AutomationTestingProps } from '@/types';
-import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
import { Datatable, TableRow } from '@@/datatables';
+import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
type DecoratedEnvironment = Environment & {
Tags: string[];
@@ -41,12 +41,12 @@ const columns = [
export function EdgeGroupAssociationTable({
title,
query,
- onClickRow,
+ onClickRow = () => {},
'data-cy': dataCy,
}: {
title: string;
query: EnvironmentsQueryParams;
- onClickRow: (env: Environment) => void;
+ onClickRow?: (env: Environment) => void;
} & AutomationTestingProps) {
const tableState = useTableStateWithoutStorage('Name');
const [page, setPage] = useState(0);
diff --git a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/EdgeGroupSelector.tsx b/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/EdgeGroupSelector.tsx
index 9a6f29594..71a313686 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/EdgeGroupSelector.tsx
+++ b/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/EdgeGroupSelector.tsx
@@ -1,11 +1,11 @@
import { notifySuccess } from '@/portainer/services/notifications';
-import { useCreateGroupMutation } from '@/react/edge/edge-groups/queries/useCreateEdgeGroupMutation';
+import { useCreateEdgeGroupMutation } from '@/react/edge/edge-groups/queries/useCreateEdgeGroupMutation';
import { useEdgeGroups } from '@/react/edge/edge-groups/queries/useEdgeGroups';
import { CreatableSelector } from './CreatableSelector';
export function EdgeGroupsSelector() {
- const createMutation = useCreateGroupMutation();
+ const createMutation = useCreateEdgeGroupMutation();
const edgeGroupsQuery = useEdgeGroups({
select: (edgeGroups) =>
diff --git a/app/react/edge/edge-groups/.keep b/app/react/edge/edge-groups/.keep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/react/edge/edge-groups/CreateView/.keep b/app/react/edge/edge-groups/CreateView/.keep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/react/edge/edge-groups/CreateView/CreateView.tsx b/app/react/edge/edge-groups/CreateView/CreateView.tsx
new file mode 100644
index 000000000..9d279193f
--- /dev/null
+++ b/app/react/edge/edge-groups/CreateView/CreateView.tsx
@@ -0,0 +1,55 @@
+import { useRouter } from '@uirouter/react';
+
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+
+import { useCreateEdgeGroupMutation } from '../queries/useCreateEdgeGroupMutation';
+import { EdgeGroupForm } from '../components/EdgeGroupForm/EdgeGroupForm';
+
+export function CreateView() {
+ const mutation = useCreateEdgeGroupMutation();
+ const router = useRouter();
+
+ return (
+ <>
+
+
+
+
+
+
+ {
+ mutation.mutate(
+ {
+ endpoints: environmentIds,
+ ...values,
+ },
+ {
+ onSuccess: () => {
+ notifySuccess(
+ 'Success',
+ 'Edge group successfully created'
+ );
+ router.stateService.go('^');
+ },
+ }
+ );
+ }}
+ isLoading={mutation.isLoading}
+ />
+
+
+
+
+
+ );
+}
diff --git a/app/react/edge/edge-groups/ItemView/.keep b/app/react/edge/edge-groups/ItemView/.keep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/react/edge/edge-groups/ItemView/ItemView.tsx b/app/react/edge/edge-groups/ItemView/ItemView.tsx
new file mode 100644
index 000000000..015b1e9a4
--- /dev/null
+++ b/app/react/edge/edge-groups/ItemView/ItemView.tsx
@@ -0,0 +1,72 @@
+import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
+
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+import { Redirect } from '@@/Redirect';
+
+import { useUpdateEdgeGroupMutation } from '../queries/useUpdateEdgeGroupMutation';
+import { EdgeGroupForm } from '../components/EdgeGroupForm/EdgeGroupForm';
+import { useEdgeGroup } from '../queries/useEdgeGroup';
+
+export function ItemView() {
+ const {
+ params: { groupId: id },
+ } = useCurrentStateAndParams();
+ const groupQuery = useEdgeGroup(id);
+ const mutation = useUpdateEdgeGroupMutation();
+ const router = useRouter();
+
+ if (groupQuery.isError) {
+ return
;
+ }
+
+ if (!groupQuery.data) {
+ return null;
+ }
+
+ const group = groupQuery.data;
+ return (
+ <>
+
+
+
+
+
+
+ {
+ mutation.mutate(
+ {
+ id,
+ endpoints: environmentIds,
+ ...values,
+ },
+ {
+ onSuccess: () => {
+ notifySuccess(
+ 'Success',
+ 'Edge group successfully updated'
+ );
+ router.stateService.go('^');
+ },
+ }
+ );
+ }}
+ isLoading={mutation.isLoading}
+ />
+
+
+
+
+
+ );
+}
diff --git a/app/react/edge/edge-groups/components/EdgeGroupForm/DynamicGroupFieldset.tsx b/app/react/edge/edge-groups/components/EdgeGroupForm/DynamicGroupFieldset.tsx
new file mode 100644
index 000000000..6d3f19760
--- /dev/null
+++ b/app/react/edge/edge-groups/components/EdgeGroupForm/DynamicGroupFieldset.tsx
@@ -0,0 +1,45 @@
+import { useFormikContext } from 'formik';
+
+import { EdgeGroupAssociationTable } from '@/react/edge/components/EdgeGroupAssociationTable';
+import { EdgeTypes } from '@/react/portainer/environments/types';
+
+import { BoxSelector } from '@@/BoxSelector';
+import { TagSelector } from '@@/TagSelector';
+import { FormSection } from '@@/form-components/FormSection';
+
+import { tagOptions } from './tag-options';
+import { FormValues } from './types';
+
+export function DynamicGroupFieldset() {
+ const { values, setFieldValue, errors } = useFormikContext
();
+ return (
+ <>
+
+
+ setFieldValue('partialMatch', partialMatch)
+ }
+ options={tagOptions}
+ radioName="partialMatch"
+ />
+ setFieldValue('tagIds', tagIds)}
+ errors={errors.tagIds}
+ />
+
+
+
+
+ );
+}
diff --git a/app/react/edge/edge-groups/components/EdgeGroupForm/EdgeGroupForm.tsx b/app/react/edge/edge-groups/components/EdgeGroupForm/EdgeGroupForm.tsx
new file mode 100644
index 000000000..1e401dfa7
--- /dev/null
+++ b/app/react/edge/edge-groups/components/EdgeGroupForm/EdgeGroupForm.tsx
@@ -0,0 +1,90 @@
+import { Form, Formik, useFormikContext } from 'formik';
+
+import { FormSection } from '@@/form-components/FormSection';
+import { BoxSelector } from '@@/BoxSelector';
+import { FormActions } from '@@/form-components/FormActions';
+
+import { EdgeGroup } from '../../types';
+
+import { groupTypeOptions } from './group-type-options';
+import { FormValues } from './types';
+import { useValidation } from './useValidation';
+import { DynamicGroupFieldset } from './DynamicGroupFieldset';
+import { StaticGroupFieldset } from './StaticGroupFieldset';
+import { NameField } from './NameField';
+
+export function EdgeGroupForm({
+ onSubmit,
+ isLoading,
+ group,
+}: {
+ onSubmit: (values: FormValues) => void;
+ isLoading: boolean;
+ group?: EdgeGroup;
+}) {
+ const validation = useValidation({ id: group?.Id });
+ return (
+
+
+
+ );
+}
+
+function InnerForm({
+ isLoading,
+ isCreate,
+}: {
+ isLoading: boolean;
+ isCreate: boolean;
+}) {
+ const { values, setFieldValue, isValid, errors } =
+ useFormikContext();
+
+ return (
+
+ );
+}
diff --git a/app/react/edge/edge-groups/components/EdgeGroupForm/NameField.tsx b/app/react/edge/edge-groups/components/EdgeGroupForm/NameField.tsx
new file mode 100644
index 000000000..3ea4702e3
--- /dev/null
+++ b/app/react/edge/edge-groups/components/EdgeGroupForm/NameField.tsx
@@ -0,0 +1,42 @@
+import { Field, FormikErrors } from 'formik';
+import { string } from 'yup';
+import { useMemo } from 'react';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+import { useEdgeGroups } from '../../queries/useEdgeGroups';
+import { EdgeGroup } from '../../types';
+
+export function NameField({ errors }: { errors?: FormikErrors }) {
+ return (
+
+
+
+ );
+}
+
+export function useNameValidation(id?: EdgeGroup['Id']) {
+ const edgeGroupsQuery = useEdgeGroups();
+
+ return useMemo(
+ () =>
+ string()
+ .required('Name is required')
+ .test({
+ name: 'is-unique',
+ test: (value) =>
+ !edgeGroupsQuery.data?.find(
+ (group) => group.Name === value && group.Id !== id
+ ),
+ message: 'Name must be unique',
+ }),
+ [edgeGroupsQuery.data, id]
+ );
+}
diff --git a/app/react/edge/edge-groups/components/EdgeGroupForm/StaticGroupFieldset.tsx b/app/react/edge/edge-groups/components/EdgeGroupForm/StaticGroupFieldset.tsx
new file mode 100644
index 000000000..bb333af7b
--- /dev/null
+++ b/app/react/edge/edge-groups/components/EdgeGroupForm/StaticGroupFieldset.tsx
@@ -0,0 +1,40 @@
+import { useFormikContext } from 'formik';
+
+import { AssociatedEdgeEnvironmentsSelector } from '@/react/edge/components/AssociatedEdgeEnvironmentsSelector';
+
+import { FormSection } from '@@/form-components/FormSection';
+import { confirmDestructive } from '@@/modals/confirm';
+import { buildConfirmButton } from '@@/modals/utils';
+
+import { FormValues } from './types';
+
+export function StaticGroupFieldset({ isEdit }: { isEdit?: boolean }) {
+ const { values, setFieldValue, errors } = useFormikContext();
+
+ return (
+
+
+
{
+ if (meta.type === 'remove' && isEdit) {
+ const confirmed = await confirmDestructive({
+ title: 'Confirm action',
+ message:
+ 'Removing the environment from this group will remove its corresponding edge stacks',
+ confirmButton: buildConfirmButton('Confirm'),
+ });
+
+ if (!confirmed) {
+ return;
+ }
+ }
+
+ setFieldValue('environmentIds', environmentIds);
+ }}
+ />
+