Skip to content

Commit 01e2743

Browse files
kshmidt-digmakshmidt-digma
authored
Merge pull request #1385 from digma-ai/fix/add-mcp-dialog
Change Add MCP server flow
2 parents 64d0bf6 + bf357aa commit 01e2743

File tree

10 files changed

+139
-127
lines changed

10 files changed

+139
-127
lines changed

‎src/components/Agentic/IncidentTemplate/AddMCPServerDialog/ServerStep/index.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { type ChangeEvent } from "react";
2+
import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
3+
import { NewButton } from "../../../../common/v3/NewButton";
4+
import { trackingEvents } from "../../../tracking";
5+
import * as s from "./styles";
6+
import type { ServerStepProps } from "./types";
7+
8+
export const ServerStep = ({
9+
onConnect,
10+
connectionSettings,
11+
onConnectionSettingsChange
12+
}: ServerStepProps) => {
13+
const handleTextAreaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
14+
onConnectionSettingsChange(e.target.value);
15+
};
16+
17+
const handleConnectButtonClick = () => {
18+
sendUserActionTrackingEvent(
19+
trackingEvents.INCIDENT_TEMPLATE_ADD_MCP_DIALOG_CONNECT_BUTTON_CLICKED
20+
);
21+
onConnect(connectionSettings);
22+
};
23+
24+
const isConnectButtonEnabled = connectionSettings.trim().length > 0;
25+
26+
return (
27+
<s.Container>
28+
<s.TextArea value={connectionSettings} onChange={handleTextAreaChange} />
29+
<s.Footer>
30+
<NewButton
31+
label={"Connect"}
32+
onClick={handleConnectButtonClick}
33+
isDisabled={!isConnectButtonEnabled}
34+
/>
35+
</s.Footer>
36+
</s.Container>
37+
);
38+
};

‎src/components/Agentic/IncidentTemplate/AddMCPServerDialog/ServerStep/styles.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import styled from "styled-components";
2+
import { getCodeFont } from "../../../../common/App/styles";
3+
4+
export const Container = styled.div`
5+
display: flex;
6+
flex-direction: column;
7+
gap: 16px;
8+
flex-grow: 1;
9+
`;
10+
11+
export const TextArea = styled.textarea`
12+
${({ theme }) => getCodeFont(theme.codeFont)}
13+
display: flex;
14+
flex-grow: 1;
15+
padding: 24px;
16+
flex-direction: column;
17+
gap: 10px;
18+
border-radius: 8px;
19+
${/* TODO: change to color from the theme */ ""}
20+
background: #000;
21+
overflow: auto;
22+
${/* TODO: change to color from the theme */ ""}
23+
color: #fff;
24+
${/* TODO: change to typography from the theme */ ""}
25+
font-size: 14px;
26+
font-weight: 500;
27+
resize: none;
28+
`;
29+
30+
export const Footer = styled.div`
31+
display: flex;
32+
align-items: center;
33+
gap: 8px;
34+
justify-content: flex-end;
35+
`;

‎src/components/Agentic/IncidentTemplate/AddMCPServerDialog/ServerStep/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface ServerStepProps {
2+
onConnect: (settings: string) => void;
3+
connectionSettings: string;
4+
onConnectionSettingsChange: (settings: string) => void;
5+
}

src/components/Agentic/IncidentTemplate/EditMCPServersDialog/index.tsx renamed to src/components/Agentic/IncidentTemplate/AddMCPServerDialog/ToolsStep/index.tsx

Lines changed: 16 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { useState, type ChangeEvent, type MouseEvent } from "react";
2-
import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
3-
import { CrossIcon } from "../../../common/icons/12px/CrossIcon";
4-
import { MagnifierIcon } from "../../../common/icons/MagnifierIcon";
5-
import { NewButton } from "../../../common/v3/NewButton";
6-
import { trackingEvents } from "../../tracking";
2+
import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
3+
import { CrossIcon } from "../../../../common/icons/12px/CrossIcon";
4+
import { MagnifierIcon } from "../../../../common/icons/MagnifierIcon";
5+
import { NewButton } from "../../../../common/v3/NewButton";
6+
import { trackingEvents } from "../../../tracking";
77
import * as s from "./styles";
8-
import type { EditMCPServersDialogProps } from "./types";
8+
import type { ToolsStepProps } from "./types";
99

1010
const initialTools = [
1111
"create_issue",
@@ -21,10 +21,7 @@ const initialTools = [
2121
"fork_repository"
2222
];
2323

24-
export const EditMCPServersDialog = ({
25-
onClose,
26-
onSave
27-
}: EditMCPServersDialogProps) => {
24+
export const ToolsStep = ({ onCancel, onSave }: ToolsStepProps) => {
2825
const [textAreaValue, setTextAreaValue] = useState("");
2926
const [tools, setTools] = useState(initialTools);
3027
const [selectedTools, setSelectedTools] = useState<string[]>([]);
@@ -38,22 +35,14 @@ export const EditMCPServersDialog = ({
3835
sendUserActionTrackingEvent(
3936
trackingEvents.INCIDENT_TEMPLATE_EDIT_MCP_DIALOG_SAVE_BUTTON_CLICKED
4037
);
41-
onSave(textAreaValue);
42-
onClose();
38+
onSave(selectedTools, textAreaValue);
4339
};
4440

4541
const handleCancelButtonClick = () => {
4642
sendUserActionTrackingEvent(
4743
trackingEvents.INCIDENT_TEMPLATE_EDIT_MCP_DIALOG_CANCEL_BUTTON_CLICKED
4844
);
49-
onClose();
50-
};
51-
52-
const handleCloseButtonClick = () => {
53-
sendUserActionTrackingEvent(
54-
trackingEvents.INCIDENT_TEMPLATE_EDIT_MCP_DIALOG_CLOSE_BUTTON_CLICKED
55-
);
56-
onClose();
45+
onCancel();
5746
};
5847

5948
const handleSearchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -93,16 +82,10 @@ export const EditMCPServersDialog = ({
9382
);
9483
const areAllSelected = tools.every((x) => selectedTools.includes(x));
9584

85+
const isSaveButtonEnabled = selectedTools.length > 0;
86+
9687
return (
9788
<s.Container>
98-
<s.Header>
99-
<s.Header>
100-
Wizard
101-
<s.CloseButton onClick={handleCloseButtonClick}>
102-
<CrossIcon color={"currentColor"} />
103-
</s.CloseButton>
104-
</s.Header>
105-
</s.Header>
10689
<s.ToolsEditor>
10790
<s.ToolsEditorToolbar>
10891
Tools
@@ -156,7 +139,11 @@ export const EditMCPServersDialog = ({
156139
label={"Cancel"}
157140
onClick={handleCancelButtonClick}
158141
/>
159-
<NewButton label={"Save"} onClick={handleSaveButtonClick} />
142+
<NewButton
143+
label={"Save"}
144+
onClick={handleSaveButtonClick}
145+
isDisabled={!isSaveButtonEnabled}
146+
/>
160147
</s.Footer>
161148
</s.Container>
162149
);

src/components/Agentic/IncidentTemplate/EditMCPServersDialog/styles.ts renamed to src/components/Agentic/IncidentTemplate/AddMCPServerDialog/ToolsStep/styles.ts

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,14 @@
11
import styled from "styled-components";
2-
import { getCodeFont } from "../../../common/App/styles";
3-
import { subscriptRegularTypography } from "../../../common/App/typographies";
4-
import { ToggleSwitch } from "../../../common/v3/ToggleSwitch";
2+
import { getCodeFont } from "../../../../common/App/styles";
3+
import { subscriptRegularTypography } from "../../../../common/App/typographies";
4+
import { ToggleSwitch } from "../../../../common/v3/ToggleSwitch";
55
import type { ToolTagDeleteButtonProps, ToolTagProps } from "./types";
66

77
export const Container = styled.div`
88
display: flex;
99
flex-direction: column;
10-
width: 635px;
11-
height: 615px;
12-
padding: 12px;
1310
gap: 16px;
14-
border-radius: 4px;
15-
background: ${({ theme }) => theme.colors.v3.surface.primary};
16-
`;
17-
18-
export const Header = styled.div`
19-
display: flex;
20-
align-items: center;
21-
justify-content: space-between;
22-
color: ${({ theme }) => theme.colors.v3.text.primary};
23-
${/* TODO: change to typography from the theme*/ ""}
24-
font-size: 14px;
25-
font-weight: 600;
26-
width: 100%;
11+
flex-grow: 1;
2712
`;
2813

2914
export const ToolsEditor = styled.div`
@@ -120,16 +105,6 @@ export const ToolTagDeleteButton = styled.button<ToolTagDeleteButtonProps>`
120105
: theme.colors.v3.stroke.primary};
121106
`;
122107

123-
export const CloseButton = styled.button`
124-
display: flex;
125-
align-items: center;
126-
justify-content: center;
127-
color: ${({ theme }) => theme.colors.v3.text.secondary};
128-
background: none;
129-
border: none;
130-
cursor: pointer;
131-
`;
132-
133108
export const TextArea = styled.textarea`
134109
${({ theme }) => getCodeFont(theme.codeFont)}
135110
display: flex;

src/components/Agentic/IncidentTemplate/EditMCPServersDialog/types.ts renamed to src/components/Agentic/IncidentTemplate/AddMCPServerDialog/ToolsStep/types.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
export interface EditMCPServersDialogProps {
2-
onClose: () => void;
3-
onSave: (text: string) => void;
1+
export interface ToolsStepProps {
2+
onCancel: () => void;
3+
onSave: (tools: string[], instructions: string) => void;
44
}
55

66
export interface ToolTagProps {

‎src/components/Agentic/IncidentTemplate/AddMCPServerDialog/index.tsx‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,50 @@
1-
import { useState, type ChangeEvent } from "react";
1+
import { useState } from "react";
22
import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
33
import { CrossIcon } from "../../../common/icons/12px/CrossIcon";
4-
import { NewButton } from "../../../common/v3/NewButton";
54
import { trackingEvents } from "../../tracking";
5+
import { ServerStep } from "./ServerStep";
66
import * as s from "./styles";
7+
import { ToolsStep } from "./ToolsStep";
78
import type { AddMCPServerDialogProps } from "./types";
89

910
export const AddMCPServerDialog = ({
1011
onClose,
11-
onConnect
12+
onComplete
1213
}: AddMCPServerDialogProps) => {
13-
const [textAreaValue, setTextAreaValue] = useState("");
14+
const [currentStep, setCurrentStep] = useState(0);
15+
const [connectionSettings, setConnectionSettings] = useState("");
1416

15-
const handleTextAreaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
16-
setTextAreaValue(e.target.value);
17+
const handleServerStepConnectionSettingsChange = (settings: string) => {
18+
setConnectionSettings(settings);
1719
};
1820

19-
const handleConnectButtonClick = () => {
20-
sendUserActionTrackingEvent(
21-
trackingEvents.INCIDENT_TEMPLATE_ADD_MCP_DIALOG_CONNECT_BUTTON_CLICKED
22-
);
23-
onConnect(textAreaValue);
24-
onClose();
21+
const handleServerStepConnect = (settings: string) => {
22+
setConnectionSettings(settings);
23+
setCurrentStep((prev) => prev + 1);
24+
};
25+
26+
const handleToolsStepSave = (tools: string[], instructions: string) => {
27+
onComplete(connectionSettings, tools, instructions);
28+
};
29+
30+
const handleToolsStepCancel = () => {
31+
setCurrentStep((prev) => prev - 1);
2532
};
2633

34+
const steps = [
35+
<ServerStep
36+
key={"server"}
37+
onConnect={handleServerStepConnect}
38+
connectionSettings={connectionSettings}
39+
onConnectionSettingsChange={handleServerStepConnectionSettingsChange}
40+
/>,
41+
<ToolsStep
42+
key={"tools"}
43+
onCancel={handleToolsStepCancel}
44+
onSave={handleToolsStepSave}
45+
/>
46+
];
47+
2748
const handleCloseButtonClick = () => {
2849
sendUserActionTrackingEvent(
2950
trackingEvents.INCIDENT_TEMPLATE_ADD_MCP_DIALOG_CLOSE_BUTTON_CLICKED
@@ -41,10 +62,7 @@ export const AddMCPServerDialog = ({
4162
</s.CloseButton>
4263
</s.Header>
4364
</s.Header>
44-
<s.TextArea value={textAreaValue} onChange={handleTextAreaChange} />
45-
<s.Footer>
46-
<NewButton label={"Connect"} onClick={handleConnectButtonClick} />
47-
</s.Footer>
65+
{steps[currentStep]}
4866
</s.Container>
4967
);
5068
};

‎src/components/Agentic/IncidentTemplate/AddMCPServerDialog/styles.ts‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import styled from "styled-components";
2-
import { getCodeFont } from "../../../common/App/styles";
32

43
export const Container = styled.div`
54
display: flex;
@@ -32,29 +31,3 @@ export const CloseButton = styled.button`
3231
border: none;
3332
cursor: pointer;
3433
`;
35-
36-
export const TextArea = styled.textarea`
37-
${({ theme }) => getCodeFont(theme.codeFont)}
38-
display: flex;
39-
flex-grow: 1;
40-
padding: 24px;
41-
flex-direction: column;
42-
gap: 10px;
43-
border-radius: 8px;
44-
${/* TODO: change to color from the theme */ ""}
45-
background: #000;
46-
overflow: auto;
47-
${/* TODO: change to color from the theme */ ""}
48-
color: #fff;
49-
${/* TODO: change to typography from the theme */ ""}
50-
font-size: 14px;
51-
font-weight: 500;
52-
resize: none;
53-
`;
54-
55-
export const Footer = styled.div`
56-
display: flex;
57-
align-items: center;
58-
gap: 8px;
59-
justify-content: flex-end;
60-
`;

‎src/components/Agentic/IncidentTemplate/AddMCPServerDialog/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export interface AddMCPServerDialogProps {
22
onClose: () => void;
3-
onConnect: (text: string) => void;
3+
onComplete: (text: string, tools: string[], instructions: string) => void;
44
}

0 commit comments

Comments
 (0)