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"} + + + + + )} ); }