From 329d95eb33359447ecd98e3aa6db51979f69ac62 Mon Sep 17 00:00:00 2001 From: Lokesh Goel <113521973+lokesh-couchbase@users.noreply.github.com> Date: Tue, 31 Oct 2023 12:27:37 +0530 Subject: [PATCH] Da 321 add tooltips for cli tools (#322) --- src/webViews/clusterOverview.webview.ts | 2 +- src/webViews/connectionScreen.webview.ts | 2 +- src/webViews/tools/dataExport.webview.ts | 71 ++++++++++++++--- .../getDatasetAndCollection.webview.ts | 69 ++++++++++++++-- .../getKeysAndAdvancedSettings.webview.ts | 79 ++++++++++++++++--- src/webViews/tools/ddlExport.webview.ts | 33 +++++++- 6 files changed, 222 insertions(+), 34 deletions(-) diff --git a/src/webViews/clusterOverview.webview.ts b/src/webViews/clusterOverview.webview.ts index 9e60a021..ed15b790 100644 --- a/src/webViews/clusterOverview.webview.ts +++ b/src/webViews/clusterOverview.webview.ts @@ -1,6 +1,6 @@ import { IClusterOverview } from "../types/IClusterOverview"; export function getClusterOverview(overview: IClusterOverview): string { - return ` + return /*HTML*/` diff --git a/src/webViews/connectionScreen.webview.ts b/src/webViews/connectionScreen.webview.ts index 2d3c53f4..ef73947d 100644 --- a/src/webViews/connectionScreen.webview.ts +++ b/src/webViews/connectionScreen.webview.ts @@ -15,7 +15,7 @@ */ export const getClusterConnectingFormView = (message: any) => { - return ` + return /*HTML*/` diff --git a/src/webViews/tools/dataExport.webview.ts b/src/webViews/tools/dataExport.webview.ts index f71ebaee..9af21878 100644 --- a/src/webViews/tools/dataExport.webview.ts +++ b/src/webViews/tools/dataExport.webview.ts @@ -194,6 +194,33 @@ export const dataExportWebview = async (buckets: string[]): Promise => { transition: transform 0.2s; margin-right:5px; } + + .tooltip { + position: relative; + display: inline-block; + } + + .tooltip .tooltiptext { + visibility: hidden; + width: 400px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 10px; + position: absolute; + z-index: 1; + bottom: 100%; + left: 50%; + margin-left: -40px; + opacity: 0; + transition: opacity 0s; + } + + .tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; + } @@ -201,7 +228,10 @@ export const dataExportWebview = async (buckets: string[]): Promise => {

Export Data

- +

Before proceeding do checkout Couchbase docs for CB Export

+
- +
- +
- +
- +
- +
- +
- +
Choose
@@ -252,11 +296,18 @@ export const dataExportWebview = async (buckets: string[]): Promise => { Advanced Settings
- +
- +
diff --git a/src/webViews/tools/dataImport/getDatasetAndCollection.webview.ts b/src/webViews/tools/dataImport/getDatasetAndCollection.webview.ts index 91b34cf5..2ee6221f 100644 --- a/src/webViews/tools/dataImport/getDatasetAndCollection.webview.ts +++ b/src/webViews/tools/dataImport/getDatasetAndCollection.webview.ts @@ -121,17 +121,48 @@ export const getDatasetAndCollection = async ( .redButton:hover { background: #bb1117; } + + .tooltip { + position: relative; + display: inline-block; + } + + .tooltip .tooltiptext { + visibility: hidden; + width: 400px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 10px; + position: absolute; + z-index: 1; + bottom: 100%; + left: 50%; + margin-left: -40px; + opacity: 0; + transition: opacity 0s; + } + + .tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; + }

Import Data

+

Before proceeding do checkout Couchbase docs for CB Import

Dataset
- + +
Choose
@@ -143,7 +174,9 @@ export const getDatasetAndCollection = async (
- +
- +
- +
diff --git a/src/webViews/tools/dataImport/getKeysAndAdvancedSettings.webview.ts b/src/webViews/tools/dataImport/getKeysAndAdvancedSettings.webview.ts index b454ad86..3d549b9b 100644 --- a/src/webViews/tools/dataImport/getKeysAndAdvancedSettings.webview.ts +++ b/src/webViews/tools/dataImport/getKeysAndAdvancedSettings.webview.ts @@ -166,7 +166,32 @@ export const getKeysAndAdvancedSettings = ( margin-right:5px; } - + .tooltip { + position: relative; + display: inline-block; + } + + .tooltip .tooltiptext { + visibility: hidden; + width: 400px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 10px; + position: absolute; + z-index: 1; + bottom: 100%; + left: 50%; + margin-left: -40px; + opacity: 0; + transition: opacity 0s; + } + + .tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; + } @@ -178,7 +203,9 @@ export const getKeysAndAdvancedSettings = (
- +
-
-
+
Note: If random UUID or #UUID# tag is used, the UUID values in the preview area might not match the actual UUID values generated during import.
- +
+ +
Fetch preview
@@ -214,23 +255,33 @@ export const getKeysAndAdvancedSettings = (
- +
- +
- +
- +
- +
@@ -249,12 +300,14 @@ export const getKeysAndAdvancedSettings = ( function onKeyOptionsClick(value) { document.getElementById('fieldNameContainer').setAttribute('hidden',""); document.getElementById('customExpressionContainer').setAttribute('hidden',""); + document.getElementById('UUID-warn').setAttribute('hidden',""); if(value === "random") { - // Don't show any field + document.getElementById('UUID-warn').removeAttribute('hidden',""); } else if (value === "fieldValue"){ document.getElementById('fieldNameContainer').removeAttribute('hidden'); } else if (value === "customExpression") { document.getElementById('customExpressionContainer').removeAttribute('hidden'); + document.getElementById('UUID-warn').removeAttribute('hidden',""); } } diff --git a/src/webViews/tools/ddlExport.webview.ts b/src/webViews/tools/ddlExport.webview.ts index 50c2484a..0a63ebd4 100644 --- a/src/webViews/tools/ddlExport.webview.ts +++ b/src/webViews/tools/ddlExport.webview.ts @@ -1,5 +1,5 @@ export const ddlExportWebview = async (buckets: string[]): Promise => { - return ` + return /*HTML*/` @@ -189,6 +189,33 @@ export const ddlExportWebview = async (buckets: string[]): Promise => { color: white; height: 100%; } + + .tooltip { + position: relative; + display: inline-block; + } + + .tooltip .tooltiptext { + visibility: hidden; + width: 400px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 10px; + position: absolute; + z-index: 1; + bottom: 100%; + left: 50%; + margin-left: -40px; + opacity: 0; + transition: opacity 0s; + } + + .tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; + } @@ -213,7 +240,9 @@ export const ddlExportWebview = async (buckets: string[]): Promise => {
- +
Choose