diff --git a/app/client/cypress/integration/Smoke_TestSuite/Application/ImportExportForkApplication_spec.js b/app/client/cypress/integration/Smoke_TestSuite/Application/ImportExportForkApplication_spec.js
index bd4e2706dc8..937058596d8 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/Application/ImportExportForkApplication_spec.js
+++ b/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
diff --git a/app/client/cypress/locators/HomePage.js b/app/client/cypress/locators/HomePage.js
index a037d7a086c..0fbff3a4f36 100644
--- a/app/client/cypress/locators/HomePage.js
+++ b/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",
};
diff --git a/app/client/src/ce/constants/messages.test.ts b/app/client/src/ce/constants/messages.test.ts
index dfada223a98..2e5a1958109 100644
--- a/app/client/src/ce/constants/messages.test.ts
+++ b/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);
+ });
+ });
+});
diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index ced6790166f..049b194a23d 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/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 = () =>
diff --git a/app/client/src/pages/Applications/ImportApplicationModal.tsx b/app/client/src/pages/Applications/ImportApplicationModal.tsx
index 2981c649b9a..08e1ac239e1 100644
--- a/app/client/src/pages/Applications/ImportApplicationModal.tsx
+++ b/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) {
>
- {createMessage(IMPORT_APPLICATION_MODAL_LABEL)}
+ {createMessage(
+ importingApplication
+ ? UPLOADING_JSON
+ : IMPORT_APPLICATION_MODAL_LABEL,
+ )}
-
-
-
-
- {isGitImportFeatureEnabled && }
-
+ {!importingApplication && (
+
+
+
+
+ {isGitImportFeatureEnabled && }
+
+ )}
+ {importingApplication && (
+
+
+
+
+ {appFileToBeUploaded?.file?.name || "filename.json"}
+
+
+
+
+ )}
);
}