Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #13864 from appsmithorg/feat/13412-improve-import-app-flow-ui

Browse Source 
feat: 13412 - improve import app with progress bar
This commit is contained in:
haojin111 2022-05-26 16:49:47 +08:00 committed by GitHub
commit 3c1b1a3628
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 117 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/cypress/integration/Smoke_TestSuite/Application/ImportExportForkApplication_spec.js
View File

@ -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

1
app/client/cypress/locators/HomePage.js
View File

@ -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",
};

42
app/client/src/ce/constants/messages.test.ts
View File

@ -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);
});
});
});

6
app/client/src/ce/constants/messages.ts
View File

@ -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 = () =>

90
app/client/src/pages/Applications/ImportApplicationModal.tsx
View File

@ -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>
);
}