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:
Lukasz Ostrowski 2023-02-07 11:59:06 +01:00 committed by GitHub
parent 98ad73acdc
commit 477de5c3dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 109 additions and 111 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -29,7 +29,7 @@ export namespace GetV2SaleorAppsResponse {
supportUrl: string;
privacyUrl: string;
manifestUrl: string;
vercelDeploymentUrl?: string;
githubForkUrl?: string;
};
export type ComingSoonSaleorApp = SaleorAppBase & {

View file

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

View file

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