feat: 13412 - improve import app with progress bar

app/client/cypress/integration/Smoke_TestSuite/Application/ImportExportForkApplication_spec.js

@@ -15,6 +15,7 @@ describe("Import, Export and Fork application and validate data binding", functi
     cy.get(homePage.orgImportAppOption).click({ force: true });
     cy.get(homePage.orgImportAppModal).should("be.visible");
     cy.xpath(homePage.uploadLogo).attachFile("forkedApp.json");
+    cy.get(homePage.importAppProgressWrapper).should("be.visible");
     cy.wait("@importNewApplication").then((interception) => {
       cy.wait(100);
       // should check reconnect modal openning

app/client/cypress/locators/HomePage.js

@@ -95,4 +95,5 @@ export default {
   orgNameText: ".t--org-name-text",
   optionsIcon: ".t--options-icon",
   reconnectDatasourceModal: ".reconnect-datasource-modal",
+  importAppProgressWrapper: ".t-import-app-progress-wrapper",
 };

app/client/src/ce/constants/messages.test.ts

@@ -72,6 +72,11 @@ import {
   SUBMIT,
   UPDATE_CONFIG,
   USE_DEFAULT_CONFIGURATION,
+  UPLOADING_JSON,
+  UPLOADING_APPLICATION,
+  IMPORT_APP_FROM_FILE_MESSAGE,
+  IMPORT_APP_FROM_GIT_MESSAGE,
+  IMPORT_FROM_GIT_REPOSITORY,
 } from "./messages";
 
 describe("messages", () => {
@@ -386,3 +391,40 @@ describe("git-sync messages", () => {
     });
   });
 });
+
+describe("import application messages", () => {
+  const expectedMessages = [
+    { key: "UPLOADING_JSON", value: "Uploading JSON file" },
+    {
+      key: "UPLOADING_APPLICATION",
+      value: "Uploading application",
+    },
+    {
+      key: "IMPORT_APP_FROM_FILE_MESSAGE",
+      value: "Drag and drop your file or upload from your computer",
+    },
+    {
+      key: "IMPORT_APP_FROM_GIT_MESSAGE",
+      value: "Import an application from its git repository using its SSH URL",
+    },
+    {
+      key: "IMPORT_FROM_GIT_REPOSITORY",
+      value: "Import from git repository",
+    },
+  ];
+  const functions = [
+    UPLOADING_JSON,
+    UPLOADING_APPLICATION,
+    IMPORT_APP_FROM_FILE_MESSAGE,
+    IMPORT_APP_FROM_GIT_MESSAGE,
+    IMPORT_FROM_GIT_REPOSITORY,
+  ];
+  functions.forEach((fn: () => string) => {
+    it(`${fn.name} returns expected value`, () => {
+      const actual = createMessage(fn);
+      const found = expectedMessages.find((em) => em.key === fn.name);
+      const expected = found && found.value;
+      expect(actual).toEqual(expected);
+    });
+  });
+});

app/client/src/ce/constants/messages.ts

@@ -479,14 +479,14 @@ export const IMPORT_APPLICATION_MODAL_TITLE = () => "Import application";
 export const IMPORT_APPLICATION_MODAL_LABEL = () =>
   "Where would you like to import your application from?";
 export const IMPORT_APP_FROM_FILE_TITLE = () => "Import from file";
+export const UPLOADING_JSON = () => "Uploading JSON file";
+export const UPLOADING_APPLICATION = () => "Uploading application";
 export const IMPORT_APP_FROM_GIT_TITLE = () => "Import from a Git repo (Beta)";
 export const IMPORT_APP_FROM_FILE_MESSAGE = () =>
   "Drag and drop your file or upload from your computer";
 export const IMPORT_APP_FROM_GIT_MESSAGE = () =>
   "Import an application from its git repository using its SSH URL";
-export const IMPORT_FROM_GIT_REPOSITORY = () => "Import from Git Repository";
-export const IMPORT_FROM_GIT_REPOSITORY_MESSAGE = () =>
-  "While importing Appsmith will does not import the datasource credentials to prevent a breach. After a successfull import you can add the credentials manually so the application behaves normally!";
+export const IMPORT_FROM_GIT_REPOSITORY = () => "Import from git repository";
 export const RECONNECT_MISSING_DATASOURCE_CREDENTIALS = () =>
   "Reconnect missing datasource credentials";
 export const RECONNECT_MISSING_DATASOURCE_CREDENTIALS_DESCRIPTION = () =>

app/client/src/pages/Applications/ImportApplicationModal.tsx

@@ -15,6 +15,8 @@ import {
   IMPORT_APP_FROM_GIT_TITLE,
   IMPORT_APPLICATION_MODAL_LABEL,
   IMPORT_APPLICATION_MODAL_TITLE,
+  UPLOADING_APPLICATION,
+  UPLOADING_JSON,
 } from "@appsmith/constants/messages";
 import FilePickerV2 from "components/ads/FilePickerV2";
 import { Colors } from "constants/Colors";
@@ -28,6 +30,7 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import Dialog from "components/ads/DialogComponent";
 import { Classes } from "@blueprintjs/core";
 import { selectFeatureFlags } from "selectors/usersSelectors";
+import Statusbar from "pages/Editor/gitSync/components/Statusbar";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 
 const StyledDialog = styled(Dialog)`
@@ -73,6 +76,9 @@ const Row = styled.div`
   padding: 0;
   margin: 0;
   justify-content: space-between;
+  &.t-import-app-progress-wrapper {
+    justify-content: center;
+  }
 `;
 
 const FileImportCard = styled.div<{ gitEnabled?: boolean }>`
@@ -171,6 +177,29 @@ const CardWrapper = styled.div`
   }
 `;
 
+const StatusbarWrapper = styled.div`
+  width: 252px;
+  height: 199px;
+  .cs-icon {
+    margin: auto;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 8px;
+    background: var(--appsmith-color-black-200);
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  .cs-text.importing-app-name {
+    display: flex;
+    justify-content: center;
+  }
+`;
+
 function GitImportCard(props: { children?: ReactNode; handler?: () => void }) {
   const theme = useTheme() as Theme;
   const onClick = useCallback(() => {
@@ -244,7 +273,6 @@ function ImportApplicationModal(props: ImportApplicationModalProps) {
             applicationFile: file,
           }),
         );
-        onClose && onClose();
       } else {
         setAppFileToBeUploaded(null);
       }
@@ -256,6 +284,7 @@ function ImportApplicationModal(props: ImportApplicationModalProps) {
     // finished of importing application
     if (appFileToBeUploaded && !importingApplication) {
       setAppFileToBeUploaded(null);
+      onClose && onClose();
       // should open "Add credential" modal
     }
   }, [appFileToBeUploaded, importingApplication]);
@@ -281,27 +310,48 @@ function ImportApplicationModal(props: ImportApplicationModalProps) {
     >
       <TextWrapper>
         <Text color={Colors.COD_GRAY} type={TextType.P1}>
-          {createMessage(IMPORT_APPLICATION_MODAL_LABEL)}
+          {createMessage(
+            importingApplication
+              ? UPLOADING_JSON
+              : IMPORT_APPLICATION_MODAL_LABEL,
+          )}
         </Text>
       </TextWrapper>
-      <Row>
-        <FileImportCard
-          className="t--import-json-card"
-          gitEnabled={isGitImportFeatureEnabled}
-        >
-          <FilePickerV2
-            containerClickable
-            description={createMessage(IMPORT_APP_FROM_FILE_MESSAGE)}
-            fileType={FileType.JSON}
-            fileUploader={FileUploader}
-            iconFillColor={Colors.GREY_800}
-            onFileRemoved={onRemoveFile}
-            title={createMessage(IMPORT_APP_FROM_FILE_TITLE)}
-            uploadIcon="file-line"
-          />
-        </FileImportCard>
-        {isGitImportFeatureEnabled && <GitImportCard handler={onGitImport} />}
-      </Row>
+      {!importingApplication && (
+        <Row>
+          <FileImportCard
+            className="t--import-json-card"
+            gitEnabled={isGitImportFeatureEnabled}
+          >
+            <FilePickerV2
+              containerClickable
+              description={createMessage(IMPORT_APP_FROM_FILE_MESSAGE)}
+              fileType={FileType.JSON}
+              fileUploader={FileUploader}
+              iconFillColor={Colors.GREY_800}
+              onFileRemoved={onRemoveFile}
+              title={createMessage(IMPORT_APP_FROM_FILE_TITLE)}
+              uploadIcon="file-line"
+            />
+          </FileImportCard>
+          {isGitImportFeatureEnabled && <GitImportCard handler={onGitImport} />}
+        </Row>
+      )}
+      {importingApplication && (
+        <Row className="t-import-app-progress-wrapper">
+          <StatusbarWrapper className="t--importing-app-statusbar">
+            <Icon fillColor={Colors.GREY_800} name="file-line" />
+            <Text className="importing-app-name" type={TextType.P2}>
+              {appFileToBeUploaded?.file?.name || "filename.json"}
+            </Text>
+            <Statusbar
+              completed={!importingApplication}
+              message={createMessage(UPLOADING_APPLICATION)}
+              period={4}
+            />
+          </StatusbarWrapper>
+        </Row>
+      )}
     </StyledDialog>
   );
 }