Skip to content

Commit dc1449a

Browse files
jsorohovajsorohova
authored
FUI - Fixed font not being customizable (#2758)
1 parent e27a118 commit dc1449a

File tree

12 files changed

+168
-195
lines changed

12 files changed

+168
-195
lines changed

‎src/components/apis/api-products/react/runtime/ApiProductsRuntime.tsx‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -78,35 +78,31 @@ const ApiProductsRuntimeFC = ({ apiService, apiName, getReferenceUrl, layoutDefa
7878
/>
7979
) : (
8080
<Stack tokens={{ childrenGap: "1rem" }}>
81-
<Stack.Item>
82-
<TableListInfo
83-
layout={layout}
84-
setLayout={setLayout}
85-
pattern={pattern}
86-
setPattern={setPattern}
87-
allowViewSwitching={allowViewSwitching}
88-
/>
89-
</Stack.Item>
81+
<TableListInfo
82+
layout={layout}
83+
setLayout={setLayout}
84+
pattern={pattern}
85+
setPattern={setPattern}
86+
allowViewSwitching={allowViewSwitching}
87+
/>
9088

9189
{working || !products ? (
92-
<Stack.Item>
93-
<div className="table-body">
94-
<Spinner label="Loading products..." labelPosition="below" size="small" />
95-
</div>
96-
</Stack.Item>
90+
<div className="table-body">
91+
<Spinner label="Loading products..." labelPosition="below" size="small" />
92+
</div>
9793
) : (
9894
<>
99-
<Stack.Item style={{ marginTop: "2rem" }}>
95+
<div style={{ marginTop: "2rem" }}>
10096
{layout === TLayout.table ? (
10197
<ProductsTable products={products} getReferenceUrl={getReferenceUrl} />
10298
) : (
10399
<ProductsCards products={products} getReferenceUrl={getReferenceUrl} />
104100
)}
105-
</Stack.Item>
101+
</div>
106102

107-
<Stack.Item align={"center"}>
103+
<div style={{ margin: "1rem auto" }}>
108104
<Pagination pageNumber={pageNumber} setPageNumber={setPageNumber} pageMax={Math.ceil(products?.count / defaultPageSize)} />
109-
</Stack.Item>
105+
</div>
110106
</>
111107
)}
112108
</Stack>

‎src/components/apis/list-of-apis/react/runtime/ApiListTableCards.tsx‎

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import { TableListInfo, TLayout } from "../../../../utils/react/TableListInfo";
1111
import { useTableFiltersTags } from "../../../../utils/react/useTableFiltersTags";
1212
import { Pagination } from "../../../../utils/react/Pagination";
13-
import * as Constants from "../../../../../constants";
13+
import { defaultPageSize } from "../../../../../constants";
1414
import { FiltersPosition } from "../../listOfApisContract";
1515
import { ApisTable } from "./ApisTable";
1616
import { ApisCards } from "./ApisCards";
@@ -47,31 +47,27 @@ export const ApiListTableCards = ({
4747

4848
const content = (
4949
<Stack tokens={{ childrenGap: "1rem" }}>
50-
<Stack.Item>
51-
<TableListInfo
52-
layout={layout}
53-
setLayout={setLayout}
54-
pattern={pattern}
55-
setPattern={setPattern}
56-
filters={filters}
57-
setFilters={setFilters}
58-
filtersOptions={filtersPosition === FiltersPosition.popup ? [filterOptionTags] : undefined}
59-
setGroupByTag={productName ? undefined : setGroupByTag} // don't allow grouping by tags when filtering for product APIs due to missing BE support
60-
allowViewSwitching={allowViewSwitching}
61-
/>
62-
</Stack.Item>
50+
<TableListInfo
51+
layout={layout}
52+
setLayout={setLayout}
53+
pattern={pattern}
54+
setPattern={setPattern}
55+
filters={filters}
56+
setFilters={setFilters}
57+
filtersOptions={filtersPosition === FiltersPosition.popup ? [filterOptionTags] : undefined}
58+
setGroupByTag={productName ? undefined : setGroupByTag} // don't allow grouping by tags when filtering for product APIs due to missing BE support
59+
allowViewSwitching={allowViewSwitching}
60+
/>
6361

6462
{working || !apis ? (
65-
<Stack.Item>
66-
<Spinner
67-
label="Loading APIs"
68-
labelPosition="below"
69-
size="small"
70-
/>
71-
</Stack.Item>
63+
<Spinner
64+
label="Loading APIs"
65+
labelPosition="below"
66+
size="small"
67+
/>
7268
) : (
7369
<>
74-
<Stack.Item style={{ marginTop: "2rem" }}>
70+
<div style={{ marginTop: "2rem" }}>
7571
{layout === TLayout.table ? (
7672
<ApisTable
7773
apis={apis}
@@ -87,15 +83,15 @@ export const ApiListTableCards = ({
8783
detailsPageTarget={detailsPageTarget}
8884
/>
8985
)}
90-
</Stack.Item>
86+
</div>
9187

92-
<Stack.Item align={"center"}>
88+
<div style={{ margin: "1rem auto" }}>
9389
<Pagination
9490
pageNumber={pageNumber}
9591
setPageNumber={setPageNumber}
96-
pageMax={Math.ceil(apis?.count / Constants.defaultPageSize)}
92+
pageMax={Math.ceil(apis?.count / defaultPageSize)}
9793
/>
98-
</Stack.Item>
94+
</div>
9995
</>
10096
)}
10197
</Stack>
@@ -105,17 +101,16 @@ export const ApiListTableCards = ({
105101
content
106102
) : (
107103
<Stack horizontal tokens={{ childrenGap: "2rem" }}>
108-
<Stack.Item
109-
shrink={0}
104+
<div
110105
style={{ minWidth: "12rem", width: "15%", maxWidth: "20rem" }}
111106
>
112107
<TableFiltersSidebar
113108
filtersActive={filters}
114109
setFiltersActive={setFilters}
115110
filtersOptions={groupByTag ? [] : [filterOptionTags]}
116111
/>
117-
</Stack.Item>
118-
<Stack.Item style={{ width: "100%" }}>{content}</Stack.Item>
112+
</div>
113+
<div style={{ width: "100%" }}>{content}</div>
119114
</Stack>
120115
);
121116
};

‎src/components/operations/operation-details/react/runtime/OperationConsoleGql.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ export const OperationConsoleGql = ({
119119
const [pattern, setPattern] = useState<string>("");
120120
const [queryVariables, setQueryVariables] = useState<string>("");
121121
const [response, setResponse] = useState<string>("");
122+
const [responseLanguage, setResponseLanguage] = useState<string>("html");
122123
const [requestError, setRequestError] = useState<string>(null);
123124

124125
const generateDocument = useCallback((globalNodes) => {
@@ -312,9 +313,12 @@ export const OperationConsoleGql = ({
312313
else {
313314
response = await sendFromBrowser(request);
314315
}
316+
317+
const responseLanguageValue = response.headers?.find(x => x.name === KnownHttpHeaders.ContentType)?.value;
315318
const responseStr = Buffer.from(response.body.buffer).toString();
316319
setSelectedTab(ConsoleTab.response);
317320
setResponse(responseStr);
321+
responseLanguageValue && setResponseLanguage(responseLanguageValue);
318322
}
319323
catch (error) {
320324
setSelectedTab(ConsoleTab.response);
@@ -466,7 +470,7 @@ export const OperationConsoleGql = ({
466470
</Button>
467471
</Stack>
468472
<Stack horizontal className={"console-gql-body"}>
469-
<Stack.Item className={"gql-explorer"}>
473+
<div className={"gql-explorer"}>
470474
<SearchBox
471475
onChange={(_, { value }) => setPattern(value)}
472476
contentBefore={<SearchRegular className={"fui-search-icon"} />}
@@ -484,19 +488,19 @@ export const OperationConsoleGql = ({
484488
))
485489
}
486490
</Accordion>
487-
</Stack.Item>
488-
<Stack.Item grow className={"gql-query"}>
491+
</div>
492+
<div className={"gql-query"}>
489493
<Stack>
490-
<Stack.Item className={"gql-query-editor"}>
494+
<div className={"gql-query-editor"}>
491495
<Editor
492496
height="500px"
493497
value={document}
494498
language="graphql"
495499
onMount={handleEditorWillMount}
496500
onChange={handleQueryEditorChange}
497501
/>
498-
</Stack.Item>
499-
<Stack.Item>
502+
</div>
503+
<div>
500504
<TabList
501505
selectedValue={selectedTab}
502506
onTabSelect={(_, data) => setSelectedTab(data.value as string)}
@@ -546,14 +550,15 @@ export const OperationConsoleGql = ({
546550
/>
547551
}
548552
{selectedTab === ConsoleTab.response &&
549-
requestError
553+
(requestError
550554
? <MarkdownProcessor markdownToDisplay={requestError} />
551-
: response && <SyntaxHighlighter children={response} language={"html"} style={a11yLight} />
555+
: response && <SyntaxHighlighter children={response} language={responseLanguage} style={a11yLight} />
556+
)
552557
}
553558
</div>
554-
</Stack.Item>
559+
</div>
555560
</Stack>
556-
</Stack.Item>
561+
</div>
557562
</Stack>
558563
</>
559564
}

‎src/components/operations/operation-details/react/runtime/operation-console/ConsoleBody.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export const ConsoleBody = ({
107107
{(!isBodyCollapsed && hasBody) &&
108108
<div className={"operation-table-body-console"}>
109109
<Stack horizontal verticalAlign="center">
110-
<Stack.Item className="format-selection">
110+
<div className="format-selection">
111111
<RadioGroup
112112
name={"Request body format"}
113113
value={bodyFormatState}
@@ -118,9 +118,9 @@ export const ConsoleBody = ({
118118
<Radio value={RequestBodyType.raw} label={"Raw"} disabled={readonlyBodyFormat} />
119119
<Radio value={RequestBodyType.binary} label={"Binary"} disabled={readonlyBodyFormat} />
120120
</RadioGroup>
121-
</Stack.Item>
121+
</div>
122122
{bodyFormatState === RequestBodyType.raw && representations.length > 0 &&
123-
<Stack.Item grow>
123+
<div style={{ flex: "1 1 auto" }}>
124124
<Dropdown
125125
aria-label="Sample request body"
126126
placeholder="Select sample request body"
@@ -134,7 +134,7 @@ export const ConsoleBody = ({
134134
return <Option key={repId} value={repId}>{representation.typeName}</Option>;
135135
})}
136136
</Dropdown>
137-
</Stack.Item>
137+
</div>
138138
}
139139
</Stack>
140140
{readonlyBodyFormat

‎src/components/operations/operation-list/react/runtime/OperationList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ export const OperationList = ({
271271
</Stack>
272272
<div className={`operation-list-collapsible${isCollapsed ? " is-collapsed" : ""}`}>
273273
<Stack horizontal verticalAlign="center" className={"operation-search-container"}>
274-
<Stack.Item className="form-group" style={{ margin: 0, width: '100%' }}>
274+
<div className="form-group" style={{ margin: 0, width: '100%' }}>
275275
<input
276276
type="search"
277277
autoComplete="off"
@@ -285,7 +285,7 @@ export const OperationList = ({
285285
aria-label={"Search"}
286286
style={{ marginBottom: 0 }}
287287
/>
288-
</Stack.Item>
288+
</div>
289289
<Menu onCheckedValueChange={(e, data) => setSelectedTags(tags.filter(tag => data.checkedItems.indexOf(tag.name) > -1))}>
290290
<MenuTrigger disableButtonEnhancement>
291291
<Button

‎src/components/products/product-list/react/runtime/ProductsListRuntime.tsx‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -72,35 +72,31 @@ const ProductListRuntimeFC = ({ productService, getReferenceUrl, layoutDefault,
7272
/>
7373
) : (
7474
<Stack tokens={{ childrenGap: "1rem" }}>
75-
<Stack.Item>
76-
<TableListInfo
77-
layout={layout}
78-
setLayout={setLayout}
79-
pattern={pattern}
80-
setPattern={setPattern}
81-
allowViewSwitching={allowViewSwitching}
82-
/>
83-
</Stack.Item>
75+
<TableListInfo
76+
layout={layout}
77+
setLayout={setLayout}
78+
pattern={pattern}
79+
setPattern={setPattern}
80+
allowViewSwitching={allowViewSwitching}
81+
/>
8482

8583
{working || !products ? (
86-
<Stack.Item>
87-
<div className="table-body">
88-
<Spinner label="Loading products..." labelPosition="below" size="small" />
89-
</div>
90-
</Stack.Item>
84+
<div className="table-body">
85+
<Spinner label="Loading products..." labelPosition="below" size="small" />
86+
</div>
9187
) : (
9288
<>
93-
<Stack.Item style={{ marginTop: "2rem" }}>
89+
<div style={{ marginTop: "2rem" }}>
9490
{layout === TLayout.table ? (
9591
<ProductsTable products={products} getReferenceUrl={getReferenceUrl} />
9692
) : (
9793
<ProductsCards products={products} getReferenceUrl={getReferenceUrl} />
9894
)}
99-
</Stack.Item>
95+
</div>
10096

101-
<Stack.Item align={"center"}>
102-
<Pagination pageNumber={pageNumber} setPageNumber={setPageNumber} pageMax={Math.ceil(products?.count / Constants.defaultPageSize)} />
103-
</Stack.Item>
97+
<div style={{ margin: "1rem auto" }}>
98+
<Pagination pageNumber={pageNumber} setPageNumber={setPageNumber} pageMax={Math.ceil(products?.count / 10)} />
99+
</div>
104100
</>
105101
)}
106102
</Stack>

‎src/components/products/product-list/react/runtime/ProductsTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const TableBodyProducts = ({ products, getReferenceUrl }: Props & { products: Pr
2727
{product.displayName}
2828
</a>
2929
</TableCell>
30-
<TableCell style={{padding: ".5rem 0"}}>
30+
<TableCell>
3131
<MarkdownProcessor markdownToDisplay={product.description} maxChars={markdownMaxCharsMap.table} />
3232
</TableCell>
3333
</TableRow>

‎src/components/products/product-subscribe/react/runtime/ProductSubscribeForm.tsx‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,24 +27,20 @@ export const ProductSubscribeForm = ({ subscribe, termsOfUse, showTermsByDefault
2727
tokens={{ childrenGap: 15 }}
2828
className="form-group"
2929
>
30-
<Stack.Item>
31-
<input
32-
value={subscriptionName}
33-
onChange={(event) => setSubscriptionName(event.target.value)}
34-
placeholder={"Your new product subscription name"}
35-
className="form-control"
36-
style={{ width: "20em" }}
37-
/>
38-
</Stack.Item>
39-
<Stack.Item>
40-
<BtnSpinner
41-
onClick={() => subscribe(subscriptionName, consented)}
42-
className="button button-primary"
43-
disabled={!subscriptionName || (termsOfUse && !consented)}
44-
>
45-
Subscribe
46-
</BtnSpinner>
47-
</Stack.Item>
30+
<input
31+
value={subscriptionName}
32+
onChange={(event) => setSubscriptionName(event.target.value)}
33+
placeholder={"Your new product subscription name"}
34+
className="form-control"
35+
style={{ width: "20em" }}
36+
/>
37+
<BtnSpinner
38+
onClick={() => subscribe(subscriptionName, consented)}
39+
className="button button-primary"
40+
disabled={!subscriptionName || (termsOfUse && !consented)}
41+
>
42+
Subscribe
43+
</BtnSpinner>
4844
</Stack>
4945

5046
{termsOfUse && (

0 commit comments

Comments
 (0)