Fix styles in datasource select

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -30,7 +30,7 @@
   export let showAllQueries
 
   $: text = value?.label ?? "Choose an option"
-  $: tables = $tablesStore.list.map((m) => ({
+  $: tables = $tablesStore.list.map(m => ({
     label: m.name,
     tableId: m._id,
     type: "table",
@@ -46,9 +46,9 @@
   }, [])
   $: queries = $queriesStore.list
     .filter(
-      (query) => showAllQueries || query.queryVerb === "read" || query.readable
+      query => showAllQueries || query.queryVerb === "read" || query.readable
     )
-    .map((query) => ({
+    .map(query => ({
       label: query.name,
       name: query.name,
       tableId: query._id,
@@ -61,15 +61,15 @@
     $currentAsset,
     $store.selectedComponentId
   )
-  $: queryBindableProperties = bindableProperties.map((property) => ({
+  $: queryBindableProperties = bindableProperties.map(property => ({
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
     path: property.readableBinding,
   }))
   $: links = bindableProperties
-    .filter((x) => x.fieldSchema?.type === "link")
+    .filter(x => x.fieldSchema?.type === "link")
-    .map((property) => {
+    .map(property => {
       return {
         providerId: property.providerId,
         label: property.readableBinding,
@@ -89,7 +89,7 @@
   }
 
   function fetchQueryDefinition(query) {
-    const source = $datasources.list.find((ds) => ds._id === query.datasourceId)
+    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
       .source
     return $integrations[source].query[query.queryVerb]
   }
@@ -100,20 +100,18 @@
     readonly
     value={text}
     options={[text]}
-    on:click={dropdownRight.show}
+    on:click={dropdownRight.show} />
-  />
+  {#if value?.type === 'query'}
-  {#if value?.type === "query"}
     <i class="ri-settings-5-line" on:click={drawer.show} />
-    <Drawer title={"Query Parameters"} bind:this={drawer}>
+    <Drawer title={'Query Parameters'} bind:this={drawer}>
       <Button
         slot="buttons"
         cta
         on:click={() => {
-          notifications.success("Query parameters saved.")
+          notifications.success('Query parameters saved.')
           handleSelected(value)
           drawer.hide()
-        }}
+        }}>
-      >
         Save
       </Button>
       <DrawerContent slot="body">
@@ -121,20 +119,15 @@
           {#if value.parameters.length > 0}
             <ParameterBuilder
               bind:customParams={value.queryParams}
-              parameters={queries.find((query) => query._id === value._id)
+              parameters={queries.find(query => query._id === value._id).parameters}
-                .parameters}
+              bindings={queryBindableProperties} />
-              bindings={queryBindableProperties}
-            />
           {/if}
           <IntegrationQueryEditor
             height={200}
             query={value}
             schema={fetchQueryDefinition(value)}
-            datasource={$datasources.list.find(
+            datasource={$datasources.list.find(ds => ds._id === value.datasourceId)}
-              (ds) => ds._id === value.datasourceId
+            editable={false} />
-            )}
-            editable={false}
-          />
         </Layout>
       </DrawerContent>
     </Drawer>
@@ -147,12 +140,7 @@
     </div>
     <ul>
       {#each tables as table}
-        <li
+        <li on:click={() => handleSelected(table)}>{table.label}</li>
-          class:selected={value === table}
-          on:click={() => handleSelected(table)}
-        >
-          {table.label}
-        </li>
       {/each}
     </ul>
     <Divider size="S" />
@@ -161,12 +149,7 @@
     </div>
     <ul>
       {#each views as view}
-        <li
+        <li on:click={() => handleSelected(view)}>{view.label}</li>
-          class:selected={value === view}
-          on:click={() => handleSelected(view)}
-        >
-          {view.label}
-        </li>
       {/each}
     </ul>
     <Divider size="S" />
@@ -175,12 +158,7 @@
     </div>
     <ul>
       {#each links as link}
-        <li
+        <li on:click={() => handleSelected(link)}>{link.label}</li>
-          class:selected={value === link}
-          on:click={() => handleSelected(link)}
-        >
-          {link.label}
-        </li>
       {/each}
     </ul>
     <Divider size="S" />
@@ -191,8 +169,7 @@
       {#each queries as query}
         <li
           class:selected={value === query}
-          on:click={() => handleSelected(query)}
+          on:click={() => handleSelected(query)}>
-        >
           {query.label}
         </li>
       {/each}
@@ -205,12 +182,7 @@
       </div>
       <ul>
         {#each otherSources as source}
-          <li
+          <li on:click={() => handleSelected(source)}>{source.label}</li>
-            class:selected={value === source}
-            on:click={() => handleSelected(source)}
-          >
-            {source.label}
-          </li>
         {/each}
       </ul>
     {/if}
@@ -246,15 +218,15 @@
     cursor: pointer;
     margin: 0px;
     padding: var(--spacing-s) var(--spacing-m);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-m);
   }
 
   .selected {
-    background-color: var(--grey-4);
+    color: var(--spectrum-global-color-blue-600);
   }
 
   li:hover {
-    background-color: var(--grey-4);
+    background-color: var(--spectrum-global-color-gray-200);
   }
 
   .drawer-contents {