From fe8d945a2c47d6dc7fbd22963dfe222bf28ec8ee Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 16 Aug 2022 12:01:55 +0200
Subject: [PATCH] APP -> Api + Google signin button

---
 frontend/src/lib/components/AppConnect.svelte |  41 +++++++++++++-----
 frontend/src/routes/resources.svelte          |  11 ++++-
 frontend/static/google_signin.png             | Bin 0 -> 4236 bytes
 3 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 frontend/static/google_signin.png

diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte
index 7479b4d79d..43f217259d 100644
--- a/frontend/src/lib/components/AppConnect.svelte
+++ b/frontend/src/lib/components/AppConnect.svelte
@@ -170,6 +170,14 @@
 	}
 
 	const dispatch = createEventDispatcher()
+
+	$: isGoogleSignin =
+		step == 1 &&
+		(resource_type == 'google' ||
+			resource_type == 'gmail' ||
+			resource_type == 'gcal' ||
+			resource_type == 'gdrive' ||
+			resource_type == 'gsheets')
 </script>
 
 <Modal
@@ -182,20 +190,21 @@
 		loadResources()
 	}}
 >
-	<div slot="title">Connect an App</div>
+	<div slot="title">Connect an API</div>
 	<div slot="content">
 		{#if step == 1}
 			{#if resource_type && !connects[resource_type] && !connectsManual.find((x) => x[0] == resource_type)}
 				<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
-					<p class="font-bold">No app integration for {resource_type}</p>
+					<p class="font-bold">No API integration for {resource_type}</p>
 					<p>
-						The resource type "{resource_type}" seems to not have an app integration. You can still
-						create this resource manually by closing this modal and pressing: "Add a resource". You
-						can also contribute to windmill and add it as an app integration if relevant.
+						The resource type "{resource_type}" seems to not have an OAuth API integration. You can
+						still create this resource manually by closing this modal and pressing: "Add a
+						resource". You can also contribute to windmill and add it as an API integration if
+						relevant.
 					</p>
 				</div>
 			{/if}
-			<PageHeader title="OAuth apps" />
+			<PageHeader title="OAuth APIs" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) as [key, values]}
 					<button
@@ -234,7 +243,7 @@
 				><span class="ml-2">{(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''}</span
 				>
 			{:else}
-				<p class="italic text-sm">Pick an OAuth app and customize the scopes here</p>
+				<p class="italic text-sm">Pick an OAuth API and customize the scopes here</p>
 			{/if}
 			<PageHeader title="Extra Params" primary={false} />
 			{#if !manual && resource_type != ''}
@@ -261,9 +270,9 @@
 					>{(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''}</span
 				>
 			{:else}
-				<p class="italic text-sm">Pick an OAuth app and customize the extra parameters here</p>
+				<p class="italic text-sm">Pick an OAuth API and customize the extra parameters here</p>
 			{/if}
-			<PageHeader title="Non OAuth apps" />
+			<PageHeader title="Non OAuth APIs" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each connectsManual as [key, instructions]}
 					<button
@@ -318,7 +327,7 @@
 					<span class="font-mono">`$var:${path}`</span>). You can refer to this resource anywhere
 					this token is required. A script can use the resource type
 					<span class="font-mono">{resource_type}</span> as a type parameter to restrict the kind of
-					tokens it accepts to this app.
+					tokens it accepts to this api.
 				</li>
 			</ul>
 		{/if}
@@ -328,13 +337,21 @@
 			<button class="default-button px-4 py-2 font-semibold" on:click={back}>Back</button>
 		{/if}
 		<button
-			class="default-button px-4 py-2 font-semibold"
+			class={isGoogleSignin ? '' : 'default-button px-4 py-2 font-semibold'}
 			class:default-button-disabled={(step == 1 && resource_type == '') ||
 				(step == 2 && value == '') ||
 				(step == 3 && pathError != '')}
 			on:click={next}
 		>
-			{step == 3 ? 'Connect' : 'Next'}
+			{#if isGoogleSignin}
+				<img src="/google_signin.png" alt="Google sign-in" />
+			{:else if step == 1 && !manual}
+				Connect
+			{:else if step == 3}
+				Add resource
+			{:else}
+				Next
+			{/if}
 		</button>
 	</div>
 </Modal>
diff --git a/frontend/src/routes/resources.svelte b/frontend/src/routes/resources.svelte
index 064e30cd92..94f4fb015f 100644
--- a/frontend/src/routes/resources.svelte
+++ b/frontend/src/routes/resources.svelte
@@ -26,7 +26,14 @@
 	import type { Schema } from '$lib/common'
 	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
 	import Dropdown from '$lib/components/Dropdown.svelte'
-	import { faEdit, faPlus, faShare, faTrash, faCircle } from '@fortawesome/free-solid-svg-icons'
+	import {
+		faEdit,
+		faPlus,
+		faShare,
+		faTrash,
+		faCircle,
+		faChain
+	} from '@fortawesome/free-solid-svg-icons'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import Icon from 'svelte-awesome'
 	import Required from '$lib/components/Required.svelte'
@@ -138,7 +145,7 @@
 				class="default-button"
 				on:click={() => {
 					appConnect.open()
-				}}>Connect an App</button
+				}}><Icon class="text-white mb-1" data={faChain} scale={0.9} /> &nbsp; Connect an API</button
 			>
 			<button
 				class="default-button"
diff --git a/frontend/static/google_signin.png b/frontend/static/google_signin.png
new file mode 100644
index 0000000000000000000000000000000000000000..04ed9c97085eb00f6e88e2955e90f2a9a1fa86d5
GIT binary patch
literal 4236
zcmV;75OeQ|P)<h;3K|Lk000e1NJLTq006%L001rs1^@s6dC<t<00001b5ch_0Itp)
z=>Px_MoC0LRCodHT@6%J*PZ{(2h70CzzhS!mk<RZ3L5PSBx_VqG#iuJn(W4`Np*W{
zKCGT-T61DgZAeUWjJkDuOk<AS?Yc?2iDz-6DW-{~O}qHPR-=iHk%+QH1_cLX_?Q`(
zVZQc%-<wZn1ZKc2!@hgY<Gpw9|Nig){_gMo@BiI-?*Ir%K;Zu=0-`Ye4wn~3Ovn-t
zh&cq@ffff6on1>j2fGd|3#=nt3kbv-0*v(RaC#1I5=aAjA({2~f31j5OnqG>7H0+I
z3zq@{F^_=T<!T$WbUpLMyX7_183*f-m;B7j$1&pXeddm=1+$f`Y{I0I7tDBeU+aXi
zM=&Jz5MT~HUZMR3S^g0nYz1(OJ>6jBk7oiCjrh#IiD;7tH{ldR2zVlzcruv_>4V50
zL;Vm;6%dFPfw1KFhCtCO73v8H!~z10=RuyI8O>$Hg7t!p0s><|z{hiM*fR!QLRA5Q
z*hD}ee{7DMVD&g4Adr6?KonHOCISNaV{_aDtH%KWf&AkDqM#x+5g6C)O?zVltVa*S
z@l_L?ZP(zo4??0%L)`4SkX0;0e91kriIQOTq(op`$nP}VfNA%3*#B}a1SIG6R<Of*
z>?owO<{)Y7OORw{hsX&T0s>z*0%Hz)><t&tz45zYi9fV6jxYWK)6ZWWnl0Q52>hQQ
zFecCMyxD=?A3qDX*%V~FWJ)fi`Guf2>EQUE%WzQ$#FDgN29jRb5hQy%Z*r$Au)0(M
zO&nnEvf|jseK>37TP!L|!PdnIIQ?E5-e?MX&3o)7$z|C2v<``FMr=A{8N0q=G^}|f
z3rlr&{9<1x&W4f8y*CrpYt-nza2?C{^@WkRMOJzOey~J^bi!_Mz>c%Wdr)H-XPj=)
zG?%ST!bdx^q3JMUU6lb1!^uWjHYW0$cE1!vd~uo%%1v7#`|E{4=GadBiNc;5sD88^
zVpUR5+3mV{;;B5W|0`LL`jsov@!|evRGoLCVzCaz(?q!QZ_RjPS8tHqSZ{Lg(qidM
zdNX#W2qi@RaHJe-8+`qEEU!#PA>CA_6Zs7i{NSk!l&TzfbDsgVG|`puV(!)51i9~r
z%@Lbk^k5ctuSoX2^2;hbP?>@6)L+A@w}Tzsh{~cC5Fvr;N|U8Xj9SO=6{9A<yZa>K
zG7iHonL;m!iXqmfLcQmgkYt6%^Rk7D!H%yhY3AxY#CPFh{SCbLxf|sV>QJ5&hX<a_
zLe0ijd_W#Qe~BEYk44}ON7(`WnVWcLh7*cbT4_dECpxh~ym|O0{zf~9qXu3>ad8p~
zWiCvY^W^vGb&S$$=cZtXhxnaWy6|rwTTpm!8dlCuK;HZeZ1|lCZ+P1B>Ap=D+)MZL
zr~fwTkDC0h8~+a393vzd1F#&P2F3R_h9&-OvU^yys(AK68YPPf&%WJ@Zn~@?Z+~=O
zE;1$YC`$*LW+_oLJpuL{BdYZb=6LMfnuCgI@sK+0Xl-*rl_G)Z;tf1>7^wbn22!k6
zG;~Q&Hj{jk(*^yx8+iHvub(yNOKKTPXQ-e`b0POn13;M$2OdqvfUzGYSt1H`QaEfj
z)K*_Z)u};WHSQue8Amo}K;Cu}kL~F~w>%MVy_^G`p_A^7bg#g>FHb?1r3V|fcVWpl
zRG5?Oz`T<#y!1>Ka=FD$jJ4aRBft78{?(&hp01&K>3rK38$S4T3tk~ihNd<5Yapjg
zNBd1I-_yw#pSK|X#Tj@YQ;G#8@p$96%w}3;)@9?{a}uGHiD2y;z_I_lhF8vTl;!G`
z(CWHvxdxd@^l0gHpz*YU#-ooL4<@kck!)<JP(ew<)%leP-HHTcIZf2B@L^5~O~P&8
zPC=%E^f~PK>|{H>KZdX}YVx~#&u|@-rVl{%qycf2_jC7we_pMz1>S~SFDR5?;f$zF
z2+`-w&>IK2Pj#e<WE|S&##=|a@aqN(R&4yzD}oLA3Zx}Tc_8VXzMs69hozY;G;qUg
zl_DpH4-@1XeosJ0vdSbS=IiMB!QzIJ1|Y923qSd^4_nR;^{QfIrNohp93+l@bsW?R
zDIH13Bodg3b4r;E4?LERnp3U8t3!taQqrAPpu$3Q;lw;OiWzy5G*||js56u(WcOA#
z+DUh+PDXkqNTnBb<A_9FG^J7zC|vg?X$nm`ny^-CTdt5{<&)Vsvr&&)p9FuAs^a_G
z_}{^yVAb|Zs0xtXuz4CDpUGMvyeuxlCIKtg6+nZ_*mA~+T=FpcA5GzESS_qiQWVe6
z#u1GO6?=P8a$gRfucXkB5-U%emV`8RV+$YVu+{waHCnEJ4x0;7SsY3$bMbC}Gamcx
z@H}H`!zI3_;Yvozv+8{kV(py}Nj%=xmka#i3&*g>`Ib=66Hq<+%cd^;Qyu@Hsm@Vj
z^QL^9-8UV-TCJkN;nQGX7@$_6f+M~ihhA$$#g<Fh|0xfs*N^dM2i||}5?B6yJ5Tsj
zT_DB$CUf!*7r$iNJ^6jTSikWKDu{Hgtm_gv7Sbvdl&t;utb^&6<E~ubn<d_eHy(@2
zL|9b7B4MEQ0(nY0dsW+L)8U~lP56ZCwgU&YUBRYPUh7GaYr7E(d~M56JhW|c0vcs7
zB}(p1!Jc*L*tu56oi`NGIIEMfiX%S5gW=Ukc=0P(`ARKeEWvYs#}mJ`UXKM^u3-6V
z9Wav_%9&|+LM_4Cr9AQ5&s^immmTQhzbzz_L&F>qwmzJ~5x=?aD(>0bh-C+QNE=YN
zM2jNsD)K+UJ&nBnm}(3LjLn!7g{fS9P>+%qTkzop3wjujC2^QrJ_Sd%c<Jx2q{)(j
z8wyK54mR+luD$5l7V?Wx7-hlRo^m63-bj=Ay4mC9ZMfl4AL_H*IQb=oN<_q>yOU9#
z>z`Z&r5Y^CV{wfO=RRXHLzCaz)4~#zM%T8ORuP^OcDswKU$%grm1t*d>3l7BUNB7p
z%~UxT8lj^X`#gC3s`@5JZYbiAPqwpFh<z&i`x@Q}bvN{)iR-Kc8L9sAj}G$>(A}4<
zeElG+y*IS7DfpE*w<H@M?as%$6h?B1RyePF@Jf&N>|G^CEAN++=MWh#a`)E$uaMw!
zLLv_K{!>zTgT0mP<n0W-e$uEt9rBis*SVxD8Ta2I!R6CNRPEzesQYLK<7Ik~Qx<5k
zLEViZkv88n0m=I#wo4LhJ1^ibA7t?ZBJ>@ke>AD~6EmvHDNL!%<iuO++R!{R3+1zQ
z_$CnxP797Vh1cX=2|`Lo)wUC#Uw2?Wg?QQ=ild0UAH3O&FK8kyT73srPLsk;4P<Jh
zzVOQ5j+^(~o(wkD?74v3+~b|Jr-U$6ir_2vP14a}1L{W{VL(q!=rmHOXLE#EDLhS$
zaEfsB{MuZq67J@*BMFZiig2vugul>p_11cNSPM8--R<{cOe9wub@L%@1!j~j%)rXZ
zbo_7)zx1-Q+EW&fXAxnjSL|*Z1m}pQahS!P_9#tBjovTt8piOq$qYT`B^e>yICrWS
zzwxXF%qnxU3CBlJZwe0CN09ax>j?{%a%gAg2?~q!hCv+H55gF*N;iCF=CRZ!(sK!)
zn8Q)CONz%k=)`+|5vJyQaHQWpwA`f=1_~Ly<pp!tB%_oh;a3y>F66IwQa9GNU@3)B
z6%^vV`uk42yes^}afpI28Bve0D}6OSy!uD{qxmlKq7uCR`8$}CHWO2nA%P^<Y;V6C
z?|tI!0{_`qS$^<J5yrl#vJQUSjkV<Ar8(*N^X?=x8eGWEQ+Ni)iW9U|H#bmoj~SoS
zj^})OXnTHF9v;-YQ0$4VIWh81p+JqoQ&A<hB!|YZ{>FWd&!0tCHhe-mP=y7gz(!tP
z4;+s-!CIcc5u}AeIdAg16R#frUW)HjO+`j^D`=zYmdRTuP@wiuJ07|xAEoqAyng$g
zxbF&CpDafn?NITF!Xd)z&&2Shx&&11&BM3!PRuIcgO7`KUC@(PK6t`{()$%CeRMji
z@3KIZr$ibJx1+rWZyFpZJv)F>>d)MV^KfLg1#&9q{EoL7uTdO^etpF&@^N%lAB^$@
z6lYRzm&>v2d4q2U$y;qS=crw;Jaq~Fp!hCFeAduSYd6;au?i>J&W5zx*!>lr{g10?
z>-L8{m9r#BP8<b+LbQ#X(S5!H>kf3Fm3C#MMCjrIB0d3cHkz?_NAT_nKOLRew4(**
zjbtA!3yk;yjt=N`gn-*;;?{NF17}#PY;F(nJ^c<;%2jt0&BLePUErroPjfHt<(o{n
z#Btt^(`Woa8y`M+^*B&-manHwNkEZ~IhRP=9>n*zT}6E>YlC*Q3Y0wYX_xBqnKryo
z%R1r2k9IVpzMZZKuen5gDYbLC{yP4F+Xkh{`o11}>n((%2zm5_UmDFcGZDXPS0{&M
z?ZFnjbAk0<gdA!kEx=BG8c`8T9t@ej-F0Seh0dg%Ax3;hp9TA0?+6(izT(J#z3gN2
zO*il9hU;hd&m6gyN1~&@3x9v?hcMawo`@CYDl<{2nFfhSj22THE_F9U<f4Zp!&8Xs
zp9gX(_?IUVke)pHxmU9O%Te1ED5xRUXVN}2Y)&-v_$ObW47<)P)8e@qcI>Y)p}j|p
zr?%wb5%Rp9pI*cAfBw3D)f{S7l=o^Wiezpy82AYqr54(7lAtJ=VMn@p!s}xAs;B`I
zm9yQaki>MbN!Vu(#-BX*p6{tpca*ksJ6xE(C=<IMreBq9eOSBs`Y^9EkUk17%oJYf
zhZ)ZhJ3JZZep!@Fm$YudF?5l+Rh_W;x<oDZF4~6YPVR!y<_|LU=60|nFuBE63}n8B
zB-=`CU$i<R;s@%9^t$_2gA$~Ow&otyVZMTXkD6nLnPPwXor;nJwZDlm;xn^*9K(=@
z35+t)Lw!S-O|QV(BjU?+P*^lHed{sy03T0>20avVs@ZQBl$uW(N3fmrQP?^jY4oo5
z7Ol-rEyP>Pc4D5c_!biW?5V13{A|U1d}AtGjwe#0uxED*>aGmHDy1K@q%QPym~r4|
zP5AjZ0X>m=I}vQDIdB#G>-*42L4%TZ{jBt>bN#UvtU5ICwV5}juxF^14aO$C*Hnw9
zUOldvZ&0K$2(4U=S=vG@nQ}K4(;=o%D4G;)*b_}#LY>Krz_^7yLm?_knU12e=|i)H
zdjWw7i9mF2ctUnXFiJomG6V$jM~0UmJ&6zy$Ulh&Q|L-$2nghl3@<@?5+NXve-aI*
z(3Qv#5Xc`HUV`)_LO>w@BpOViE0G}}kUuiK1nEhHKp^>DF6Uqe`{!>HElot5CK^V9
zJtHH)_)Sv$Cu(%zeX)(b?&#>bTKCGPz3vypQd!!_sssrEf!IO7<*;@3wAB5SEN1Uy
zbFcS$-|b;50Q-WEeTl+8e`4Pic+2QgNCE;ejQ}G%dq0&vd<1({k%c#|K+n&<EMQ+-
zvSopNTNW4+(XEgK1Y#Be#%cC-4!u0heLocB`B|?R+1XccjQDI)2%eun5YnVTfD7xX
iCu{<+kN3E^|9=4ix*IIxo@Dp{0000<MNUMnLSTZ0*c>qc

literal 0
HcmV?d00001