Skip to content

Commit 10215d8

Browse files
jsorohovajsorohova
authored
FUI - Scrollable tables and fixed form data inputs (#2773)
1 parent be43fca commit 10215d8

File tree

17 files changed

+637
-552
lines changed

17 files changed

+637
-552
lines changed

‎src/components/apis/history-of-api/react/runtime/ApiHistory.tsx‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { ApiService } from "../../../../../services/apiService";
1111
import { RouteHelper } from "../../../../../routing/routeHelper";
1212
import { Pagination } from "../../../../utils/react/Pagination";
1313
import { NoRecordsRow } from "../../../../utils/react/NoRecordsRow";
14+
import { ScrollableTableContainer } from "../../../../utils/react/ScrollableTableContainer";
1415
import { defaultPageSize, fuiTheme } from "../../../../../constants";
1516
import { Utils } from "../../../../../utils";
1617

@@ -90,25 +91,27 @@ const ApiHistoryFC = ({
9091
<a href={routeHelper.getApiReferenceUrl(apiName, detailsPageUrl)}>Go back to the API reference page</a>
9192
}
9293
</Stack>
93-
<Table className={"fui-table"}>
94-
<TableHeader>
95-
<TableRow className={"fui-table-headerRow"}>
96-
<TableHeaderCell><span className="strong">Release date</span></TableHeaderCell>
97-
<TableHeaderCell><span className="strong">Notes</span></TableHeaderCell>
98-
</TableRow>
99-
</TableHeader>
100-
<TableBody>
101-
{currentChangelogPage?.value?.length > 0
102-
? currentChangelogPage.value.map((changelog, index) => (
103-
<TableRow key={index}>
104-
<TableCell>{Utils.formatDateTime(changelog.properties.createdDateTime)}</TableCell>
105-
<TableCell>{changelog.properties.notes}</TableCell>
106-
</TableRow>
107-
))
108-
: <NoRecordsRow colspan={2} />
109-
}
110-
</TableBody>
111-
</Table>
94+
<ScrollableTableContainer>
95+
<Table className={"fui-table"}>
96+
<TableHeader>
97+
<TableRow className={"fui-table-headerRow"}>
98+
<TableHeaderCell><span className="strong">Release date</span></TableHeaderCell>
99+
<TableHeaderCell><span className="strong">Notes</span></TableHeaderCell>
100+
</TableRow>
101+
</TableHeader>
102+
<TableBody>
103+
{currentChangelogPage?.value?.length > 0
104+
? currentChangelogPage.value.map((changelog, index) => (
105+
<TableRow key={index}>
106+
<TableCell>{Utils.formatDateTime(changelog.properties.createdDateTime)}</TableCell>
107+
<TableCell>{changelog.properties.notes}</TableCell>
108+
</TableRow>
109+
))
110+
: <NoRecordsRow colspan={2} />
111+
}
112+
</TableBody>
113+
</Table>
114+
</ScrollableTableContainer>
112115
{currentChangelogPage?.count > 1 &&
113116
<div className={"pagination-container"}>
114117
<Pagination pageNumber={pageNumber} setPageNumber={setPageNumber} pageMax={Math.ceil(currentChangelogPage?.count / defaultPageSize)} />

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

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { Page } from "../../../../../models/page";
1313
import { TagGroup } from "../../../../../models/tagGroup";
1414
import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
1515
import { NoRecordsRow } from "../../../../utils/react/NoRecordsRow";
16+
import { ScrollableTableContainer } from "../../../../utils/react/ScrollableTableContainer";
1617
import { markdownMaxCharsMap } from "../../../../../constants";
1718
import {
1819
isApisGrouped,
@@ -88,35 +89,37 @@ const TableBodyTags = ({ tags, ...props }: Props & { tags: Page<TagGroup<Api>> }
8889
};
8990

9091
export const ApisTable = ({ apis, ...props }: Props & { apis: TApisData }) => (
91-
<Table className={"fui-table"} size={"small"} aria-label={"APIs List table"}>
92-
<TableHeader>
93-
<TableRow className={"fui-table-headerRow"}>
94-
<TableHeaderCell>
95-
<span className="strong">Name</span>
96-
</TableHeaderCell>
97-
<TableHeaderCell>
98-
<span className="strong">Description</span>
99-
</TableHeaderCell>
100-
{props.showApiType && (
101-
<TableHeaderCell style={{ width: "8em" }}>
102-
<span className="strong">Type</span>
92+
<ScrollableTableContainer>
93+
<Table className={"fui-table"} size={"small"} aria-label={"APIs List table"}>
94+
<TableHeader>
95+
<TableRow className={"fui-table-headerRow"}>
96+
<TableHeaderCell>
97+
<span className="strong">Name</span>
10398
</TableHeaderCell>
104-
)}
105-
</TableRow>
106-
</TableHeader>
99+
<TableHeaderCell>
100+
<span className="strong">Description</span>
101+
</TableHeaderCell>
102+
{props.showApiType && (
103+
<TableHeaderCell style={{ width: "8em" }}>
104+
<span className="strong">Type</span>
105+
</TableHeaderCell>
106+
)}
107+
</TableRow>
108+
</TableHeader>
107109

108-
<TableBody>
109-
{isApisGrouped(apis) ? (
110-
<TableBodyTags
111-
{...props}
112-
tags={apis}
113-
/>
114-
) : (
115-
<TableBodyApis
116-
{...props}
117-
apis={apis.value}
118-
/>
119-
)}
120-
</TableBody>
121-
</Table>
110+
<TableBody>
111+
{isApisGrouped(apis) ? (
112+
<TableBodyTags
113+
{...props}
114+
tags={apis}
115+
/>
116+
) : (
117+
<TableBodyApis
118+
{...props}
119+
apis={apis.value}
120+
/>
121+
)}
122+
</TableBody>
123+
</Table>
124+
</ScrollableTableContainer>
122125
);

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { ConsoleOperation } from "../../../../../models/console/consoleOperation
2828
import { ConsoleHeader } from "../../../../../models/console/consoleHeader";
2929
import { ConsoleParameter } from "../../../../../models/console/consoleParameter";
3030
import { ConsoleRequest } from "../../../../../models/console/consoleRequest";
31+
import { FormDataItem } from "../../../../../models/console/formDataItem";
3132
import { AuthorizationServer } from "../../../../../models/authorizationServer";
3233
import { KnownHttpHeaders } from "../../../../../models/knownHttpHeaders";
3334
import { KnownMimeTypes } from "../../../../../models/knownMimeTypes";
@@ -239,6 +240,11 @@ export const OperationConsole = ({
239240
rerender();
240241
}, [consoleOperation, rerender]);
241242

243+
const updateBodyDataItems = (bodyDataItems: FormDataItem[]) => {
244+
consoleOperation.current.request.bodyDataItems(bodyDataItems);
245+
rerender();
246+
}
247+
242248
const updateBodyFormat = (bodyFormat: RequestBodyType) => {
243249
consoleOperation.current.request.bodyFormat(bodyFormat);
244250
rerender();
@@ -357,6 +363,7 @@ export const OperationConsole = ({
357363
updateHasBody={updateHasBody}
358364
updateBody={updateBody}
359365
updateBodyBinary={updateBodyBinary}
366+
updateBodyDataItems={updateBodyDataItems}
360367
updateBodyFormat={updateBodyFormat}
361368
/>
362369
}

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

Lines changed: 57 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
TypeDefinitionPropertyTypeReference,
3939
} from "../../../../../models/typeDefinition";
4040
import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
41+
import { ScrollableTableContainer } from "../../../../utils/react/ScrollableTableContainer";
4142
import { OperationDetailsRuntimeProps } from "./OperationDetailsRuntime";
4243
import {
4344
OperationRepresentation,
@@ -552,64 +553,66 @@ export const OperationDetails = ({
552553
<h4 className={"operation-details-title"}>
553554
Definitions
554555
</h4>
555-
<Table
556-
aria-label={"Definitions list"}
557-
className={"fui-table"}
558-
>
559-
<TableHeader>
560-
<TableRow
561-
className={"fui-table-headerRow"}
562-
>
563-
<TableHeaderCell>
564-
<span className="strong">
565-
Name
566-
</span>
567-
</TableHeaderCell>
568-
<TableHeaderCell>
569-
<span className="strong">
570-
Description
571-
</span>
572-
</TableHeaderCell>
573-
</TableRow>
574-
</TableHeader>
575-
<TableBody>
576-
{definitions.map((definition) => (
556+
<ScrollableTableContainer>
557+
<Table
558+
aria-label={"Definitions list"}
559+
className={"fui-table"}
560+
>
561+
<TableHeader>
577562
<TableRow
578-
key={definition.name}
579-
className={"fui-table-body-row"}
563+
className={"fui-table-headerRow"}
580564
>
581-
<TableCell>
582-
<a
583-
href={getReferenceUrl(
584-
definition.name
585-
)}
586-
title={definition.name}
587-
className={
588-
"truncate-text"
589-
}
590-
>
591-
{definition.name}
592-
</a>
593-
</TableCell>
594-
<TableCell>
595-
<span
596-
title={
597-
definition.description
598-
}
599-
>
600-
<MarkdownProcessor
601-
markdownToDisplay={
602-
definition.description
603-
}
604-
maxChars={250}
605-
truncate={true}
606-
/>
565+
<TableHeaderCell>
566+
<span className="strong">
567+
Name
568+
</span>
569+
</TableHeaderCell>
570+
<TableHeaderCell>
571+
<span className="strong">
572+
Description
607573
</span>
608-
</TableCell>
574+
</TableHeaderCell>
609575
</TableRow>
610-
))}
611-
</TableBody>
612-
</Table>
576+
</TableHeader>
577+
<TableBody>
578+
{definitions.map((definition) => (
579+
<TableRow
580+
key={definition.name}
581+
className={"fui-table-body-row"}
582+
>
583+
<TableCell>
584+
<a
585+
href={getReferenceUrl(
586+
definition.name
587+
)}
588+
title={definition.name}
589+
className={
590+
"truncate-text"
591+
}
592+
>
593+
{definition.name}
594+
</a>
595+
</TableCell>
596+
<TableCell>
597+
<span
598+
title={
599+
definition.description
600+
}
601+
>
602+
<MarkdownProcessor
603+
markdownToDisplay={
604+
definition.description
605+
}
606+
maxChars={250}
607+
truncate={true}
608+
/>
609+
</span>
610+
</TableCell>
611+
</TableRow>
612+
))}
613+
</TableBody>
614+
</Table>
615+
</ScrollableTableContainer>
613616

614617
{definitions.map((definition) => (
615618
<div

0 commit comments

Comments
 (0)