slice-machine-ui 1.23.2-alpha.bmo-add-github-settings-page.3 → 1.23.2-alpha.fix-telemetry-enabled-check.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.depcheckrc +0 -3
- package/components/DeleteVariationModal/index.tsx +0 -1
- package/components/Forms/RenameVariationModal/RenameVariationModal.tsx +1 -0
- package/components/ModalFormCard/index.tsx +1 -0
- package/components/Navigation/index.tsx +12 -25
- package/components/ReviewModal/ReviewForm.tsx +1 -0
- package/lib/builders/common/EditModal/Form.jsx +1 -0
- package/lib/builders/common/Zone/Card/components/NewField.tsx +1 -0
- package/out/404.html +1 -1
- package/out/_next/static/chunks/18539003-5cc559566b738915.js +97 -0
- package/out/_next/static/chunks/318-ce7e74f18f2d5b22.js +1 -0
- package/out/_next/static/chunks/376-7e784d6069e01654.js +8 -0
- package/out/_next/static/chunks/{727-2235967a881f9035.js → 727-3a3bc32518778317.js} +1 -1
- package/out/_next/static/chunks/731-501990ebe6a71b32.js +1 -0
- package/out/_next/static/chunks/904-9a4c1264727ae89a.js +1 -0
- package/out/_next/static/chunks/pages/_app-36d458fc21f76416.js +432 -0
- package/out/_next/static/chunks/pages/{changelog-02cd80dad6f40878.js → changelog-afd18276fe018b24.js} +1 -1
- package/out/_next/static/chunks/pages/{changes-8de69920dfb5a48f.js → changes-2a976f9efeb719aa.js} +1 -1
- package/out/_next/static/chunks/pages/{labs-39b50541a4c370bf.js → labs-ee206005948f8e87.js} +1 -1
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]/{simulator-b12346e58ac9abea.js → simulator-897ca93c114a1435.js} +1 -1
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]-b2a9d773ce5d7739.js +1 -0
- package/out/_next/static/chunks/pages/slices-e9c70c082ca3e3f9.js +1 -0
- package/out/_next/static/css/200244e3e0463c39.css +1 -0
- package/out/_next/static/css/{838fd8bb5a7c32b0.css → 37153180c3b0dd66.css} +1 -1
- package/out/_next/static/uTquSQH-Tq6izLpiXgFd4/_buildManifest.js +1 -0
- package/out/changelog.html +1 -1
- package/out/changes.html +1 -1
- package/out/custom-types/[customTypeId].html +1 -1
- package/out/custom-types.html +1 -1
- package/out/index.html +1 -1
- package/out/labs.html +1 -1
- package/out/page-types/[pageTypeId].html +1 -1
- package/out/slices/[lib]/[sliceName]/[variation]/simulator.html +1 -1
- package/out/slices/[lib]/[sliceName]/[variation].html +1 -1
- package/out/slices.html +1 -1
- package/package.json +6 -9
- package/src/components/FieldSet/FieldSet.stories.tsx +11 -20
- package/src/features/environments/actions/setEnvironment.ts +2 -2
- package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx +1 -0
- package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx +1 -0
- package/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx +1 -0
- package/test/src/modules/__fixtures__/serverState.ts +2 -1
- package/out/_next/static/Os2LJkq4DesS0VqWYg8UC/_buildManifest.js +0 -1
- package/out/_next/static/chunks/18539003-5f78714a35fde4a1.js +0 -97
- package/out/_next/static/chunks/318-bd030cc1725e23b5.js +0 -1
- package/out/_next/static/chunks/731-a9b66ccdc3fae2c2.js +0 -1
- package/out/_next/static/chunks/777-8c5507e3b119b5dc.js +0 -8
- package/out/_next/static/chunks/904-6d6937d53ea2761e.js +0 -1
- package/out/_next/static/chunks/pages/_app-dee45e83f6837a4d.js +0 -434
- package/out/_next/static/chunks/pages/settings-386e0971d78f7d57.js +0 -1
- package/out/_next/static/chunks/pages/slices/[lib]/[sliceName]/[variation]-62b55bae7f1b3793.js +0 -1
- package/out/_next/static/chunks/pages/slices-81e382c3374273df.js +0 -1
- package/out/_next/static/css/3c26dbbbd8f4be12.css +0 -1
- package/out/_next/static/css/ca32882a5d2d8d88.css +0 -1
- package/out/settings.html +0 -1
- package/pages/settings.tsx +0 -1
- package/postcss.config.js +0 -10
- package/src/components/RelativeTime/RelativeTime.stories.tsx +0 -25
- package/src/components/RelativeTime/RelativeTime.tsx +0 -40
- package/src/components/RelativeTime/index.ts +0 -1
- package/src/features/settings/SettingsPage.tsx +0 -29
- package/src/features/settings/git/ConnectGitRepository.tsx +0 -97
- package/src/features/settings/git/ConnectGitRepositoryBlankSlate.tsx +0 -33
- package/src/features/settings/git/GitOwnerSelect.tsx +0 -71
- package/src/features/settings/git/GitProvider.ts +0 -40
- package/src/features/settings/git/GitProviderConnectButtons.tsx +0 -63
- package/src/features/settings/git/GitRepositoriesList.tsx +0 -76
- package/src/features/settings/git/GitRepositoriesSearch.tsx +0 -69
- package/src/features/settings/git/GitRepositoryConnectDialog.tsx +0 -86
- package/src/features/settings/git/GitRepositoryDisconnectDialog.tsx +0 -64
- package/src/features/settings/git/useGitOwners.ts +0 -12
- package/src/features/settings/git/useGitRepos.ts +0 -24
- package/src/features/settings/git/useLinkedGitRepos.ts +0 -41
- package/src/features/settings/git/useWriteAPIToken.ts +0 -30
- package/src/hooks/useUser.ts +0 -14
- package/src/icons/SettingsIcon.tsx +0 -19
- /package/out/_next/static/{Os2LJkq4DesS0VqWYg8UC → uTquSQH-Tq6izLpiXgFd4}/_ssgManifest.js +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.FieldSet_flex__qy2tm{all:unset;display:flex}.FieldSet_column__NS4qQ{flex-direction:column}.FieldSet_root__XVbMv{border-color:var(--grey6);border-radius:6px;border-style:solid;border-width:1px;box-shadow:var(--box-shadow-1);overflow-x:hidden}.FieldSet_row__END9k{align-items:center;flex-direction:row;gap:8px;padding-inline:16px}.FieldSet_borderBottom__L01vK{box-sizing:border-box}.FieldSet_borderBottom__L01vK:not(:last-child){border-bottom:1px solid var(--grey6)}.FieldSet_legend__JjRCM{background-color:var(--grey2);height:48px;order:0}.FieldSet_header__0Q7YD{background-color:var(--grey2);height:72px;order:1}.FieldSet_content__PDj3t{background-color:var(--grey1);order:2;padding:16px}.FieldSet_list__HoMpl{max-height:256px;order:2;overflow-y:auto}.FieldSet_listItem__P0SKW{background-color:var(--grey1);flex-shrink:0;height:64px}.FieldSet_listItemText__J0_Fr{flex-grow:1}.FieldSet_borderTop__qyC9U:not(:first-child){box-shadow:0 -1px 0 0 var(--grey6)}.FieldSet_footer__thBWh{background-color:var(--grey1);height:48px;order:3;padding-right:8px}.FieldSet_footerText__mKIv2{flex-grow:1}
|
package/out/settings.html
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/3c26dbbbd8f4be12.css" as="style"/><link rel="stylesheet" href="/_next/static/css/3c26dbbbd8f4be12.css" data-n-g=""/><link rel="preload" href="/_next/static/css/ca32882a5d2d8d88.css" as="style"/><link rel="stylesheet" href="/_next/static/css/ca32882a5d2d8d88.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-dee45e83f6837a4d.js" defer=""></script><script src="/_next/static/chunks/pages/settings-386e0971d78f7d57.js" defer=""></script><script src="/_next/static/Os2LJkq4DesS0VqWYg8UC/_buildManifest.js" defer=""></script><script src="/_next/static/Os2LJkq4DesS0VqWYg8UC/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/settings","query":{},"buildId":"Os2LJkq4DesS0VqWYg8UC","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
|
package/pages/settings.tsx
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { SettingsPage as default } from "@src/features/settings/SettingsPage";
|
package/postcss.config.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
|
|
3
|
-
import { RelativeTime } from "./RelativeTime";
|
|
4
|
-
|
|
5
|
-
type Story = StoryObj<typeof meta>;
|
|
6
|
-
|
|
7
|
-
const meta = {
|
|
8
|
-
component: RelativeTime,
|
|
9
|
-
argTypes: {
|
|
10
|
-
date: { control: "date" },
|
|
11
|
-
},
|
|
12
|
-
} satisfies Meta<typeof RelativeTime>;
|
|
13
|
-
|
|
14
|
-
export default meta;
|
|
15
|
-
|
|
16
|
-
export const Default = {
|
|
17
|
-
args: {
|
|
18
|
-
date: new Date("1 Jan 2024"),
|
|
19
|
-
},
|
|
20
|
-
render: ({ date, ...otherArgs }) => (
|
|
21
|
-
// The `date` control converts the `date` arg into a UNIX timestamp. That's
|
|
22
|
-
// why we need to convert it back into a `Date` object.
|
|
23
|
-
<RelativeTime {...otherArgs} date={new Date(date)} />
|
|
24
|
-
),
|
|
25
|
-
} satisfies Story;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { Text } from "@prismicio/editor-ui";
|
|
2
|
-
import type { FC } from "react";
|
|
3
|
-
|
|
4
|
-
type RelativeTimeProps = {
|
|
5
|
-
date: Date;
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export const RelativeTime: FC<RelativeTimeProps> = ({
|
|
9
|
-
date,
|
|
10
|
-
...otherProps
|
|
11
|
-
}) => (
|
|
12
|
-
<Text {...otherProps} color="inherit" variant="inherit">
|
|
13
|
-
{formatRelativeTime(date)}
|
|
14
|
-
</Text>
|
|
15
|
-
);
|
|
16
|
-
|
|
17
|
-
const rtf = new Intl.RelativeTimeFormat("en", {
|
|
18
|
-
numeric: "auto",
|
|
19
|
-
style: "narrow",
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
function formatRelativeTime(date: Date, now = new Date()): string {
|
|
23
|
-
return rtf.format(differenceInCalendarDays(date, now), "day");
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const millisecondsInDay = 1_000 * 60 * 60 * 24;
|
|
27
|
-
|
|
28
|
-
// Adapted from: https://github.com/date-fns/date-fns/blob/6f44a167e71053999c10aa9462d7f0c52fec0faa/src/differenceInCalendarDays/index.ts.
|
|
29
|
-
function differenceInCalendarDays(dateLeft: Date, dateRight: Date): number {
|
|
30
|
-
const startOfDayLeft = startOfDay(dateLeft);
|
|
31
|
-
const startOfDayRight = startOfDay(dateRight);
|
|
32
|
-
return Math.round((+startOfDayLeft - +startOfDayRight) / millisecondsInDay);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
// Adapted from: https://github.com/date-fns/date-fns/blob/6f44a167e71053999c10aa9462d7f0c52fec0faa/src/startOfDay/index.ts.
|
|
36
|
-
function startOfDay(date: Date): Date {
|
|
37
|
-
const newDate = new Date(date);
|
|
38
|
-
newDate.setHours(0, 0, 0, 0);
|
|
39
|
-
return newDate;
|
|
40
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { RelativeTime } from "./RelativeTime";
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { Box } from "@prismicio/editor-ui";
|
|
2
|
-
import Head from "next/head";
|
|
3
|
-
import type { FC } from "react";
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
AppLayout,
|
|
7
|
-
AppLayoutBreadcrumb,
|
|
8
|
-
AppLayoutContent,
|
|
9
|
-
AppLayoutHeader,
|
|
10
|
-
} from "@components/AppLayout";
|
|
11
|
-
import { ConnectGitRepository } from "@src/features/settings/git/ConnectGitRepository";
|
|
12
|
-
|
|
13
|
-
export const SettingsPage: FC = () => (
|
|
14
|
-
<>
|
|
15
|
-
<Head>
|
|
16
|
-
<title>Settings - Slice Machine</title>
|
|
17
|
-
</Head>
|
|
18
|
-
<AppLayout>
|
|
19
|
-
<AppLayoutHeader>
|
|
20
|
-
<AppLayoutBreadcrumb folder="Settings" />
|
|
21
|
-
</AppLayoutHeader>
|
|
22
|
-
<AppLayoutContent>
|
|
23
|
-
<Box flexDirection="column" maxWidth={600}>
|
|
24
|
-
<ConnectGitRepository />
|
|
25
|
-
</Box>
|
|
26
|
-
</AppLayoutContent>
|
|
27
|
-
</AppLayout>
|
|
28
|
-
</>
|
|
29
|
-
);
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { Button, ErrorBoundary, IconButton } from "@prismicio/editor-ui";
|
|
2
|
-
import { isUnauthenticatedError } from "@slicemachine/manager/client";
|
|
3
|
-
import { type FC, type ReactNode, Suspense } from "react";
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
FieldSet,
|
|
7
|
-
FieldSetContent,
|
|
8
|
-
FieldSetFooter,
|
|
9
|
-
FieldSetLegend,
|
|
10
|
-
} from "@src/components/FieldSet";
|
|
11
|
-
import { ConnectGitRepositoryBlankSlate } from "@src/features/settings/git/ConnectGitRepositoryBlankSlate";
|
|
12
|
-
import { GitProviderConnectButtons } from "@src/features/settings/git/GitProviderConnectButtons";
|
|
13
|
-
import { GitRepositoriesList } from "@src/features/settings/git/GitRepositoriesList";
|
|
14
|
-
import {
|
|
15
|
-
GitRepositoriesSearch,
|
|
16
|
-
GitRepositoriesSearchSkeleton,
|
|
17
|
-
} from "@src/features/settings/git/GitRepositoriesSearch";
|
|
18
|
-
import { useGitOwners } from "@src/features/settings/git/useGitOwners";
|
|
19
|
-
import { useLinkedGitRepos } from "@src/features/settings/git/useLinkedGitRepos";
|
|
20
|
-
import { useUser } from "@src/hooks/useUser";
|
|
21
|
-
import useSliceMachineActions from "@src/modules/useSliceMachineActions";
|
|
22
|
-
|
|
23
|
-
export const ConnectGitRepository: FC = () => (
|
|
24
|
-
<FieldSet>
|
|
25
|
-
<FieldSetLegend>Connected Git Repository</FieldSetLegend>
|
|
26
|
-
<ErrorBoundary renderError={renderError}>
|
|
27
|
-
<Suspense fallback={<GitRepositoriesSearchSkeleton gitOwnerSelect />}>
|
|
28
|
-
<Content />
|
|
29
|
-
</Suspense>
|
|
30
|
-
</ErrorBoundary>
|
|
31
|
-
<FieldSetFooter action={<IconButton icon="openInNew" />}>
|
|
32
|
-
Learn more about Prismic for Git
|
|
33
|
-
</FieldSetFooter>
|
|
34
|
-
</FieldSet>
|
|
35
|
-
);
|
|
36
|
-
|
|
37
|
-
const Content: FC = () => {
|
|
38
|
-
const { isLoggedIn } = useUser();
|
|
39
|
-
return isLoggedIn ? <LoggedInContent /> : <LoggedOutContent />;
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
const LoggedInContent: FC = () => {
|
|
43
|
-
const { linkedGitRepos } = useLinkedGitRepos();
|
|
44
|
-
return linkedGitRepos.length > 0 ? (
|
|
45
|
-
<GitRepositoriesList mode="unlink" repos={linkedGitRepos} />
|
|
46
|
-
) : (
|
|
47
|
-
<UnlinkedRepositoryContent />
|
|
48
|
-
);
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
const UnlinkedRepositoryContent: FC = () => {
|
|
52
|
-
const owners = useGitOwners();
|
|
53
|
-
return owners.length > 0 ? (
|
|
54
|
-
<GitRepositoriesSearch owners={owners} />
|
|
55
|
-
) : (
|
|
56
|
-
<FieldSetContent>
|
|
57
|
-
<GitProviderConnectButtons />
|
|
58
|
-
</FieldSetContent>
|
|
59
|
-
);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const LoggedOutContent: FC = () => {
|
|
63
|
-
const { openLoginModal } = useSliceMachineActions();
|
|
64
|
-
return (
|
|
65
|
-
<FieldSetContent>
|
|
66
|
-
<ConnectGitRepositoryBlankSlate
|
|
67
|
-
title="It seems like you are logged out"
|
|
68
|
-
description="Log in to connect a Git repository."
|
|
69
|
-
action={<Button onClick={openLoginModal}>Log in to Prismic</Button>}
|
|
70
|
-
/>
|
|
71
|
-
</FieldSetContent>
|
|
72
|
-
);
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
function renderError(error: unknown, reset: () => void): ReactNode {
|
|
76
|
-
if (isUnauthenticatedError(error)) {
|
|
77
|
-
return <LoggedOutContent />;
|
|
78
|
-
} else {
|
|
79
|
-
return <UnknownErrorContent reset={reset} />;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
type UnknownErrorContentProps = { reset: () => void };
|
|
84
|
-
|
|
85
|
-
const UnknownErrorContent: FC<UnknownErrorContentProps> = ({ reset }) => (
|
|
86
|
-
<FieldSetContent>
|
|
87
|
-
<ConnectGitRepositoryBlankSlate
|
|
88
|
-
title="Unable to fetch data"
|
|
89
|
-
description="An error occurred while fetching the list of connected Git repositories."
|
|
90
|
-
action={
|
|
91
|
-
<Button color="grey" onClick={reset}>
|
|
92
|
-
Retry
|
|
93
|
-
</Button>
|
|
94
|
-
}
|
|
95
|
-
/>
|
|
96
|
-
</FieldSetContent>
|
|
97
|
-
);
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { Box, ButtonGroup, Text } from "@prismicio/editor-ui";
|
|
2
|
-
import type { FC, ReactNode } from "react";
|
|
3
|
-
|
|
4
|
-
type ConnectGitRepositoryBlankSlateProps = {
|
|
5
|
-
title: string;
|
|
6
|
-
description: string;
|
|
7
|
-
action?: ReactNode;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const ConnectGitRepositoryBlankSlate: FC<
|
|
11
|
-
ConnectGitRepositoryBlankSlateProps
|
|
12
|
-
> = ({ title, description, action }) => (
|
|
13
|
-
<Box
|
|
14
|
-
flexDirection="column"
|
|
15
|
-
/*
|
|
16
|
-
* TODO: these `padding` values actually don't match Figma, but they are the
|
|
17
|
-
* closest allowed by the `Box` component.
|
|
18
|
-
*/
|
|
19
|
-
padding={{ block: 72, inline: 100 }}
|
|
20
|
-
>
|
|
21
|
-
<Text align="center" variant="emphasized">
|
|
22
|
-
{title}
|
|
23
|
-
</Text>
|
|
24
|
-
<Text align="center" color="grey11">
|
|
25
|
-
{description}
|
|
26
|
-
</Text>
|
|
27
|
-
{Boolean(action) ? (
|
|
28
|
-
<ButtonGroup sx={{ alignSelf: "center", marginTop: 8 }}>
|
|
29
|
-
{action}
|
|
30
|
-
</ButtonGroup>
|
|
31
|
-
) : undefined}
|
|
32
|
-
</Box>
|
|
33
|
-
);
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { Select, SelectItem, tokens } from "@prismicio/editor-ui";
|
|
2
|
-
import type { GitOwner } from "@slicemachine/manager";
|
|
3
|
-
import type { ComponentProps, FC } from "react";
|
|
4
|
-
|
|
5
|
-
import { gitProviderToConfig } from "@src/features/settings/git/GitProvider";
|
|
6
|
-
|
|
7
|
-
type GitOwnerSelectProps = {
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
owners?: GitOwner[];
|
|
10
|
-
selectedOwner?: GitOwner;
|
|
11
|
-
onSelectedOwnerChange?: (selectedOwner: GitOwner) => void;
|
|
12
|
-
sx?: SX;
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export const GitOwnerSelect: FC<GitOwnerSelectProps> = ({
|
|
16
|
-
disabled,
|
|
17
|
-
owners = [],
|
|
18
|
-
selectedOwner,
|
|
19
|
-
onSelectedOwnerChange,
|
|
20
|
-
sx,
|
|
21
|
-
}) => (
|
|
22
|
-
<Select
|
|
23
|
-
color="grey"
|
|
24
|
-
constrainContentWidth
|
|
25
|
-
disabled={disabled}
|
|
26
|
-
flexContent
|
|
27
|
-
onValueChange={(value) => {
|
|
28
|
-
const [provider, id] = parseGitOwnerKey(value);
|
|
29
|
-
const selectedOwner = owners.find(
|
|
30
|
-
(owner) => owner.provider === provider && owner.id === id,
|
|
31
|
-
);
|
|
32
|
-
if (selectedOwner) {
|
|
33
|
-
onSelectedOwnerChange?.(selectedOwner);
|
|
34
|
-
}
|
|
35
|
-
}}
|
|
36
|
-
placeholder="Owner"
|
|
37
|
-
renderStartIcon={() => <GitOwnerIcon owner={selectedOwner} />}
|
|
38
|
-
size="large"
|
|
39
|
-
sx={sx}
|
|
40
|
-
value={selectedOwner ? formatGitOwnerKey(selectedOwner) : undefined}
|
|
41
|
-
>
|
|
42
|
-
{owners.map((owner) => (
|
|
43
|
-
<SelectItem
|
|
44
|
-
key={formatGitOwnerKey(owner)}
|
|
45
|
-
renderStartIcon={() => <GitOwnerIcon owner={owner} />}
|
|
46
|
-
size="large"
|
|
47
|
-
value={formatGitOwnerKey(owner)}
|
|
48
|
-
>
|
|
49
|
-
{owner.name}
|
|
50
|
-
</SelectItem>
|
|
51
|
-
))}
|
|
52
|
-
</Select>
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
type GitOwnerIconProps = { owner: GitOwner | undefined };
|
|
56
|
-
|
|
57
|
-
const GitOwnerIcon: FC<GitOwnerIconProps> = ({ owner }) => {
|
|
58
|
-
const { Icon } = gitProviderToConfig[owner?.provider ?? "gitHub"];
|
|
59
|
-
return <Icon color={tokens.color.greyLight11} />;
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
function formatGitOwnerKey(owner: GitOwner): string {
|
|
63
|
-
return `${owner.provider}@${owner.id}`;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
function parseGitOwnerKey(key: string): string[] {
|
|
67
|
-
return key.split("@");
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// TODO(DT-1928): export the `SX` type from `@prismicio/editor-ui`.
|
|
71
|
-
type SX = ComponentProps<typeof Select>["sx"];
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { BitbucketIcon } from "@src/icons/BitbucketIcon";
|
|
2
|
-
import { GitHubIcon } from "@src/icons/GitHubIcon";
|
|
3
|
-
import { GitLabIcon } from "@src/icons/GitLabIcon";
|
|
4
|
-
import { managerClient } from "@src/managerClient";
|
|
5
|
-
|
|
6
|
-
export type GitProvider = keyof typeof gitProviderToConfig;
|
|
7
|
-
|
|
8
|
-
const GITHUB_APP_SLUG = "prismic-prod-internal-test";
|
|
9
|
-
|
|
10
|
-
export const gitProviderToConfig = {
|
|
11
|
-
gitHub: {
|
|
12
|
-
connect: async () => {
|
|
13
|
-
const state = await managerClient.git.createGitHubAuthState();
|
|
14
|
-
const url = new URL(
|
|
15
|
-
`https://github.com/apps/${GITHUB_APP_SLUG}/installations/new`,
|
|
16
|
-
);
|
|
17
|
-
url.searchParams.set("state", state.key);
|
|
18
|
-
window.open(url, "git-hub-app-installation");
|
|
19
|
-
},
|
|
20
|
-
Icon: GitHubIcon,
|
|
21
|
-
name: "GitHub",
|
|
22
|
-
supported: true,
|
|
23
|
-
},
|
|
24
|
-
bitbucket: {
|
|
25
|
-
connect: () => {
|
|
26
|
-
throw new Error("Not implemented.");
|
|
27
|
-
},
|
|
28
|
-
Icon: BitbucketIcon,
|
|
29
|
-
name: "Bitbucket",
|
|
30
|
-
supported: false,
|
|
31
|
-
},
|
|
32
|
-
gitLab: {
|
|
33
|
-
connect: () => {
|
|
34
|
-
throw new Error("Not implemented.");
|
|
35
|
-
},
|
|
36
|
-
Icon: GitLabIcon,
|
|
37
|
-
name: "GitLab",
|
|
38
|
-
supported: false,
|
|
39
|
-
},
|
|
40
|
-
};
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { keys } from "@prismicio/editor-support/Object";
|
|
2
|
-
import { Button, ButtonGroup, Text, tokens } from "@prismicio/editor-ui";
|
|
3
|
-
import { type ComponentProps, type FC, useState } from "react";
|
|
4
|
-
import { toast } from "react-toastify";
|
|
5
|
-
|
|
6
|
-
import {
|
|
7
|
-
type GitProvider,
|
|
8
|
-
gitProviderToConfig,
|
|
9
|
-
} from "@src/features/settings/git/GitProvider";
|
|
10
|
-
|
|
11
|
-
export const GitProviderConnectButtons: FC = () => (
|
|
12
|
-
<ButtonGroup>
|
|
13
|
-
{keys(gitProviderToConfig).map((provider) => (
|
|
14
|
-
<GitProviderConnectButton
|
|
15
|
-
key={provider}
|
|
16
|
-
provider={provider}
|
|
17
|
-
sx={{ flexBasis: 0, flexGrow: 1 }}
|
|
18
|
-
/>
|
|
19
|
-
))}
|
|
20
|
-
</ButtonGroup>
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
type GitProviderConnectButtonProps = { provider: GitProvider; sx?: SX };
|
|
24
|
-
|
|
25
|
-
const GitProviderConnectButton: FC<GitProviderConnectButtonProps> = ({
|
|
26
|
-
provider,
|
|
27
|
-
sx,
|
|
28
|
-
}) => {
|
|
29
|
-
const { connect, Icon, name, supported } = gitProviderToConfig[provider];
|
|
30
|
-
const [loading, setLoading] = useState(false);
|
|
31
|
-
return (
|
|
32
|
-
<Button
|
|
33
|
-
color="grey"
|
|
34
|
-
disabled={!supported}
|
|
35
|
-
loading={loading}
|
|
36
|
-
onClick={() => {
|
|
37
|
-
void (async () => {
|
|
38
|
-
setLoading(true);
|
|
39
|
-
try {
|
|
40
|
-
await connect();
|
|
41
|
-
} catch (error) {
|
|
42
|
-
const message = `Could not connect to ${name}`;
|
|
43
|
-
console.error(message, error);
|
|
44
|
-
toast.error(message);
|
|
45
|
-
setLoading(false);
|
|
46
|
-
}
|
|
47
|
-
})();
|
|
48
|
-
}}
|
|
49
|
-
renderStartIcon={() => <Icon color={tokens.color.greyLight11} />}
|
|
50
|
-
sx={sx}
|
|
51
|
-
>
|
|
52
|
-
{name}
|
|
53
|
-
{supported ? undefined : (
|
|
54
|
-
<Text color="inherit" variant="small">
|
|
55
|
-
{" soon"}
|
|
56
|
-
</Text>
|
|
57
|
-
)}
|
|
58
|
-
</Button>
|
|
59
|
-
);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
// TODO(DT-1928): export the `SX` type from `@prismicio/editor-ui`.
|
|
63
|
-
type SX = ComponentProps<typeof Button>["sx"];
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { Button, Skeleton, Text } from "@prismicio/editor-ui";
|
|
2
|
-
import type { GitRepo, GitRepoSpecifier } from "@slicemachine/manager";
|
|
3
|
-
import type { FC } from "react";
|
|
4
|
-
|
|
5
|
-
import { FieldSetList, FieldSetListItem } from "@src/components/FieldSet";
|
|
6
|
-
import { RelativeTime } from "@src/components/RelativeTime";
|
|
7
|
-
import { GitRepositoryConnectDialog } from "@src/features/settings/git/GitRepositoryConnectDialog";
|
|
8
|
-
import { GitRepositoryDisconnectDialog } from "@src/features/settings/git/GitRepositoryDisconnectDialog";
|
|
9
|
-
import { useLinkedGitRepos } from "@src/features/settings/git/useLinkedGitRepos";
|
|
10
|
-
|
|
11
|
-
type GitRepositoriesListProps =
|
|
12
|
-
| { mode: "link"; repos: GitRepo[] }
|
|
13
|
-
| { mode: "unlink"; repos: GitRepoSpecifier[] };
|
|
14
|
-
|
|
15
|
-
export const GitRepositoriesList: FC<GitRepositoriesListProps> = ({
|
|
16
|
-
mode,
|
|
17
|
-
repos,
|
|
18
|
-
}) => {
|
|
19
|
-
const { linkRepo, unlinkRepo } = useLinkedGitRepos();
|
|
20
|
-
return (
|
|
21
|
-
<FieldSetList>
|
|
22
|
-
{mode === "link"
|
|
23
|
-
? repos.map((repo) => (
|
|
24
|
-
<FieldSetListItem
|
|
25
|
-
action={
|
|
26
|
-
<GitRepositoryConnectDialog
|
|
27
|
-
linkRepo={linkRepo}
|
|
28
|
-
repo={repo}
|
|
29
|
-
trigger={<Button color="grey">Connect</Button>}
|
|
30
|
-
/>
|
|
31
|
-
}
|
|
32
|
-
key={`${repo.provider}@${repo.id}`}
|
|
33
|
-
>
|
|
34
|
-
{repo.name}
|
|
35
|
-
<Text color="grey11">
|
|
36
|
-
{" • "}
|
|
37
|
-
<RelativeTime date={repo.pushedAt} />
|
|
38
|
-
</Text>
|
|
39
|
-
</FieldSetListItem>
|
|
40
|
-
))
|
|
41
|
-
: repos.map((repo) => (
|
|
42
|
-
<FieldSetListItem
|
|
43
|
-
action={
|
|
44
|
-
<GitRepositoryDisconnectDialog
|
|
45
|
-
repo={repo}
|
|
46
|
-
trigger={<Button color="grey">Disconnect</Button>}
|
|
47
|
-
unlinkRepo={unlinkRepo}
|
|
48
|
-
/>
|
|
49
|
-
}
|
|
50
|
-
key={`${repo.provider}@${repo.owner}/${repo.name}`}
|
|
51
|
-
>
|
|
52
|
-
{repo.name}
|
|
53
|
-
</FieldSetListItem>
|
|
54
|
-
))}
|
|
55
|
-
</FieldSetList>
|
|
56
|
-
);
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
export const GitRepositoriesListSkeleton: FC = () => (
|
|
60
|
-
<FieldSetList>
|
|
61
|
-
{[...Array(4).keys()].map((index) => (
|
|
62
|
-
<FieldSetListItem
|
|
63
|
-
action={<Skeleton height={32} width={67.59} />}
|
|
64
|
-
key={index}
|
|
65
|
-
>
|
|
66
|
-
<Skeleton
|
|
67
|
-
height={24}
|
|
68
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
69
|
-
// @ts-ignore TODO(DT-1918): add `verticalAlign: "middle"` to the `sx` prop.
|
|
70
|
-
sx={{ verticalAlign: "middle" }}
|
|
71
|
-
width={129.92}
|
|
72
|
-
/>
|
|
73
|
-
</FieldSetListItem>
|
|
74
|
-
))}
|
|
75
|
-
</FieldSetList>
|
|
76
|
-
);
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import type { GitOwner } from "@slicemachine/manager";
|
|
2
|
-
import { type FC, Suspense, useState } from "react";
|
|
3
|
-
|
|
4
|
-
import { FieldSetContent, FieldSetHeader } from "@src/components/FieldSet";
|
|
5
|
-
import { ConnectGitRepositoryBlankSlate } from "@src/features/settings/git/ConnectGitRepositoryBlankSlate";
|
|
6
|
-
import { GitOwnerSelect } from "@src/features/settings/git/GitOwnerSelect";
|
|
7
|
-
import {
|
|
8
|
-
GitRepositoriesList,
|
|
9
|
-
GitRepositoriesListSkeleton,
|
|
10
|
-
} from "@src/features/settings/git/GitRepositoriesList";
|
|
11
|
-
import { useGitRepos } from "@src/features/settings/git/useGitRepos";
|
|
12
|
-
|
|
13
|
-
type GitRepositoriesSearchProps = { owners: GitOwner[] };
|
|
14
|
-
|
|
15
|
-
export const GitRepositoriesSearch: FC<GitRepositoriesSearchProps> = ({
|
|
16
|
-
owners,
|
|
17
|
-
}) => {
|
|
18
|
-
const [selectedOwner, setSelectedOwner] = useState(owners[0]);
|
|
19
|
-
return (
|
|
20
|
-
<>
|
|
21
|
-
<FieldSetHeader>
|
|
22
|
-
<GitOwnerSelect
|
|
23
|
-
owners={owners}
|
|
24
|
-
selectedOwner={selectedOwner}
|
|
25
|
-
onSelectedOwnerChange={setSelectedOwner}
|
|
26
|
-
sx={{ width: "calc(50% - 8px)" }}
|
|
27
|
-
/>
|
|
28
|
-
</FieldSetHeader>
|
|
29
|
-
<Suspense
|
|
30
|
-
fallback={<GitRepositoriesSearchSkeleton gitOwnerSelect={false} />}
|
|
31
|
-
>
|
|
32
|
-
<GitRepositoriesSearchResults owner={selectedOwner} />
|
|
33
|
-
</Suspense>
|
|
34
|
-
</>
|
|
35
|
-
);
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
type GitRepositoriesSearchResultsProps = { owner: GitOwner };
|
|
39
|
-
|
|
40
|
-
const GitRepositoriesSearchResults: FC<GitRepositoriesSearchResultsProps> = ({
|
|
41
|
-
owner,
|
|
42
|
-
}) => {
|
|
43
|
-
const repos = useGitRepos({ provider: owner.provider, owner: owner.name });
|
|
44
|
-
return repos.length > 0 ? (
|
|
45
|
-
<GitRepositoriesList mode="link" repos={repos} />
|
|
46
|
-
) : (
|
|
47
|
-
<FieldSetContent>
|
|
48
|
-
<ConnectGitRepositoryBlankSlate
|
|
49
|
-
title="No Results Found"
|
|
50
|
-
description="Try selecting a different Git account or organization on the top left."
|
|
51
|
-
/>
|
|
52
|
-
</FieldSetContent>
|
|
53
|
-
);
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
type GitRepositoriesSearchSkeletonProps = { gitOwnerSelect: boolean };
|
|
57
|
-
|
|
58
|
-
export const GitRepositoriesSearchSkeleton: FC<
|
|
59
|
-
GitRepositoriesSearchSkeletonProps
|
|
60
|
-
> = ({ gitOwnerSelect }) => (
|
|
61
|
-
<>
|
|
62
|
-
{gitOwnerSelect ? (
|
|
63
|
-
<FieldSetHeader>
|
|
64
|
-
<GitOwnerSelect disabled sx={{ width: "calc(50% - 8px)" }} />
|
|
65
|
-
</FieldSetHeader>
|
|
66
|
-
) : undefined}
|
|
67
|
-
<GitRepositoriesListSkeleton />
|
|
68
|
-
</>
|
|
69
|
-
);
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Box,
|
|
3
|
-
Dialog,
|
|
4
|
-
DialogActions,
|
|
5
|
-
DialogContent,
|
|
6
|
-
DialogHeader,
|
|
7
|
-
FormInput,
|
|
8
|
-
Text,
|
|
9
|
-
} from "@prismicio/editor-ui";
|
|
10
|
-
import type { GitRepo, GitRepoSpecifier } from "@slicemachine/manager";
|
|
11
|
-
import { Formik } from "formik";
|
|
12
|
-
import type { FC, ReactNode } from "react";
|
|
13
|
-
import { toast } from "react-toastify";
|
|
14
|
-
|
|
15
|
-
import { gitProviderToConfig } from "@src/features/settings/git/GitProvider";
|
|
16
|
-
import { useWriteAPIToken } from "@src/features/settings/git/useWriteAPIToken";
|
|
17
|
-
|
|
18
|
-
type GitRepositoryConnectDialogProps = {
|
|
19
|
-
linkRepo: (repo: GitRepoSpecifier) => Promise<void>;
|
|
20
|
-
repo: GitRepo;
|
|
21
|
-
trigger: ReactNode;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export const GitRepositoryConnectDialog: FC<
|
|
25
|
-
GitRepositoryConnectDialogProps
|
|
26
|
-
> = ({ linkRepo, repo, trigger }) => {
|
|
27
|
-
const providerConfig = gitProviderToConfig[repo.provider];
|
|
28
|
-
const { updateToken } = useWriteAPIToken({ git: repo });
|
|
29
|
-
return (
|
|
30
|
-
<Dialog size={{ width: 448, height: "auto" }} trigger={trigger}>
|
|
31
|
-
<DialogHeader title="Prismic write API token required" />
|
|
32
|
-
<DialogContent>
|
|
33
|
-
<Formik
|
|
34
|
-
initialValues={{ writeAPIToken: "" }}
|
|
35
|
-
validate={(values) => {
|
|
36
|
-
if (values.writeAPIToken.length === 0) {
|
|
37
|
-
return { writeAPIToken: "Cannot be empty" };
|
|
38
|
-
}
|
|
39
|
-
}}
|
|
40
|
-
onSubmit={async (values) => {
|
|
41
|
-
try {
|
|
42
|
-
await updateToken(values.writeAPIToken);
|
|
43
|
-
await linkRepo(repo);
|
|
44
|
-
} catch (error) {
|
|
45
|
-
const message = `Could not connect to ${repo.name}`;
|
|
46
|
-
console.error(message, error);
|
|
47
|
-
toast.error(message);
|
|
48
|
-
}
|
|
49
|
-
}}
|
|
50
|
-
>
|
|
51
|
-
{(formikProps) => (
|
|
52
|
-
<form onSubmit={formikProps.handleSubmit}>
|
|
53
|
-
<Box flexDirection="column" gap={4} padding={16}>
|
|
54
|
-
<FormInput
|
|
55
|
-
disabled={formikProps.isSubmitting}
|
|
56
|
-
error={typeof formikProps.errors.writeAPIToken === "string"}
|
|
57
|
-
label="Paste your write API token"
|
|
58
|
-
onValueChange={(value) => {
|
|
59
|
-
void formikProps.setFieldValue("writeAPIToken", value);
|
|
60
|
-
}}
|
|
61
|
-
placeholder="Write API token"
|
|
62
|
-
size="large"
|
|
63
|
-
value={formikProps.values.writeAPIToken}
|
|
64
|
-
/>
|
|
65
|
-
<Text color="grey11">
|
|
66
|
-
Required to update your Prismic repository with{" "}
|
|
67
|
-
{providerConfig.name}.
|
|
68
|
-
</Text>
|
|
69
|
-
</Box>
|
|
70
|
-
<DialogActions
|
|
71
|
-
cancel={{ text: "Cancel" }}
|
|
72
|
-
ok={{
|
|
73
|
-
disabled: !formikProps.isValid,
|
|
74
|
-
loading: formikProps.isSubmitting,
|
|
75
|
-
onClick: () => void formikProps.submitForm(),
|
|
76
|
-
text: "Save Token",
|
|
77
|
-
}}
|
|
78
|
-
size="medium"
|
|
79
|
-
/>
|
|
80
|
-
</form>
|
|
81
|
-
)}
|
|
82
|
-
</Formik>
|
|
83
|
-
</DialogContent>
|
|
84
|
-
</Dialog>
|
|
85
|
-
);
|
|
86
|
-
};
|