Skip to content

Commit 8e91456

Browse files
author
FalkWolsky
committed
Adding Stoplight APIDocs Display
1 parent 1a3883c commit 8e91456

File tree

10 files changed

+192
-7
lines changed

10 files changed

+192
-7
lines changed

‎client/packages/lowcoder-design/src/icons/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ export { ReactComponent as InviteUserIcon } from "./icon-application-invite-user
125125
export { ReactComponent as HomeEmptyIcon } from "./icon-application-empty.svg";
126126
export { ReactComponent as HomeListIcon } from "./icon-application-list.svg";
127127
export { ReactComponent as HomeCardIcon } from "./icon-application-card.svg";
128+
export { ReactComponent as APIDocsIcon } from "./remix/instance-line.svg";
128129
// export { ReactComponent as AllAppIcon } from "./icon-all-app.svg";
129130

130131

‎client/packages/lowcoder/src/app.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
ADMIN_APP_URL,
2828
ORG_AUTH_FORGOT_PASSWORD_URL,
2929
ORG_AUTH_RESET_PASSWORD_URL,
30+
API_DOCS_URL,
3031
} from "constants/routesURL";
3132
import React from "react";
3233
import { createRoot } from "react-dom/client";
@@ -208,6 +209,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
208209
SETTING,
209210
MARKETPLACE_URL,
210211
ADMIN_APP_URL,
212+
API_DOCS_URL,
211213
]}
212214
// component={ApplicationListPage}
213215
component={LazyApplicationHome}

‎client/packages/lowcoder/src/constants/routesURL.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const DATASOURCE_URL = `/datasource`;
3131
export const DATASOURCE_CREATE_URL = `${DATASOURCE_URL}/new/:datasourceType`;
3232
export const DATASOURCE_EDIT_URL = `${DATASOURCE_URL}/:datasourceId`;
3333
export const QUERY_LIBRARY_URL = `/query-library`;
34+
export const API_DOCS_URL = `/lowcoder-api`;
3435
export const FOLDER_URL_PREFIX = `/folder`;
3536
export const FOLDER_URL = `${FOLDER_URL_PREFIX}/:folderId`;
3637
export const FOLDERS_URL = `/folders`;

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2937,6 +2937,7 @@ export const en = {
29372937
"yourFolders" : "Your Folders",
29382938
"modules": "Modules",
29392939
"module": "Module",
2940+
"api" : "Lowcoder API",
29402941
"trash": "Trash",
29412942
"marketplace": "Marketplace",
29422943
"allCategories": "All Categories",

‎client/packages/lowcoder/src/pages/ApplicationV2/ApiDocLayout.tsx

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import styled, { createGlobalStyle } from "styled-components";
2+
import { trans } from "../../i18n";
3+
import { API } from '@stoplight/elements';
4+
import React from 'react';
5+
import { useLocation } from "react-router-dom";
6+
import history from "util/history";
7+
import { Card } from "antd";
8+
import { default as AntdBreadcrumb } from "antd/es/breadcrumb";
9+
import { ALL_APPLICATIONS_URL, API_DOCS_URL } from "constants/routesURL";
10+
import { ArrowIcon } from "lowcoder-design";
11+
12+
import './components/stoplight.styles.css';
13+
14+
const Wrapper = styled.div`
15+
display: flex;
16+
flex-direction: column;
17+
width: 100%;
18+
height: 100%;
19+
`;
20+
21+
const HeaderWrapper = styled.div`
22+
height: 84px;
23+
width: 100%;
24+
display: flex;
25+
padding: 0 36px;
26+
align-items: center;
27+
flex-shrink: 0;
28+
@media screen and (max-width: 500px) {
29+
padding: 0 24px;
30+
}
31+
`;
32+
33+
const ContentWrapper = styled.div`
34+
position: relative;
35+
`;
36+
37+
const Breadcrumb = styled(AntdBreadcrumb)`
38+
font-size: 20px;
39+
40+
li:not(:last-child) {
41+
color: #8b8fa3;
42+
}
43+
44+
li:last-child {
45+
font-weight: 500;
46+
color: #222222;
47+
}
48+
49+
li.ant-breadcrumb-separator {
50+
display: flex;
51+
flex-direction: column;
52+
justify-content: center;
53+
}
54+
`;
55+
56+
const BreadcrumbItem = styled.div`
57+
cursor: pointer;
58+
`;
59+
60+
const ApiDocView = styled.div`
61+
font-size: 14px;
62+
color: #8b8fa3;
63+
flex-grow: 1;
64+
padding-top: 0px;
65+
padding-left: 40px;
66+
max-width: 95%;
67+
`;
68+
69+
const StyleApiDocCover = styled.div`
70+
background: rgb(9,52,121);
71+
background: -moz-linear-gradient(139deg, rgba(9,52,121,1) 19%, rgba(5,98,180,1) 67%, rgba(0,76,255,1) 100%);
72+
background: -webkit-linear-gradient(139deg, rgba(9,52,121,1) 19%, rgba(5,98,180,1) 67%, rgba(0,76,255,1) 100%);
73+
background: linear-gradient(139deg, rgba(9,52,121,1) 19%, rgba(5,98,180,1) 67%, rgba(0,76,255,1) 100%);
74+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#093479",endColorstr="#004cff",GradientType=1);
75+
padding: 25px;
76+
height: 120px;
77+
border-radius:10px 10px 0 0;
78+
`;
79+
80+
81+
const isSelfHost = window.location.host !== 'app.lowcoder.cloud';
82+
83+
export type ApiDocBreadcrumbType = { text: string; path: string };
84+
85+
export interface ApiDocLayoutProps {
86+
breadcrumb?: ApiDocBreadcrumbType[];
87+
}
88+
89+
export function ApiDoc(props: ApiDocLayoutProps) {
90+
91+
const { breadcrumb = []} = props;
92+
const currentPath = useLocation().pathname;
93+
94+
const breadcrumbItems = [
95+
{
96+
key: 0,
97+
title: trans("home.home"),
98+
onClick: () =>
99+
currentPath !== ALL_APPLICATIONS_URL && history.push(ALL_APPLICATIONS_URL),
100+
},
101+
{
102+
key: 0,
103+
title: trans("home.api"),
104+
onClick: () =>
105+
currentPath !== API_DOCS_URL && history.push(API_DOCS_URL),
106+
},
107+
...breadcrumb.map((b, i) => ({
108+
key: i+1,
109+
title: b.text,
110+
onClick: () => currentPath !== b.path && history.push(b.path)
111+
}))
112+
]
113+
114+
return (
115+
<Wrapper>
116+
<HeaderWrapper>
117+
<Breadcrumb
118+
separator={<ArrowIcon />}
119+
items={breadcrumbItems}
120+
itemRender={(item) => (
121+
<BreadcrumbItem
122+
key={item.key}
123+
onClick={item.onClick}
124+
>
125+
{item.title}
126+
</BreadcrumbItem>
127+
)}
128+
>
129+
</Breadcrumb>
130+
</HeaderWrapper>
131+
132+
<ContentWrapper>
133+
<ApiDocView>
134+
<StyleApiDocCover>
135+
<h1 style={{color: "#ffffff", marginTop : "12px"}}>{trans("home.api")}</h1>
136+
</StyleApiDocCover>
137+
<Card style={{ marginBottom: "20px", minHeight : "800px", width: "100%" }}>
138+
<div style={{width : "100%"}}> {/* className={styles.stoplightApidoc} */}
139+
<API
140+
layout="sidebar"
141+
hideSchemas={true}
142+
hideInternal={true}
143+
hideExport={true}
144+
tryItCredentialsPolicy="omit"
145+
tryItCorsProxy={isSelfHost ? undefined : 'https://api-service.lowcoder.cloud'}
146+
basePath="lowcoder-api"
147+
apiDescriptionUrl="https://api-service.lowcoder.cloud/api/docs/api-docs"
148+
/>
149+
</div>
150+
</Card>
151+
152+
</ApiDocView>
153+
</ContentWrapper>
154+
</Wrapper>
155+
);
156+
}

‎client/packages/lowcoder/src/pages/ApplicationV2/ApiDocView.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Helmet } from "react-helmet";
2+
import { ApiDoc } from "./ApiDocLayout";
3+
import { trans } from "i18n";
4+
5+
export function ApiDocView() {
6+
7+
return (
8+
<><Helmet>
9+
{<title>{trans("productName")} {trans("home.api")}</title>}
10+
</Helmet><ApiDoc /></>
11+
);
12+
13+
};

‎client/packages/lowcoder/src/pages/ApplicationV2/MoveToFolderModal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export const MoveToFolderModal = (props: { source?: HomeRes; onClose: () => void
107107
{
108108
label: (
109109
<FolderSelectLabel>
110-
<FolderIcon style={{ marginRight: "8px", flexShrink: 0 }} />
110+
<FolderIcon style={{ marginRight: "8px", width: "24px", flexShrink: 0 }} />
111111
{trans("home.rootFolder")}
112112
</FolderSelectLabel>
113113
),
@@ -120,7 +120,7 @@ export const MoveToFolderModal = (props: { source?: HomeRes; onClose: () => void
120120
.map((f) => ({
121121
label: (
122122
<FolderSelectLabel>
123-
<FolderIcon style={{ marginRight: "8px", width: "20px", flexShrink: 0 }} />
123+
<FolderIcon style={{ marginRight: "8px", width: "24px", flexShrink: 0 }} />
124124
{f.name}
125125
</FolderSelectLabel>
126126
),

‎client/packages/lowcoder/src/pages/ApplicationV2/components/stoplight.styles.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/packages/lowcoder/src/pages/ApplicationV2/index.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
QUERY_LIBRARY_URL,
1111
SETTING,
1212
TRASH_URL,
13+
API_DOCS_URL,
1314
// ADMIN_APP_URL,
1415
NEWS_URL,
1516
ORG_HOME_URL,
@@ -35,6 +36,7 @@ import {
3536
AppsIcon,
3637
EnterpriseIcon,
3738
UserIcon,
39+
APIDocsIcon,
3840
} from "lowcoder-design";
3941
import React, { useEffect, useState } from "react";
4042
import { fetchAllApplications, fetchHomeData } from "redux/reduxActions/applicationActions";
@@ -47,6 +49,7 @@ import { Layout } from "../../components/layout/Layout";
4749
import { HomeView } from "./HomeView";
4850
import { UserProfileView } from "./UserProfileView";
4951
import { NewsView } from "./NewsView";
52+
import { ApiDocView } from "./ApiDocView";
5053
import { OrgView } from "./OrgView";
5154
import styled, { css } from "styled-components";
5255
import history from "../../util/history";
@@ -441,6 +444,13 @@ export default function ApplicationHome() {
441444
visible: ({ user }) => user.orgDev,
442445
onSelected: (_, currentPath) => currentPath.split("/")[1] === "datasource",
443446
},
447+
{
448+
text: <TabLabel>{trans("home.api")}</TabLabel>,
449+
routePath: API_DOCS_URL,
450+
routeComp: ApiDocView,
451+
icon: ({ selected, ...otherProps }) => selected ? <APIDocsIcon {...otherProps} width={"24px"}/> : <APIDocsIcon {...otherProps} width={"24px"}/>,
452+
visible: ({ user }) => user.orgDev,
453+
}
444454
],
445455
},
446456
isEE() ? {

‎client/packages/lowcoder/src/pages/setting/settingHome.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { selectSystemConfig } from "redux/selectors/configSelectors";
2626
import { enableCustomBrand } from "util/featureFlagUtils";
2727
import FreeLimitTag from "pages/common/freeLimitTag";
2828
import { Helmet } from "react-helmet";
29-
import ApiDocs from "./apiDocs";
29+
// import ApiDocs from "./apiDocs";
3030

3131
enum SettingPageEnum {
3232
UserGroups = "permission",
@@ -35,7 +35,7 @@ enum SettingPageEnum {
3535
Theme = "theme",
3636
Branding = "branding",
3737
Advanced = "advanced",
38-
ApiDocs = "apiDocs",
38+
// ApiDocs = "apiDocs",
3939
OAuthProvider = "oauth-provider",
4040
AppUsage = "app-usage",
4141
Environments = "environments",
@@ -73,11 +73,11 @@ export function SettingHome() {
7373
label: trans("settings.advanced"),
7474
icon: <LeftSettingIcon width={"20px"}/>,
7575
},
76-
{
76+
/* {
7777
key: SettingPageEnum.ApiDocs,
7878
label: trans("settings.apiDocs"),
7979
icon: <LeftSettingIcon width={"20px"}/>,
80-
},
80+
}, */
8181

8282
// Premium features
8383

@@ -155,7 +155,7 @@ export function SettingHome() {
155155
{selectKey === SettingPageEnum.Audit && <AuditSetting />}
156156
{selectKey === SettingPageEnum.Branding && <BrandingSetting />}
157157
{selectKey === SettingPageEnum.Advanced && <AdvancedSetting />}
158-
{selectKey === SettingPageEnum.ApiDocs && <ApiDocs />}
158+
{/* {selectKey === SettingPageEnum.ApiDocs && <ApiDocs />} */}
159159
</TwoColumnSettingPageContent>
160160
</>
161161
);

0 commit comments

Comments
 (0)