refactor(azure): migrate module to react [EE-2782] (#6689)

* refactor(azure): migrate module to react [EE-2782]

* fix(azure): remove optional chain

* feat(azure): apply new icons in dashboard

* feat(azure): apply new icons in dashboard

* feat(ui): allow single string for breadcrumbs

* refactor(azure/containers): use Table.content

* feat(azure/containers): implement new ui [EE-3538]

* fix(azure/containers): use correct icon

* chore(tests): mock svg as component

* fix(azure): fix tests

Co-authored-by: matias.spinarolli <matias.spinarolli@portainer.io>

app/portainer/__module.js

@@ -11,6 +11,7 @@ import homeModule from './home';
 import { accessControlModule } from './access-control';
 import { reactModule } from './react';
 import { sidebarModule } from './react/views/sidebar';
+import environmentsModule from './environments';
 
 async function initAuthentication(authManager, Authentication, $rootScope, $state) {
   authManager.checkAuthOnRefresh();
@@ -42,6 +43,7 @@ angular
     accessControlModule,
     reactModule,
     sidebarModule,
+    environmentsModule,
   ])
   .config([
     '$stateRegistryProvider',

app/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx

@@ -20,7 +20,7 @@ interface Props {
   resourceType: ResourceControlType;
   resourceId: ResourceId;
   disableOwnershipChange?: boolean;
-  onUpdateSuccess(): void;
+  onUpdateSuccess(): Promise<void>;
 }
 
 export function AccessControlPanel({
@@ -80,8 +80,8 @@ export function AccessControlPanel({
     </div>
   );
 
-  function handleUpdateSuccess() {
-    onUpdateSuccess();
+  async function handleUpdateSuccess() {
+    await onUpdateSuccess();
     toggleEditMode();
   }
 

app/portainer/access-control/AccessControlPanel/AccessControlPanelForm.tsx

@@ -28,7 +28,7 @@ interface Props {
   resourceId: ResourceId;
   resourceControl?: ResourceControlViewModel;
   onCancelClick(): void;
-  onUpdateSuccess(): void;
+  onUpdateSuccess(): Promise<void>;
 }
 
 export function AccessControlPanelForm({
@@ -52,6 +52,9 @@ export function AccessControlPanelForm({
       meta: {
         error: { title: 'Failure', message: 'Unable to update access control' },
       },
+      onSuccess() {
+        return onUpdateSuccess();
+      },
     }
   );
 
@@ -115,7 +118,6 @@ export function AccessControlPanelForm({
     updateAccess.mutate(accessControl, {
       onSuccess() {
         notifySuccess('Access control successfully updated');
-        onUpdateSuccess();
       },
     });
   }

app/portainer/access-control/models/ResourceControlViewModel.ts

@@ -37,7 +37,7 @@ export class ResourceControlViewModel {
   }
 }
 
-function determineOwnership(resourceControl: ResourceControlResponse) {
+export function determineOwnership(resourceControl: ResourceControlResponse) {
   if (resourceControl.Public) {
     return ResourceControlOwnership.PUBLIC;
   }

app/portainer/environments/azure-endpoint-config/azure-endpoint-config.js

@@ -0,0 +1,8 @@
+export const azureEndpointConfig = {
+  bindings: {
+    applicationId: '=',
+    tenantId: '=',
+    authenticationKey: '=',
+  },
+  templateUrl: './azureEndpointConfig.html',
+};

app/portainer/environments/azure-endpoint-config/azureEndpointConfig.html

@@ -0,0 +1,34 @@
+<div>
+  <div class="col-sm-12 form-section-title"> Azure configuration </div>
+  <!-- applicationId-input -->
+  <div class="form-group">
+    <label for="azure_credential_appid" class="col-sm-3 col-lg-2 control-label text-left">Application ID</label>
+    <div class="col-sm-9 col-lg-10">
+      <input type="text" class="form-control" name="azure_credential_appid" ng-model="$ctrl.applicationId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" required />
+    </div>
+  </div>
+  <!-- !applicationId-input -->
+  <!-- tenantId-input -->
+  <div class="form-group">
+    <label for="azure_credential_tenantid" class="col-sm-3 col-lg-2 control-label text-left">Tenant ID</label>
+    <div class="col-sm-9 col-lg-10">
+      <input type="text" class="form-control" name="azure_credential_tenantid" ng-model="$ctrl.tenantId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" required />
+    </div>
+  </div>
+  <!-- !tenantId-input -->
+  <!-- authenticationkey-input -->
+  <div class="form-group">
+    <label for="azure_credential_authkey" class="col-sm-3 col-lg-2 control-label text-left">Authentication key</label>
+    <div class="col-sm-9 col-lg-10">
+      <input
+        type="text"
+        class="form-control"
+        name="azure_credential_authkey"
+        ng-model="$ctrl.authenticationKey"
+        placeholder="cOrXoK/1D35w8YQ8nH1/8ZGwzz45JIYD5jxHKXEQknk="
+        required
+      />
+    </div>
+  </div>
+  <!-- !authenticationkey-input -->
+</div>

app/portainer/environments/index.ts

@@ -0,0 +1,7 @@
+import angular from 'angular';
+
+import { azureEndpointConfig } from './azure-endpoint-config/azure-endpoint-config';
+
+export default angular
+  .module('portainer.environments', [])
+  .component('azureEndpointConfig', azureEndpointConfig).name;

app/portainer/services/types.ts

@@ -0,0 +1,11 @@
+import { Environment } from '../environments/types';
+
+export interface EndpointProvider {
+  setEndpointID(id: Environment['Id']): void;
+  setEndpointPublicURL(url?: string): void;
+  setOfflineModeFromStatus(status: Environment['Status']): void;
+}
+
+export interface StateManager {
+  updateEndpointState(endpoint: Environment): Promise<void>;
+}