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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy