Skip to content

Commit 709610a

Browse files
drewrasmdrewrasm
authored
Merge branch 'master' into ar/feat_pinterest_filters
2 parents 77c1815 + e7ae961 commit 709610a

File tree

10 files changed

+441
-199
lines changed

10 files changed

+441
-199
lines changed

‎airbyte-webapp/src/views/layout/SideBar/components/DocsIcon.tsx renamed to ‎airbyte-webapp/src/components/icons/DocsIcon.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
const DocsIcon = ({ color = "currentColor" }: { color?: string }): JSX.Element => (
1+
export const DocsIcon = ({ color = "currentColor" }: { color?: string }): JSX.Element => (
22
<svg width="18" height="20" viewBox="0 0 18 20" fill="none">
33
<path
44
d="M18 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H18V20H3C2.20435 20 1.44129 19.6839 0.87868 19.1213C0.316071 18.5587 0 17.7956 0 17V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0H18V16ZM2 14.05C2.162 14.017 2.329 14 2.5 14H16V2H2V14.05ZM13 7H5V5H13V7Z"
55
fill={color}
66
/>
77
</svg>
88
);
9-
10-
export default DocsIcon;

‎airbyte-webapp/src/components/icons/PlayIcon.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
interface Props {
2+
color?: string;
3+
}
4+
5+
export const PlayIcon = ({ color = "currentColor" }: Props): JSX.Element => (
6+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" role="img" data-icon="play">
7+
<path
8+
d="M0 0.993C0 0.445 0.445 0 0.993 0H17.007C17.555 0 18 0.445 18 0.993V17.007C17.9997 17.2703 17.895 17.5227 17.7089 17.7089C17.5227 17.895 17.2703 17.9997 17.007 18H0.993C0.729721 17.9997 0.477302 17.895 0.291135 17.7089C0.104969 17.5227 0.000264735 17.2703 0 17.007V0.993ZM2 2V16H16V2H2ZM7.622 5.415L12.501 8.667C12.5559 8.70351 12.6009 8.75302 12.632 8.81111C12.6631 8.86921 12.6794 8.93409 12.6794 9C12.6794 9.06591 12.6631 9.13079 12.632 9.18889C12.6009 9.24698 12.5559 9.29649 12.501 9.333L7.621 12.585C7.56083 12.6249 7.49098 12.6477 7.41887 12.6512C7.34676 12.6546 7.27507 12.6384 7.21141 12.6043C7.14774 12.5703 7.09448 12.5197 7.05726 12.4578C7.02004 12.396 7.00025 12.3252 7 12.253V5.747C7.00013 5.67465 7.01989 5.60369 7.05716 5.54168C7.09443 5.47967 7.14782 5.42893 7.21165 5.39486C7.27547 5.36079 7.34734 5.34467 7.41961 5.34822C7.49187 5.35177 7.56182 5.37485 7.622 5.415V5.415Z"
9+
fill={color}
10+
/>
11+
</svg>
12+
);

‎airbyte-webapp/src/locales/en.json

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -483,16 +483,22 @@
483483
"admin.customImage": "custom",
484484

485485
"settings.accountSettings": "Account Settings",
486-
"settings.changeSaved": "change saved!",
487486
"settings.webhook": "Connection status Webhook",
487+
"settings.webhook.test.passed": "Webhook test passed!",
488+
"settings.webhook.test.failed": "Webhook test failed. Please verify that the webhook URL is valid.",
489+
"settings.webhook.save.failed": "Cannot save changes because the webhook test failed. Please verify that the webhook URL is valid.",
488490
"settings.webhookTitle": "Connection status Webhook URL",
489-
"settings.webhookDescriprion": "Get notifications the way you want (for instance, on Slack, or other).",
490-
"settings.webhookTestText": "Testing the Webhook will send a “Hello World”. ",
491-
"settings.sendOnSuccess": "Send notifications when sync succeeds.",
492-
"settings.sendOnFailure": "Send notifications when sync fails.",
491+
"settings.webhookTestText": "Testing the Webhook will send a “Hello World”.",
492+
"settings.syncNotifications.label": "Notify me:",
493+
"settings.sendOnSuccess": "When Sync succeeds",
494+
"settings.sendOnFailure": "When Sync fails",
493495
"settings.yourWebhook": "Your Webhook URL",
494496
"settings.test": "Test",
495497
"settings.notifications": "Notifications",
498+
"settings.notificationGuide.button": "Need help with Webhook URL?",
499+
"settings.notificationGuide.title": "How to get notification the way you want with your webhook URL?",
500+
"settings.notificationGuide.link.configuration": "Configure Sync notifications",
501+
"settings.notificationGuide.link.slackConfiguration": "Configure a Slack Notifications Webhook",
496502
"settings.metrics": "Metrics",
497503
"settings.notificationSettings": "Notification Settings",
498504
"settings.metricsSettings": "Metrics Settings",

‎airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { NavLink } from "react-router-dom";
88

99
import { Link } from "components";
1010
import { CreditsIcon } from "components/icons/CreditsIcon";
11+
import { DocsIcon } from "components/icons/DocsIcon";
1112
import { Text } from "components/ui/Text";
1213

1314
import { useExperiment } from "hooks/services/Experiment";
@@ -21,7 +22,6 @@ import { links } from "utils/links";
2122
import ChatIcon from "views/layout/SideBar/components/ChatIcon";
2223
import ConnectionsIcon from "views/layout/SideBar/components/ConnectionsIcon";
2324
import DestinationIcon from "views/layout/SideBar/components/DestinationIcon";
24-
import DocsIcon from "views/layout/SideBar/components/DocsIcon";
2525
import OnboardingIcon from "views/layout/SideBar/components/OnboardingIcon";
2626
import RecipesIcon from "views/layout/SideBar/components/RecipesIcon";
2727
import SettingsIcon from "views/layout/SideBar/components/SettingsIcon";

‎airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/NotificationPage.tsx

Lines changed: 4 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,17 @@
1-
import React, { useMemo, useState, useCallback } from "react";
2-
import { FormattedMessage } from "react-intl";
1+
import React, { useMemo } from "react";
32

43
import { HeadTitle } from "components/common/HeadTitle";
54

65
import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
7-
import useWorkspace, { useCurrentWorkspace, WebhookPayload } from "hooks/services/useWorkspace";
6+
import { useCurrentWorkspace } from "hooks/services/useWorkspace";
87

9-
import { Content, SettingsCard } from "../SettingsComponents";
10-
import WebHookForm from "./components/WebHookForm";
11-
12-
function useAsyncWithTimeout<K, T>(f: (data: K) => Promise<T>) {
13-
const [errorMessage, setErrorMessage] = useState<React.ReactNode>(null);
14-
const [successMessage, setSuccessMessage] = useState<React.ReactNode>(null);
15-
const call = useCallback(
16-
async (data: K) => {
17-
setSuccessMessage(null);
18-
setErrorMessage(null);
19-
try {
20-
await f(data);
21-
setSuccessMessage(<FormattedMessage id="settings.changeSaved" />);
22-
23-
setTimeout(() => {
24-
setSuccessMessage(null);
25-
}, 2000);
26-
} catch (e) {
27-
setErrorMessage(<FormattedMessage id="form.someError" />);
28-
29-
setTimeout(() => {
30-
setErrorMessage(null);
31-
}, 2000);
32-
}
33-
},
34-
[f]
35-
);
36-
37-
return {
38-
call,
39-
successMessage,
40-
errorMessage,
41-
};
42-
}
8+
import { WebHookForm } from "./components/WebHookForm";
439

4410
const NotificationPage: React.FC = () => {
4511
useTrackPage(PageTrackingCodes.SETTINGS_NOTIFICATION);
4612

47-
const { updateWebhook, testWebhook } = useWorkspace();
4813
const workspace = useCurrentWorkspace();
49-
50-
const {
51-
call: onSubmitWebhook,
52-
errorMessage,
53-
successMessage,
54-
} = useAsyncWithTimeout(async (data: WebhookPayload) => updateWebhook(data));
55-
5614
const firstNotification = workspace.notifications?.[0];
57-
5815
const initialValues = useMemo(
5916
() => ({
6017
webhook: firstNotification?.slackConfiguration?.webhook,
@@ -67,17 +24,7 @@ const NotificationPage: React.FC = () => {
6724
return (
6825
<>
6926
<HeadTitle titles={[{ id: "sidebar.settings" }, { id: "settings.notifications" }]} />
70-
<SettingsCard title={<FormattedMessage id="settings.notificationSettings" />}>
71-
<Content>
72-
<WebHookForm
73-
webhook={initialValues}
74-
onSubmit={onSubmitWebhook}
75-
onTest={testWebhook}
76-
errorMessage={errorMessage}
77-
successMessage={successMessage}
78-
/>
79-
</Content>
80-
</SettingsCard>
27+
<WebHookForm webhook={initialValues} />
8128
</>
8229
);
8330
};

‎airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/WebHookForm.module.scss

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
@use "scss/colors";
2+
@use "scss/variables";
3+
4+
.webhookGuide {
5+
opacity: 0;
6+
visibility: hidden;
7+
position: relative;
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: center;
11+
height: 0;
12+
max-height: 0;
13+
padding: 0 variables.$spacing-xl;
14+
margin-bottom: 0;
15+
background-color: colors.$grey-50;
16+
border-radius: variables.$border-radius-xs;
17+
transition: variables.$transition-out;
18+
19+
&.active {
20+
opacity: 1;
21+
visibility: visible;
22+
height: 150px;
23+
max-height: 100%;
24+
margin-bottom: variables.$spacing-xl;
25+
}
26+
27+
.webhookGuideTitle {
28+
display: flex;
29+
justify-content: space-between;
30+
padding-bottom: variables.$spacing-lg;
31+
32+
.crossIcon {
33+
font-size: 22px;
34+
}
35+
}
36+
37+
ul {
38+
list-style-type: none;
39+
list-style-position: inside;
40+
margin: 0;
41+
padding: 0;
42+
43+
li + li {
44+
padding-top: variables.$spacing-md;
45+
}
46+
}
47+
48+
.webhookGuideLink {
49+
display: inline-flex;
50+
align-items: center;
51+
padding: variables.$spacing-sm 0;
52+
color: colors.$blue;
53+
54+
.text {
55+
color: colors.$blue;
56+
padding-left: variables.$spacing-md;
57+
}
58+
}
59+
60+
.webhookGuideImg {
61+
position: absolute;
62+
right: 60px;
63+
bottom: -20px;
64+
width: 106px;
65+
height: 125px;
66+
}
67+
}
68+
69+
.webhookUrlLabelRow {
70+
position: relative;
71+
margin-bottom: variables.$spacing-md;
72+
73+
.webhookUrlLabelCell {
74+
flex: auto;
75+
width: 100%;
76+
77+
label {
78+
padding-bottom: 0;
79+
}
80+
}
81+
82+
.webhookGuideButtonCell {
83+
position: relative;
84+
flex: auto;
85+
padding: 0;
86+
87+
.webhookGuideButton {
88+
color: colors.$blue;
89+
text-decoration: underline;
90+
padding-left: 0;
91+
padding-right: 0;
92+
white-space: nowrap;
93+
margin-right: 45px;
94+
95+
&:hover {
96+
color: colors.$blue;
97+
}
98+
}
99+
100+
.webhookGuideButtonImg {
101+
position: absolute;
102+
bottom: 6px;
103+
right: 0;
104+
width: 34px;
105+
height: 40px;
106+
}
107+
}
108+
}
109+
110+
.webhookUrlRow {
111+
margin-bottom: variables.$spacing-xl;
112+
113+
.webhookUrlInputCell {
114+
position: relative;
115+
flex: auto;
116+
width: 100%;
117+
118+
.webhookErrorMessage {
119+
position: absolute;
120+
bottom: -16px;
121+
left: 0;
122+
color: colors.$red-600;
123+
}
124+
}
125+
126+
.testButtonCell {
127+
flex: auto;
128+
padding: 0;
129+
130+
.testButton {
131+
white-space: nowrap;
132+
}
133+
}
134+
}
135+
136+
.notificationSettingsLabelRow {
137+
margin-bottom: variables.$spacing-md;
138+
139+
.notificationSettingsLabelCell {
140+
label {
141+
padding-bottom: 0;
142+
}
143+
}
144+
}
145+
146+
.notificationSettingsRow {
147+
margin-bottom: variables.$spacing-md;
148+
149+
.notificationSettingsCell {
150+
position: relative;
151+
display: flex;
152+
153+
.sendOnFailure {
154+
margin-right: variables.$spacing-xl;
155+
}
156+
}
157+
}
158+
159+
.tooltip {
160+
transform: translate(0, -#{variables.$spacing-md});
161+
white-space: nowrap;
162+
}
163+
164+
.action {
165+
display: flex;
166+
justify-content: flex-end;
167+
margin-top: variables.$spacing-xl;
168+
}

0 commit comments

Comments
 (0)