feat: enable support for copy command as curl (#109)

feat: enable support for copy command as curl
user can copy the es query as a curl command to action it in the
terminal

Refs: #104

---------

Signed-off-by: seven <[email protected]>

package.json

@@ -2,7 +2,7 @@
   "name": "dockit",
   "private": true,
   "type": "module",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "DocKit is a desktop client designed for NoSQL database, support Elasticsearch and OpenSearch across Mac, windows and Linux",
   "author": "geekfun <[email protected]>",
   "homepage": "ttps://dockit.geekfun.club",

src/common/index.ts

@@ -5,3 +5,4 @@ export * from './pureObject';
 export * from './base64';
 export * from './crypto';
 export * from './valueConversion';
+export * from './requestUtil';

src/common/monaco/tokenlizer.ts

@@ -1,4 +1,4 @@
-import { Decoration, executeActions, monaco, SearchAction } from './';
+import { Decoration, Editor, executeActions, monaco, Range, SearchAction } from './';
 import JSON5 from 'json5';
 import { CustomError } from '../customError.ts';
 
@@ -46,6 +46,23 @@ export const buildSearchToken = (lines: Array<{ lineNumber: number; lineContent:
 
   return searchTokens;
 };
+export const getPositionAction = (position: Range) => {
+  return searchTokens.find(({ position: { startLineNumber, endLineNumber } }) => {
+    return position.startLineNumber >= startLineNumber && position.endLineNumber <= endLineNumber;
+  });
+};
+export const getPointerAction = (editor: Editor, tokens: Array<SearchAction>) => {
+  const { lineNumber } = editor?.getPosition() || {};
+  if (lineNumber === undefined || lineNumber === null) {
+    return;
+  }
+
+  return tokens.find(
+    ({ position: { startLineNumber, endLineNumber } }) =>
+      lineNumber >= startLineNumber && lineNumber <= endLineNumber,
+  );
+};
+
 export const executionGutterClass = 'execute-button-decoration';
 export const getActionMarksDecorations = (searchTokens: SearchAction[]): Array<Decoration> => {
   return searchTokens
@@ -57,8 +74,22 @@ export const getActionMarksDecorations = (searchTokens: SearchAction[]): Array<D
     .filter(Boolean)
     .sort((a, b) => (a as Decoration).id - (b as Decoration).id) as Array<Decoration>;
 };
-export const buildCodeLens = (searchTokens: SearchAction[], autoIndentCmdId: string) =>
-  searchTokens
+export const buildCodeLens = (
+  searchTokens: SearchAction[],
+  autoIndentCmdId: string,
+  copyAsCurlCmdId: string,
+) => {
+  const copyCurl = searchTokens.map(({ position }, index) => ({
+    range: { ...position, endLineNumber: position.startLineNumber },
+    id: `CopyAsCurl-${index}`,
+    command: {
+      id: copyAsCurlCmdId!,
+      title: 'Copy as CURL',
+      arguments: [position],
+    },
+  }));
+
+  const autoIndent = searchTokens
     .filter(({ qdsl }) => qdsl)
     .map(({ position }, index) => ({
       range: { ...position, endLineNumber: position.startLineNumber },
@@ -70,6 +101,9 @@ export const buildCodeLens = (searchTokens: SearchAction[], autoIndentCmdId: str
       },
     }));
 
+  return [...autoIndent, ...copyCurl];
+};
+
 export const formatQDSL = (
   searchTokens: SearchAction[],
   model: monaco.editor.ITextModel,
@@ -93,19 +127,50 @@ export const formatQDSL = (
   return lines.map(line => JSON5.stringify(line)).join('\n');
 };
 
-export const transformQDSL = (action: SearchAction) => {
+export const transformQDSL = ({ path, qdsl }: Pick<SearchAction, 'path' | 'qdsl'>) => {
   try {
-    const bulkAction = action.path.includes('_bulk');
+    const bulkAction = path.includes('_bulk');
     if (bulkAction) {
-      const dsql = action.qdsl
+      const bulkQdsl = qdsl
         .split('\n')
         .map(line => JSON.stringify(JSON5.parse(line)))
         .join('\n');
-      return `${dsql}\n`;
+      return `${bulkQdsl}\n`;
     }
 
-    return action.qdsl ? JSON.stringify(JSON5.parse(action.qdsl), null, 2) : undefined;
+    return qdsl ? JSON.stringify(JSON5.parse(qdsl), null, 2) : undefined;
   } catch (err) {
     throw new CustomError(400, (err as Error).message);
   }
 };
+
+export const transformToCurl = ({
+  method,
+  headers,
+  qdsl,
+  url,
+  ssl,
+}: {
+  url: string;
+  method: string;
+  headers: { [key: string]: string };
+  qdsl: string;
+  ssl: boolean | undefined;
+}) => {
+  let curlCmd = `curl -X ${method} '${url}'`;
+
+  if (url.startsWith('https') && ssl === false) {
+    curlCmd += ' --insecure';
+  }
+
+  if (headers) {
+    curlCmd += Object.entries(headers)
+      .map(([key, value]) => ` -H '${key}: ${value}'`)
+      .join('');
+  }
+  if (qdsl) {
+    curlCmd += ` -d '${transformQDSL({ path: url, qdsl })}'`;
+  }
+
+  return curlCmd;
+};

src/common/requestUtil.ts

@@ -0,0 +1,26 @@
+import { base64Encode } from './base64.ts';
+
+export const buildAuthHeader = (username: string | undefined, password: string | undefined) => {
+  const authorization =
+    username || password ? `Basic ${base64Encode(`${username}:${password}`)}` : undefined;
+  return authorization ? { authorization } : undefined;
+};
+
+export const buildURL = (
+  host: string,
+  port: number,
+  index: string | undefined,
+  path: string | undefined,
+  queryParameters?: string,
+) => {
+  const trimmedPath = path?.startsWith('/') ? path.slice(1) : path;
+  const pathWithIndex =
+    index &&
+    !['_nodes', '_cluster', '_cat', '_bulk', '_aliases', '_analyze'].includes(
+      trimmedPath?.split('/')[0] ?? '',
+    )
+      ? `${index}/${trimmedPath}`
+      : `${trimmedPath}`;
+
+  return `${host}:${port}/${pathWithIndex}${queryParameters ? `?${queryParameters}` : ''}`;
+};

src/datasources/fetchApi.ts

@@ -1,4 +1,4 @@
-import { base64Encode, CustomError, debug } from '../common';
+import { buildAuthHeader, buildURL, CustomError, debug } from '../common';
 import { lang } from '../lang';
 import { invoke } from '@tauri-apps/api/tauri';
 
@@ -21,14 +21,6 @@ const handleFetch = (result: { data: unknown; status: number; details: string |
   throw new CustomError(result.status, result.details || '');
 };
 
-const buildURL = (host: string, port: number, path?: string, queryParameters?: string) => {
-  let url = `${host}:${port}`;
-  url += path ?? '';
-  url += queryParameters ? `?${queryParameters}` : '';
-
-  return url;
-};
-
 const fetchWrapper = async ({
   method,
   path,
@@ -51,13 +43,10 @@ const fetchWrapper = async ({
   ssl: boolean;
 }) => {
   try {
-    const authorization =
-      username || password ? `Basic ${base64Encode(`${username}:${password}`)}` : undefined;
-
-    const url = buildURL(host, port, path, queryParameters);
+    const url = buildURL(host, port, undefined, path, queryParameters);
     const { data, status, details } = await fetchRequest(url, {
       method,
-      headers: { authorization },
+      headers: { ...buildAuthHeader(username, password) },
       payload,
       agent: { ssl },
     });

src/lang/enUS.ts

@@ -148,6 +148,8 @@ export const enUS = {
   editor: {
     establishedRequired: 'Select a DB instance before execute actions',
     invalidJson: 'Invalid JSON format',
+    copySuccess: 'Copied to clipboard',
+    copyFailure: 'Failed to copy to clipboard',
   },
   history: {
     empty: 'No history yet',

src/lang/zhCN.ts

@@ -148,6 +148,8 @@ export const zhCN = {
   editor: {
     establishedRequired: '请选择执行操作的数据库实例',
     invalidJson: '无效的 JSON 格式',
+    copySuccess: '已复制到粘贴板',
+    copyFailure: '复制失败',
   },
   history: {
     empty: '无历史记录',

src/store/connectionStore.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
-import { pureObject } from '../common';
+import { buildAuthHeader, buildURL, pureObject } from '../common';
 import { loadHttpClient, storeApi } from '../datasources';
+import { SearchAction, transformToCurl } from '../common/monaco';
 
 export type Connection = {
   id?: number;
@@ -85,7 +86,6 @@ export const useConnectionStore = defineStore('connectionStore', {
     async establishConnection(connection: Connection) {
       await this.testConnection(connection);
       const client = loadHttpClient(connection);
-
       const data = (await client.get('/_cat/indices', 'format=json')) as Array<{
         [key: string]: string;
       }>;
@@ -169,5 +169,22 @@ export const useConnectionStore = defineStore('connectionStore', {
       };
       return dispatch[method]();
     },
+    queryToCurl({ method, path, index, qdsl, queryParams }: SearchAction) {
+      const { username, password, host, port, sslCertVerification } = this.established ?? {
+        host: 'http://localhost',
+        port: 9200,
+        username: undefined,
+        password: undefined,
+      };
+      const params = queryParams ? `${queryParams}&format=json` : 'format=json';
+      const url = buildURL(host, port, index, path, params);
+
+      const headers = {
+        'Content-Type': 'application/json',
+        ...buildAuthHeader(username, password),
+      };
+
+      return transformToCurl({ method, headers, url, ssl: sslCertVerification, qdsl });
+    },
   },
 });

src/views/editor/index.vue

@@ -30,7 +30,10 @@ import {
   formatQDSL,
   getActionApiDoc,
   getActionMarksDecorations,
+  getPointerAction,
+  getPositionAction,
   monaco,
+  Range,
   SearchAction,
   transformQDSL,
 } from '../../common/monaco';
@@ -44,7 +47,7 @@ const { readSourceFromFile, saveSourceToFile } = sourceFileStore;
 const { defaultFile } = storeToRefs(sourceFileStore);
 
 const connectionStore = useConnectionStore();
-const { searchQDSL } = connectionStore;
+const { searchQDSL, queryToCurl } = connectionStore;
 const { established } = storeToRefs(connectionStore);
 const { getEditorTheme } = appStore;
 const { themeType } = storeToRefs(appStore);
@@ -54,6 +57,7 @@ const { insertBoard } = storeToRefs(chatStore);
 // https://github.com/tjx666/adobe-devtools/commit/8055d8415ed3ec5996880b3a4ee2db2413a71c61
 let queryEditor: Editor | null = null;
 let autoIndentCmdId: string | null = null;
+let copyCurlCmdId: string | null = null;
 // DOM
 const queryEditorRef = ref();
 const displayEditorRef = ref();
@@ -87,7 +91,7 @@ const codeLensProvider = monaco.languages.registerCodeLensProvider('search', {
     refreshActionMarks(queryEditor!, searchTokens);
 
     return {
-      lenses: buildCodeLens(searchTokens, autoIndentCmdId!),
+      lenses: buildCodeLens(searchTokens, autoIndentCmdId!, copyCurlCmdId!),
       dispose: () => {},
     };
   },
@@ -157,16 +161,17 @@ const executeQueryAction = async (position: { column: number; lineNumber: number
   }
 };
 
-const autoIndentAction = (editor: monaco.editor.IStandaloneCodeEditor) => {
+const autoIndentAction = (editor: monaco.editor.IStandaloneCodeEditor, position: Range) => {
   const model = editor?.getModel();
-  const { position } = getPointerAction(editor!, searchTokens) || {};
-  if (!position || !model) {
+  const action = getPositionAction(position);
+
+  if (!action || !model) {
     return;
   }
-  const { startLineNumber, endLineNumber } = position;
+  const { startLineNumber, endLineNumber } = action.position;
 
   try {
-    const formatted = formatQDSL(searchTokens, model, position);
+    const formatted = formatQDSL(searchTokens, model, action.position);
     model.pushEditOperations(
       [],
       [
@@ -192,16 +197,20 @@ const autoIndentAction = (editor: monaco.editor.IStandaloneCodeEditor) => {
   }
 };
 
-const getPointerAction = (editor: Editor, tokens: Array<SearchAction>) => {
-  const { lineNumber } = editor?.getPosition() || {};
-  if (lineNumber === undefined || lineNumber === null) {
+const copyCurlAction = (position: Range) => {
+  const action = getPositionAction(position);
+  if (!action) {
     return;
   }
-
-  return tokens.find(
-    ({ position: { startLineNumber, endLineNumber } }) =>
-      lineNumber >= startLineNumber && lineNumber <= endLineNumber,
-  );
+  try {
+    navigator.clipboard.writeText(queryToCurl(action));
+    message.success(lang.t('editor.copySuccess'));
+  } catch (err) {
+    message.error(`${lang.t('editor.copyFailed')}: ${JSON.stringify(err)}`, {
+      closable: true,
+      keepAliveOnHover: true,
+    });
+  }
 };
 
 const setupQueryEditor = (code: string) => {
@@ -216,7 +225,8 @@ const setupQueryEditor = (code: string) => {
     return;
   }
 
-  autoIndentCmdId = queryEditor.addCommand(0, () => autoIndentAction(queryEditor!));
+  autoIndentCmdId = queryEditor.addCommand(0, (...args) => autoIndentAction(queryEditor!, args[1]));
+  copyCurlCmdId = queryEditor.addCommand(0, (...args) => copyCurlAction(args[1]));
 
   queryEditor.onMouseDown(({ event, target }) => {
     if (
@@ -231,7 +241,10 @@ const setupQueryEditor = (code: string) => {
 
   // Auto indent current request
   queryEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI, () => {
-    autoIndentAction(queryEditor!);
+    const { position } = getPointerAction(queryEditor!, searchTokens) || {};
+    if (position) {
+      autoIndentAction(queryEditor!, position);
+    }
   });
 
   // Toggle Autocomplete