demo fixes

micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss

@@ -160,6 +160,7 @@ $border-color: rgba(214, 213, 212, 1);
 
 .microplan-close-button {
     margin: 0.5rem 0.5rem 0 0;
+    align-self: flex-start;
     border: none;
     color: inherit;
     cursor: pointer;

micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Hypothesis.js

@@ -353,7 +353,7 @@ const InterractableSection = React.memo(
           {assumptions?.filter(item=>item.active)?.map((item, index) => (
             <div
               key={index}
-              className={`${index === 0 ? "select-and-input-wrapper-first" : "select-and-input-wrapper"}`}
+              className={`${index === 0 ? "select-and-input-wrapper-first" : "select-and-input-wrapper"} ${index ===assumptions?.filter(item=>item.active)?.length -1 ?"last-container":""} `}
             >
               <div className="key" 
               ref={el => { itemRefs.current[index] = el; }}

micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Mapping.js

@@ -495,7 +495,7 @@ const ChoroplethSelection = memo(
 
     return (
       <div className="choropleth-section" ref={showChoroplethOptionRef}>
-        <div className="icon-rest filter-icon">
+        <div className="icon-rest virtualization-icon">
           <p onClick={() => setShowChoroplethOptions((previous) => !previous)}>{t("VISUALIZATIONS")}</p>
           <div className="icon" onClick={() => setShowChoroplethOptions((previous) => !previous)}>
             {DigitSvgs.FilterAlt && <DigitSvgs.FilterAlt width={"1.667rem"} height={"1.667rem"} fill={"rgba(255, 255, 255, 1)"} />}
@@ -1275,7 +1275,7 @@ const addGeojsonToMap = (map, geojson, t) => {
           feature.properties["name"] +
           "</div>";
         for (let prop in feature.properties) {
-          if (prop !== "name" && prop !== "addOn") {
+          if (prop !== "name" && prop !== "addOn" && prop !== "feature") {
             let data = !!feature.properties[prop] ? feature.properties[prop] : t("NO_DATA");
             popupContent +=
               "<tr><td style='font-family: Roboto;font-size: 0.8rem;font-weight: 700;text-align: left; color:rgba(80, 90, 95, 1);padding-right:1rem'>" +

micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanCreatedScreen.js

@@ -21,7 +21,7 @@ const MicroplanCreatedScreen = memo(({ microplanData, ...props }) => {
         data[i] = data[i].map((item) => (item ? t(item) : t("NO_DATA")));
       }
 
-      let blob = convertJsonToXlsx({ [microplanData?.microplanDetails?.name]: data }, { skipHeader: true });
+      const blob = convertJsonToXlsx({ [microplanData?.microplanDetails?.name]: data }, { skipHeader: true });
 
       if (!blob) {
         return;
@@ -45,7 +45,7 @@ const MicroplanCreatedScreen = memo(({ microplanData, ...props }) => {
   };
 
   const clickGoHome = () => {
-    history.push(`/microplan-ui/employee`);
+    history.push('/microplan-ui/employee');
   };
 
   return (
@@ -73,7 +73,7 @@ const MicroplanCreatedScreen = memo(({ microplanData, ...props }) => {
         </div>
       </div>
 
-      <ActionBar className={`custom-action-bar-success-screen`}>
+      <ActionBar className={'custom-action-bar-success-screen'}>
         {/* Back button */}
         <Button
           type="button"
@@ -90,7 +90,7 @@ const MicroplanCreatedScreen = memo(({ microplanData, ...props }) => {
             type="button"
             className="custom-button"
             label={t("GO_TO_HCM")}
-            onButtonClick={clickGoToHCM}
+            onButtonClick={()=>{}}
             isSuffix={true}
             variation={"primary"}
             textStyles={{ padding: 0, margin: 0 }}

micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanPreview.js

@@ -1,10 +1,10 @@
-import { CardLabel, Header, Loader, Modal, MultiSelectDropdown, TextInput, Toast } from "@egovernments/digit-ui-components";
+import { CardLabel, Header, Loader, MultiSelectDropdown, TextInput, Toast } from "@egovernments/digit-ui-components";
 import React, { memo, useCallback, useEffect, useMemo, useState, Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import { processHierarchyAndData, findParent, fetchDropdownValues } from "../utils/processHierarchyAndData";
 import { CloseButton, ModalHeading } from "./CommonComponents";
 import { EXCEL, GEOJSON, PRIMARY_THEME_COLOR, SHAPEFILE, commonColumn } from "../configs/constants";
-import { Button, LoaderWithGap } from "@egovernments/digit-ui-react-components";
+import { Button, LoaderWithGap, Modal } from "@egovernments/digit-ui-react-components";
 import { tourSteps } from "../configs/tourSteps";
 import { useMyContext } from "../utils/context";
 import { timeLineOptions } from "../configs/timeLineOptions.json";
@@ -330,7 +330,7 @@ const MicroplanPreview = ({
         </div>
         {modal === "confirm-apply-changed-hypothesis" && (
           <Modal
-            popupStyles={{ orderRadius: "0.25rem", width: "31.188rem" }}
+            popupStyles={{ borderRadius: "0.25rem", width: "31.188rem" }}
             popupModuleActionBarStyles={{
               display: "flex",
               flex: 1,
@@ -345,7 +345,7 @@ const MicroplanPreview = ({
               backgroundColor: "white",
               border: `0.063rem solid ${PRIMARY_THEME_COLOR}`,
             }}
-            headerBarMainStyle={{ padding: "1rem 0 0 0", margin: 0 }}
+            headerBarMainStyle={{ padding: 0, margin: 0 }}
             headerBarMain={<ModalHeading style={{ fontSize: "1.5rem" }} label={t("HEADING_PROCEED_WITH_NEW_HYPOTHESIS")} />}
             actionCancelLabel={t("YES")}
             actionCancelOnSubmit={createMicroplan}
@@ -401,7 +401,7 @@ const HypothesisValues = memo(({ boundarySelections, hypothesisAssumptionsList,
           ))}
       </div>
       <div className="hypothesis-controllers">
-        <Button className={"button-primary"} style={{ width: "100%" }} onClick={applyNewHypothesis} label={t("APPLY")} />
+        <Button className={"button-primary"} style={{ width: "100%" }} onButtonClick={applyNewHypothesis} label={t("APPLY")} />
       </div>
     </div>
   );

micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Modal.js

@@ -107,8 +107,8 @@ export const ModalWrapper = ({
       actionCancelOnSubmit={LeftButtonHandler}
       actionSaveOnSubmit={RightButtonHandler}
       formId="microplanning"
-      popupStyles={{ width: "34rem", borderRadius: "0.25rem", ...(popupStyles ? popupStyles : {}) }}
-      headerBarMainStyle={{ margin: 0, width: "34rem", overflow: "hidden", ...(headerBarMainStyle ? headerBarMainStyle : {}) }}
+      popupStyles={{ width: "33.375rem", borderRadius: "0.25rem", ...(popupStyles ? popupStyles : {}) }}
+      headerBarMainStyle={{ margin: 0, width: "33.375rem", overflow: "hidden", ...(headerBarMainStyle ? headerBarMainStyle : {}) }}
       popupModuleMianStyles={{ margin: 0, padding: 0 }}
       popupModuleActionBarStyles={popupModuleActionBarStyles ? popupModuleActionBarStyles : { justifyContent: "space-between", padding: "1rem" }}
       style={{}}
@@ -120,7 +120,7 @@ export const ModalWrapper = ({
         textStyles: { fontWeight: "600" },
         backgroundColor: "rgba(255, 255, 255, 1)",
         color: PRIMARY_THEME_COLOR,
-        minWidth: "13rem",
+        minWidth: "15.063rem",
         border: `0.063rem solid ${PRIMARY_THEME_COLOR}`,
       }}
       footerRightButtonstyle={{
@@ -130,7 +130,7 @@ export const ModalWrapper = ({
         textStyles: { fontWeight: "500" },
         backgroundColor: PRIMARY_THEME_COLOR,
         color: "rgba(255, 255, 255, 1)",
-        minWidth: "13rem",
+        minWidth: "15.063rem",
         boxShadow: "0px -2px 0px 0px rgba(11, 12, 12, 1) inset",
       }}
       footerLeftButtonBody={footerLeftButtonBody}

micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Upload.js

@@ -866,6 +866,7 @@ const Upload = ({
             sections={sections}
             popupModuleActionBarStyles={{
               flex: 1,
+              justifyContent:"space-between",
               padding: "1rem",
               gap: "1rem",
             }}

micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/configs/tourSteps.js

@@ -50,10 +50,18 @@ export const tourSteps = (t) => {
         },
         // {
         //   content:
+        //     t("HELP_RULE_ENGINE_INPUT"),
+        //   target: ".last-container .key",
+        //   disableBeacon: true,
+        //   placement: "top-start",
+        //   title: "",
+        // },
+        // {
+        //   content:
         //     t("HELP_HYPOTHESIS_DELETE_BUTTON"),
-        //   target: ".select-and-input-wrapper-first .delete-button-help-locator",
+        //   target: ".last-containe .delete-button-help-locator",
         //   disableBeacon: true,
-        //   placement: "left-start",
+        //   placement: "top-start",
         //   title: "",
         // },
         {
@@ -134,6 +142,14 @@ export const tourSteps = (t) => {
           placement: "left-start",
           title: "",
         },
+        {
+          content:
+            t("HELP_MAPPING_VIRTUALIZATION"),
+          target: ".virtualization-icon",
+          disableBeacon: true,
+          placement: "left-start",
+          title: "",
+        },
         {
           content:
             t("HELP_MAPPING_MAP_GEOMETRIES"),