From 6791abbe4dfbf33f5b3db4968f0878f82fd74aa6 Mon Sep 17 00:00:00 2001
From: Henri Courdent <122811744+hcourdent@users.noreply.github.com>
Date: Tue, 5 Sep 2023 10:06:32 +0200
Subject: [PATCH] Higlighted native languages integrations (#2231)

* Higlighted native languages integrations

* Excluded native integrations from the rest of integrations

* Fix bug filter
---
 frontend/src/lib/components/AppConnect.svelte | 86 +++++++++++++------
 .../src/lib/components/icons/AzureIcon.svelte |  6 ++
 .../lib/components/icons/NocoDbIcon.svelte    | 32 +++++++
 frontend/src/lib/components/icons/index.ts    | 16 +++-
 4 files changed, 113 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/lib/components/icons/AzureIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/NocoDbIcon.svelte

diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte
index 9b6178321d..79fdb9d9cb 100644
--- a/frontend/src/lib/components/AppConnect.svelte
+++ b/frontend/src/lib/components/AppConnect.svelte
@@ -74,6 +74,8 @@
 
 	export let newPageOAuth = false
 
+	const nativeLanguagesCategory = ['postgresql', 'mysql', 'bigquery', 'snowflake', 'graphql'];
+
 	let filter = ''
 	let manual = false
 	let value: string = ''
@@ -193,6 +195,14 @@
 					linkedSecret: undefined
 				}
 			])
+			const filteredNativeLanguages = filteredConnectsManual?.filter(([key, _]) =>
+      nativeLanguagesCategory.includes(key)
+    );
+
+    filteredConnectsManual = [
+      ...(filteredNativeLanguages ?? []),
+      ...(filteredConnectsManual ?? []).filter(([key, _]) => !nativeLanguagesCategory.includes(key))
+    ];
 	}
 
 	async function next() {
@@ -423,31 +433,57 @@
 				{/if}
 			{/if}
 
-			<h2 class="mt-8 mb-4">Non OAuth APIs & Resources</h2>
-			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
-				{#if filteredConnectsManual}
-					{#each filteredConnectsManual as [key, _]}
-						<Button
-							size="sm"
-							variant="border"
-							color={key === resource_type ? 'blue' : 'light'}
-							btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-							on:click={() => {
-								manual = true
-								resource_type = key
-								next()
-								dispatch('click')
-							}}
-						>
-							<IconedResourceType name={key} after={true} width="20px" height="20px" />
-						</Button>
-					{/each}
-				{:else}
-					{#each new Array(9) as _}
-						<Skeleton layout={[[2]]} />
-					{/each}
-				{/if}
-			</div>
+			<h2 class="mt-8 mb-4">Others</h2>
+      <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+        {#if filteredConnectsManual}
+          {#each filteredConnectsManual as [key, _]}
+            {#if nativeLanguagesCategory.includes(key)}
+              <Button
+                size="sm"
+                variant="border"
+                color={key === resource_type ? 'blue' : 'light'}
+                btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+                on:click={() => {
+                  manual = true;
+                  resource_type = key;
+                  next();
+                  dispatch('click');
+                }}
+              >
+                <IconedResourceType name={key} after={true} width="20px" height="20px" />
+              </Button>
+            {/if}
+          {/each}
+        {/if}
+      </div>
+
+	  <h2 class="mt-8 mb-4"></h2>
+	  <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+		  {#if filteredConnectsManual}
+			  {#each filteredConnectsManual as [key, _]}
+				  {#if !nativeLanguagesCategory.includes(key)} <!-- Exclude specific items -->
+					  <Button
+						  size="sm"
+						  variant="border"
+						  color={key === resource_type ? 'blue' : 'light'}
+						  btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+						  on:click={() => {
+							  manual = true;
+							  resource_type = key;
+							  next();
+							  dispatch('click');
+						  }}
+					  >
+						  <IconedResourceType name={key} after={true} width="20px" height="20px" />
+					  </Button>
+				  {/if}
+			  {/each}
+		  {:else}
+			  {#each new Array(9) as _}
+				  <Skeleton layout={[[2]]} />
+			  {/each}
+		  {/if}
+	  </div>	  
 		{:else if step == 2 && manual}
 			<Path
 				bind:error={pathError}
diff --git a/frontend/src/lib/components/icons/AzureIcon.svelte b/frontend/src/lib/components/icons/AzureIcon.svelte
new file mode 100644
index 0000000000..401ffe72b6
--- /dev/null
+++ b/frontend/src/lib/components/icons/AzureIcon.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg id="svg1035" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.5 377.3" width="20" height="20"><style>.st0{fill:#00bef2}.st1{fill:#fff;stroke:#fff;stroke-width:1.2357;stroke-linecap:round;stroke-linejoin:round}</style><g id="layer1" transform="translate(-39.022 -78.115)"><g id="g1016" transform="translate(-63.947 -88.179)"><path id="path1008" class="st0" d="M290 166.3c.4 0 .8.5 1.4 1.4.5.8 42.6 51.3 93.6 112.2 51 60.9 92.6 111 92.4 111.3-.1.3-40.7 33.6-90.2 73.9s-91.6 74.6-93.5 76.2c-3.3 2.7-3.5 2.8-4.7 1.6-.7-.7-42.9-35.2-93.8-76.7S102.8 390.5 103 390c.2-.5 42-50.4 93.1-111s92.9-110.7 93.1-111.5c.2-.8.5-1.2.8-1.2z"/><path id="path923" class="st1" d="M283.1 483.6c-5.8-2.1-12.8-8.1-15.7-13.7-3.6-6.9-3.3-17.7.7-26.3 3.1-6.4 3.1-6.6 1.1-8.1-1.1-.8-14.4-8.2-29.4-16.3-15-8.1-28.1-15.2-29-15.7-1.2-.7-3.2 0-6.8 2.3-11.7 7.4-23.9 6.6-33.5-2.3-6.9-6.4-8.9-10.9-8.9-20.1 0-8.9 1.8-13.5 7.5-19.2 7.7-7.7 18-10.3 27.9-7 5.4 1.8 5.5 1.8 8.9-.8 4-3 36.1-32.3 51.6-47l10.7-10.2-3.2-6.7c-6.5-13.5-3.2-28.5 8.2-37.5 6.2-4.9 10.8-6.4 19.7-6.4 20.8 0 35.3 21.8 27.5 41.3-2.1 5.4-2.1 5.5-.1 8.8 1.7 2.9 30.6 37.8 45.9 55.6 2.7 3.1 5.7 5.6 6.7 5.6s4.4-1 7.6-2.2c14.9-5.9 30.6.7 36.8 15.5 4 9.5.5 22.3-8 30-6 5.4-10.4 7.1-18.4 7.1-5.6 0-7.7-.6-13.6-3.8-4.4-2.4-7.8-3.6-9.2-3.2-2.4.6-39.3 25.9-47.5 32.5-5 4.1-5.4 5.6-2.8 11.7 2.5 6 2.2 15.4-.6 21.3-3.1 6.5-10.8 13-17.5 15-6.8 1.9-10.9 1.9-16.6-.2zm1.7-110.2v-57l-3.2-4.4c-1.8-2.4-3.5-4.4-3.8-4.4-1.3 0-65.9 58.7-65.9 59.9 0 .3 1 3.3 2.2 6.5 1.2 3.3 2.1 8 2 10.7-.1 2.7-.1 5.7-.1 6.7.1 2.3 21.7 16.1 54.1 34.8 8.9 5.2 12 6.5 13.1 5.6 1.3-1.1 1.6-12.2 1.6-58.4zm27.4 50.4c42.8-26.9 50.8-32.3 51.3-34.3.3-1.2.7-5.9.8-10.6l.3-8.4-21.8-25.9c-23.4-27.7-32-37.1-34-37.1-.7 0-4.2 2-7.8 4.4l-6.6 4.4.3 56.9c.3 51 .7 59.6 2.6 59.6.2.1 7-4 14.9-9z"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/NocoDbIcon.svelte b/frontend/src/lib/components/icons/NocoDbIcon.svelte
new file mode 100644
index 0000000000..1d35f0fda0
--- /dev/null
+++ b/frontend/src/lib/components/icons/NocoDbIcon.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+x="0px"
+y="0px"
+{width}
+{height}
+viewBox="0 0 200.000000 200.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M138 1990 c-42 -12 -84 -46 -110 -88 l-23 -37 -3 -843 c-2 -575 1
+-855 8 -883 6 -21 24 -55 41 -73 61 -70 19 -67 970 -64 l855 3 41 27 c24 16
+49 44 62 70 21 44 21 49 21 896 0 577 -3 860 -11 879 -15 40 -57 82 -104 104
+-38 18 -83 19 -880 18 -462 0 -852 -4 -867 -9z m1487 -169 c48 -22 79 -54 100
+-103 13 -32 15 -111 15 -565 l0 -528 -75 0 -75 0 0 488 c0 549 0 545 -67 568
+-27 8 -178 10 -599 4 l-563 -7 -23 -25 -23 -25 -3 -556 c-2 -389 0 -569 8
+-595 20 -67 16 -67 567 -67 l488 0 0 -75 0 -75 -546 2 -545 3 -41 27 c-24 16
+-49 44 -62 70 -21 44 -21 53 -21 686 0 427 4 650 11 669 14 37 66 92 104 109
+24 11 156 13 670 13 601 1 642 -1 680 -18z m-255 -698 c0 -316 -2 -352 -19
+-388 -36 -79 -117 -121 -182 -95 -17 8 -109 97 -212 208 l-182 194 -5 -174
+c-7 -232 -11 -238 -154 -238 l-86 0 0 352 c0 335 1 354 21 394 26 55 72 84
+133 84 57 0 71 -11 286 -249 l155 -171 5 183 c7 239 11 245 158 246 l82 1 0
+-347z m357 -614 c34 -13 80 -55 99 -91 19 -37 18 -122 -3 -165 -35 -74 -140
+-119 -218 -93 -79 26 -128 92 -128 175 0 75 47 148 113 174 34 13 102 13 137
+0z"/>
+</g>
+</svg>
+	
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/index.ts b/frontend/src/lib/components/icons/index.ts
index 99f72e56f2..22a45bbda9 100644
--- a/frontend/src/lib/components/icons/index.ts
+++ b/frontend/src/lib/components/icons/index.ts
@@ -59,6 +59,10 @@ import PineconeIcon from './PineconeIcon.svelte'
 import RssIcon from './RssIcon.svelte'
 import ShopifyIcon from './ShopifyIcon.svelte'
 import TypeformIcon from './TypeformIcon.svelte'
+import BigQueryIcon from './BigQueryIcon.svelte'
+import GraphqlIcon from './GraphqlIcon.svelte'
+import NocoDbIcon from './NocoDbIcon.svelte'
+import AzureIcon from './AzureIcon.svelte'
 
 export const APP_TO_ICON_COMPONENT = {
 	postgresql: PostgresIcon,
@@ -124,7 +128,11 @@ export const APP_TO_ICON_COMPONENT = {
 	pinecone: PineconeIcon,
 	rss: RssIcon,
 	shopify: ShopifyIcon,
-	typeform: TypeformIcon
+	typeform: TypeformIcon,
+	bigquery: BigQueryIcon,
+	graphql: GraphqlIcon,
+	nocodb: NocoDbIcon,
+	azure: AzureIcon,
 } as const
 
 export {
@@ -184,5 +192,9 @@ export {
 	PineconeIcon,
 	RssIcon,
 	ShopifyIcon,
-	TypeformIcon
+	TypeformIcon,
+	BigQueryIcon,
+	GraphqlIcon,
+	NocoDbIcon,
+	AzureIcon,
 }