diff --git a/app/edge/components/EdgeCheckInIntervalField.tsx b/app/edge/components/EdgeCheckInIntervalField.tsx index d753af6a8..fda2c9ea1 100644 --- a/app/edge/components/EdgeCheckInIntervalField.tsx +++ b/app/edge/components/EdgeCheckInIntervalField.tsx @@ -57,6 +57,9 @@ export function EdgeCheckinIntervalField({ export const EdgeCheckinIntervalFieldAngular = r2a(EdgeCheckinIntervalField, [ 'value', 'onChange', + 'isDefaultHidden', + 'tooltip', + 'label', ]); function useOptions(isDefaultHidden: boolean) { diff --git a/app/portainer/components/form-components/FileUpload/FileUploadField.tsx b/app/portainer/components/form-components/FileUpload/FileUploadField.tsx index 7d005eeeb..890d29912 100644 --- a/app/portainer/components/form-components/FileUpload/FileUploadField.tsx +++ b/app/portainer/components/form-components/FileUpload/FileUploadField.tsx @@ -73,4 +73,6 @@ export const FileUploadFieldAngular = r2a(FileUploadField, [ 'value', 'title', 'required', + 'accept', + 'inputId', ]); diff --git a/app/portainer/components/form-components/SwitchField/Switch.tsx b/app/portainer/components/form-components/SwitchField/Switch.tsx index 99b84d01e..840c7cccb 100644 --- a/app/portainer/components/form-components/SwitchField/Switch.tsx +++ b/app/portainer/components/form-components/SwitchField/Switch.tsx @@ -3,7 +3,6 @@ import clsx from 'clsx'; import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service'; import { BEFeatureIndicator } from '@/portainer/components/BEFeatureIndicator'; import { FeatureId } from '@/portainer/feature-flags/enums'; -import { r2a } from '@/react-tools/react2angular'; import './Switch.css'; @@ -55,14 +54,3 @@ export function Switch({ ); } - -export const SwitchAngular = r2a(Switch, [ - 'name', - 'checked', - 'id', - 'disabled', - 'dataCy', - 'onChange', - 'feature', - 'className', -]); diff --git a/app/portainer/home/EnvironmentList/index.ts b/app/portainer/home/EnvironmentList/index.ts index 2322dcf40..deebd7a85 100644 --- a/app/portainer/home/EnvironmentList/index.ts +++ b/app/portainer/home/EnvironmentList/index.ts @@ -5,8 +5,6 @@ import { EnvironmentList } from './EnvironmentList'; export { EnvironmentList }; export const EnvironmentListAngular = react2angular(EnvironmentList, [ - 'tags', 'onClickItem', 'onRefresh', - 'groups', ]); diff --git a/app/portainer/teams/CreateTeamForm/index.ts b/app/portainer/teams/CreateTeamForm/index.ts index 7443e3297..5cdccb886 100644 --- a/app/portainer/teams/CreateTeamForm/index.ts +++ b/app/portainer/teams/CreateTeamForm/index.ts @@ -6,7 +6,6 @@ export { CreateTeamForm }; export const CreateTeamFormAngular = r2a(CreateTeamForm, [ 'users', - 'actionInProgress', 'onSubmit', 'teams', ]); diff --git a/app/portainer/views/account/CreateAccessToken/index.ts b/app/portainer/views/account/CreateAccessToken/index.ts index 5b168d024..f12a8e87c 100644 --- a/app/portainer/views/account/CreateAccessToken/index.ts +++ b/app/portainer/views/account/CreateAccessToken/index.ts @@ -3,9 +3,7 @@ import { react2angular } from '@/react-tools/react2angular'; import { CreateAccessToken } from './CreateAccessToken'; const CreateAccessTokenAngular = react2angular(CreateAccessToken, [ - 'userId', 'onSubmit', - 'onSuccess', 'onError', ]); export { CreateAccessToken, CreateAccessTokenAngular }; diff --git a/app/react-tools/react2angular.tsx b/app/react-tools/react2angular.tsx index 265a5feea..3baf48cb1 100644 --- a/app/react-tools/react2angular.tsx +++ b/app/react-tools/react2angular.tsx @@ -1,6 +1,7 @@ import ReactDOM from 'react-dom'; import { IComponentOptions, IController } from 'angular'; import { Suspense } from 'react'; +import _ from 'lodash'; import { RootProvider } from './RootProvider'; @@ -25,15 +26,26 @@ function toProps( ); } -export function react2angular( +type PropNames = Exclude; + +/** + * react2angular is used to bind a React component to an AngularJS component + * it used in an AngularJS module definition: + * + * `.component('componentName', react2angular(ComponentName, ['prop1', 'prop2']))` + * + * if the second parameter has any ts errors check that the component has the correct props + */ +export function react2angular[]>( Component: React.ComponentType, - propNames: string[] -): IComponentOptions { + propNames: U & ([PropNames] extends [U[number]] ? unknown : PropNames) +): IComponentOptions & { name: string } { const bindings = Object.fromEntries(propNames.map((key) => [key, '<'])); return { bindings, controller: Controller, + name: _.camelCase(Component.displayName || Component.name), }; /* @ngInject */