ENG-5042 implement uninstall in mocked state

sass/component-repository/components/BundlePreview.scss

@@ -8,6 +8,12 @@
     display: flex;
   }
 
+  &__divider {
+    margin-top: 0;
+    margin-bottom: 0;
+    border: 1px solid $color-extra-light-grey-border;
+  }
+
   &__image {
     > img {
       width: 70px;
@@ -143,6 +149,7 @@
   &__error-wrapper {
     display: flex;
     flex-direction: column;
+    margin-bottom: 10px;
   }
 
   &__error-message {

sass/component-repository/components/ComponentUninstallProcessState.scss

@@ -0,0 +1,49 @@
+.ComponentUninstallProcessState {
+  &__in-progress-body {
+    display: flex;
+    flex-direction: column;
+    margin-top: 17px;
+  }
+
+  &__in-progress-body-progress-bar-text {
+    margin-bottom: 13px;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  &__in-progress-body-progress-bar {
+    position: relative;
+    width: 100%;
+    height: 5px;
+    margin-bottom: 11px;
+    border: 1px solid $color-ecr-component-installed-button-border;
+    background-color: $color-ultra-grey-border;
+  }
+
+  &__current-progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0; // Use the CSS variable to set the width of the child div
+    height: 100%;
+    background-color: $color-mid-blue;
+
+    &--finished {
+      background-color: $color-mid-green;
+    }
+
+    &--partial-error {
+      background-color: $color-mid-orange;
+    }
+  }
+
+  &__in-progress-body-progress-bar-number {
+    margin-right: 5px;
+  }
+
+  &__in-progress-body-progress-footer-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+}

sass/index.scss

@@ -181,3 +181,4 @@
 @import "component-repository/components/HubRegistrySwitcher";
 @import "component-repository/components/BundlePreview";
 @import "mfe-container/MfeMenuContainer";
+@import "component-repository/components/ComponentUninstallProcessState";

sass/patternfly.scss

@@ -47,6 +47,8 @@ $color-published: #6CA100;
 $color-unpublished: #A6A6A6;
 $color-draft: #F0AB00;
 $color-mid-blue: #0088CE;
+$color-mid-green: #3BB800;
+$color-mid-orange: #FCA907;
 $color-mid-blue-semi: rgba(0,136,206,.6);
 $color-row-selected: #def3ff;
 $color-tour-primary: #00A0DF;

src/api/component-repository/components.js

@@ -4,10 +4,13 @@ import {
   COMPONENT_INSTALLATION_CREATED,
   COMPONENT_INSTALLATION_COMPLETED,
   COMPONENT_UNINSTALLATION_CREATED,
-  COMPONENT_UNINSTALLATION_COMPLETED,
+  // COMPONENT_UNINSTALLATION_COMPLETED,
+  // COMPONENT_UNINSTALLATION_ERROR,
+  COMPONENT_UNINSTALLATION_IN_PROGRESS,
   COMPONENT_USAGE_LIST,
   COMPONENT_INSTALL_PLAN,
   GET_COMPONENT_INSTALL_PLAN,
+  GET_COMPONENT_CURRENT_JOB_STATUS,
 } from 'test/mocks/component-repository/components';
 import { makeRequest, METHODS } from '@entando/apimanager';
 
@@ -63,7 +66,19 @@ export const getECRComponentUninstall = code => (
     uri: `/components/${code}/uninstall`,
     domain: '/digital-exchange',
     method: METHODS.GET,
-    mockResponse: COMPONENT_UNINSTALLATION_COMPLETED,
+    // mockResponse: COMPONENT_UNINSTALLATION_COMPLETED,
+    mockResponse: COMPONENT_UNINSTALLATION_IN_PROGRESS,
+    // mockResponse: COMPONENT_UNINSTALLATION_ERROR,
+    useAuthentication: true,
+  })
+);
+
+export const getECRComponentCurrentJobStatus = code => (
+  makeRequest({
+    uri: `/components/${code}/lastJob`,
+    domain: '/digital-exchange',
+    method: METHODS.GET,
+    mockResponse: GET_COMPONENT_CURRENT_JOB_STATUS,
     useAuthentication: true,
   })
 );

src/helpers/pollApi.js

@@ -9,7 +9,7 @@ const pollApi = ({
           if (stepFunction) {
             stepFunction(data.payload || {});
           }
-          if (stopPollingConditionFn(data)) {
+          if (stopPollingConditionFn && stopPollingConditionFn(data)) {
             resolve(data);
           } else if (Number(new Date()) < endTime) {
             setTimeout(checkCondition, interval, resolve, reject);
@@ -24,6 +24,8 @@ const pollApi = ({
       } else {
         reject(response);
       }
+    }).catch((error) => {
+      reject(error);
     });
   };
   return new Promise(checkCondition);

src/locales/en.js

@@ -1581,6 +1581,7 @@ export default {
     'app.filterTypesSelect.bundleGroup': 'Bundle Group',
     'hub.bundle.installation': 'Bundle Installation',
     'hub.bundle.uninstallation': 'Bundle Uninstallation',
+    'hub.bundle.uninstalled': 'Bundle Uninstalled',
     'app.deploy': 'Deploy',
     'app.deployed': 'Deployed',
     'app.undeploy': 'Undeploy',
@@ -1613,5 +1614,7 @@ export default {
     'componentRepository.hub.epcInstalledTip': 'To correctly update the EPC menu, please refresh the AppBuilder page on your browser',
     'ecr.componentUninstallError': 'Message error - Is not possible to uninstall the {name}',
     'ecr.componentPartiallyDeleted': 'Some elements of the bundle were deleted manually. To completely uninstall the bundle and clear every internal reference please proceed with uninstallation.',
+    'componentRepository.components.elementsUninstalled': 'Elements Uninstalled',
+    'componentRepository.components.someNotUninstalled': 'Some components were not uninstalled',
   },
 };

src/locales/it.js

@@ -1581,6 +1581,7 @@ export default {
     'app.filterTypesSelect.bundleGroup': 'Gruppo pacchetto',
     'hub.bundle.installation': 'Installazione del pacchetto',
     'hub.bundle.uninstallation': 'Disinstallazione del pacchetto',
+    'hub.bundle.uninstalled': 'Pacchetto Disinstallato',
     'app.deploy': 'Distribuire',
     'app.deployed': 'Schierato',
     'app.undeploy': 'Annulla distribuzione',
@@ -1613,5 +1614,7 @@ export default {
     'componentRepository.hub.epcInstalledTip': 'Per aggiornare il menu EPC, aggiorna la pagina di AppBuilder nel tuo browser',
     'ecr.componentUninstallError': 'Messaggio di errore: non è possibile disinstallare il {name}',
     'ecr.componentPartiallyDeleted': 'Alcuni elementi del bundle sono stati cancellati manualmente. Per disinstallare completamente il bundle e ripulire il sistema da ogni referenza interna, procedere con la disinstallazione.',
+    'componentRepository.components.elementsUninstalled': 'Elementi Disinstallati',
+    'componentRepository.components.someNotUninstalled': 'Alcuni elementi non sono stati disinstallati',
   },
 };

src/locales/pt.js

@@ -1033,5 +1033,8 @@ export default {
     'componentRepository.hub.epcInstalledTip': 'Para atualizar corretamente o menu EPC, atualize a página do AppBuilder em seu navegador',
     'ecr.componentUninstallError': 'Mensagem de erro - Não é possível desinstalar o {name}',
     'ecr.componentPartiallyDeleted': 'Alguns elementos do pacote foram excluídos manualmente. Para desinstalar completamente o pacote e limpar todas as referências internas, prossiga com a desinstalação.',
+    'componentRepository.components.elementsUninstalled': 'Elementos Desinstalados',
+    'hub.bundle.uninstalled': 'Pacote Desinstalado',
+    'componentRepository.components.someNotUninstalled': 'Alguns elementos não foram desinstalados',
   },
 };

src/state/component-repository/components/actions.js

@@ -39,6 +39,7 @@ import {
   getECRComponentInstallPlan,
   putECRComponentInstallPlan,
   postECRComponentInstallPlan,
+  getECRComponentCurrentJobStatus,
 } from 'api/component-repository/components';
 import { setPage } from 'state/pagination/actions';
 import { toggleLoading, setLoading } from 'state/loading/actions';
@@ -50,6 +51,8 @@ import {
   ECR_COMPONENT_UNINSTALLATION_STATUS_COMPLETED,
   ECR_COMPONENT_UNINSTALLATION_STATUS_ERROR,
   ECR_COMPONENT_INSTALLATION_STATUS_ROLLBACK,
+  ECR_COMPONENT_UNINSTALLATION_STATUS_PARTIAL_COMPLETED,
+  ECR_COMPONENT_CURRENT_JOB_STATUS_INSTALLING,
 } from 'state/component-repository/components/const';
 import { setVisibleModal } from 'state/modal/actions';
 import { MODAL_ID } from 'ui/component-repository/components/InstallationPlanModal';
@@ -129,10 +132,11 @@ export const componentInstallOngoingProgress = code => ({
   },
 });
 
-export const componentUninstallOngoingProgress = code => ({
+export const componentUninstallOngoingProgress = (code, apiResponsePayload) => ({
   type: COMPONENT_UNINSTALL_ONGOING_PROGRESS,
   payload: {
     code,
+    apiResponsePayload,
   },
 });
 
@@ -399,62 +403,98 @@ export const getInstallPlan = component => dispatch => (
   })
 );
 
-export const pollECRComponentUninstallStatus = (componentCode, stepFunction) => dispatch => (
-  new Promise((resolve) => {
-    dispatch(startComponentUninstall(componentCode));
-    pollApi({
-      apiFn: () => getECRComponentUninstall(componentCode),
-      stopPollingConditionFn: ({
-        payload,
-      }) => payload && [
-        ECR_COMPONENT_UNINSTALLATION_STATUS_COMPLETED,
-        ECR_COMPONENT_UNINSTALLATION_STATUS_ERROR,
-      ].includes(payload.status),
-      timeout: POLLING_TIMEOUT_IN_MS,
-      stepFunction: payload => stepFunction(payload.progress),
-    })
-      .then(({
-        payload,
-      }) => {
-        if (payload.status === ECR_COMPONENT_UNINSTALLATION_STATUS_COMPLETED) {
-          dispatch(finishComponentUninstall(componentCode));
-          dispatch(fetchSelectedBundleStatusWithCode(componentCode));
-          dispatch(fetchMfeConfigList());
-          dispatch(addToast(
-            { id: 'componentRepository.hub.epcInstalledTip' },
-            TOAST_SUCCESS,
-          ));
-        } else {
-          dispatch(componentUninstallFailed(componentCode));
-        }
-      })
-      .catch((res) => {
-        const {
-          errors,
+export const pollECRComponentUninstallStatus = (componentCode, stepFunction, pollInBackground) =>
+  dispatch => (
+    new Promise((resolve) => {
+      if (!pollInBackground) {
+        dispatch(startComponentUninstall(componentCode));
+      }
+      pollApi({
+        apiFn: () => getECRComponentUninstall(componentCode),
+        stopPollingConditionFn: ({
           payload,
-        } = res;
-        if (payload && payload.status === ECR_COMPONENT_INSTALLATION_STATUS_IN_PROGRESS) {
-          dispatch(addToast(
-            { id: 'componentRepository.components.notifyInProgress' },
-            TOAST_WARNING,
-          ));
-          dispatch(componentUninstallOngoingProgress(componentCode));
-        } else {
-          dispatch(addToast(
-            { id: 'componentRepository.components.notifyFailedUninstall' },
-            TOAST_WARNING,
-          ));
-          dispatch(componentUninstallFailed(componentCode));
-        }
-        if (errors && errors.length) {
-          dispatch(addErrors(errors.map(err => err.message)));
-          errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
-        }
-        resolve(res);
+        }) => payload && [
+          ECR_COMPONENT_UNINSTALLATION_STATUS_COMPLETED,
+          ECR_COMPONENT_UNINSTALLATION_STATUS_ERROR,
+          ECR_COMPONENT_UNINSTALLATION_STATUS_PARTIAL_COMPLETED,
+        ].includes(payload.status),
+        timeout: POLLING_TIMEOUT_IN_MS,
+        stepFunction: payload => stepFunction(payload.progress, payload),
       })
-      .finally(() => resolve());
-  })
-);
+        .then((response) => {
+          const {
+            payload,
+          } = response;
+          if (payload.status === ECR_COMPONENT_UNINSTALLATION_STATUS_COMPLETED) {
+            dispatch(finishComponentUninstall(componentCode));
+            dispatch(fetchSelectedBundleStatusWithCode(componentCode));
+            dispatch(fetchMfeConfigList());
+            if (!pollInBackground) {
+              dispatch(addToast(
+                { id: 'componentRepository.hub.epcInstalledTip' },
+                TOAST_SUCCESS,
+              ));
+            }
+          } else if (!pollInBackground) {
+            dispatch(componentUninstallFailed(componentCode));
+          }
+        })
+        .catch((res) => {
+          const {
+            errors,
+            payload,
+          } = res;
+
+          if (payload && payload.status === ECR_COMPONENT_UNINSTALLATION_STATUS_IN_PROGRESS) {
+            dispatch(addToast(
+              { id: 'componentRepository.components.notifyInProgress' },
+              TOAST_WARNING,
+            ));
+            dispatch(componentUninstallOngoingProgress(componentCode, payload));
+          } else {
+            dispatch(addToast(
+              { id: 'componentRepository.components.notifyFailedUninstall' },
+              TOAST_WARNING,
+            ));
+            dispatch(componentUninstallFailed(componentCode));
+          }
+          if (errors && errors.length) {
+            dispatch(addErrors(errors.map(err => err.message)));
+            errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
+          }
+          return resolve(res);
+        })
+        .finally(() => resolve());
+    })
+  );
+
+export const pollECRComponentCurrentUninstallJob =
+  (componentCode, stepFunction) =>
+    dispatch => (
+      new Promise((resolve, reject) => {
+        dispatch(startComponentUninstall(componentCode));
+        pollApi({
+          apiFn: () => getECRComponentCurrentJobStatus(componentCode),
+          timeout: POLLING_TIMEOUT_IN_MS,
+          stepFunction: payload => stepFunction(0.8, payload),
+        })
+          .then((response) => {
+            const {
+              payload,
+            } = response;
+            if (payload.status === ECR_COMPONENT_CURRENT_JOB_STATUS_INSTALLING) {
+              reject(new Error('Component is installig'));
+            }
+          })
+          .catch((res) => {
+            dispatch(pollECRComponentUninstallStatus(componentCode, stepFunction, true));
+            resolve(res);
+          })
+          .finally(() => {
+            resolve();
+          });
+      })
+    );
 
 export const uninstallECRComponent = (componentCode, logProgress) => dispatch => (
   new Promise((resolve) => {
@@ -500,14 +540,25 @@ export const fetchECRComponents = (paginationMetadata = {
           dispatch(setECRComponents(data.payload));
           dispatch(setPage(data.metaData));
 
+          const pollStepFunction = (progress, payload) => {
+            dispatch(setInstallUninstallProgress(progress));
+            // only needed for uninstall progress
+            if (payload && payload.componentId) {
+              dispatch(componentUninstallOngoingProgress(payload.componentId, payload));
+            }
+          };
+
           if (data.payload.length) {
             data.payload.forEach(({ lastJob }) => {
               if (lastJob && lastJob.status === ECR_COMPONENT_INSTALLATION_STATUS_IN_PROGRESS) {
-                dispatch(pollECRComponentInstallStatus(lastJob.componentId));
+                dispatch(pollECRComponentInstallStatus(lastJob.componentId, pollStepFunction));
               } else if (
                 lastJob && lastJob.status === ECR_COMPONENT_UNINSTALLATION_STATUS_IN_PROGRESS
               ) {
-                dispatch(pollECRComponentUninstallStatus(lastJob.componentId));
+                dispatch(pollECRComponentCurrentUninstallJob(
+                  lastJob.componentId,
+                  pollStepFunction,
+                ));
               }
             });
           }

src/state/component-repository/components/const.js

@@ -10,4 +10,7 @@ export const ECR_COMPONENT_INSTALLATION_STATUS_ROLLBACK = 'INSTALL_ROLLBACK';
 export const ECR_COMPONENT_UNINSTALLATION_STATUS_CREATED = 'UNINSTALL_CREATED';
 export const ECR_COMPONENT_UNINSTALLATION_STATUS_IN_PROGRESS = 'UNINSTALL_IN_PROGRESS';
 export const ECR_COMPONENT_UNINSTALLATION_STATUS_COMPLETED = 'UNINSTALL_COMPLETED';
+export const ECR_COMPONENT_UNINSTALLATION_STATUS_PARTIAL_COMPLETED = 'UNINSTALL_PARTIAL_COMPLETED';
 export const ECR_COMPONENT_UNINSTALLATION_STATUS_ERROR = 'UNINSTALL_ERROR';
+export const ECR_COMPONENT_CURRENT_JOB_STATUS_INSTALLING = 'installing';
+export const ECR_COMPONENT_CURRENT_JOB_STATUS_UNINSTALLING = 'uninstalling';