Change Vercel deployment button to fork on github button (#3119)
* Change vercel deployment button to fork on github button * Extract translations
This commit is contained in:
parent
98ad73acdc
commit
477de5c3dc
12 changed files with 109 additions and 111 deletions
|
@ -6771,10 +6771,6 @@
|
|||
"oYGfnY": {
|
||||
"string": "ZIP / Postal code"
|
||||
},
|
||||
"ohQrzn": {
|
||||
"context": "button",
|
||||
"string": "Deploy to Vercel"
|
||||
},
|
||||
"oiuwOl": {
|
||||
"context": "button",
|
||||
"string": "Assign"
|
||||
|
@ -8176,6 +8172,10 @@
|
|||
"context": "header",
|
||||
"string": "Translation Sale \"{saleName}\" - {languageCode}"
|
||||
},
|
||||
"zmnGkp": {
|
||||
"context": "button",
|
||||
"string": "Fork on GitHub"
|
||||
},
|
||||
"znbVYT": {
|
||||
"context": "product available for purchase date",
|
||||
"string": "Will become available on {date}"
|
||||
|
|
|
@ -11,14 +11,14 @@ interface AllAppListProps {
|
|||
appList?: GetV2SaleorAppsResponse.SaleorApp[];
|
||||
appInstallationList?: AppInstallationFragment[];
|
||||
navigateToAppInstallPage?: (manifestUrl: string) => void;
|
||||
navigateToVercelDeploymentPage?: (vercelDeploymentUrl: string) => void;
|
||||
navigateToGithubForkPage?: (githubForkUrl: string) => void;
|
||||
}
|
||||
|
||||
const AllAppList: React.FC<AllAppListProps> = ({
|
||||
appList,
|
||||
appInstallationList,
|
||||
navigateToAppInstallPage,
|
||||
navigateToVercelDeploymentPage,
|
||||
navigateToGithubForkPage,
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
|
||||
|
@ -37,7 +37,7 @@ const AllAppList: React.FC<AllAppListProps> = ({
|
|||
appInstallationList,
|
||||
)}
|
||||
navigateToAppInstallPage={navigateToAppInstallPage}
|
||||
navigateToVercelDeploymentPage={navigateToVercelDeploymentPage}
|
||||
navigateToGithubForkPage={navigateToGithubForkPage}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
@ -64,14 +64,14 @@ describe("Apps AppListCard", () => {
|
|||
<AppListCard
|
||||
app={releasedApp}
|
||||
navigateToAppInstallPage={navigateToAppInstallPage}
|
||||
navigateToVercelDeploymentPage={navigateToVercelDeploymentPage}
|
||||
navigateToGithubForkPage={navigateToVercelDeploymentPage}
|
||||
/>
|
||||
</Wrapper>,
|
||||
);
|
||||
const user = userEvent.setup();
|
||||
const installButton = screen.getByTestId("app-install-button");
|
||||
const deployToVercelButton = screen.getByTestId(
|
||||
"app-deploy-to-vercel-button",
|
||||
"app-fork-on-github-button",
|
||||
);
|
||||
|
||||
// Act
|
||||
|
|
|
@ -16,14 +16,14 @@ interface AppListCardProps {
|
|||
app: GetV2SaleorAppsResponse.SaleorApp;
|
||||
appInstallation?: AppInstallationFragment;
|
||||
navigateToAppInstallPage?: (manifestUrl: string) => void;
|
||||
navigateToVercelDeploymentPage?: (vercelDeploymentUrl: string) => void;
|
||||
navigateToGithubForkPage?: (githubForkUrl: string) => void;
|
||||
}
|
||||
|
||||
const AppListCard: React.FC<AppListCardProps> = ({
|
||||
app,
|
||||
appInstallation,
|
||||
navigateToAppInstallPage,
|
||||
navigateToVercelDeploymentPage,
|
||||
navigateToGithubForkPage,
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
const intl = useIntl();
|
||||
|
@ -34,7 +34,7 @@ const AppListCard: React.FC<AppListCardProps> = ({
|
|||
app,
|
||||
appInstallation,
|
||||
navigateToAppInstallPage,
|
||||
navigateToVercelDeploymentPage,
|
||||
navigateToGithubForkPage,
|
||||
retryAppInstallation,
|
||||
removeAppInstallation,
|
||||
});
|
||||
|
@ -51,7 +51,7 @@ const AppListCard: React.FC<AppListCardProps> = ({
|
|||
releaseDate={details.releaseDate}
|
||||
installationPending={details.installationPending}
|
||||
installHandler={details.installHandler}
|
||||
vercelDeployHandler={details.vercelDeployHandler}
|
||||
githubForkHandler={details.githubForkHandler}
|
||||
retryInstallHandler={details.retryInstallHandler}
|
||||
removeInstallHandler={details.removeInstallHandler}
|
||||
/>
|
||||
|
|
|
@ -16,7 +16,7 @@ interface AppListCardActionsProps {
|
|||
installationPending?: boolean;
|
||||
appInstallation?: AppInstallationFragment;
|
||||
installHandler?: () => void;
|
||||
vercelDeployHandler?: () => void;
|
||||
githubForkHandler?: () => void;
|
||||
retryInstallHandler?: () => void;
|
||||
removeInstallHandler?: () => void;
|
||||
}
|
||||
|
@ -26,7 +26,7 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
|
|||
installationPending = false,
|
||||
appInstallation,
|
||||
installHandler,
|
||||
vercelDeployHandler,
|
||||
githubForkHandler,
|
||||
retryInstallHandler,
|
||||
removeInstallHandler,
|
||||
}) => {
|
||||
|
@ -34,7 +34,7 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
|
|||
|
||||
if (
|
||||
!installHandler &&
|
||||
!vercelDeployHandler &&
|
||||
!githubForkHandler &&
|
||||
!releaseDate &&
|
||||
!retryInstallHandler &&
|
||||
!removeInstallHandler &&
|
||||
|
@ -47,13 +47,13 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
|
|||
<>
|
||||
<Hr />
|
||||
<CardActions className={classes.cardActions}>
|
||||
{vercelDeployHandler && (
|
||||
{githubForkHandler && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={vercelDeployHandler}
|
||||
data-test-id="app-deploy-to-vercel-button"
|
||||
onClick={githubForkHandler}
|
||||
data-test-id="app-fork-on-github-button"
|
||||
>
|
||||
<FormattedMessage {...messages.deployToVercel} />
|
||||
<FormattedMessage {...messages.forkOnGithub} />
|
||||
</Button>
|
||||
)}
|
||||
{installHandler && (
|
||||
|
|
|
@ -6,9 +6,9 @@ export const messages = defineMessages({
|
|||
defaultMessage: "Integrations",
|
||||
description: "header",
|
||||
},
|
||||
deployToVercel: {
|
||||
id: "ohQrzn",
|
||||
defaultMessage: "Deploy to Vercel",
|
||||
forkOnGithub: {
|
||||
id: "zmnGkp",
|
||||
defaultMessage: "Fork on GitHub",
|
||||
description: "button",
|
||||
},
|
||||
releaseComingSoon: {
|
||||
|
|
|
@ -67,12 +67,9 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
|
|||
[navigate],
|
||||
);
|
||||
|
||||
const navigateToVercelDeploymentPage = useCallback(
|
||||
(vercelDeploymentUrl: string) => {
|
||||
window.open(vercelDeploymentUrl, "_blank");
|
||||
},
|
||||
[],
|
||||
);
|
||||
const navigateToGithubForkPage = useCallback((githubForkUrl: string) => {
|
||||
window.open(githubForkUrl, "_blank");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
|
@ -110,7 +107,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
|
|||
appList={verifiedInstallableMarketplaceApps}
|
||||
appInstallationList={appsInstallations}
|
||||
navigateToAppInstallPage={navigateToAppInstallPage}
|
||||
navigateToVercelDeploymentPage={navigateToVercelDeploymentPage}
|
||||
navigateToGithubForkPage={navigateToGithubForkPage}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -9,6 +9,7 @@ import {
|
|||
installedAppsList,
|
||||
releasedApp,
|
||||
} from "@dashboard/new-apps/fixtures";
|
||||
import { GetV2SaleorAppsResponse } from "@dashboard/new-apps/marketplace.types";
|
||||
|
||||
import { AppListPageSections } from "./types";
|
||||
import {
|
||||
|
@ -210,7 +211,8 @@ describe("App List verified installed apps util", () => {
|
|||
],
|
||||
},
|
||||
];
|
||||
const installableMarketplaceApps = [
|
||||
const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] =
|
||||
[
|
||||
{
|
||||
name: {
|
||||
en: "Test app",
|
||||
|
@ -227,7 +229,7 @@ describe("App List verified installed apps util", () => {
|
|||
privacyUrl: "https://www.example.com/privacy",
|
||||
supportUrl: "https://www.example.com/support",
|
||||
repositoryUrl: "https://www.example.com/repository",
|
||||
vercelDeploymentUrl: "https://www.example.com/deployment",
|
||||
githubForkUrl: "https://www.example.com/repository/fork",
|
||||
},
|
||||
];
|
||||
|
||||
|
@ -301,7 +303,8 @@ describe("App List verified installable marketplace apps util", () => {
|
|||
],
|
||||
},
|
||||
];
|
||||
const installableMarketplaceApps = [
|
||||
const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] =
|
||||
[
|
||||
{
|
||||
name: {
|
||||
en: "Test app",
|
||||
|
@ -318,7 +321,7 @@ describe("App List verified installable marketplace apps util", () => {
|
|||
privacyUrl: "https://www.example.com/privacy",
|
||||
supportUrl: "https://www.example.com/support",
|
||||
repositoryUrl: "https://www.example.com/repository",
|
||||
vercelDeploymentUrl: "https://www.example.com/deployment",
|
||||
githubForkUrl: "https://www.example.com/repository/fork",
|
||||
},
|
||||
{
|
||||
name: {
|
||||
|
@ -336,7 +339,7 @@ describe("App List verified installable marketplace apps util", () => {
|
|||
privacyUrl: "https://www.example-2.com/privacy",
|
||||
supportUrl: "https://www.example-2.com/support",
|
||||
repositoryUrl: "https://www.example-2.com/repository",
|
||||
vercelDeploymentUrl: "https://www.example-2.com/deployment",
|
||||
githubForkUrl: "https://www.example-2.com/repository/fork",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
@ -130,7 +130,7 @@ export const releasedApp: GetV2SaleorAppsResponse.ReleasedSaleorApp = {
|
|||
privacyUrl: "https://www.released-example.com/privacy",
|
||||
supportUrl: "https://www.released-example.com/support",
|
||||
repositoryUrl: "https://www.released-example.com/repository",
|
||||
vercelDeploymentUrl: "https://www.released-example.com/deployment",
|
||||
githubForkUrl: "https://www.released-example.com/repository/fork",
|
||||
integrations: [
|
||||
{
|
||||
name: "First released integration",
|
||||
|
|
|
@ -29,7 +29,7 @@ export namespace GetV2SaleorAppsResponse {
|
|||
supportUrl: string;
|
||||
privacyUrl: string;
|
||||
manifestUrl: string;
|
||||
vercelDeploymentUrl?: string;
|
||||
githubForkUrl?: string;
|
||||
};
|
||||
|
||||
export type ComingSoonSaleorApp = SaleorAppBase & {
|
||||
|
|
|
@ -26,7 +26,7 @@ describe("App utils app details", () => {
|
|||
privacyUrl: "https://www.example.com/privacy",
|
||||
supportUrl: "https://www.example.com/support",
|
||||
repositoryUrl: "https://www.example.com/repository",
|
||||
vercelDeploymentUrl: "https://www.example.com/deployment",
|
||||
githubForkUrl: "https://www.example.com/repository/fork",
|
||||
};
|
||||
|
||||
// Act
|
||||
|
@ -35,7 +35,7 @@ describe("App utils app details", () => {
|
|||
app,
|
||||
appInstallation: undefined,
|
||||
navigateToAppInstallPage: () => undefined,
|
||||
navigateToVercelDeploymentPage: () => undefined,
|
||||
navigateToGithubForkPage: () => undefined,
|
||||
removeAppInstallation: () => undefined,
|
||||
retryAppInstallation: () => undefined,
|
||||
});
|
||||
|
@ -44,7 +44,7 @@ describe("App utils app details", () => {
|
|||
const expectedDetails: AppDetails = {
|
||||
releaseDate: undefined,
|
||||
installHandler: expect.any(Function),
|
||||
vercelDeployHandler: expect.any(Function),
|
||||
githubForkHandler: expect.any(Function),
|
||||
installationPending: undefined,
|
||||
removeInstallHandler: undefined,
|
||||
retryInstallHandler: undefined,
|
||||
|
@ -89,7 +89,7 @@ describe("App utils app details", () => {
|
|||
app,
|
||||
appInstallation: undefined,
|
||||
navigateToAppInstallPage: () => undefined,
|
||||
navigateToVercelDeploymentPage: () => undefined,
|
||||
navigateToGithubForkPage: () => undefined,
|
||||
removeAppInstallation: () => undefined,
|
||||
retryAppInstallation: () => undefined,
|
||||
});
|
||||
|
@ -98,7 +98,7 @@ describe("App utils app details", () => {
|
|||
const expectedDetails: AppDetails = {
|
||||
releaseDate: "2019-12-16",
|
||||
installHandler: undefined,
|
||||
vercelDeployHandler: undefined,
|
||||
githubForkHandler: undefined,
|
||||
links: [],
|
||||
installationPending: undefined,
|
||||
removeInstallHandler: undefined,
|
||||
|
@ -125,7 +125,7 @@ describe("App utils app details", () => {
|
|||
privacyUrl: "https://www.example.com/privacy",
|
||||
supportUrl: "https://www.example.com/support",
|
||||
repositoryUrl: "https://www.example.com/repository",
|
||||
vercelDeploymentUrl: "https://www.example.com/deployment",
|
||||
githubForkUrl: "https://www.example.com/repository/fork",
|
||||
};
|
||||
const appInstallation: AppInstallationFragment = {
|
||||
__typename: "AppInstallation",
|
||||
|
@ -142,7 +142,7 @@ describe("App utils app details", () => {
|
|||
app,
|
||||
appInstallation,
|
||||
navigateToAppInstallPage: () => undefined,
|
||||
navigateToVercelDeploymentPage: () => undefined,
|
||||
navigateToGithubForkPage: () => undefined,
|
||||
removeAppInstallation: () => undefined,
|
||||
retryAppInstallation: () => undefined,
|
||||
});
|
||||
|
@ -151,7 +151,7 @@ describe("App utils app details", () => {
|
|||
const expectedDetails: AppDetails = {
|
||||
releaseDate: undefined,
|
||||
installHandler: undefined,
|
||||
vercelDeployHandler: undefined,
|
||||
githubForkHandler: undefined,
|
||||
links: [
|
||||
{
|
||||
name: expect.any(String),
|
||||
|
@ -191,7 +191,7 @@ describe("App utils app details", () => {
|
|||
privacyUrl: "https://www.example.com/privacy",
|
||||
supportUrl: "https://www.example.com/support",
|
||||
repositoryUrl: "https://www.example.com/repository",
|
||||
vercelDeploymentUrl: "https://www.example.com/deployment",
|
||||
githubForkUrl: "https://www.example.com/repository/fork",
|
||||
};
|
||||
const appInstallation: AppInstallationFragment = {
|
||||
__typename: "AppInstallation",
|
||||
|
@ -208,7 +208,7 @@ describe("App utils app details", () => {
|
|||
app,
|
||||
appInstallation,
|
||||
navigateToAppInstallPage: () => undefined,
|
||||
navigateToVercelDeploymentPage: () => undefined,
|
||||
navigateToGithubForkPage: () => undefined,
|
||||
removeAppInstallation: () => undefined,
|
||||
retryAppInstallation: () => undefined,
|
||||
});
|
||||
|
@ -217,7 +217,7 @@ describe("App utils app details", () => {
|
|||
const expectedDetails: AppDetails = {
|
||||
releaseDate: undefined,
|
||||
installHandler: undefined,
|
||||
vercelDeployHandler: undefined,
|
||||
githubForkHandler: undefined,
|
||||
links: [
|
||||
{
|
||||
name: expect.any(String),
|
||||
|
|
|
@ -10,7 +10,7 @@ const getInstallableMarketplaceApps = (
|
|||
marketplaceAppList?: GetV2SaleorAppsResponse.SaleorApp[],
|
||||
) =>
|
||||
marketplaceAppList?.filter(
|
||||
app => "manifestUrl" in app || "vercelDeploymentUrl" in app,
|
||||
app => "manifestUrl" in app || "githubForkUrl" in app,
|
||||
) as GetV2SaleorAppsResponse.ReleasedSaleorApp[] | undefined;
|
||||
|
||||
const getComingSoonMarketplaceApps = (
|
||||
|
@ -19,7 +19,7 @@ const getComingSoonMarketplaceApps = (
|
|||
marketplaceAppList?.filter(
|
||||
app =>
|
||||
!("manifestUrl" in app) &&
|
||||
!("vercelDeploymentUrl" in app) &&
|
||||
!("githubForkUrl" in app) &&
|
||||
"releaseDate" in app,
|
||||
) as GetV2SaleorAppsResponse.ComingSoonSaleorApp[] | undefined;
|
||||
|
||||
|
@ -92,7 +92,7 @@ interface GetAppDetailsOpts {
|
|||
app: GetV2SaleorAppsResponse.SaleorApp;
|
||||
appInstallation?: AppInstallationFragment;
|
||||
navigateToAppInstallPage?: (url: string) => void;
|
||||
navigateToVercelDeploymentPage?: (url?: string) => void;
|
||||
navigateToGithubForkPage?: (url?: string) => void;
|
||||
retryAppInstallation: (installationId: string) => void;
|
||||
removeAppInstallation: (installationId: string) => void;
|
||||
}
|
||||
|
@ -102,17 +102,15 @@ export const getAppDetails = ({
|
|||
app,
|
||||
appInstallation,
|
||||
navigateToAppInstallPage,
|
||||
navigateToVercelDeploymentPage,
|
||||
navigateToGithubForkPage,
|
||||
retryAppInstallation,
|
||||
removeAppInstallation,
|
||||
}: GetAppDetailsOpts) => {
|
||||
const isAppComingSoon =
|
||||
!("manifestUrl" in app) &&
|
||||
!("vercelDeploymentUrl" in app) &&
|
||||
"releaseDate" in app;
|
||||
const isAppComingSoon = !("manifestUrl" in app);
|
||||
|
||||
const isAppInstallable = "manifestUrl" in app && !!navigateToAppInstallPage;
|
||||
const isAppVercelDeployable =
|
||||
"vercelDeploymentUrl" in app && !!navigateToVercelDeploymentPage;
|
||||
const isAppForkableOnGithub =
|
||||
"githubForkUrl" in app && !!navigateToGithubForkPage;
|
||||
const installationPending =
|
||||
appInstallation && appInstallation.status === JobStatusEnum.PENDING;
|
||||
|
||||
|
@ -123,9 +121,9 @@ export const getAppDetails = ({
|
|||
!appInstallation && isAppInstallable
|
||||
? () => navigateToAppInstallPage(app.manifestUrl)
|
||||
: undefined,
|
||||
vercelDeployHandler:
|
||||
!appInstallation && isAppVercelDeployable && !!app.vercelDeploymentUrl
|
||||
? () => navigateToVercelDeploymentPage(app.vercelDeploymentUrl)
|
||||
githubForkHandler:
|
||||
!appInstallation && isAppForkableOnGithub && !!app.githubForkUrl
|
||||
? () => navigateToGithubForkPage(app.githubForkUrl)
|
||||
: undefined,
|
||||
installationPending,
|
||||
retryInstallHandler:
|
||||
|
|
Loading…
Reference in a new issue