feat(app): enforce using of props in r2a [EE-3215] (#6943)

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) {

app/portainer/components/form-components/FileUpload/FileUploadField.tsx

@@ -73,4 +73,6 @@ export const FileUploadFieldAngular = r2a(FileUploadField, [
   'value',
   'title',
   'required',
+  'accept',
+  'inputId',
 ]);

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',
-]);

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',
 ]);

app/portainer/teams/CreateTeamForm/index.ts

@@ -6,7 +6,6 @@ export { CreateTeamForm };
 
 export const CreateTeamFormAngular = r2a(CreateTeamForm, [
   'users',
-  'actionInProgress',
   'onSubmit',
   'teams',
 ]);

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 };

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<T>(
+type PropNames<T> = Exclude<keyof T, number | symbol>;
+
+/**
+ * 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<T, U extends PropNames<T>[]>(
   Component: React.ComponentType<T>,
-  propNames: string[]
+  propNames: U & ([PropNames<T>] extends [U[number]] ? unknown : PropNames<T>)
-): IComponentOptions {
+): IComponentOptions & { name: string } {
   const bindings = Object.fromEntries(propNames.map((key) => [key, '<']));
 
   return {
     bindings,
     controller: Controller,
+    name: _.camelCase(Component.displayName || Component.name),
   };
 
   /* @ngInject */