Skip to content

Commit db4cedc

Browse files
sserratasserrata
authored
[Experimental] Move server input to request card (#286)
1 parent 8543ad9 commit db4cedc

File tree

6 files changed

+44
-45
lines changed

6 files changed

+44
-45
lines changed

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/FloatingButton/styles.module.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@
44

55
.floatingButton button {
66
position: relative;
7-
background: rgba(25, 26, 27, 0.9);
7+
background: var(--ifm-color-emphasis-900);
88
border: none;
99
border-radius: var(--ifm-global-radius);
10-
color: var(--ifm-color-white);
10+
color: var(--ifm-color-emphasis-100);
1111
cursor: pointer;
1212
padding: 0.4rem 0.5rem;
1313
opacity: 0;
1414
visibility: hidden;
1515
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
1616
bottom 0.2s ease-in-out;
1717
position: absolute;
18-
top: calc(var(--ifm-pre-padding) / 2);
1918
right: calc(var(--ifm-pre-padding) / 2);
2019
}
2120

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Request/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import Body from "../Body";
1919
import Execute from "../Execute";
2020
import { useTypedSelector } from "../hooks";
2121
import ParamOptions from "../ParamOptions";
22+
import Server from "../Server";
2223
import styles from "./styles.module.css";
2324

2425
function Request({ item }: { item: NonNullable<ApiItem> }) {
@@ -55,6 +56,7 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
5556
</div>
5657
</summary>
5758
<div className={styles.optionsPanel}>
59+
<Server />
5860
<Authorization />
5961
<ParamOptions />
6062
<Body

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Request/styles.module.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
margin-bottom: var(--ifm-spacing-vertical);
1111
margin-top: 0;
1212
overflow: auto;
13+
padding-top: 0 !important;
1314
padding: var(--ifm-pre-padding);
1415

1516
/* hack for view calculation when monaco is hidden */

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Server/index.tsx

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -45,59 +45,59 @@ function Server() {
4545
}
4646
return (
4747
<FloatingButton onClick={() => setIsEditing(true)} label="Edit">
48-
<pre
49-
style={{
50-
background: "var(--openapi-card-background-color)",
51-
paddingRight: "60px",
52-
}}
53-
>
54-
<code>{url}</code>
55-
</pre>
48+
<FormItem label="Base URL">
49+
<pre
50+
style={{
51+
background: "var(--openapi-card-background-color)",
52+
paddingLeft: "0px",
53+
}}
54+
>
55+
<code title={url}>{url}</code>
56+
</pre>
57+
</FormItem>
5658
</FloatingButton>
5759
);
5860
}
5961

6062
return (
6163
<div className={styles.optionsPanel}>
62-
<button
63-
className={styles.showMoreButton}
64-
onClick={() => setIsEditing(false)}
65-
tabIndex={0}
66-
>
67-
Hide
68-
</button>
69-
<FormItem label="Base URL">
70-
<FormSelect
71-
options={options.map((s) => s.url)}
72-
onChange={(e) => dispatch(setServer(e.target.value))}
73-
/>
74-
<small>{value?.description}</small>
75-
</FormItem>
76-
{value?.variables &&
77-
Object.keys(value.variables).map((key) => {
78-
if (value.variables?.[key].enum !== undefined) {
64+
<FloatingButton onClick={() => setIsEditing(false)} label="Hide">
65+
<FormItem label="Base URL">
66+
<FormSelect
67+
options={options.map((s) => s.url)}
68+
onChange={(e) => dispatch(setServer(e.target.value))}
69+
value={value?.url}
70+
/>
71+
<small>{value?.description}</small>
72+
</FormItem>
73+
{value?.variables &&
74+
Object.keys(value.variables).map((key) => {
75+
if (value.variables?.[key].enum !== undefined) {
76+
return (
77+
<FormItem label={key}>
78+
<FormSelect
79+
options={value.variables[key].enum}
80+
onChange={(e) => {
81+
dispatch(
82+
setServerVariable({ key, value: e.target.value })
83+
);
84+
}}
85+
/>
86+
</FormItem>
87+
);
88+
}
7989
return (
8090
<FormItem label={key}>
81-
<FormSelect
82-
options={value.variables[key].enum}
91+
<FormTextInput
92+
placeholder={value.variables?.[key].default}
8393
onChange={(e) => {
8494
dispatch(setServerVariable({ key, value: e.target.value }));
8595
}}
8696
/>
8797
</FormItem>
8898
);
89-
}
90-
return (
91-
<FormItem label={key}>
92-
<FormTextInput
93-
placeholder={value.variables?.[key].default}
94-
onChange={(e) => {
95-
dispatch(setServerVariable({ key, value: e.target.value }));
96-
}}
97-
/>
98-
</FormItem>
99-
);
100-
})}
99+
})}
100+
</FloatingButton>
101101
</div>
102102
);
103103
}

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Server/styles.module.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@
5050
margin-bottom: var(--ifm-spacing-vertical);
5151
margin-top: 0;
5252
overflow: auto;
53-
padding: var(--ifm-pre-padding);
5453

5554
/* hack for view calculation when monaco is hidden */
5655
position: relative;

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/index.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import { createPersistanceMiddleware } from "./persistanceMiddleware";
2121
import Request from "./Request";
2222
import Response from "./Response";
2323
import SecuritySchemes from "./SecuritySchemes";
24-
import Server from "./Server";
2524
import { createStoreWithState } from "./store";
2625
import styles from "./styles.module.css";
2726

@@ -93,7 +92,6 @@ function ApiDemoPanel({
9392
<Provider store={store2}>
9493
<div className={styles.apiDemoPanelContainer}>
9594
<MethodEndpoint method={method} path={path} />
96-
<Server />
9795
<SecuritySchemes infoPath={infoPath} />
9896
<Request item={item} />
9997
<Response />

0 commit comments

Comments
 (0)