@@ -137,6 +137,25 @@ export function InnerForm({
)}
+ {isTemplateVariablesEnabled && (
+
setFieldValue('Variables', values)}
+ isVariablesNamesFromParent={!isEditorReadonly}
+ errors={errors.Variables}
+ />
+ )}
+
+ {!!values.AccessControl && (
+ setFieldValue('AccessControl', values)}
+ values={values.AccessControl}
+ errors={errors.AccessControl as FormikErrors}
+ formNamespace="accessControl"
+ />
+ )}
+
{values.EdgeSettings && (
@@ -163,33 +182,4 @@ export function InnerForm({
/>
);
-
- function handleChangeFileContent(value: string) {
- setFieldValue(
- 'FileContent',
- value,
- isTemplateVariablesEnabled ? !value : true
- );
- parseTemplate(value);
- }
-
- function parseTemplate(value: string) {
- if (!isTemplateVariablesEnabled || value === '') {
- setFieldValue('Variables', []);
- return;
- }
-
- const [variables, validationError] = getTemplateVariables(value);
-
- setFieldError(
- 'FileContent',
- validationError ? `Template invalid: ${validationError}` : undefined
- );
- if (variables) {
- setFieldValue(
- 'Variables',
- intersectVariables(values.Variables, variables)
- );
- }
- }
}
diff --git a/app/react/edge/templates/custom-templates/EditView/index.ts b/app/react/portainer/templates/custom-templates/EditView/index.ts
similarity index 100%
rename from app/react/edge/templates/custom-templates/EditView/index.ts
rename to app/react/portainer/templates/custom-templates/EditView/index.ts
diff --git a/app/react/edge/templates/custom-templates/EditView/types.ts b/app/react/portainer/templates/custom-templates/EditView/types.ts
similarity index 78%
rename from app/react/edge/templates/custom-templates/EditView/types.ts
rename to app/react/portainer/templates/custom-templates/EditView/types.ts
index d9c257e1d..bd911f666 100644
--- a/app/react/edge/templates/custom-templates/EditView/types.ts
+++ b/app/react/portainer/templates/custom-templates/EditView/types.ts
@@ -1,9 +1,11 @@
import { StackType } from '@/react/common/stacks/types';
+import { type Values as CommonFieldsValues } from '@/react/portainer/custom-templates/components/CommonFields';
import { DefinitionFieldValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
import { Platform } from '@/react/portainer/templates/types';
-import { type Values as CommonFieldsValues } from '@/react/portainer/custom-templates/components/CommonFields';
import { GitFormModel } from '@/react/portainer/gitops/types';
-import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
+import { AccessControlFormData } from '@/react/portainer/access-control/types';
+
+import { EdgeTemplateSettings } from '../types';
export interface FormValues extends CommonFieldsValues {
Platform: Platform;
@@ -11,5 +13,6 @@ export interface FormValues extends CommonFieldsValues {
FileContent: string;
Git?: GitFormModel;
Variables: DefinitionFieldValues;
+ AccessControl?: AccessControlFormData;
EdgeSettings?: EdgeTemplateSettings;
}
diff --git a/app/react/portainer/templates/custom-templates/EditView/useInitialValues.ts b/app/react/portainer/templates/custom-templates/EditView/useInitialValues.ts
new file mode 100644
index 000000000..a2b9b8a3f
--- /dev/null
+++ b/app/react/portainer/templates/custom-templates/EditView/useInitialValues.ts
@@ -0,0 +1,41 @@
+import { parseAccessControlFormData } from '@/react/portainer/access-control/utils';
+import { useCurrentUser } from '@/react/hooks/useUser';
+import { toGitFormModel } from '@/react/portainer/gitops/types';
+import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
+
+import { CustomTemplate } from '../types';
+
+import { FormValues } from './types';
+
+export function useInitialValues({
+ template,
+ templateFile,
+ isEdge,
+}: {
+ template: CustomTemplate;
+ templateFile: string | undefined;
+ isEdge: boolean;
+}): FormValues {
+ const { user, isAdmin } = useCurrentUser();
+
+ return {
+ Title: template.Title,
+ FileContent: templateFile || '',
+ Type: template.Type,
+ Platform: template.Platform,
+ Description: template.Description,
+ Note: template.Note,
+ Logo: template.Logo,
+ Variables: template.Variables,
+ Git: template.GitConfig ? toGitFormModel(template.GitConfig) : undefined,
+ AccessControl:
+ !isEdge && template.ResourceControl
+ ? parseAccessControlFormData(
+ isAdmin,
+ user.Id,
+ new ResourceControlViewModel(template.ResourceControl)
+ )
+ : undefined,
+ EdgeSettings: template.EdgeSettings,
+ };
+}
diff --git a/app/react/edge/templates/custom-templates/EditView/useValidation.tsx b/app/react/portainer/templates/custom-templates/EditView/useValidation.tsx
similarity index 78%
rename from app/react/edge/templates/custom-templates/EditView/useValidation.tsx
rename to app/react/portainer/templates/custom-templates/EditView/useValidation.tsx
index b7e871244..a4df5b3ae 100644
--- a/app/react/edge/templates/custom-templates/EditView/useValidation.tsx
+++ b/app/react/portainer/templates/custom-templates/EditView/useValidation.tsx
@@ -3,19 +3,26 @@ import { useMemo } from 'react';
import { StackType } from '@/react/common/stacks/types';
import { validation as commonFieldsValidation } from '@/react/portainer/custom-templates/components/CommonFields';
-import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
+import { Platform } from '@/react/portainer/templates/types';
import { variablesValidation } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
import { buildGitValidationSchema } from '@/react/portainer/gitops/GitForm';
import { useGitCredentials } from '@/react/portainer/account/git-credentials/git-credentials.service';
import { useCurrentUser } from '@/react/hooks/useUser';
import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
-import { Platform } from '@/react/portainer/templates/types';
import { edgeFieldsetValidation } from '@/react/portainer/templates/custom-templates/CreateView/EdgeSettingsFieldset.validation';
-export function useValidation(
- currentTemplateId: CustomTemplate['Id'],
- isGit: boolean
-) {
+import { CustomTemplate } from '../types';
+import { TemplateViewType } from '../useViewType';
+
+export function useValidation({
+ isGit,
+ templateId,
+ viewType,
+}: {
+ isGit: boolean;
+ templateId: CustomTemplate['Id'];
+ viewType: TemplateViewType;
+}) {
const { user } = useCurrentUser();
const gitCredentialsQuery = useGitCredentials(user.Id);
const customTemplatesQuery = useCustomTemplates();
@@ -33,26 +40,26 @@ export function useValidation(
StackType.Kubernetes,
])
.default(StackType.DockerCompose),
- FileContent: isGit
- ? string().default('')
- : string().required('Template is required.'),
+ FileContent: string().required('Template is required.'),
Git: isGit
? buildGitValidationSchema(gitCredentialsQuery.data || [])
: mixed(),
Variables: variablesValidation(),
- EdgeSettings: edgeFieldsetValidation(),
+ EdgeSettings: viewType === 'edge' ? edgeFieldsetValidation() : mixed(),
}).concat(
commonFieldsValidation({
templates: customTemplatesQuery.data,
- currentTemplateId,
+ currentTemplateId: templateId,
+ viewType,
})
),
[
- currentTemplateId,
customTemplatesQuery.data,
gitCredentialsQuery.data,
isGit,
+ templateId,
+ viewType,
]
);
}
diff --git a/app/react/portainer/templates/custom-templates/queries/useCreateTemplateMutation.ts b/app/react/portainer/templates/custom-templates/queries/useCreateTemplateMutation.ts
index 3295ff803..f3fc06118 100644
--- a/app/react/portainer/templates/custom-templates/queries/useCreateTemplateMutation.ts
+++ b/app/react/portainer/templates/custom-templates/queries/useCreateTemplateMutation.ts
@@ -42,7 +42,6 @@ interface CreateTemplatePayload {
Description: string;
Note: string;
Logo: string;
- AccessControl?: AccessControlFormData;
}
export function useCreateTemplateMutation() {
@@ -50,7 +49,9 @@ export function useCreateTemplateMutation() {
const queryClient = useQueryClient();
return useMutation(
- async (payload: CreateTemplatePayload) => {
+ async (
+ payload: CreateTemplatePayload & { AccessControl?: AccessControlFormData }
+ ) => {
const template = await createTemplate(user.Id, payload);
const resourceControl = template.ResourceControl;
diff --git a/app/react/portainer/templates/custom-templates/queries/useCustomTemplateFile.ts b/app/react/portainer/templates/custom-templates/queries/useCustomTemplateFile.ts
index 9f709fe84..021c2c4c7 100644
--- a/app/react/portainer/templates/custom-templates/queries/useCustomTemplateFile.ts
+++ b/app/react/portainer/templates/custom-templates/queries/useCustomTemplateFile.ts
@@ -19,6 +19,9 @@ export function useCustomTemplateFile(id?: CustomTemplate['Id'], git = false) {
{
...withGlobalError('Failed to get custom template file'),
enabled: !!id,
+ // there's nothing to do with a new file content, so we're disabling refetch
+ refetchOnReconnect: false,
+ refetchOnWindowFocus: false,
}
);
}
diff --git a/app/react/portainer/templates/custom-templates/queries/useUpdateTemplateMutation.ts b/app/react/portainer/templates/custom-templates/queries/useUpdateTemplateMutation.ts
index 8ba62774a..02367490a 100644
--- a/app/react/portainer/templates/custom-templates/queries/useUpdateTemplateMutation.ts
+++ b/app/react/portainer/templates/custom-templates/queries/useUpdateTemplateMutation.ts
@@ -8,6 +8,8 @@ import {
} from '@/react-tools/react-query';
import { StackType } from '@/react/common/stacks/types';
import { VariableDefinition } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
+import { AccessControlFormData } from '@/react/portainer/access-control/types';
+import { applyResourceControl } from '@/react/portainer/access-control/access-control.service';
import { CustomTemplate, EdgeTemplateSettings } from '../types';
import { Platform } from '../../types';
@@ -18,7 +20,21 @@ export function useUpdateTemplateMutation() {
const queryClient = useQueryClient();
return useMutation(
- updateTemplate,
+ async (
+ payload: CustomTemplateUpdatePayload & {
+ AccessControl?: AccessControlFormData;
+ resourceControlId?: number;
+ }
+ ) => {
+ await updateTemplate(payload);
+
+ if (payload.resourceControlId && payload.AccessControl) {
+ await applyResourceControl(
+ payload.AccessControl,
+ payload.resourceControlId
+ );
+ }
+ },
mutationOptions(
withInvalidate(queryClient, [['custom-templates']]),
withGlobalError('Failed to update template')
@@ -30,6 +46,7 @@ export function useUpdateTemplateMutation() {
* Payload for updating a custom template
*/
interface CustomTemplateUpdatePayload {
+ id: CustomTemplate['Id'];
/** URL of the template's logo */
Logo?: string;
/** Title of the template */
@@ -78,9 +95,7 @@ interface CustomTemplateUpdatePayload {
EdgeSettings?: EdgeTemplateSettings;
}
-async function updateTemplate(
- values: CustomTemplateUpdatePayload & { id: CustomTemplate['Id'] }
-) {
+async function updateTemplate(values: CustomTemplateUpdatePayload) {
try {
const { data } = await axios.put(
buildUrl({ id: values.id }),
diff --git a/app/react/portainer/templates/custom-templates/useParseTemplateOnFileChange.tsx b/app/react/portainer/templates/custom-templates/useParseTemplateOnFileChange.tsx
new file mode 100644
index 000000000..b20d17a96
--- /dev/null
+++ b/app/react/portainer/templates/custom-templates/useParseTemplateOnFileChange.tsx
@@ -0,0 +1,43 @@
+import { useFormikContext } from 'formik';
+
+import { VariableDefinition } from '../../custom-templates/components/CustomTemplatesVariablesDefinitionField';
+import {
+ getTemplateVariables,
+ intersectVariables,
+ isTemplateVariablesEnabled,
+} from '../../custom-templates/components/utils';
+
+export function useParseTemplateOnFileChange(
+ oldVariables: VariableDefinition[]
+) {
+ const { setFieldValue, setFieldError } = useFormikContext();
+
+ return handleChangeFileContent;
+
+ function handleChangeFileContent(value: string) {
+ setFieldValue(
+ 'FileContent',
+ value,
+ isTemplateVariablesEnabled ? !value : true
+ );
+ parseTemplate(value);
+ }
+
+ function parseTemplate(value: string) {
+ if (!isTemplateVariablesEnabled || value === '') {
+ setFieldValue('Variables', []);
+ return;
+ }
+
+ const [variables, validationError] = getTemplateVariables(value);
+ const isValid = !!variables;
+
+ setFieldError(
+ 'FileContent',
+ validationError ? `Template invalid: ${validationError}` : undefined
+ );
+ if (isValid) {
+ setFieldValue('Variables', intersectVariables(oldVariables, variables));
+ }
+ }
+}
diff --git a/app/react/portainer/templates/custom-templates/useViewType.ts b/app/react/portainer/templates/custom-templates/useViewType.ts
new file mode 100644
index 000000000..cb6419c2a
--- /dev/null
+++ b/app/react/portainer/templates/custom-templates/useViewType.ts
@@ -0,0 +1,18 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+export type TemplateViewType = 'kube' | 'docker' | 'edge';
+
+export function useViewType(): TemplateViewType {
+ const {
+ state: { name },
+ } = useCurrentStateAndParams();
+ if (name?.includes('kubernetes')) {
+ return 'kube';
+ }
+
+ if (name?.includes('docker')) {
+ return 'docker';
+ }
+
+ return 'edge';
+}