refactor(containers): migrate create view to react [EE-2307] (#9175)

app/react/portainer/access-control/AccessControlForm/AccessControlForm.validation.ts

@@ -1,15 +1,17 @@
-import { object, string, array, number } from 'yup';
+import { object, mixed, array, number, SchemaOf } from 'yup';
 
-import { ResourceControlOwnership } from '../types';
+import { AccessControlFormData, ResourceControlOwnership } from '../types';
 
-export function validationSchema(isAdmin: boolean) {
+export function validationSchema(
+  isAdmin: boolean
+): SchemaOf<AccessControlFormData> {
   return object()
     .shape({
-      ownership: string()
+      ownership: mixed<ResourceControlOwnership>()
         .oneOf(Object.values(ResourceControlOwnership))
         .required(),
-      authorizedUsers: array(number()),
-      authorizedTeams: array(number()),
+      authorizedUsers: array(number().default(0)),
+      authorizedTeams: array(number().default(0)),
     })
     .test(
       'user-and-team',

app/react/portainer/access-control/access-control.service.ts

@@ -4,7 +4,6 @@ import {
   AccessControlFormData,
   OwnershipParameters,
   ResourceControlId,
-  ResourceControlResponse,
   ResourceControlType,
   ResourceId,
 } from './types';
@@ -39,14 +38,14 @@ export function applyResourceControlChange(
  */
 export function applyResourceControl(
   accessControlData: AccessControlFormData,
-  resourceControl: ResourceControlResponse,
+  resourceControlId: ResourceControlId,
   subResourcesIds: (number | string)[] = []
 ) {
   const ownershipParameters = parseOwnershipParameters(
     accessControlData,
     subResourcesIds
   );
-  return updateResourceControl(resourceControl.Id, ownershipParameters);
+  return updateResourceControl(resourceControlId, ownershipParameters);
 }
 
 /**

app/react/portainer/environments/update-schedules/common/ScheduleTypeSelector.tsx

@@ -3,6 +3,7 @@ import { number } from 'yup';
 import { useEffect } from 'react';
 
 import { NavTabs } from '@@/NavTabs';
+import { NavContainer } from '@@/NavTabs/NavContainer';
 
 import { ScheduleType } from '../types';
 
@@ -37,35 +38,37 @@ export function ScheduleTypeSelector() {
   return (
     <div className="form-group">
       <div className="col-sm-12">
-        <NavTabs
-          options={[
-            {
-              id: ScheduleType.Update,
-              label: 'Update',
-              children: (
-                <UpdateScheduleDetailsFieldset
-                  environments={environments}
-                  hasTimeZone={hasTimeZone}
-                  hasNoTimeZone={hasNoTimeZone}
-                  hasGroupSelected={hasGroupSelected}
-                  version={values.version}
-                />
-              ),
-            },
-            {
-              id: ScheduleType.Rollback,
-              label: 'Rollback',
-              children: (
-                <RollbackScheduleDetailsFieldset
-                  hasTimeZone={hasTimeZone}
-                  hasGroupSelected={hasGroupSelected}
-                />
-              ),
-            },
-          ]}
-          selectedId={values.type}
-          onSelect={handleChangeType}
-        />
+        <NavContainer>
+          <NavTabs
+            options={[
+              {
+                id: ScheduleType.Update,
+                label: 'Update',
+                children: (
+                  <UpdateScheduleDetailsFieldset
+                    environments={environments}
+                    hasTimeZone={hasTimeZone}
+                    hasNoTimeZone={hasNoTimeZone}
+                    hasGroupSelected={hasGroupSelected}
+                    version={values.version}
+                  />
+                ),
+              },
+              {
+                id: ScheduleType.Rollback,
+                label: 'Rollback',
+                children: (
+                  <RollbackScheduleDetailsFieldset
+                    hasTimeZone={hasTimeZone}
+                    hasGroupSelected={hasGroupSelected}
+                  />
+                ),
+              },
+            ]}
+            selectedId={values.type}
+            onSelect={handleChangeType}
+          />
+        </NavContainer>
       </div>
     </div>
   );

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/DeploymentScripts.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { CopyButton } from '@@/buttons/CopyButton';
 import { Code } from '@@/Code';
 import { NavTabs } from '@@/NavTabs';
+import { NavContainer } from '@@/NavTabs/NavContainer';
 
 const deployments = [
   {
@@ -27,11 +28,13 @@ export function DeploymentScripts() {
   }));
 
   return (
-    <NavTabs
-      options={options}
-      onSelect={(id: string) => setDeployType(id)}
-      selectedId={deployType}
-    />
+    <NavContainer>
+      <NavTabs
+        options={options}
+        onSelect={(id: string) => setDeployType(id)}
+        selectedId={deployType}
+      />
+    </NavContainer>
   );
 }
 

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/AgentTab/DeploymentScripts.tsx

@@ -5,6 +5,7 @@ import { useAgentDetails } from '@/react/portainer/environments/queries/useAgent
 import { CopyButton } from '@@/buttons/CopyButton';
 import { Code } from '@@/Code';
 import { NavTabs } from '@@/NavTabs';
+import { NavContainer } from '@@/NavTabs/NavContainer';
 
 const deploymentsStandalone = [
   {
@@ -61,11 +62,13 @@ export function DeploymentScripts({ isDockerStandalone }: Props) {
   });
 
   return (
-    <NavTabs
-      options={options}
-      onSelect={(id: string) => setDeployType(id)}
-      selectedId={deployType}
-    />
+    <NavContainer>
+      <NavTabs
+        options={options}
+        onSelect={(id: string) => setDeployType(id)}
+        selectedId={deployType}
+      />
+    </NavContainer>
   );
 }
 

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/DeploymentScripts.tsx

@@ -9,6 +9,7 @@ import { Code } from '@@/Code';
 import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 import { NavTabs } from '@@/NavTabs';
 import { Icon } from '@@/Icon';
+import { NavContainer } from '@@/NavTabs/NavContainer';
 
 const deployments = [
   {
@@ -63,11 +64,13 @@ export function DeploymentScripts() {
         </span>
       </div>
 
-      <NavTabs
-        options={options}
-        onSelect={(id: string) => setDeployType(id)}
-        selectedId={deployType}
-      />
+      <NavContainer>
+        <NavTabs
+          options={options}
+          onSelect={(id: string) => setDeployType(id)}
+          selectedId={deployType}
+        />
+      </NavContainer>
     </>
   );
 }

app/react/portainer/registries/types/registry.ts

@@ -1,6 +1,8 @@
 import { TeamId } from '@/react/portainer/users/teams/types';
 import { UserId } from '@/portainer/users/types';
 
+import { TLSConfiguration } from '../../settings/types';
+
 export type Catalog = {
   repositories: string[];
 };
@@ -60,20 +62,31 @@ export interface Ecr {
   Region: string;
 }
 
+interface RegistryManagementConfiguration {
+  Type: RegistryTypes;
+  Authentication: boolean;
+  Username: string;
+  Password: string;
+  TLSConfig: TLSConfiguration;
+  Ecr: Ecr;
+  AccessToken?: string;
+  AccessTokenExpiry?: number;
+}
+
 export type RegistryId = number;
 export interface Registry {
   Id: RegistryId;
-  Type: number;
+  Type: RegistryTypes;
   Name: string;
   URL: string;
   BaseURL: string;
   Authentication: boolean;
   Username: string;
-  Password: string;
+  Password?: string;
   RegistryAccesses: RegistryAccesses;
-  Checked: boolean;
   Gitlab: Gitlab;
   Quay: Quay;
   Github: Github;
   Ecr: Ecr;
+  ManagementConfiguration?: RegistryManagementConfiguration;
 }

app/react/portainer/registries/utils/findRegistryMatch.test.ts

@@ -17,7 +17,6 @@ function buildTestRegistry(
     Authentication: false,
     Password: '',
     BaseURL: '',
-    Checked: false,
     Ecr: { Region: '' },
     Github: { OrganisationName: '', UseOrganisation: false },
     Quay: { OrganisationName: '', UseOrganisation: false },

app/react/portainer/webhooks/build-url.ts

@@ -0,0 +1,11 @@
+import { Webhook } from './types';
+
+export function buildUrl(id?: Webhook['Id']) {
+  const url = '/webhooks';
+
+  if (id) {
+    return `${url}/${id}`;
+  }
+
+  return url;
+}

app/react/portainer/webhooks/createWebhook.ts

@@ -0,0 +1,23 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { EnvironmentId } from '../environments/types';
+import { RegistryId } from '../registries/types/registry';
+
+import { buildUrl } from './build-url';
+import { Webhook, WebhookType } from './types';
+
+interface CreateWebhookPayload {
+  resourceId: string;
+  environmentId: EnvironmentId;
+  registryId?: RegistryId;
+  webhookType: WebhookType;
+}
+
+export async function createWebhook(payload: CreateWebhookPayload) {
+  try {
+    const { data } = await axios.post<Webhook>(buildUrl(), payload);
+    return data;
+  } catch (error) {
+    throw parseAxiosError(error, 'Unable to create webhook');
+  }
+}

app/react/portainer/webhooks/query-keys.ts

@@ -0,0 +1,6 @@
+import { Filters } from './types';
+
+export const queryKeys = {
+  base: () => ['webhooks'] as const,
+  list: (filters: Filters) => [...queryKeys.base(), { filters }],
+};

app/react/portainer/webhooks/types.ts

@@ -0,0 +1,21 @@
+import { EnvironmentId } from '../environments/types';
+import { RegistryId } from '../registries/types/registry';
+
+export enum WebhookType {
+  DockerService = 1,
+  DockerContainer = 2,
+}
+
+export interface Webhook {
+  Id: number;
+  Token: string;
+  ResourceId: string;
+  EndpointId: EnvironmentId;
+  RegistryId: RegistryId;
+  Type: WebhookType;
+}
+
+export interface Filters {
+  endpointId: EnvironmentId;
+  resourceId?: string;
+}

app/react/portainer/webhooks/useWebhooks.ts

@@ -0,0 +1,27 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+import { Filters, Webhook } from './types';
+
+export function useWebhooks(
+  filters: Filters,
+  { enabled }: { enabled?: boolean } = {}
+) {
+  return useQuery(queryKeys.list(filters), () => getWebhooks(filters), {
+    enabled,
+  });
+}
+
+async function getWebhooks(filters: Filters) {
+  try {
+    const { data } = await axios.get<Array<Webhook>>(buildUrl(), {
+      params: { filters },
+    });
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err, 'failed fetching webhooks');
+  }
+}