fix: add red border on url with empty string

Signed-off-by: Md Asif Raza <itsmdasifraza@gmail.com>
sparrowapp-dev · Jun 5, 2024 · d162b7a · d162b7a
1 parent d922086
commit d162b7a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/src/packages/@workspaces/common/components/codemirror-input/CodeMirrorInput.svelte b/src/packages/@workspaces/common/components/codemirror-input/CodeMirrorInput.svelte
@@ -26,6 +26,8 @@
    * unique id used to focus codemirror input
    */
   export let codeId = "";
+  let componentClass = "";
+  export { componentClass as class };
 
   const environmentHelper = new EnvironmentHeper();
   let trackParanthesis: unknown[] = [];
@@ -108,6 +110,7 @@
   {placeholder}
   {disabled}
   {id}
+  {componentClass}
 />
 
 {#if trackParanthesis.length === 2 && filterData.length > 0}

diff --git a/...common/components/codemirror-input/sub-input/code-mirror-handler/CodeMirrorHandler.svelte b/...common/components/codemirror-input/sub-input/code-mirror-handler/CodeMirrorHandler.svelte
@@ -58,6 +58,7 @@
    * environment dialog box unique id
    */
   export let id;
+  export let componentClass;
 
   let inputWrapper: HTMLElement;
   let localEnvKey = "";
@@ -349,7 +350,7 @@
 </script>
 
 <div class="w-100 basic-code-mirror-input" bind:this={inputWrapper}>
-  <div class="" bind:this={codeMirrorEditorDiv} />
+  <div class={componentClass} bind:this={codeMirrorEditorDiv} />
 </div>
 <svelte:window on:keydown={handleKeyPress} />
 

diff --git a/...ages/@workspaces/features/rest-explorer/components/http-url-section/HttpUrlSection.svelte b/...ages/@workspaces/features/rest-explorer/components/http-url-section/HttpUrlSection.svelte
@@ -130,6 +130,7 @@
     {onUpdateEnvironment}
     {environmentVariables}
     codeId={"url"}
+    class={"input-url"}
   />
 
   <!-- Send button -->
@@ -139,7 +140,16 @@
     type="default"
     disable={isSendRequestInProgress ? true : false}
     onClick={() => {
-      onSendButtonClicked(environmentVariables);
+      if (requestUrl === "") {
+        const codeMirrorElement = document.querySelector(
+          ".input-url .cm-editor",
+        );
+        if (codeMirrorElement) {
+          codeMirrorElement.classList.add("url-red-border");
+        }
+      } else {
+        onSendButtonClicked(environmentVariables);
+      }
     }}
   />
 
@@ -185,4 +195,7 @@
     padding: 7px;
     background-color: var(--bg-secondary-400);
   }
+  :global(.url-red-border) {
+    border: 1px solid var(--border-danger-200) !important;
+  }
 </style>