Feat/documentation implementation

src/packages/@app/pages/EnvironmentPage/EnvironmentPage.ViewModel.ts

@@ -8,12 +8,14 @@ import { environmentType } from "$lib/utils/enums/environment.enum";
 import MixpanelEvent from "$lib/utils/mixpanel/MixpanelEvent";
 import { InitTab } from "@common/factory";
 import { v4 as uuidv4 } from "uuid";
+import { GuideRepository } from "@app/repositories/guide.repository";
 
 export class EnvironmentViewModel {
   private workspaceRepository = new WorkspaceRepository();
   private environmentRepository = new EnvironmentRepository();
   private environmentTabRepository = new EnvironmentTabRepository();
   private environmentService = new EnvironmentService();
+  private guideRepository = new GuideRepository();
   private initTab = new InitTab();
 
   constructor() {}
@@ -79,6 +81,17 @@ export class EnvironmentViewModel {
     return;
   };
 
+public closeHelpText = async () => {
+  onFetchCollectionGuide({ id: "collection-guide" });
+              onFetchEnvironmentGuide({ id: "environment-guide" });
+
+              if (id === "collection-guide") {
+                onUpdateCollectionGuide({ id: "collection-guide" }, false);
+              } else if (id === "environment-guide") {
+                onUpdateEnvironmentGuide({ id: "environment-guide" }, false);
+              }
+}
+
   /**
    * @description - deletes environment tab
    * @param environmentId - environment id needs to be deleted
@@ -316,3 +329,11 @@ export class EnvironmentViewModel {
     }
   };
 }
+function onFetchEnvironmentGuide(arg0: { id: string; }) {
+  throw new Error("Function not implemented.");
+}
+
+function onFetchCollectionGuide(arg0: { id: string; }) {
+  throw new Error("Function not implemented.");
+}
+

src/packages/@app/pages/RestExplorer/RestExplorerPage.ViewModel.ts

@@ -247,8 +247,13 @@ class RestExplorerViewModel
     const progressiveTab = createDeepCopy(this._tab.getValue());
     progressiveTab.description = _description;
     progressiveTab.isSaved = false;
+    try {
+      await this.tabRepository.updateTab(progressiveTab.tabId, progressiveTab);
+      notifications.success("Documentation updated");
+    } catch (error) {
+      notifications.error("Failed to update the documentation. Please try again");
+    } 
     this.tab = progressiveTab;
-    this.tabRepository.updateTab(progressiveTab.tabId, progressiveTab);
   };
 
   /**

src/packages/@app/styles/style.scss

@@ -105,8 +105,9 @@ $theme-grey-272727: #272727;
 $theme-grey-212222: #212222;
 $theme-grey-1A1A1A: #1A1A1A;
 $theme-grey-161617: #161617;
-$theme-grey-151515: #151515;
+$theme-grey-151515: #121212;
 $theme-grey-000000: #000000;
+$theme-grey-191919: #191919;
 
 
 $theme-blue-F5F6F8: #F5F6F8;
@@ -249,6 +250,7 @@ $theme-red-230408: #230408;
   --text-secondary-300 : #{$theme-grey-45494D};
   --text-secondary-350 : #{$theme-grey-636566};
   --text-secondary-400 : #{$theme-grey-313233};
+  --text-secondary-450 : #{$theme-grey-191919};
   --text-secondary-500 : #{$theme-grey-272727};
   --text-secondary-600 : #{$theme-grey-212222};
   --text-secondary-700 : #{$theme-grey-161617};
@@ -295,6 +297,7 @@ $theme-red-230408: #230408;
   --bg-secondary-200 : #{$theme-grey-8A9299};
   --bg-secondary-300 : #{$theme-grey-45494D};
   --bg-secondary-400 : #{$theme-grey-313233};
+  --bg-secondary-450 : #{$theme-grey-191919};
   --bg-secondary-500 : #{$theme-grey-272727};
   --bg-secondary-550 : #{$theme-grey-1A1A1A};
   --bg-secondary-600 : #{$theme-grey-212222};
@@ -340,6 +343,7 @@ $theme-red-230408: #230408;
   --border-secondary-200 : #{$theme-grey-8A9299};
   --border-secondary-300 : #{$theme-grey-45494D};
   --border-secondary-400 : #{$theme-grey-313233};
+  --border-secondary-450 : #{$theme-grey-191919};
   --border-secondary-500 : #{$theme-grey-272727};
   --border-secondary-600 : #{$theme-grey-212222};
   --border-secondary-700 : #{$theme-grey-161617};
@@ -380,6 +384,7 @@ $theme-red-230408: #230408;
   --icon-secondary-200 : #{$theme-grey-8A9299};
   --icon-secondary-300 : #{$theme-grey-45494D};
   --icon-secondary-400 : #{$theme-grey-313233};
+  --icon-secondary-450 : #{$theme-grey-191919};
   --icon-secondary-500 : #{$theme-grey-272727};
   --icon-secondary-600 : #{$theme-grey-212222};
   --icon-secondary-700 : #{$theme-grey-161617};

src/packages/@common/types/workspace/request.ts

@@ -48,6 +48,7 @@ export enum RequestSectionEnum {
   AUTHORIZATION = "Authorization",
   HEADERS = "Headers",
   REQUEST_BODY = "Request Body",
+  DOCUMENTATION = "Description",
 }
 export enum ResponseFormatterEnum {
   PRETTY = "Pretty",

src/packages/@library/icons/Edit.svelte

@@ -0,0 +1,19 @@
+<script>
+    export let height = "24px";
+    export let width = "24px";
+    export let color = "grey";
+  </script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 12 12"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M10.4915 1.11758C10.0353 0.661328 9.29775 0.661328 8.8415 1.11758L8.21442 1.74258L10.254 3.78216L10.8811 3.15508C11.3373 2.69883 11.3373 1.96133 10.8811 1.50508L10.4915 1.11758ZM4.25817 5.70091C4.13109 5.82799 4.03317 5.98424 3.97692 6.15716L3.36025 8.00716C3.29984 8.18633 3.34775 8.38424 3.48109 8.51966C3.61442 8.65508 3.81234 8.70091 3.99359 8.64049L5.84359 8.02383C6.01442 7.96758 6.17067 7.86966 6.29984 7.74258L9.78525 4.25508L7.74359 2.21341L4.25817 5.70091ZM2.6665 1.99883C1.56234 1.99883 0.666504 2.89466 0.666504 3.99883V9.33216C0.666504 10.4363 1.56234 11.3322 2.6665 11.3322H7.99984C9.104 11.3322 9.99984 10.4363 9.99984 9.33216V7.33216C9.99984 6.96341 9.70192 6.66549 9.33317 6.66549C8.96442 6.66549 8.6665 6.96341 8.6665 7.33216V9.33216C8.6665 9.70091 8.36859 9.99883 7.99984 9.99883H2.6665C2.29775 9.99883 1.99984 9.70091 1.99984 9.33216V3.99883C1.99984 3.63008 2.29775 3.33216 2.6665 3.33216H4.6665C5.03525 3.33216 5.33317 3.03424 5.33317 2.66549C5.33317 2.29674 5.03525 1.99883 4.6665 1.99883H2.6665Z"
+    fill={color}
+  />
+</svg>
+

src/packages/@library/icons/index.ts

@@ -32,5 +32,6 @@ export { default as RocketIcon } from "./RocketIcon.svelte";
 export { default as CollectionIcon } from "./Collection.svelte";
 export { default as FolderIcon2 } from "./Folder2.svelte";
 export { default as WorkspaceIcon } from "./Workspace.svelte";
+export { default as EditIcon } from "./Edit.svelte";
 export { default as Ellipse } from "./Ellipse.svelte";
 

src/packages/@library/ui/label/Label.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   export let number: number;
   export let size = "15px";
-  export let textColor = "var(--text-primary-350)";
-  export let backgroundColor = "bg-secondary-500";
+  // export let textColor = "var(--text-primary-350)";
+  // export let backgroundColor = "bg-secondary-500";
 </script>
 
 <div
-  class="label d-flex align-items-center justify-content-center {backgroundColor}"
-  style="height: {size}; width: {size};"
+  class="label d-flex align-items-center justify-content-center "
+  style="height: {size}; width: {size}; background-color:#4D4D4D !important; z-index:5;"
 >
-<p class="mb-0 fw-bold sparrow-fs-10" style="color:{textColor};" >{number}</p>
+<p class="mb-0 fw-bold sparrow-fs-10" style="color:#87b9f7;" >{number}</p>
 </div>
 
 <style>

src/packages/@workspaces/common/components/tabular-input/TabularInput.svelte

@@ -9,6 +9,7 @@
   import close from "$lib/assets/close.svg";
   import { TabularInputTheme } from "../../utils";
   import { CodeMirrorInput } from "../";
+    import Tooltip from "@library/ui/tooltip/Tooltip.svelte";
   type Mode = "READ" | "WRITE";
 
   export let keyValue: KeyValuePair[] | KeyValuePairWithBase[];
@@ -157,7 +158,7 @@
   class="mb-0 me-0 w-100 bg-secondary-700 ps-3 py-0 border-radius-2 section-layout"
 >
   <div
-    class="d-flex gap-3 py-1 align-items-center w-100 ps-2 {mode === 'READ'
+    class="d-flex gap-3 mb-1 py-1 align-items-center w-100 ps-2 {mode === 'READ'
       ? 'd-none'
       : ''}"
     style="height:26px;"
@@ -183,8 +184,8 @@
       class="d-flex pair-title bg-secondary-700 align-items-center w-100"
       style="font-size: 12px; font-weight: 500;"
     >
-      <p class="mb-0 w-50 text-secondary-200 text-fs-12 p-1 ps-1">Key</p>
-      <p class="mb-0 w-50 text-secondary-200 text-fs-12 p-1 ps-0">Value</p>
+      <p class="mb-0 w-50 text-secondary-200 text-fs-12 p-1 ps-1" style="font-weight: 1000;">Key</p>
+      <p class="mb-0 w-50 text-secondary-200 text-fs-12 p-1 ps-0" style="font-weight: 1000;">Value</p>
     </div>
     <div class="h-75 pe-1">
       <button class="border-0" style="width:40px;" />
@@ -262,8 +263,8 @@
           style="padding-top: 1px;  display: flex;flex-direction: column;width:100%;"
         >
           <div
-            class="d-flex w-100 align-items-center justify-content-center gap-3 pair-container"
-            style="padding-top:3px; padding-bottom:3px; height:24px;"
+            class="d-flex w-100 align-items-center justify-content-center gap-3 pair-container "
+            style="padding-top:3px; padding-bottom:3px; height:24px; padding-bottom:3px;"
           >
             <img
               src={dragIcon}
@@ -286,8 +287,8 @@
               {/if}
             </div>
 
-            <div class=" d-flex gap-0" style="width:calc(100% - 120px)">
-              <div class="w-50 position-relative">
+            <div class=" d-flex gap-0" style="width:calc(100% - 120px);">
+              <div class="w-50 position-relative ">
                 <CodeMirrorInput
                   bind:value={element.key}
                   onUpdateInput={() => {
@@ -303,7 +304,7 @@
               {#if type === "file"}
                 <div class="w-50">
                   <div
-                    class="position-relative rounded p-1 d-flex backgroundColor"
+                    class="position-relative rounded  p-1 d-flex backgroundColor"
                     style="height: 27px;"
                   >
                     {#if element.value === ""}
@@ -392,13 +393,15 @@
               <div class="h-75 pe-1">
                 <button class="bg-secondary-700 border-0" style="width:40px;">
                   {#if mode !== "READ"}
-                    <img
+                  <Tooltip title={"Delete"} placement={"left"} distance={10}>
+                    <img class="trash-icon"
                       src={trashIcon}
                       on:click={() => {
                         deleteParam(index);
                       }}
                       alt=""
                     />
+                  </Tooltip>
                   {/if}
                 </button>
               </div>
@@ -476,7 +479,7 @@
   /* When the checkbox is checked, add a blue background */
   .container input:checked ~ .checkmark {
     border: none;
-    background-color: var(--text-primary-200);
+    background-color: var(--text-primary-300);
   }
 
   /* Create the checkmark/indicator (hidden when not checked) */
@@ -503,4 +506,7 @@
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
   }
+  .trash-icon:hover{
+    background-color: var(--text-secondary-500);
+  }
 </style>

src/packages/@workspaces/common/utils/tabular-input-theme.ts

@@ -30,7 +30,7 @@ export class TabularInputTheme {
         alignItems: "center",
       },
       ".cm-textfield": {
-        backgroundColor: "var(--background-color)",
+        backgroundColor: "var(--background-color)",      
       },
       ".cm-button": {
         backgroundColor: "var(--background-color)",
@@ -64,8 +64,8 @@ export class TabularInputTheme {
         fontWeight: "400",
       },
       "&.cm-editor.cm-focused": {
-        // border: "1px solid var(--border-primary-200)",
-        backgroundColor: "var(--bg-secondary-550)",
+        border: "1px solid var(--border-primary-200)",
+        backgroundColor: "var(--text-secondary-500)",
         borderRadius: "0",
       },
       ".cm-scroller::-webkit-scrollbar": {

src/packages/@workspaces/features/rest-explorer/components/http-url-section/HttpUrlSection.svelte

@@ -8,12 +8,12 @@
     UpdateRequestMethodType,
     UpdateRequestUrlType,
   } from "@workspaces/common/type";
-  import { DiskIcon } from "@library/icons";
   import { notifications } from "@library/ui/toast/Toast";
   import DropButton from "$lib/components/buttons/DropButton.svelte";
   import { CodeMirrorInput } from "../../../../common/components";
   import { UrlInputTheme } from "../../../../common/utils/";
   import Tooltip from "@library/ui/tooltip/Tooltip.svelte";
+  import { DiskIcon } from "@library/icons";
   let componentClass = "";
   export { componentClass as class };
 
@@ -173,22 +173,22 @@
     }}
   /> -->
   <Tooltip title={"Save"} placement={"bottom"} distance={12} >
-  <button
-    class="ms-2 save-disk d-flex align-items-center justify-content-center border-radius-2 border-0"
-    on:click={handleSaveRequest}
-    on:mouseenter={handleMouseEnter}
-    on:mouseleave={handleMouseLeave}
-    disabled={isSave ? true : false}
-  >
-    <DiskIcon
-      height={22}
-      width={22}
-      color={isHovered && !isSave
-        ? "var(--text-primary-200)"
-        : "var(--text-secondary-200)"}
-    />
-  </button>
-</Tooltip>
+    <button
+      class="ms-2 save-disk d-flex align-items-center justify-content-center border-radius-2 border-0"
+      on:click={handleSaveRequest}
+      on:mouseenter={handleMouseEnter}
+      on:mouseleave={handleMouseLeave}
+      disabled={isSave ? true : false}
+    >
+      <DiskIcon
+        height={22}
+        width={22}
+        color={isHovered && !isSave
+          ? "var(--text-primary-200)"
+          : "var(--text-secondary-200)"}
+      />
+    </button>
+  </Tooltip>
 </div>
 <svelte:window on:keydown={handleKeyPress} />