Skip to content

Commit 6959970

Browse files
yini-chenyini-chen
authored
Add interactive profiles configuration (#91)
* feat: Add interactive profiles configuration capability * fix:bugs * fix:Adjust where the editor opens * update profiles manager info * Update README * fix: Icon of webview * fix: author * fix: deps
1 parent 94e60d2 commit 6959970

File tree

18 files changed

+8283
-5464
lines changed

18 files changed

+8283
-5464
lines changed

‎README.md

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,13 @@ English | [简体中文](./README.zh_CN.md)
2222

2323
- **Code Snippets:** You can use the code snippets to quickly generate the code.
2424

25+
- **Profiles Management :** Manage your Alibaba Cloud profiles.
26+
2527
- More features are under development, please stay tuned.
2628

2729
## Extension UI Guide
2830

29-
![VSCode Extension Guide](https://img.alicdn.com/imgextra/i2/O1CN01t993u81InC3xh7RVU_!!6000000000937-0-tps-2328-1646.jpg)
31+
![VSCode Extension Guide](https://gw.alicdn.com/imgextra/i4/O1CN01tkB2bT2AAFeiOYZm6_!!6000000008162-0-tps-2372-1594.jpg)
3032

3133
### Product Searching `ctrl+cmd+k`
3234

@@ -38,28 +40,11 @@ English | [简体中文](./README.zh_CN.md)
3840

3941
### Call the API
4042

41-
The feature requires you to configure your AK/SK information as follows:
42-
43-
1. Install Aliyun CLI: [Install guide](https://www.alibabacloud.com/help/en/cli/installation-guide).
44-
2. Install [Alibaba Cloud CLI Tools](https://marketplace.visualstudio.com/items?itemName=alibabacloud-openapi.aliyuncli) extentions.
45-
3. You can run the `aliyun configure` command for quick configuration.
46-
47-
```
48-
$ aliyun configure
49-
Configuring profile 'default' ...
50-
Aliyun Access Key ID [None]: <Your AccessKey ID>
51-
Aliyun Access Key Secret [None]: <Your AccessKey Secret>
52-
Default Region Id [None]: cn-hangzhou
53-
Default output format [json]: json
54-
Default Language [zh]: zh
55-
```
43+
![API debugging](https://gw.alicdn.com/imgextra/i2/O1CN01fsuDBE1CLMJaBJj32_!!6000000000064-0-tps-3238-1920.jpg)
5644

57-
4. Click the Alibaba Cloud icon in VS Code status bar to manage your profiles.
58-
![](https://img.alicdn.com/imgextra/i1/O1CN0144NU9N1L4G1cq89Uf_!!6000000001245-0-tps-248-46.jpg)
59-
![](https://img.alicdn.com/imgextra/i2/O1CN01btLUkc1ldEHJQ0w4S_!!6000000004841-0-tps-1206-190.jpg)
60-
More information please refer to the [Alibaba Cloud CLI Documentation](https://github.com/aliyun/aliyun-cli?tab=readme-ov-file#configure).
45+
> Note that the debugging needs to configure your AK credentials, click the left identity icon, you can add and switch the current AK credentials configuration.
6146
62-
![API debug](https://img.alicdn.com/imgextra/i3/O1CN01yfMcHl1i6lNdjzmzs_!!6000000004364-2-tps-2688-1820.png)
47+
![manage profiles](https://gw.alicdn.com/imgextra/i2/O1CN01HzFhxH20gdVF4MIfq_!!6000000006879-0-tps-1938-378.jpg)
6348

6449
### SDK Code Sample
6550

@@ -84,6 +69,12 @@ When writing SDK code, you can get more code sample references by viewing the Op
8469

8570
![Document enhancement](https://img.alicdn.com/imgextra/i4/O1CN01jedn431D1Uk8MEhM3_!!6000000000156-0-tps-2562-654.jpg)
8671

72+
### Profiles Management
73+
74+
Add and switch your Alibaba Cloud profiles.
75+
76+
![](https://img.alicdn.com/imgextra/i1/O1CN01NN667S1skk7vLbhr1_!!6000000005805-0-tps-2912-1596.jpg)
77+
8778
## Feedback
8879

8980
- Submit bug reports and feature requests on [our Github repository](https://github.com/aliyun/alibabacloud-api-vscode-toolkit/issues).

‎README.zh_CN.md

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,13 @@ Alibaba Cloud API Toolkit 是一个轻量化的阿里云 API 工具，支持在
2222

2323
- **Code Snippets:** 支持代码片段功能，帮助你快速编写 SDK 代码。
2424

25+
- **profiles 管理:** 管理你的阿里云 profiles。
26+
2527
- 更多功能正在开发中，敬请期待...
2628

2729
## 插件 UI 导览
2830

29-
![VSCode Extension Guide](https://img.alicdn.com/imgextra/i1/O1CN01tlXFtt1mj0vE1ZrhR_!!6000000004989-0-tps-2498-1768.jpg)
31+
![VSCode Extension Guide](https://gw.alicdn.com/imgextra/i2/O1CN013GxzFK21jDLZNFaos_!!6000000007020-0-tps-2704-1808.jpg)
3032

3133
### 产品搜索 `ctrl+cmd+k`
3234

@@ -38,28 +40,11 @@ Alibaba Cloud API Toolkit 是一个轻量化的阿里云 API 工具，支持在
3840

3941
### API 调试
4042

41-
调试功能需要配置你的 AK/SK 信息，配置方法如下：
42-
43-
1. 安装阿里云 CLI：[安装指南](https://help.aliyun.com/zh/cli/installation-guide)；
44-
2. 安装 [Alibaba Cloud CLI Tools](https://marketplace.visualstudio.com/items?；itemName=alibabacloud-openapi.aliyuncli) 插件；
45-
3. 输入 `aliyun configure` 命令，按照提示进行配置，
46-
47-
```
48-
$ aliyun configure
49-
Configuring profile 'default' ...
50-
Aliyun Access Key ID [None]: <Your AccessKey ID>
51-
Aliyun Access Key Secret [None]: <Your AccessKey Secret>
52-
Default Region Id [None]: cn-hangzhou
53-
Default output format [json]: json
54-
Default Language [zh]: zh
55-
```
43+
![API debug](https://gw.alicdn.com/imgextra/i2/O1CN01fsuDBE1CLMJaBJj32_!!6000000000064-0-tps-3238-1920.jpg)
5644

57-
4. 点击 VS Code 底部状态栏中的阿里云图标，管理你的 profiles，
58-
![](https://img.alicdn.com/imgextra/i1/O1CN0144NU9N1L4G1cq89Uf_!!6000000001245-0-tps-248-46.jpg)
59-
![](https://img.alicdn.com/imgextra/i2/O1CN01btLUkc1ldEHJQ0w4S_!!6000000004841-0-tps-1206-190.jpg)
60-
更多信息请参考 [Alibaba Cloud CLI Documentation](https://github.com/aliyun/aliyun-cli?tab=readme-ov-file#configure)。
45+
> 注意，调试功能需要配置你的 AK 凭证，点击左侧身份图标，可以新增和切换当前的 AK 凭证配置。
6146
62-
![API debug](https://img.alicdn.com/imgextra/i3/O1CN01yfMcHl1i6lNdjzmzs_!!6000000004364-2-tps-2688-1820.png)
47+
![](https://img.alicdn.com/imgextra/i2/O1CN01HzFhxH20gdVF4MIfq_!!6000000006879-0-tps-1938-378.jpg)
6348

6449
### SDK 示例
6550

@@ -85,6 +70,12 @@ Default Language [zh]: zh
8570

8671
![Document enhancement](https://img.alicdn.com/imgextra/i4/O1CN01jedn431D1Uk8MEhM3_!!6000000000156-0-tps-2562-654.jpg)
8772

73+
### Profiles 管理
74+
75+
新增和切换你的阿里云 profiles。
76+
77+
![](https://img.alicdn.com/imgextra/i1/O1CN01NN667S1skk7vLbhr1_!!6000000005805-0-tps-2912-1596.jpg)
78+
8879
## 反馈
8980

9081
- 欢迎在我们的 [Github repository](https://github.com/aliyun/alibabacloud-api-vscode-toolkit/issues) 上提交你的问题和建议。

‎media/src/components/APIPage/APIDebugger/utils.ts

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
export const getCustomWidget = (schema): string => {
2-
if (schema?.type === 'array') {
2+
if (schema?.type === "array") {
33
// if (schema.items?.type === 'string' && schema?.widget === 'stringList') {
44
// return 'stringList';
55
// }
6-
return 'list';
6+
return "list";
77
}
8-
if (schema?.type === 'string') {
8+
if (schema?.type === "string") {
99
if (schema?.isFileTransferUrl) {
10-
return 'fileTypeSelect';
10+
return "file";
1111
}
12-
if (schema?.format === 'binary') {
13-
return 'file';
12+
if (schema?.format === "binary") {
13+
return "file";
1414
}
1515
if (schema?.enum || schema?.enumValueTitles) {
16-
return 'enum';
16+
return "enum";
1717
}
18-
return 'string';
19-
} else if (schema?.type === 'boolean') {
20-
return 'booleanSwitch';
21-
} else if (schema?.type === 'object' && schema?.additionalProperties) {
22-
return 'map';
23-
} else if (schema?.type === 'object' && !schema?.properties) {
24-
return 'json';
25-
} else if (schema?.type === 'any') {
26-
return 'typeSelect';
18+
return "string";
19+
} else if (schema?.type === "boolean") {
20+
return "booleanSwitch";
21+
} else if (schema?.type === "object" && schema?.additionalProperties) {
22+
return "map";
23+
} else if (schema?.type === "object" && !schema?.properties) {
24+
return "json";
25+
} else if (schema?.type === "any") {
26+
return "typeSelect";
2727
} else if ((schema?.ref || schema?.$ref) && !schema?.properties && !schema?.items) {
28-
return 'struct';
28+
return "struct";
2929
}
3030
// else if (schema?.type === 'number' || (schema?.type === 'integer' && schema?.format === 'int64')){
3131
// return "string"
3232
// }
33-
return '';
34-
};
33+
return "";
34+
};

‎media/src/components/APIPage/TryAPI/TryAPI.tsx

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { EditorLanguages } from "../../../types/EditorLanguages";
1212
import I18N from "../../../utils/I18N";
1313
import { getEditorMenuItems, parseXml } from "../../utils";
1414
import { APIPageContext } from "../context";
15+
import { PontUIService } from "../../../service/UIService";
1516

1617
export class TryAPIProps {}
1718

@@ -31,7 +32,8 @@ const TAB_PANES = [
3132
];
3233

3334
export const TryAPI: React.FC<TryAPIProps> = (props) => {
34-
const { openAPIResponses, isApiResultLoading, version, apiMeta, product, mode } = APIPageContext.useContainer();
35+
const { openAPIResponses, isApiResultLoading, version, apiMeta, product, mode, profileInfo } =
36+
APIPageContext.useContainer();
3537
const doc = `${product}::${version}::${apiMeta.name}`;
3638
const [tab, setTab] = React.useState(TAB_PANES[0].value);
3739
const apiResult = openAPIResponses?.[doc];
@@ -138,18 +140,15 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
138140
<Alert
139141
message={
140142
<div>
141-
调试需要
142-
<a href="https://help.aliyun.com/zh/cli/installation-guide/" target="_blank">
143-
安装
144-
</a>
145-
阿里云 CLI 并
146-
<a
147-
href="https://help.aliyun.com/zh/cli/interactive-configuration-or-fast-configuration#section-5pj-p7j-06z"
148-
target="_blank"
149-
>
150-
配置
151-
</a>
152-
您的 AK/SK 信息。{I18N.main.explorer.AKTip}
143+
{profileInfo?.current?.length ? null : (
144+
<span>
145+
调试需要配置您的 AK/SK 信息，
146+
<a onClick={() => PontUIService.openProfileManager()} className="text-blue-500">
147+
点击配置。
148+
</a>
149+
</span>
150+
)}
151+
{I18N.main.explorer.AKTip}
153152
</div>
154153
}
155154
type="warning"
@@ -165,14 +164,16 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
165164
) : null}
166165

167166
<div className="api-res-header">
168-
<div className="title mb-4 text-gray-900 text-sm font-medium">{I18N.main.explorer.overview}</div>
167+
<div className="title mb-4 text-sm font-medium text-gray-900">{I18N.main.explorer.overview}</div>
169168
{/* {apiResult?.result || props.isApiResultLoading ? ( */}
170169
<div className="res-info mb-4 flex">
171-
<div className="item mr-6 mx-1 inline-block">
170+
<div className="item mx-1 mr-6 inline-block">
172171
<div className="debug-res flex">
173172
<div
174173
className={`codicon codicon-${
175-
String(statusCode).startsWith("2") ? "pass-filled success text-green-600" : "error error-red text-red-700"
174+
String(statusCode).startsWith("2")
175+
? "pass-filled success text-green-600"
176+
: "error error-red text-red-700"
176177
}`}
177178
></div>
178179
<div className="value">
@@ -181,21 +182,21 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
181182
</div>
182183
</div>
183184
{apiResult && statusCode ? (
184-
<div className="item mr-6 mx-1">
185+
<div className="item mx-1 mr-6">
185186
{/* {httpStatusMessageMap[statusCode] || statusCode} */}
186-
<span className="label font-medium mr-1 text-gray-500">{I18N.main.explorer.statusCode}</span>
187+
<span className="label mr-1 font-medium text-gray-500">{I18N.main.explorer.statusCode}</span>
187188
<span
188189
className={`value result-status font-medium ${
189-
String(statusCode).startsWith("2") ? "text-green-600 success" : "error error-red text-red-700"
190+
String(statusCode).startsWith("2") ? "success text-green-600" : "error error-red text-red-700"
190191
}`}
191192
>
192193
{statusCode}
193194
</span>
194195
</div>
195196
) : null}
196197
{apiResult ? (
197-
<div className="item mr-6 mx-1">
198-
<span className="label font-medium mr-1 text-gray-500">{I18N.main.explorer.time}</span>
198+
<div className="item mx-1 mr-6">
199+
<span className="label mr-1 font-medium text-gray-500">{I18N.main.explorer.time}</span>
199200
<span className="value">{apiResult.cost}ms</span>
200201
</div>
201202
) : null}

‎media/src/components/APIPage/context.ts

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,63 @@
11
/**
22
* @author yini-chen
33
*/
4-
import { createContainer } from 'unstated-next';
5-
import { SemixFormProps } from '../SemixFormRender';
6-
import React from 'react';
7-
import { PontUIService } from '../../service/UIService';
8-
import { OpenAPIResponse, OpenAPIRequestResult } from '../../types/openAPI';
9-
import { endpointsMocks } from '../../mocks/endpoints';
10-
import { getVSCode } from '../../utils/utils';
4+
import { createContainer } from "unstated-next";
5+
import { SemixFormProps } from "../SemixFormRender";
6+
import React from "react";
7+
import { PontUIService } from "../../service/UIService";
8+
import { OpenAPIResponse, OpenAPIRequestResult } from "../../types/openAPI";
9+
import { endpointsMocks } from "../../mocks/endpoints";
10+
import { getVSCode } from "../../utils/utils";
1111

12-
export class APIPageState {
12+
export class APIPageState {
1313
/**
1414
* apiMeta
1515
*/
1616
apiMeta: any;
1717
/**
1818
* schemaForm
1919
*/
20-
schemaForm: SemixFormProps['form'];
20+
schemaForm: SemixFormProps["form"];
2121
product: string;
22-
version:string;
22+
version: string;
2323
/**
2424
* openapi sdk 响应组
2525
*/
26-
openAPIResponses?= {};
26+
openAPIResponses? = {};
2727
/**
2828
* 发起调试
2929
*/
30-
onDebug?:(value:any)=>void;
30+
onDebug?: (value: any) => void;
3131
/**
3232
* 发起调用loading
3333
*/
34-
isApiResultLoading? = false
34+
isApiResultLoading? = false;
3535
/**
3636
* 模式选择
3737
*/
38-
mode: 'debug' | 'doc' |'sdk' = 'debug';
39-
changeMode: (mode: 'debug' | 'doc' | 'sdk') => void;
38+
mode: "debug" | "doc" | "sdk" = "debug";
39+
changeMode: (mode: "debug" | "doc" | "sdk") => void;
4040
/**
4141
* 服务地址
4242
*/
4343
endpoints?: any[];
4444
/**
4545
* regionId
4646
*/
47-
regionId? = 'cn-hangzhou';
47+
regionId? = "cn-hangzhou";
4848
setRegionId?: (regionId: string) => void;
49+
/**
50+
* profileInfo
51+
*/
52+
profileInfo?: any;
4953
}
5054

5155
export const useAPIPageContext = (initialState = {} as APIPageState): APIPageState => {
5256
const [openAPIResponses, setOpenAPIResponse] = React.useState(null);
5357
const [isApiResultLoading, setIsApiResultLoading] = React.useState(false);
5458
const [endpoints, setEndpoints] = React.useState([]);
5559
const [regionId, setRegionId] = React.useState<string>("cn-hangzhou");
60+
const [profileInfo, setProfileInfo] = React.useState({});
5661

5762
React.useEffect(() => {
5863
if (endpoints.length === 0) {
@@ -63,17 +68,32 @@ export const useAPIPageContext = (initialState = {} as APIPageState): APIPageSta
6368
}
6469
}, [initialState.product]);
6570

66-
const onDebug = (value) =>{
71+
React.useEffect(() => {
72+
PontUIService.requestProfiles().then((res) => {
73+
setProfileInfo(res || {});
74+
});
75+
}, []);
76+
77+
const onDebug = (value) => {
6778
setIsApiResultLoading(true);
68-
PontUIService.openAPIRequest(value).then(res=>{
79+
PontUIService.openAPIRequest(value).then((res) => {
6980
setIsApiResultLoading(false);
7081
const responses = {};
7182
// 根据文档名存储响应，切换API文档时展示对应的响应
72-
responses[res.doc] = res.response
83+
responses[res.doc] = res.response;
7384
setOpenAPIResponse(responses);
7485
});
75-
}
76-
return { ...initialState, openAPIResponses, onDebug, isApiResultLoading, endpoints, regionId, setRegionId };
86+
};
87+
return {
88+
...initialState,
89+
openAPIResponses,
90+
onDebug,
91+
isApiResultLoading,
92+
endpoints,
93+
regionId,
94+
setRegionId,
95+
profileInfo,
96+
};
7797
};
7898

79-
export const APIPageContext = createContainer(useAPIPageContext);
99+
export const APIPageContext = createContainer(useAPIPageContext);

0 commit comments

Comments
 (0)