Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0efc40d

Browse files
committed
Add nav tabs
1 parenta020619 commit0efc40d

File tree

2 files changed

+101
-81
lines changed

2 files changed

+101
-81
lines changed

‎site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.tsx

Lines changed: 100 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
importtype{Interpolation,Theme}from"@emotion/react";
2-
importAlertTitlefrom"@mui/material/AlertTitle";
3-
importButtonfrom"@mui/material/Button";
42
importCardfrom"@mui/material/Card";
53
importDividerfrom"@mui/material/Divider";
64
importListfrom"@mui/material/List";
@@ -11,25 +9,29 @@ import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
119
importTooltipfrom"@mui/material/Tooltip";
1210
import{Fragment,typeFC}from"react";
1311
import{useMutation,useQueries,useQueryClient}from"react-query";
12+
import{useSearchParams}from"react-router-dom";
1413
import{
1514
notificationDispatchMethods,
1615
selectTemplatesByGroup,
1716
systemNotificationTemplates,
1817
updateNotificationTemplateMethod,
1918
}from"api/queries/notifications";
20-
import{Alert,AlertDetail}from"components/Alert/Alert";
19+
importtype{NotificationsConfig}from"api/typesGenerated";
20+
import{Alert}from"components/Alert/Alert";
2121
import{displaySuccess}from"components/GlobalSnackbar/utils";
2222
import{Loader}from"components/Loader/Loader";
2323
import{Stack}from"components/Stack/Stack";
24-
import{useClipboard}from"hooks";
24+
import{TabLink,Tabs,TabsList}from"components/Tabs/Tabs";
2525
import{
2626
castNotificationMethod,
2727
methodIcons,
2828
methodLabels,
2929
typeNotificationMethod,
3030
}from"modules/notifications/utils";
3131
import{Section}from"pages/UserSettingsPage/Section";
32+
import{deploymentGroupHasParent}from"utils/deployOptions";
3233
import{useDeploySettings}from"../DeploySettingsLayout";
34+
importOptionsTablefrom"../OptionsTable";
3335

3436
typeMethodToggleGroupProps={
3537
templateId:string;
@@ -89,6 +91,7 @@ const MethodToggleGroup: FC<MethodToggleGroupProps> = ({
8991
};
9092

9193
exportconstNotificationsPage:FC=()=>{
94+
const[searchParams]=useSearchParams();
9295
const{ deploymentValues}=useDeploySettings();
9396
const[templatesByGroup,dispatchMethods]=useQueries({
9497
queries:[
@@ -99,104 +102,120 @@ export const NotificationsPage: FC = () => {
99102
notificationDispatchMethods(),
100103
],
101104
});
102-
constready=templatesByGroup.data&&dispatchMethods.data;
103-
104-
constisUsingWebhook=dispatchMethods.data?.available.includes("webhook");
105-
constwebhookEndpoint=
106-
deploymentValues?.config.notifications?.webhook.endpoint;
105+
constready=
106+
templatesByGroup.data&&dispatchMethods.data&&deploymentValues;
107+
consttab=searchParams.get("tab")||"events";
107108

108109
return(
109110
<Section
110111
title="Notifications"
111112
description="Control delivery methods for notifications. Settings applied to this deployment."
112113
layout="fluid"
113114
>
114-
{ready ?(
115-
<Stackspacing={3}>
116-
{isUsingWebhook&&
117-
(webhookEndpoint ?(
118-
<WebhookInfoendpoint={webhookEndpoint}/>
119-
) :(
120-
<Alertseverity="warning">
121-
Webhook method is enabled, but the endpoint is not configured.
122-
</Alert>
123-
))}
124-
{Object.entries(templatesByGroup.data).map(([group,templates])=>(
125-
<Card
126-
key={group}
127-
variant="outlined"
128-
css={{background:"transparent",width:"100%"}}
129-
>
130-
<List>
131-
<ListItemcss={styles.listHeader}>
132-
<ListItemTextcss={styles.listItemText}primary={group}/>
133-
</ListItem>
115+
<Tabsactive={tab}>
116+
<TabsList>
117+
<TabLinkto="?tab=events"value="events">
118+
Events
119+
</TabLink>
120+
<TabLinkto="?tab=settings"value="settings">
121+
Settings
122+
</TabLink>
123+
</TabsList>
124+
</Tabs>
134125

135-
{templates.map((tpl)=>{
136-
constvalue=castNotificationMethod(
137-
tpl.method||dispatchMethods.data.default,
138-
);
139-
constoptions=dispatchMethods.data.available.map(
140-
castNotificationMethod,
141-
);
142-
143-
return(
144-
<Fragmentkey={tpl.id}>
145-
<ListItem>
146-
<ListItemText
147-
css={styles.listItemText}
148-
primary={tpl.name}
149-
/>
150-
<MethodToggleGroup
151-
templateId={tpl.id}
152-
options={options}
153-
value={value}
154-
/>
155-
</ListItem>
156-
<Dividercss={styles.divider}/>
157-
</Fragment>
158-
);
159-
})}
160-
</List>
161-
</Card>
162-
))}
163-
</Stack>
164-
) :(
165-
<Loader/>
166-
)}
126+
<divcss={styles.content}>
127+
{ready ?(
128+
tab==="events" ?(
129+
<EventsView
130+
defaultMethod={castNotificationMethod(
131+
dispatchMethods.data.default,
132+
)}
133+
availableMethods={dispatchMethods.data.available.map(
134+
castNotificationMethod,
135+
)}
136+
notificationsConfig={deploymentValues.config.notifications}
137+
templatesByGroup={templatesByGroup.data}
138+
/>
139+
) :(
140+
<OptionsTable
141+
options={deploymentValues?.options.filter((o)=>
142+
deploymentGroupHasParent(o.group,"Notifications"),
143+
)}
144+
/>
145+
)
146+
) :(
147+
<Loader/>
148+
)}
149+
</div>
167150
</Section>
168151
);
169152
};
170153

171-
exportdefaultNotificationsPage;
172-
173-
typeWebhookInfoProps={
174-
endpoint:string;
154+
typeEventsViewProps={
155+
defaultMethod:NotificationMethod;
156+
availableMethods:NotificationMethod[];
157+
notificationsConfig?:NotificationsConfig;
158+
templatesByGroup:ReturnType<typeofselectTemplatesByGroup>;
175159
};
176160

177-
constWebhookInfo=({ endpoint}:WebhookInfoProps)=>{
178-
constclipboard=useClipboard({textToCopy:endpoint});
161+
constEventsView:FC<EventsViewProps>=({
162+
defaultMethod,
163+
availableMethods,
164+
notificationsConfig,
165+
templatesByGroup,
166+
})=>{
167+
constisUsingWebhook=availableMethods.includes("webhook");
168+
constwebhookEndpoint=notificationsConfig?.webhook.endpoint;
179169

180170
return(
181-
<Alert
182-
severity="info"
183-
actions={
184-
<Button
185-
variant="text"
186-
onClick={clipboard.copyToClipboard}
187-
disabled={clipboard.showCopiedSuccess}
171+
<Stackspacing={3}>
172+
{isUsingWebhook&&!webhookEndpoint&&(
173+
<Alertseverity="warning">
174+
Webhook method is enabled, but the endpoint is not configured.
175+
</Alert>
176+
)}
177+
{Object.entries(templatesByGroup).map(([group,templates])=>(
178+
<Card
179+
key={group}
180+
variant="outlined"
181+
css={{background:"transparent",width:"100%"}}
188182
>
189-
{clipboard.showCopiedSuccess ?"Copied!" :"Copy"}
190-
</Button>
191-
}
192-
>
193-
<AlertTitle>Webhook Endpoint</AlertTitle>
194-
<AlertDetail>{endpoint}</AlertDetail>
195-
</Alert>
183+
<List>
184+
<ListItemcss={styles.listHeader}>
185+
<ListItemTextcss={styles.listItemText}primary={group}/>
186+
</ListItem>
187+
188+
{templates.map((tpl)=>{
189+
constvalue=castNotificationMethod(tpl.method||defaultMethod);
190+
191+
return(
192+
<Fragmentkey={tpl.id}>
193+
<ListItem>
194+
<ListItemText
195+
css={styles.listItemText}
196+
primary={tpl.name}
197+
/>
198+
<MethodToggleGroup
199+
templateId={tpl.id}
200+
options={availableMethods}
201+
value={value}
202+
/>
203+
</ListItem>
204+
<Dividercss={styles.divider}/>
205+
</Fragment>
206+
);
207+
})}
208+
</List>
209+
</Card>
210+
))}
211+
</Stack>
196212
);
197213
};
198214

215+
exportdefaultNotificationsPage;
216+
199217
conststyles={
218+
content:{paddingTop:24},
200219
listHeader:(theme)=>({
201220
background:theme.palette.background.paper,
202221
borderBottom:`1px solid${theme.palette.divider}`,

‎site/src/pages/UserSettingsPage/Section.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const styles = {
7070
description:(theme)=>({
7171
color:theme.palette.text.secondary,
7272
fontSize:16,
73+
margin:0,
7374
marginTop:4,
7475
lineHeight:"140%",
7576
}),

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp