Skip to content

Commit

Permalink
Add interactive profiles configuration (#91)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
yini-chen committed Jun 24, 2024
1 parent 94e60d2 commit 6959970
Show file tree
Hide file tree
Showing 18 changed files with 8,283 additions and 5,464 deletions.
33 changes: 12 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,13 @@ English | [简体中文](./README.zh_CN.md)

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

- **Profiles Management :** Manage your Alibaba Cloud profiles.

- More features are under development, please stay tuned.

## Extension UI Guide

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

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

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

### Call the API

The feature requires you to configure your AK/SK information as follows:

1. Install Aliyun CLI: [Install guide](https://www.alibabacloud.com/help/en/cli/installation-guide).
2. Install [Alibaba Cloud CLI Tools](https://marketplace.visualstudio.com/items?itemName=alibabacloud-openapi.aliyuncli) extentions.
3. You can run the `aliyun configure` command for quick configuration.

```
$ aliyun configure
Configuring profile 'default' ...
Aliyun Access Key ID [None]: <Your AccessKey ID>
Aliyun Access Key Secret [None]: <Your AccessKey Secret>
Default Region Id [None]: cn-hangzhou
Default output format [json]: json
Default Language [zh]: zh
```
![API debugging](https://gw.alicdn.com/imgextra/i2/O1CN01fsuDBE1CLMJaBJj32_!!6000000000064-0-tps-3238-1920.jpg)

4. Click the Alibaba Cloud icon in VS Code status bar to manage your profiles.
![](https://img.alicdn.com/imgextra/i1/O1CN0144NU9N1L4G1cq89Uf_!!6000000001245-0-tps-248-46.jpg)
![](https://img.alicdn.com/imgextra/i2/O1CN01btLUkc1ldEHJQ0w4S_!!6000000004841-0-tps-1206-190.jpg)
More information please refer to the [Alibaba Cloud CLI Documentation](https://github.com/aliyun/aliyun-cli?tab=readme-ov-file#configure).
> 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.
![API debug](https://img.alicdn.com/imgextra/i3/O1CN01yfMcHl1i6lNdjzmzs_!!6000000004364-2-tps-2688-1820.png)
![manage profiles](https://gw.alicdn.com/imgextra/i2/O1CN01HzFhxH20gdVF4MIfq_!!6000000006879-0-tps-1938-378.jpg)

### SDK Code Sample

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

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

### Profiles Management

Add and switch your Alibaba Cloud profiles.

![](https://img.alicdn.com/imgextra/i1/O1CN01NN667S1skk7vLbhr1_!!6000000005805-0-tps-2912-1596.jpg)

## Feedback

- Submit bug reports and feature requests on [our Github repository](https://github.com/aliyun/alibabacloud-api-vscode-toolkit/issues).
Expand Down
33 changes: 12 additions & 21 deletions README.zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,13 @@ Alibaba Cloud API Toolkit 是一个轻量化的阿里云 API 工具,支持在

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

- **profiles 管理:** 管理你的阿里云 profiles。

- 更多功能正在开发中,敬请期待...

## 插件 UI 导览

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

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

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

### API 调试

调试功能需要配置你的 AK/SK 信息,配置方法如下:

1. 安装阿里云 CLI:[安装指南](https://help.aliyun.com/zh/cli/installation-guide)
2. 安装 [Alibaba Cloud CLI Tools](https://marketplace.visualstudio.com/items?;itemName=alibabacloud-openapi.aliyuncli) 插件;
3. 输入 `aliyun configure` 命令,按照提示进行配置,

```
$ aliyun configure
Configuring profile 'default' ...
Aliyun Access Key ID [None]: <Your AccessKey ID>
Aliyun Access Key Secret [None]: <Your AccessKey Secret>
Default Region Id [None]: cn-hangzhou
Default output format [json]: json
Default Language [zh]: zh
```
![API debug](https://gw.alicdn.com/imgextra/i2/O1CN01fsuDBE1CLMJaBJj32_!!6000000000064-0-tps-3238-1920.jpg)

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

### SDK 示例

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

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

### Profiles 管理

新增和切换你的阿里云 profiles。

![](https://img.alicdn.com/imgextra/i1/O1CN01NN667S1skk7vLbhr1_!!6000000005805-0-tps-2912-1596.jpg)

## 反馈

- 欢迎在我们的 [Github repository](https://github.com/aliyun/alibabacloud-api-vscode-toolkit/issues) 上提交你的问题和建议。
Expand Down
38 changes: 19 additions & 19 deletions media/src/components/APIPage/APIDebugger/utils.ts
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
export const getCustomWidget = (schema): string => {
if (schema?.type === 'array') {
if (schema?.type === "array") {
// if (schema.items?.type === 'string' && schema?.widget === 'stringList') {
// return 'stringList';
// }
return 'list';
return "list";
}
if (schema?.type === 'string') {
if (schema?.type === "string") {
if (schema?.isFileTransferUrl) {
return 'fileTypeSelect';
return "file";
}
if (schema?.format === 'binary') {
return 'file';
if (schema?.format === "binary") {
return "file";
}
if (schema?.enum || schema?.enumValueTitles) {
return 'enum';
return "enum";
}
return 'string';
} else if (schema?.type === 'boolean') {
return 'booleanSwitch';
} else if (schema?.type === 'object' && schema?.additionalProperties) {
return 'map';
} else if (schema?.type === 'object' && !schema?.properties) {
return 'json';
} else if (schema?.type === 'any') {
return 'typeSelect';
return "string";
} else if (schema?.type === "boolean") {
return "booleanSwitch";
} else if (schema?.type === "object" && schema?.additionalProperties) {
return "map";
} else if (schema?.type === "object" && !schema?.properties) {
return "json";
} else if (schema?.type === "any") {
return "typeSelect";
} else if ((schema?.ref || schema?.$ref) && !schema?.properties && !schema?.items) {
return 'struct';
return "struct";
}
// else if (schema?.type === 'number' || (schema?.type === 'integer' && schema?.format === 'int64')){
// return "string"
// }
return '';
};
return "";
};
43 changes: 22 additions & 21 deletions media/src/components/APIPage/TryAPI/TryAPI.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { EditorLanguages } from "../../../types/EditorLanguages";
import I18N from "../../../utils/I18N";
import { getEditorMenuItems, parseXml } from "../../utils";
import { APIPageContext } from "../context";
import { PontUIService } from "../../../service/UIService";

export class TryAPIProps {}

Expand All @@ -31,7 +32,8 @@ const TAB_PANES = [
];

export const TryAPI: React.FC<TryAPIProps> = (props) => {
const { openAPIResponses, isApiResultLoading, version, apiMeta, product, mode } = APIPageContext.useContainer();
const { openAPIResponses, isApiResultLoading, version, apiMeta, product, mode, profileInfo } =
APIPageContext.useContainer();
const doc = `${product}::${version}::${apiMeta.name}`;
const [tab, setTab] = React.useState(TAB_PANES[0].value);
const apiResult = openAPIResponses?.[doc];
Expand Down Expand Up @@ -138,18 +140,15 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
<Alert
message={
<div>
调试需要
<a href="https://help.aliyun.com/zh/cli/installation-guide/" target="_blank">
安装
</a>
阿里云 CLI 并
<a
href="https://help.aliyun.com/zh/cli/interactive-configuration-or-fast-configuration#section-5pj-p7j-06z"
target="_blank"
>
配置
</a>
您的 AK/SK 信息。{I18N.main.explorer.AKTip}
{profileInfo?.current?.length ? null : (
<span>
调试需要配置您的 AK/SK 信息,
<a onClick={() => PontUIService.openProfileManager()} className="text-blue-500">
点击配置。
</a>
</span>
)}
{I18N.main.explorer.AKTip}
</div>
}
type="warning"
Expand All @@ -165,14 +164,16 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
) : null}

<div className="api-res-header">
<div className="title mb-4 text-gray-900 text-sm font-medium">{I18N.main.explorer.overview}</div>
<div className="title mb-4 text-sm font-medium text-gray-900">{I18N.main.explorer.overview}</div>
{/* {apiResult?.result || props.isApiResultLoading ? ( */}
<div className="res-info mb-4 flex">
<div className="item mr-6 mx-1 inline-block">
<div className="item mx-1 mr-6 inline-block">
<div className="debug-res flex">
<div
className={`codicon codicon-${
String(statusCode).startsWith("2") ? "pass-filled success text-green-600" : "error error-red text-red-700"
String(statusCode).startsWith("2")
? "pass-filled success text-green-600"
: "error error-red text-red-700"
}`}
></div>
<div className="value">
Expand All @@ -181,21 +182,21 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
</div>
</div>
{apiResult && statusCode ? (
<div className="item mr-6 mx-1">
<div className="item mx-1 mr-6">
{/* {httpStatusMessageMap[statusCode] || statusCode} */}
<span className="label font-medium mr-1 text-gray-500">{I18N.main.explorer.statusCode}</span>
<span className="label mr-1 font-medium text-gray-500">{I18N.main.explorer.statusCode}</span>
<span
className={`value result-status font-medium ${
String(statusCode).startsWith("2") ? "text-green-600 success" : "error error-red text-red-700"
String(statusCode).startsWith("2") ? "success text-green-600" : "error error-red text-red-700"
}`}
>
{statusCode}
</span>
</div>
) : null}
{apiResult ? (
<div className="item mr-6 mx-1">
<span className="label font-medium mr-1 text-gray-500">{I18N.main.explorer.time}</span>
<div className="item mx-1 mr-6">
<span className="label mr-1 font-medium text-gray-500">{I18N.main.explorer.time}</span>
<span className="value">{apiResult.cost}ms</span>
</div>
) : null}
Expand Down
64 changes: 42 additions & 22 deletions media/src/components/APIPage/context.ts
Original file line number Diff line number Diff line change
@@ -1,58 +1,63 @@
/**
* @author yini-chen
*/
import { createContainer } from 'unstated-next';
import { SemixFormProps } from '../SemixFormRender';
import React from 'react';
import { PontUIService } from '../../service/UIService';
import { OpenAPIResponse, OpenAPIRequestResult } from '../../types/openAPI';
import { endpointsMocks } from '../../mocks/endpoints';
import { getVSCode } from '../../utils/utils';
import { createContainer } from "unstated-next";
import { SemixFormProps } from "../SemixFormRender";
import React from "react";
import { PontUIService } from "../../service/UIService";
import { OpenAPIResponse, OpenAPIRequestResult } from "../../types/openAPI";
import { endpointsMocks } from "../../mocks/endpoints";
import { getVSCode } from "../../utils/utils";

export class APIPageState {
export class APIPageState {
/**
* apiMeta
*/
apiMeta: any;
/**
* schemaForm
*/
schemaForm: SemixFormProps['form'];
schemaForm: SemixFormProps["form"];
product: string;
version:string;
version: string;
/**
* openapi sdk 响应组
*/
openAPIResponses?= {};
openAPIResponses? = {};
/**
* 发起调试
*/
onDebug?:(value:any)=>void;
onDebug?: (value: any) => void;
/**
* 发起调用loading
*/
isApiResultLoading? = false
isApiResultLoading? = false;
/**
* 模式选择
*/
mode: 'debug' | 'doc' |'sdk' = 'debug';
changeMode: (mode: 'debug' | 'doc' | 'sdk') => void;
mode: "debug" | "doc" | "sdk" = "debug";
changeMode: (mode: "debug" | "doc" | "sdk") => void;
/**
* 服务地址
*/
endpoints?: any[];
/**
* regionId
*/
regionId? = 'cn-hangzhou';
regionId? = "cn-hangzhou";
setRegionId?: (regionId: string) => void;
/**
* profileInfo
*/
profileInfo?: any;
}

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

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

const onDebug = (value) =>{
React.useEffect(() => {
PontUIService.requestProfiles().then((res) => {
setProfileInfo(res || {});
});
}, []);

const onDebug = (value) => {
setIsApiResultLoading(true);
PontUIService.openAPIRequest(value).then(res=>{
PontUIService.openAPIRequest(value).then((res) => {
setIsApiResultLoading(false);
const responses = {};
// 根据文档名存储响应,切换API文档时展示对应的响应
responses[res.doc] = res.response
responses[res.doc] = res.response;
setOpenAPIResponse(responses);
});
}
return { ...initialState, openAPIResponses, onDebug, isApiResultLoading, endpoints, regionId, setRegionId };
};
return {
...initialState,
openAPIResponses,
onDebug,
isApiResultLoading,
endpoints,
regionId,
setRegionId,
profileInfo,
};
};

export const APIPageContext = createContainer(useAPIPageContext);
export const APIPageContext = createContainer(useAPIPageContext);
Loading

0 comments on commit 6959970

Please sign in to comment.