Browse Source

Nc feat/api snippets revamp (#9252)

* feat(nc-gui): api snippets new layout setup

* fix(nc-gui): api client tabs

* fix(nc-gui): update api snippet code editor

* fix(nc-gui): api snippets editor flickering issue on changing client

* fix(nc-gui): add api snippets lang icons

* chore(nc-gui): lint

* fix(nc-gui): update font sizes

* fix(nc-gui): update review changes

* misc: ui adjustments

* fix(nc-gui): nocodb-sdk api code issue

---------

Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
pull/9273/head
Ramesh Mane 3 months ago committed by GitHub
parent
commit
85d7d0999b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 5
      packages/nc-gui/assets/nc-icons/lang-c.svg
  2. 17
      packages/nc-gui/assets/nc-icons/lang-java.svg
  3. 5
      packages/nc-gui/assets/nc-icons/lang-js.svg
  4. 58
      packages/nc-gui/assets/nc-icons/lang-nocodb-sdk.svg
  5. 3
      packages/nc-gui/assets/nc-icons/lang-node.svg
  6. 33
      packages/nc-gui/assets/nc-icons/lang-php.svg
  7. 8
      packages/nc-gui/assets/nc-icons/lang-python.svg
  8. 51
      packages/nc-gui/assets/nc-icons/lang-ruby.svg
  9. 38
      packages/nc-gui/assets/nc-icons/lang-shell.svg
  10. 9
      packages/nc-gui/components/smartsheet/Details.vue
  11. 342
      packages/nc-gui/components/smartsheet/details/Api.vue
  12. 7
      packages/nc-gui/lang/en.json
  13. 20
      packages/nc-gui/utils/iconUtils.ts

5
packages/nc-gui/assets/nc-icons/lang-c.svg

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M20.3253 6.61167L12.5097 2.11327C12.3803 2.03236 12.2023 2 12.0081 2C11.8139 2 11.6359 2.04854 11.5065 2.11327L3.73946 6.62785C3.46438 6.78966 3.2702 7.19419 3.2702 7.50164V16.5146C3.2702 16.6926 3.30257 16.903 3.43202 17.081L20.7136 7.04856C20.6165 6.85438 20.4709 6.70875 20.3253 6.61167Z" fill="#659AD3"/>
<path d="M3.38348 17.0646C3.46439 17.1941 3.57766 17.3073 3.69093 17.3721L11.4903 21.8866C11.6198 21.9675 11.7978 21.9999 11.9919 21.9999C12.1861 21.9999 12.3641 21.9514 12.4935 21.8866L20.2606 17.3721C20.5356 17.2103 20.7298 16.8057 20.7298 16.4983V7.4853C20.7298 7.33967 20.7136 7.17786 20.6327 7.03223L3.38348 17.0646Z" fill="#03599C"/>
<path d="M15.4547 13.9579C14.7751 15.1554 13.4806 15.9644 12.0081 15.9644C9.82365 15.9644 8.04371 14.1845 8.04371 12C8.04371 9.81553 9.82365 8.03559 12.0081 8.03559C13.4806 8.03559 14.7751 8.84465 15.4547 10.0583L17.5583 8.84465C16.458 6.91908 14.3868 5.6084 12.0081 5.6084C8.4806 5.6084 5.61652 8.47249 5.61652 12C5.61652 15.5275 8.4806 18.3916 12.0081 18.3916C14.3706 18.3916 16.4418 17.0971 17.5421 15.1877L15.4547 13.9579Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

17
packages/nc-gui/assets/nc-icons/lang-java.svg

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_1374_6489)">
<path d="M8.69044 18.5059C8.69044 18.5059 7.77494 19.0383 9.34197 19.2184C11.2404 19.435 12.2106 19.4039 14.3027 19.008C14.3027 19.008 14.8527 19.3528 15.6209 19.6516C10.931 21.6615 5.00682 19.5351 8.69044 18.5059Z" fill="#5382A1"/>
<path d="M8.11733 15.8828C8.11733 15.8828 7.09051 16.6429 8.6587 16.8051C10.6866 17.0143 12.2881 17.0314 15.0594 16.4978C15.0594 16.4978 15.4427 16.8864 16.0454 17.0989C10.3751 18.757 4.05939 17.2296 8.11733 15.8828Z" fill="#5382A1"/>
<path d="M12.9485 11.434C14.1041 12.7644 12.6449 13.9616 12.6449 13.9616C12.6449 13.9616 15.5791 12.4469 14.2316 10.5501C12.973 8.78124 12.0078 7.90236 17.2328 4.87207C17.2328 4.87207 9.03134 6.92042 12.9485 11.434Z" fill="#E76F00"/>
<path d="M19.1512 20.4458C19.1512 20.4458 19.8287 21.004 18.4051 21.4359C15.6981 22.2559 7.13813 22.5036 4.76021 21.4685C3.90541 21.0967 5.5084 20.5806 6.01264 20.4723C6.53852 20.3583 6.83903 20.3795 6.83903 20.3795C5.88841 19.7099 0.69458 21.6945 4.20082 22.2628C13.7629 23.8135 21.6315 21.5646 19.1512 20.4458Z" fill="#5382A1"/>
<path d="M9.13068 13.165C9.13068 13.165 4.77654 14.1992 7.58877 14.5748C8.77618 14.7337 11.1433 14.6978 13.3481 14.513C15.1501 14.361 16.9594 14.0378 16.9594 14.0378C16.9594 14.0378 16.324 14.31 15.8643 14.6238C11.4428 15.7867 2.90119 15.2457 5.36021 14.0563C7.43981 13.051 9.13068 13.165 9.13068 13.165Z" fill="#5382A1"/>
<path d="M16.9415 17.531C21.4362 15.1954 19.358 12.9509 17.9075 13.2533C17.5519 13.3272 17.3934 13.3914 17.3934 13.3914C17.3934 13.3914 17.5254 13.1846 17.7775 13.0951C20.6471 12.0862 22.854 16.0706 16.8511 17.6487C16.8511 17.6487 16.9207 17.5866 16.9415 17.531Z" fill="#5382A1"/>
<path d="M14.2316 -0.0214844C14.2316 -0.0214844 16.7208 2.4686 11.8707 6.29763C7.98132 9.36918 10.9838 11.1205 11.8691 13.1214C9.59877 11.0731 7.93269 9.26994 9.05043 7.59172C10.691 5.12824 15.236 3.93386 14.2316 -0.0214844Z" fill="#E76F00"/>
<path d="M9.57234 23.8597C13.8867 24.1359 20.5119 23.7065 20.6688 21.665C20.6688 21.665 20.3672 22.4389 17.1032 23.0535C13.4208 23.7465 8.8791 23.6656 6.18536 23.2215C6.18536 23.2215 6.73681 23.6779 9.57234 23.8597Z" fill="#5382A1"/>
</g>
<defs>
<clipPath id="clip0_1374_6489">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

5
packages/nc-gui/assets/nc-icons/lang-js.svg

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5Z" fill="#F7DF1E"/>
<path d="M6.7847 19.385L6.92374 19.3009C7.769 18.7893 8.80928 19.4293 9.79727 19.4293C10.4766 19.4293 10.9049 19.1635 10.9049 18.1299V12.1341C10.9049 11.5632 11.3677 11.1003 11.9386 11.1003C12.5095 11.1003 12.9724 11.5632 12.9724 12.1341V18.1591C12.9724 20.3004 11.7172 21.2751 9.8859 21.2751C8.23202 21.2751 7.27199 20.4185 6.78467 19.3848" fill="black"/>
<path d="M14.6298 19.9543C14.2745 19.5515 14.4587 18.9531 14.9235 18.6839C15.3991 18.4086 15.9838 18.5936 16.4019 18.9502C16.76 19.2556 17.2098 19.4441 17.8166 19.4441C18.6732 19.4441 19.2195 19.0158 19.2195 18.4251C19.2195 17.7163 18.6584 17.4652 17.7132 17.0518L17.1965 16.8302C15.7048 16.1953 14.7154 15.3978 14.7154 13.7143C14.7154 12.1636 15.8968 10.9822 17.7428 10.9822C18.7465 10.9822 19.5349 11.2492 20.154 11.9081C20.5 12.2764 20.3486 12.85 19.9234 13.1231C19.4618 13.4195 18.8839 13.1901 18.4001 12.9315C18.2095 12.8297 17.995 12.7839 17.7428 12.7839C17.1374 12.7839 16.7534 13.1679 16.7534 13.6699C16.7534 14.2902 17.1374 14.5413 18.0233 14.9253L18.5402 15.1468C20.2975 15.9 21.287 16.6678 21.287 18.3956C21.287 20.2564 19.825 21.2753 17.861 21.2753C16.3937 21.2753 15.3232 20.7405 14.6298 19.9543Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

58
packages/nc-gui/assets/nc-icons/lang-nocodb-sdk.svg

@ -0,0 +1,58 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_277_5004)">
<path
d="M9.22072 11.3245V15.1062C9.22072 15.7812 8.73554 16.3287 8.13717 16.3276L6.37549 16.324L6.38475 11.9466V11.8051C6.39967 10.7102 7.2908 10.0126 8.1135 10.3032C8.31313 10.3743 8.49218 10.506 8.64036 10.6727L9.22072 11.3245Z"
fill="url(#paint0_linear_277_5004)" />
<path
d="M13.5244 11.6043V7.64771C13.5244 6.97216 14.0101 6.42472 14.6085 6.42626L16.3702 6.42935L16.3609 10.9822V11.1232C16.3455 12.2186 15.4543 12.9163 14.6322 12.6251C14.432 12.5546 14.2535 12.4229 14.1053 12.2562L13.5244 11.6043Z"
fill="url(#paint1_linear_277_5004)" />
<path
d="M16.3581 10.8224V14.125C16.3663 15.7164 14.8969 16.7933 13.7408 16.1203C13.6003 16.0385 13.4737 15.9299 13.3595 15.8069L9.76926 11.9399L9.22079 11.3245L8.64043 10.6727C8.49225 10.506 8.3132 10.3742 8.11357 10.3032C7.29087 10.0125 6.39974 10.7102 6.38482 11.8051V11.7686L6.38379 8.99485V8.53899C6.38379 6.8195 8.09144 5.85223 9.26247 6.91006L13.9723 12.0551C14.0855 12.1791 14.2203 12.2836 14.3741 12.3515C15.258 12.7446 16.3581 11.9826 16.3581 10.8224Z"
fill="url(#paint2_linear_277_5004)" />
<path
d="M16.3581 13.9084V14.125C16.3663 15.7164 14.8969 16.7933 13.7408 16.1203C13.6003 16.0385 13.4737 15.9299 13.3595 15.8069L9.76926 11.9399L9.22079 11.3245L8.64043 10.6727C8.49225 10.506 8.3132 10.3742 8.11357 10.3032C7.29087 10.0125 6.39974 10.7102 6.38482 11.8051V11.7686L6.38379 8.99485V8.95574C6.59885 7.94988 7.74158 7.50946 8.45623 8.28329L14.2841 14.5881C15.0008 15.364 16.1471 14.9184 16.3581 13.9084Z"
fill="url(#paint3_linear_277_5004)" />
<path
d="M16.3183 19.8173C16.3183 19.5133 16.3574 19.219 16.4304 18.9386H4.86736C4.28288 18.9386 3.80387 18.4601 3.80387 17.8746V4.86726C3.80387 4.28278 4.28288 3.80377 4.86736 3.80377H17.8752C18.4602 3.80377 18.9392 4.28278 18.9392 4.86726V16.4514C19.2114 16.383 19.4959 16.3465 19.7891 16.3465C20.12 16.3465 20.4395 16.3933 20.7425 16.4802V4.27094C20.7425 3.02172 19.7207 1.9999 18.471 1.9999H4.27156C3.02181 1.9999 2 3.02172 2 4.27094V18.4714C2 19.7201 3.02181 20.7424 4.27156 20.7424H16.4438C16.3625 20.4476 16.3183 20.1379 16.3183 19.8173Z"
fill="url(#paint4_linear_277_5004)" />
<path
d="M21.9716 19.8175C21.9716 21.0229 20.9945 22 19.789 22C18.5835 22 17.606 21.0229 17.606 19.8175C17.606 18.612 18.5835 17.6344 19.789 17.6344C20.9945 17.6344 21.9716 18.612 21.9716 19.8175Z"
fill="url(#paint5_linear_277_5004)" />
</g>
<defs>
<linearGradient id="paint0_linear_277_5004" x1="7.44309" y1="13.5313" x2="1.78195" y2="16.536"
gradientUnits="userSpaceOnUse">
<stop stop-color="#4351E8" />
<stop offset="1" stop-color="#2A1EA5" />
</linearGradient>
<linearGradient id="paint1_linear_277_5004" x1="15.1451" y1="9.40218" x2="21.3313" y2="11.5717"
gradientUnits="userSpaceOnUse">
<stop stop-color="#4351E8" />
<stop offset="1" stop-color="#2A1EA5" />
</linearGradient>
<linearGradient id="paint2_linear_277_5004" x1="7.81824" y1="11.6739" x2="18.63" y2="10.8209"
gradientUnits="userSpaceOnUse">
<stop stop-color="#4351E8" />
<stop offset="1" stop-color="#353495" />
<stop offset="1" stop-color="#2A1EA5" />
</linearGradient>
<linearGradient id="paint3_linear_277_5004" x1="3.58332" y1="8.37075" x2="15.5202" y2="14.3831"
gradientUnits="userSpaceOnUse">
<stop stop-color="#4351E8" />
<stop offset="1" stop-color="#2A1EA5" />
</linearGradient>
<linearGradient id="paint4_linear_277_5004" x1="5.7662" y1="5.79286" x2="22.8538" y2="22.7987"
gradientUnits="userSpaceOnUse">
<stop stop-color="#4351E8" />
<stop offset="1" stop-color="#2A1EA5" />
</linearGradient>
<linearGradient id="paint5_linear_277_5004" x1="22.7068" y1="21.5441" x2="16.9551" y2="18.14"
gradientUnits="userSpaceOnUse">
<stop stop-color="#ED0029" />
<stop offset="1" stop-color="#F43760" />
</linearGradient>
<clipPath id="clip0_277_5004">
<rect width="20" height="20" fill="white" transform="translate(2 2)" />
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

3
packages/nc-gui/assets/nc-icons/lang-node.svg

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12.325 23.2687C12.0044 23.2687 11.7051 23.1832 11.4272 23.0335L8.58407 21.3448C8.15653 21.1096 8.3703 21.0241 8.49856 20.9814C9.07573 20.789 9.18262 20.7462 9.78117 20.4042C9.8453 20.3614 9.93081 20.3828 9.99494 20.4256L12.1754 21.7296C12.2609 21.7723 12.3678 21.7723 12.4319 21.7296L20.9613 16.7915C21.0468 16.7488 21.0895 16.6632 21.0895 16.5564V6.70164C21.0895 6.59475 21.0468 6.50925 20.9613 6.46649L12.4319 1.54982C12.3464 1.50707 12.2395 1.50707 12.1754 1.54982L3.64602 6.46649C3.56051 6.50925 3.51776 6.61613 3.51776 6.70164V16.5564C3.51776 16.6419 3.56051 16.7488 3.64602 16.7915L5.97609 18.1382C7.23732 18.7795 8.02827 18.0314 8.02827 17.2832V7.55671C8.02827 7.42845 8.13515 7.30019 8.28479 7.30019H9.37501C9.50327 7.30019 9.63153 7.40707 9.63153 7.55671V17.2832C9.63153 18.9719 8.71233 19.9553 7.10906 19.9553C6.6174 19.9553 6.23261 19.9553 5.14239 19.4209L2.89783 18.1382C2.34203 17.8176 2 17.219 2 16.5777V6.72301C2 6.08171 2.34203 5.48316 2.89783 5.16251L11.4272 0.224457C11.9616 -0.0748189 12.6884 -0.0748189 13.2228 0.224457L21.7522 5.16251C22.308 5.48316 22.65 6.08171 22.65 6.72301V16.5777C22.65 17.219 22.308 17.8176 21.7522 18.1382L13.2228 23.0763C12.9449 23.2046 12.6243 23.2687 12.325 23.2687ZM14.9544 16.4922C11.2134 16.4922 10.4439 14.7821 10.4439 13.3285C10.4439 13.2002 10.5507 13.0719 10.7004 13.0719H11.812C11.9402 13.0719 12.0471 13.1574 12.0471 13.2857C12.2181 14.4187 12.7098 14.9745 14.9757 14.9745C16.7714 14.9745 17.541 14.5683 17.541 13.6064C17.541 13.0506 17.3272 12.6444 14.5268 12.3665C12.1968 12.1314 10.7431 11.6183 10.7431 9.75852C10.7431 8.027 12.1968 7.00091 14.6337 7.00091C17.3699 7.00091 18.7167 7.94149 18.8877 9.99367C18.8877 10.0578 18.8663 10.1219 18.8236 10.1861C18.7808 10.2288 18.7167 10.2716 18.6526 10.2716H17.541C17.4341 10.2716 17.3272 10.1861 17.3058 10.0792C17.0493 8.90345 16.3866 8.51867 14.6337 8.51867C12.667 8.51867 12.4319 9.20273 12.4319 9.71577C12.4319 10.3357 12.7098 10.5281 15.3605 10.8701C17.9899 11.2121 19.2297 11.7038 19.2297 13.5422C19.2084 15.4234 17.6692 16.4922 14.9544 16.4922Z" fill="#539E43"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

33
packages/nc-gui/assets/nc-icons/lang-php.svg

@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<mask id="mask0_1374_6435" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="24" height="15">
<path d="M0.47998 11.7592C0.47998 15.6923 5.63777 18.8809 12 18.8809C18.3622 18.8809 23.52 15.6923 23.52 11.7592C23.52 7.82603 18.3622 4.63748 12 4.63748C5.63777 4.63748 0.47998 7.82608 0.47998 11.7592Z" fill="white"/>
</mask>
<g mask="url(#mask0_1374_6435)">
<path d="M0.47998 11.7592C0.47998 15.6923 5.63777 18.8809 12 18.8809C18.3622 18.8809 23.52 15.6923 23.52 11.7592C23.52 7.82603 18.3622 4.63748 12 4.63748C5.63777 4.63748 0.47998 7.82608 0.47998 11.7592Z" fill="url(#paint0_radial_1374_6435)"/>
</g>
<mask id="mask1_1374_6435" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="3" width="24" height="17">
<path d="M0 3.82626H24V19.6914H0V3.82626Z" fill="white"/>
</mask>
<g mask="url(#mask1_1374_6435)">
<path d="M12 18.3525C18.1137 18.3525 23.07 15.4008 23.07 11.7597C23.07 8.11854 18.1137 5.16684 12 5.16684C5.88624 5.16684 0.929993 8.11854 0.929993 11.7597C0.929993 15.4008 5.88624 18.3525 12 18.3525Z" fill="#777BB3"/>
</g>
<mask id="mask2_1374_6435" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="3" width="24" height="17">
<path d="M0 3.82626H24V19.6914H0V3.82626Z" fill="white"/>
</mask>
<g mask="url(#mask2_1374_6435)">
<path d="M6.73895 12.576C7.24166 12.576 7.61695 12.467 7.85437 12.2523C8.08929 12.0398 8.25154 11.6715 8.33658 11.1578C8.41587 10.6776 8.38566 10.3423 8.24683 10.1614C8.10487 9.97659 7.79795 9.88287 7.33462 9.88287H6.53129L6.08587 12.576H6.73891L6.73895 12.576ZM4.11129 15.8935C4.074 15.8935 4.03858 15.8739 4.01487 15.84C4.00315 15.8233 3.99471 15.8037 3.99018 15.7827C3.98564 15.7617 3.98511 15.7398 3.98862 15.7185L5.16895 8.58168C5.17449 8.54821 5.18977 8.51806 5.21216 8.49637C5.23454 8.47469 5.26265 8.46284 5.29166 8.46284H7.83558C8.63508 8.46284 9.23016 8.71746 9.6042 9.22118C9.98024 9.72701 10.0964 10.4342 9.94933 11.3228C9.88949 11.6849 9.78658 12.0211 9.64349 12.3222C9.50016 12.6236 9.31083 12.9025 9.08058 13.1512C8.80491 13.4544 8.49291 13.6743 8.15408 13.8037C7.82062 13.9313 7.39241 13.9961 6.88125 13.9961H5.85116L5.557 15.7747C5.55146 15.8081 5.5362 15.8383 5.51382 15.86C5.49144 15.8817 5.46334 15.8935 5.43433 15.8936H4.11129V15.8935Z" fill="black"/>
<path d="M6.63435 10.0294H7.33468C7.89385 10.0294 8.08814 10.1736 8.15414 10.2595C8.26364 10.4022 8.28431 10.703 8.21393 11.1295C8.13485 11.6069 7.98827 11.9454 7.77818 12.1355C7.5631 12.3301 7.21343 12.4287 6.73902 12.4287H6.23752L6.63435 10.0294ZM7.8356 8.31552H5.29168C5.23366 8.31553 5.17745 8.33926 5.13269 8.38263C5.08792 8.426 5.05738 8.48632 5.04631 8.55326L3.86598 15.6902C3.85895 15.7328 3.86001 15.7766 3.86909 15.8186C3.87816 15.8606 3.89503 15.8997 3.91848 15.9331C3.94193 15.9666 3.97139 15.9935 4.00473 16.012C4.03807 16.0304 4.07448 16.04 4.11135 16.04H5.43427C5.49229 16.04 5.54851 16.0163 5.59329 15.9729C5.63807 15.9296 5.66861 15.8692 5.67968 15.8023L5.95418 14.1426H6.88127C7.40552 14.1426 7.84685 14.0754 8.19293 13.943C8.54877 13.8071 8.87627 13.5767 9.16602 13.2582C9.40568 12.9991 9.60352 12.7082 9.75268 12.3936C9.90185 12.079 10.0098 11.728 10.0722 11.3505C10.227 10.4151 10.1012 9.66597 9.69843 9.12421C9.2996 8.58763 8.67285 8.31557 7.83568 8.31557M5.93431 12.7226H6.73902C7.27235 12.7226 7.66968 12.6045 7.93068 12.3683C8.19168 12.1321 8.36785 11.7379 8.45935 11.1855C8.54685 10.655 8.50702 10.2807 8.33977 10.0626C8.17252 9.84455 7.83727 9.73555 7.33477 9.73555H6.42835L5.93435 12.7225M7.83573 8.60932C8.60102 8.60932 9.15931 8.84534 9.51022 9.31738C9.86114 9.78942 9.96677 10.4484 9.82677 11.2944C9.76914 11.6429 9.67168 11.9615 9.53447 12.2502C9.39727 12.5389 9.21773 12.8032 8.99606 13.0427C8.73189 13.3332 8.43843 13.5402 8.11552 13.6636C7.7926 13.7872 7.38135 13.8488 6.88135 13.8488H5.74818L5.43443 15.7462H4.11152L5.29168 8.60932H7.83564" fill="white"/>
<path d="M12.9827 13.996C12.9454 13.996 12.91 13.9765 12.8863 13.9426C12.8626 13.9087 12.8529 13.8642 12.86 13.8211L13.3821 10.6633C13.4318 10.363 13.4195 10.1474 13.3476 10.0563C13.3036 10.0007 13.1715 9.90729 12.7807 9.90729H11.8348L11.1783 13.8771C11.1728 13.9106 11.1575 13.9407 11.1351 13.9624C11.1127 13.9841 11.0846 13.996 11.0556 13.996H9.7431C9.72467 13.996 9.70646 13.9912 9.68979 13.982C9.67311 13.9727 9.65838 13.9593 9.64666 13.9425C9.63493 13.9258 9.62649 13.9063 9.62195 13.8853C9.61741 13.8643 9.61688 13.8424 9.6204 13.8211L10.8007 6.68422C10.8063 6.65075 10.8215 6.6206 10.8439 6.59891C10.8663 6.57723 10.8944 6.56537 10.9234 6.56538H12.2359C12.2544 6.56538 12.2726 6.57017 12.2893 6.57941C12.3059 6.58865 12.3207 6.60211 12.3324 6.61883C12.3441 6.63554 12.3525 6.6551 12.3571 6.6761C12.3616 6.6971 12.3622 6.71902 12.3586 6.74029L12.0738 8.46283H13.0914C13.8666 8.46283 14.3922 8.62344 14.6985 8.95387C15.011 9.29095 15.1079 9.82988 14.9879 10.556L14.4388 13.8772C14.4332 13.9107 14.418 13.9408 14.3956 13.9625C14.3732 13.9842 14.3451 13.9961 14.3161 13.9961H12.9827L12.9827 13.996Z" fill="black"/>
<path d="M12.2359 6.41816H10.9234C10.8654 6.41816 10.8091 6.44188 10.7644 6.48525C10.7196 6.52863 10.689 6.58895 10.678 6.65589L9.49763 13.7928C9.4906 13.8353 9.49166 13.8791 9.50074 13.9211C9.50982 13.9631 9.52669 14.0022 9.55015 14.0357C9.5736 14.0691 9.60306 14.096 9.63641 14.1145C9.66976 14.133 9.70617 14.1426 9.74304 14.1426H11.0555C11.1136 14.1426 11.1698 14.1189 11.2146 14.0755C11.2593 14.0321 11.2899 13.9718 11.301 13.9048L11.9378 10.0539H12.7807C13.1708 10.0539 13.2527 10.1518 13.256 10.156C13.2796 10.1859 13.3108 10.3245 13.2594 10.6349L12.7373 13.7928C12.7303 13.8353 12.7313 13.8791 12.7404 13.9211C12.7495 13.9631 12.7664 14.0022 12.7898 14.0357C12.8133 14.0691 12.8427 14.096 12.8761 14.1145C12.9094 14.133 12.9458 14.1426 12.9827 14.1426H14.316C14.3741 14.1426 14.4303 14.1189 14.4751 14.0755C14.5198 14.0321 14.5504 13.9718 14.5615 13.9048L15.1106 10.5837C15.2395 9.80415 15.1293 9.21929 14.7831 8.84538C14.4528 8.48891 13.8995 8.31556 13.0915 8.31556H12.2255L12.4814 6.76798C12.4885 6.72544 12.4874 6.6816 12.4783 6.63959C12.4692 6.59759 12.4524 6.55847 12.4289 6.52503C12.4055 6.49159 12.376 6.46466 12.3427 6.44618C12.3093 6.4277 12.2729 6.41811 12.236 6.41811M12.236 6.71191L11.9223 8.60936H13.0915C13.8272 8.60936 14.3347 8.76028 14.614 9.06172C14.8933 9.36315 14.9769 9.85204 14.8653 10.5277L14.3162 13.8488H12.9828L13.5049 10.691C13.5643 10.3318 13.5425 10.0868 13.4393 9.95614C13.3362 9.8255 13.1166 9.76008 12.7808 9.76008H11.7317L11.0556 13.8488H9.74313L10.9235 6.71191H12.236" fill="white"/>
<path d="M17.0646 12.576C17.5674 12.576 17.9426 12.467 18.1801 12.2523C18.415 12.0398 18.5772 11.6716 18.6623 11.1578C18.7416 10.6776 18.7114 10.3423 18.5725 10.1614C18.4306 9.97659 18.1236 9.88287 17.6603 9.88287H16.857L16.4116 12.576H17.0646L17.0646 12.576ZM14.4371 15.8935C14.3998 15.8935 14.3644 15.8739 14.3406 15.84C14.3289 15.8233 14.3205 15.8037 14.3159 15.7827C14.3114 15.7617 14.3108 15.7398 14.3144 15.7185L15.4947 8.58168C15.5002 8.54821 15.5155 8.51804 15.5379 8.49636C15.5603 8.47468 15.5884 8.46282 15.6174 8.46284H18.1613C18.9609 8.46284 19.5559 8.71746 19.93 9.22118C20.306 9.72701 20.4221 10.4341 20.2751 11.3228C20.2152 11.6849 20.1123 12.0211 19.9692 12.3222C19.8259 12.6236 19.6365 12.9025 19.4063 13.1512C19.1306 13.4544 18.8186 13.6743 18.4798 13.8037C18.1463 13.9313 17.7181 13.9961 17.2069 13.9961H16.1767L15.8827 15.7747C15.8772 15.8081 15.8619 15.8383 15.8395 15.86C15.8171 15.8817 15.789 15.8936 15.7599 15.8936H14.437L14.4371 15.8935Z" fill="black"/>
<path d="M16.9601 10.0294H17.6604C18.2196 10.0294 18.4138 10.1736 18.4798 10.2595C18.5894 10.4022 18.6101 10.703 18.5396 11.1294C18.4606 11.6069 18.3139 11.9454 18.1039 12.1355C17.8888 12.3301 17.5391 12.4287 17.0647 12.4287H16.5633L16.9601 10.0294ZM18.1613 8.31552H15.6174C15.5594 8.31553 15.5032 8.33926 15.4584 8.38263C15.4136 8.426 15.3831 8.48632 15.372 8.55326L14.1917 15.6902C14.1847 15.7328 14.1858 15.7766 14.1948 15.8186C14.2039 15.8606 14.2208 15.8997 14.2442 15.9331C14.2677 15.9666 14.2971 15.9935 14.3305 16.012C14.3638 16.0304 14.4002 16.04 14.4371 16.04H15.76C15.818 16.04 15.8743 16.0163 15.919 15.9729C15.9638 15.9296 15.9944 15.8692 16.0054 15.8023L16.2799 14.1426H17.207C17.7312 14.1426 18.1726 14.0754 18.5186 13.943C18.8745 13.8071 19.202 13.5767 19.4918 13.2581C19.7315 12.9991 19.9288 12.7082 20.0784 12.3936C20.228 12.079 20.3355 11.728 20.3979 11.3505C20.5527 10.415 20.4269 9.66592 20.0241 9.12416C19.6253 8.58763 18.9986 8.31557 18.1614 8.31557M16.2601 12.7226H17.0647C17.5981 12.7226 17.9954 12.6045 18.2564 12.3683C18.5174 12.1321 18.6936 11.7379 18.7851 11.1855C18.8726 10.655 18.8328 10.2807 18.6655 10.0626C18.4982 9.84455 18.163 9.73555 17.6605 9.73555H16.7541L16.2601 12.7225M18.1614 8.60932C18.9267 8.60932 19.485 8.84534 19.8359 9.31738C20.1868 9.78942 20.2925 10.4484 20.1525 11.2944C20.0948 11.6429 19.9974 11.9615 19.8602 12.2502C19.723 12.5389 19.5434 12.8032 19.3218 13.0427C19.0576 13.3332 18.7641 13.5402 18.4412 13.6636C18.1183 13.7872 17.7071 13.8488 17.2071 13.8488H16.0739L15.7601 15.7462H14.4372L15.6176 8.60937H18.1615" fill="white"/>
</g>
<defs>
<radialGradient id="paint0_radial_1374_6435" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.39665 7.14128) scale(15.1274 17.7777)">
<stop stop-color="#AEB2D5"/>
<stop offset="0.3" stop-color="#AEB2D5"/>
<stop offset="0.75" stop-color="#484C89"/>
<stop offset="1" stop-color="#484C89"/>
</radialGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 9.4 KiB

8
packages/nc-gui/assets/nc-icons/lang-python.svg

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M2 11.6171C2.00823 11.5902 2.01481 11.5625 2.01851 11.5348C2.03373 11.2506 2.03702 10.9632 2.06788 10.6787C2.11601 9.75736 2.42619 8.86867 2.96263 8.11449C3.20445 7.79018 3.51969 7.52663 3.88301 7.34502C4.24632 7.16341 4.64757 7.06882 5.05449 7.06885H11.7127C11.8422 7.06885 11.8422 7.06885 11.8422 6.94043V6.48181C11.8422 6.38724 11.8143 6.36604 11.725 6.36604H7.19284C7.1155 6.36604 7.08794 6.34443 7.08794 6.26494V4.02444C7.10275 3.69994 7.23933 3.39257 7.47052 3.16224C7.77756 2.8384 8.15987 2.5939 8.58412 2.45006C9.10224 2.26545 9.64092 2.14336 10.1885 2.08642C10.937 2.00173 11.6914 1.97923 12.4437 2.01916C13.2549 2.03424 14.0575 2.18182 14.8198 2.45617C15.3427 2.63092 15.8048 2.94896 16.1527 3.37341C16.4324 3.73005 16.5706 4.17581 16.5414 4.62655C16.5229 5.00568 16.5414 5.38765 16.5414 5.76963V7.88539C16.5414 8.30079 16.5414 8.71946 16.5229 9.13201C16.5199 9.5794 16.38 10.0153 16.1215 10.3822C15.8631 10.7491 15.4984 11.0296 15.0757 11.1866C14.6656 11.353 14.2259 11.4361 13.7827 11.4308H9.06832C8.5698 11.4214 8.07843 11.5494 7.64906 11.8006C7.09997 12.1425 6.7088 12.685 6.56014 13.3105C6.47068 13.6259 6.42596 13.952 6.42726 14.2795V16.3977C6.42726 16.5384 6.42726 16.5355 6.28534 16.5384C5.77317 16.5384 5.261 16.5539 4.74267 16.5384C4.23539 16.5181 3.75154 16.3214 3.37606 15.9827C2.9396 15.5894 2.61419 15.09 2.43195 14.5339C2.24725 14.0284 2.12997 13.5012 2.0831 12.9656C2.05225 12.6232 2.0399 12.2808 2.01851 11.9416C2.0145 11.9036 2.00832 11.8659 2 11.8287V11.6171Z" fill="#3772A4"/>
<path d="M8.36359 4.73391C8.36486 4.91343 8.41927 5.08855 8.51993 5.23719C8.6206 5.38584 8.76302 5.50135 8.92924 5.56916C9.09547 5.63698 9.27805 5.65406 9.45397 5.61825C9.62988 5.58245 9.79126 5.49536 9.91775 5.36797C10.0442 5.24058 10.1302 5.07859 10.1647 4.90242C10.1993 4.72626 10.1809 4.54381 10.1119 4.37807C10.0429 4.21233 9.92642 4.07074 9.77706 3.97113C9.62771 3.87152 9.4522 3.81836 9.27268 3.81836C9.03101 3.82018 8.79986 3.91743 8.62958 4.08892C8.4593 4.26041 8.36369 4.49224 8.36359 4.73391Z" fill="black"/>
<path d="M8.36359 4.72744C8.36359 4.60806 8.3871 4.48984 8.43279 4.37955C8.47847 4.26925 8.54543 4.16904 8.62985 4.08462C8.71427 4.00021 8.81448 3.93324 8.92478 3.88756C9.03507 3.84187 9.15328 3.81836 9.27267 3.81836C9.39205 3.81836 9.51026 3.84187 9.62056 3.88756C9.73085 3.93324 9.83107 4.00021 9.91548 4.08462C9.9999 4.16904 10.0669 4.26925 10.1125 4.37955C10.1582 4.48984 10.1817 4.60806 10.1817 4.72744C10.1817 4.96854 10.086 5.19977 9.91548 5.37025C9.745 5.54074 9.51377 5.63652 9.27267 5.63652C9.03156 5.63652 8.80034 5.54074 8.62985 5.37025C8.45936 5.19977 8.36359 4.96854 8.36359 4.72744Z" fill="white"/>
<path d="M21.9997 12.382C21.9915 12.4089 21.9849 12.4366 21.9812 12.4647C21.966 12.7488 21.9627 13.0362 21.9318 13.3206C21.8836 14.2417 21.5734 15.1305 21.0369 15.8843C20.7953 16.209 20.4801 16.4731 20.1167 16.6552C19.7533 16.8372 19.3518 16.9323 18.9446 16.9326H12.2849C12.1553 16.9326 12.1553 16.9326 12.1553 17.0609V17.5195C12.1553 17.614 12.1832 17.6356 12.2725 17.6356H16.8061C16.8831 17.6356 16.9111 17.6568 16.9111 17.7363V19.9763C16.896 20.3007 16.7596 20.608 16.5284 20.8383C16.2212 21.1621 15.8386 21.4066 15.4141 21.5504C14.8969 21.7347 14.3593 21.8567 13.8127 21.9139C13.0638 21.9987 12.3092 22.0211 11.5566 21.9812C10.7456 21.9663 9.94266 21.8187 9.18032 21.5442C8.65735 21.3695 8.19509 21.0516 7.84715 20.6272C7.5674 20.2706 7.42909 19.825 7.45831 19.3743C7.47682 18.9953 7.45831 18.6134 7.45831 18.2315V16.1162C7.45831 15.7009 7.45831 15.2823 7.47682 14.8698C7.47974 14.4226 7.61965 13.9867 7.87805 13.6199C8.13645 13.2531 8.50117 12.9727 8.92397 12.8157C9.3342 12.6493 9.77399 12.5663 10.2172 12.5715H14.9298C15.4285 12.581 15.9199 12.453 16.3494 12.2019C16.8993 11.8591 17.2906 11.3156 17.4386 10.6889C17.528 10.3737 17.5728 10.0476 17.5715 9.72014V7.60239C17.5715 7.46178 17.5715 7.46504 17.7134 7.46178C18.2257 7.46178 18.738 7.4467 19.2565 7.46178C19.7639 7.48229 20.2479 7.67927 20.6234 8.01812C21.0599 8.41143 21.3854 8.91069 21.5677 9.46663C21.7518 9.97398 21.868 10.503 21.9133 11.0403C21.9442 11.3826 21.9565 11.725 21.9783 12.0641C21.9825 12.1012 21.9886 12.1379 21.9969 12.1741C21.9989 12.2414 21.9997 12.3107 21.9997 12.382Z" fill="#FFDA4B"/>
<path d="M15.6362 19.2659C15.6349 19.0864 15.5805 18.9113 15.4799 18.7626C15.3792 18.614 15.2368 18.4985 15.0706 18.4306C14.9043 18.3628 14.7218 18.3457 14.5458 18.3815C14.3699 18.4173 14.2085 18.5044 14.082 18.6318C13.9556 18.7592 13.8696 18.9212 13.8351 19.0974C13.8005 19.2735 13.8189 19.456 13.8879 19.6217C13.9569 19.7875 14.0734 19.9291 14.2227 20.0287C14.3721 20.1283 14.5476 20.1814 14.7271 20.1814C14.9688 20.1796 15.1999 20.0824 15.3702 19.9109C15.5405 19.7394 15.6361 19.5076 15.6362 19.2659Z" fill="black"/>
<path d="M15.6362 19.2724C15.6362 19.5135 15.5404 19.7447 15.37 19.9152C15.1995 20.0857 14.9682 20.1814 14.7271 20.1814C14.486 20.1814 14.2548 20.0857 14.0843 19.9152C13.9138 19.7447 13.8181 19.5135 13.8181 19.2724C13.8181 19.0313 13.9138 18.8 14.0843 18.6295C14.2548 18.4591 14.486 18.3633 14.7271 18.3633C14.9682 18.3633 15.1995 18.4591 15.37 18.6295C15.5404 18.8 15.6362 19.0313 15.6362 19.2724Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 5.1 KiB

51
packages/nc-gui/assets/nc-icons/lang-ruby.svg

@ -0,0 +1,51 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_1374_6473)">
<path d="M0 0H24V24H0" fill="none"/>
<path d="M7.21875 20.1562L19.2656 19.3594V11.625" fill="#881100"/>
<path d="M19.2656 19.3594L11.5781 18.75L15.375 15.8906L19.2656 19.3594ZM19.2656 19.3594L18.2344 12.2344L20.1562 7.54688" fill="#BB1100"/>
<path d="M3.79688 16.875C3.85938 19.125 5 20.2188 7.21875 20.1562C13.2656 19.7812 19.6875 12.3281 20.1562 7.54688C20.3438 5.42188 19.4844 4.20312 17.5781 3.89062L15.0469 5.29688C15.0469 5.29688 14.5312 14.3906 4.82812 14.8594" fill="#990000"/>
<path d="M3.79688 16.875L4.03125 12.3281L4.92188 14.8594" fill="url(#paint0_linear_1374_6473)"/>
<path d="M4.92188 14.8594L7.21875 20.1562L9.09375 13.9219" fill="url(#paint1_linear_1374_6473)"/>
<path d="M9.09375 13.9219L13.7812 9.51562L15.375 15.9375" fill="url(#paint2_linear_1374_6473)"/>
<path d="M13.7812 9.51562L15.0469 5.29688L19.7812 9.14062" fill="url(#paint3_linear_1374_6473)"/>
<path d="M7.26561 7.3596C6.06107 8.59388 5.13462 9.98027 4.68944 11.2147C4.24426 12.4492 4.31669 13.4309 4.89084 13.9447C5.46499 14.4584 6.494 14.4622 7.75219 13.9552C9.01039 13.4482 10.3951 12.4719 11.6026 11.2402C12.81 10.0086 13.7418 8.62222 14.1934 7.38516C14.6451 6.1481 14.5798 5.16134 14.0118 4.64127C13.4439 4.12119 12.4197 4.11027 11.1638 4.6109C9.90791 5.11152 8.52289 6.08282 7.31249 7.31179" fill="url(#paint4_linear_1374_6473)"/>
<path d="M17.5781 3.89062H13.0781L15.0469 5.29688L17.5781 3.89062ZM17.5781 3.89062L31.6406 -24.2344L17.5781 3.89062Z" fill="url(#paint5_linear_1374_6473)"/>
</g>
<defs>
<linearGradient id="paint0_linear_1374_6473" x1="3.79688" y1="12.3281" x2="6.10872" y2="15.1881" gradientUnits="userSpaceOnUse">
<stop offset="0.2" stop-color="white"/>
<stop offset="0.4" stop-color="#DD5533"/>
<stop offset="0.6" stop-color="#BB1100"/>
</linearGradient>
<linearGradient id="paint1_linear_1374_6473" x1="4.92188" y1="13.9219" x2="6.70081" y2="19.8739" gradientUnits="userSpaceOnUse">
<stop offset="0.2" stop-color="white"/>
<stop offset="0.4" stop-color="#DD5533"/>
<stop offset="0.6" stop-color="#BB1100"/>
</linearGradient>
<linearGradient id="paint2_linear_1374_6473" x1="9.09375" y1="9.51562" x2="10.4046" y2="15.9263" gradientUnits="userSpaceOnUse">
<stop offset="0.2" stop-color="white"/>
<stop offset="0.4" stop-color="#DD5533"/>
<stop offset="0.6" stop-color="#BB1100"/>
</linearGradient>
<linearGradient id="paint3_linear_1374_6473" x1="13.7813" y1="5.29688" x2="14.3863" y2="9.59929" gradientUnits="userSpaceOnUse">
<stop offset="0.2" stop-color="white"/>
<stop offset="0.4" stop-color="#DD5533"/>
<stop offset="0.6" stop-color="#BB1100"/>
</linearGradient>
<linearGradient id="paint4_linear_1374_6473" x1="4.401" y1="14.3327" x2="14.4906" y2="4.24316" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.1" stop-color="#DD3322"/>
<stop offset="0.2" stop-color="#880000"/>
<stop offset="1" stop-color="#DD2200"/>
</linearGradient>
<linearGradient id="paint5_linear_1374_6473" x1="13.0781" y1="5.29688" x2="39.6891" y2="-11.43" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.1" stop-color="#DD3322"/>
<stop offset="0.2" stop-color="#880000"/>
<stop offset="1" stop-color="#DD2200"/>
</linearGradient>
<clipPath id="clip0_1374_6473">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

38
packages/nc-gui/assets/nc-icons/lang-shell.svg

@ -0,0 +1,38 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="24px"
height="24px">
<defs>
<linearGradient x1="35.753" y1="3.643" x2="11.271" y2="46.048" gradientUnits="userSpaceOnUse" id="color-1">
<stop offset="0" stop-color="white"></stop>
<stop offset="0.26" stop-color="white"></stop>
<stop offset="0.678" stop-color="white"></stop>
<stop offset="1" stop-color="white"></stop>
</linearGradient>
<linearGradient x1="32.281" y1="26.55" x2="23.433" y2="41.876" gradientUnits="userSpaceOnUse" id="color-2">
<stop offset="0" stop-color="white"></stop>
<stop offset="0.26" stop-color="white"></stop>
<stop offset="0.678" stop-color="white"></stop>
<stop offset="1" stop-color="white"></stop>
</linearGradient>
</defs>
<g fill="none" fill-rule="none" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter"
stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none"
font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g transform="scale(5.33333,5.33333)">
<path
d="M22.903,3.286c0.679,-0.381 1.515,-0.381 2.193,0c3.355,1.883 13.451,7.551 16.807,9.434c0.679,0.38 1.097,1.084 1.097,1.846c0,3.766 0,15.101 0,18.867c0,0.762 -0.418,1.466 -1.097,1.847c-3.355,1.883 -13.451,7.551 -16.807,9.434c-0.679,0.381 -1.515,0.381 -2.193,0c-3.355,-1.883 -13.451,-7.551 -16.807,-9.434c-0.678,-0.381 -1.096,-1.084 -1.096,-1.846c0,-3.766 0,-15.101 0,-18.867c0,-0.762 0.418,-1.466 1.097,-1.847c3.354,-1.883 13.452,-7.551 16.806,-9.434z"
fill="url(#color-1)" fill-rule="evenodd"></path>
<path
d="M23.987,46.221c-1.085,0 -2.171,-0.252 -3.165,-0.757c-2.22,-1.127 -5.118,-2.899 -7.921,-4.613c-1.973,-1.206 -3.836,-2.346 -5.297,-3.157c-2.223,-1.236 -3.604,-3.581 -3.604,-6.122v-14.945c0,-2.59 1.417,-4.955 3.699,-6.173c3.733,-1.989 9.717,-5.234 12.878,-7.01v0c2.11,-1.184 4.733,-1.184 6.844,0c3.576,2.007 10.369,6.064 14.252,8.513c1.457,0.917 2.327,2.496 2.327,4.225v15.818c0,2.4 -0.859,4.048 -2.553,4.895c-0.944,0.531 -2.628,1.576 -4.578,2.787c-3.032,1.882 -6.806,4.225 -9.564,5.705c-1.035,0.555 -2.177,0.834 -3.318,0.834zM21.556,5.188c-3.172,1.782 -9.174,5.038 -12.916,7.032c-1.628,0.868 -2.64,2.556 -2.64,4.407v14.945c0,1.814 0.987,3.49 2.576,4.373c1.498,0.832 3.378,1.981 5.369,3.199c2.77,1.693 5.634,3.445 7.783,4.536c1.458,0.739 3.188,0.717 4.631,-0.056c2.703,-1.451 6.447,-3.775 9.456,-5.643c1.97,-1.223 3.671,-2.279 4.696,-2.854c1.324,-0.663 1.489,-2.018 1.489,-3.127v-15.818c0,-1.037 -0.521,-1.983 -1.392,-2.532c-3.862,-2.435 -10.613,-6.467 -14.165,-8.461c-1.53,-0.858 -3.357,-0.858 -4.887,-0.001z"
fill="#2f3a3e" fill-rule="nonzero"></path>
<path
d="M22.977,41.654l-0.057,-13.438c-0.011,-2.594 1.413,-4.981 3.701,-6.204l12.01,-6.416c1.998,-1.068 4.414,0.38 4.414,2.646v14.73c0,1.041 -0.54,2.008 -1.426,2.554l-14.068,8.668c-1.994,1.23 -4.564,-0.198 -4.574,-2.54z"
fill="#2f3a3e" fill-rule="nonzero"></path>
<path
d="M28.799,26.274c0.123,-0.063 0.225,0.014 0.227,0.176l0.013,1.32c0.552,-0.219 1.032,-0.278 1.467,-0.177c0.095,0.024 0.136,0.153 0.098,0.306l-0.291,1.169c-0.024,0.089 -0.072,0.178 -0.132,0.233c-0.026,0.025 -0.052,0.044 -0.077,0.057c-0.04,0.02 -0.078,0.026 -0.114,0.019c-0.199,-0.045 -0.671,-0.148 -1.413,0.228c-0.778,0.395 -1.051,1.071 -1.046,1.573c0.007,0.601 0.315,0.783 1.377,0.802c1.416,0.023 2.027,0.643 2.042,2.067c0.016,1.402 -0.733,2.905 -1.876,3.826l0.025,1.308c0.001,0.157 -0.1,0.338 -0.225,0.4l-0.775,0.445c-0.123,0.063 -0.225,-0.014 -0.227,-0.172l-0.013,-1.286c-0.664,0.276 -1.334,0.342 -1.763,0.17c-0.082,-0.032 -0.117,-0.152 -0.084,-0.288l0.28,-1.181c0.022,-0.092 0.071,-0.186 0.138,-0.246c0.023,-0.023 0.048,-0.04 0.072,-0.053c0.044,-0.022 0.087,-0.027 0.124,-0.013c0.462,0.155 1.053,0.082 1.622,-0.206c0.722,-0.365 1.206,-1.102 1.198,-1.834c-0.007,-0.664 -0.366,-0.939 -1.241,-0.946c-1.113,0.002 -2.151,-0.216 -2.168,-1.855c-0.014,-1.35 0.688,-2.753 1.799,-3.641l-0.013,-1.319c-0.001,-0.162 0.098,-0.34 0.225,-0.405z"
fill="url(#color-2)" fill-rule="nonzero"></path>
<path
d="M37.226,34.857l-3.704,2.185c-0.109,0.061 -0.244,-0.019 -0.244,-0.143v-1.252c0,-0.113 0.061,-0.217 0.16,-0.273l3.704,-2.185c0.111,-0.061 0.246,0.019 0.246,0.145v1.248c0,0.115 -0.062,0.219 -0.162,0.275"
fill="#3ab14a" fill-rule="nonzero"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

9
packages/nc-gui/components/smartsheet/Details.vue

@ -103,11 +103,12 @@ watch(openedSubTab, () => {
@apply flex flex-row items-center gap-x-1.5 pr-0.5; @apply flex flex-row items-center gap-x-1.5 pr-0.5;
} }
:deep(.ant-tabs-nav) { :deep(.nc-details-tab > .ant-tabs-nav:first-of-type) {
min-height: calc(var(--toolbar-height) - 1px); min-height: calc(var(--toolbar-height) - 1px);
}
:deep(.ant-tabs-tab) { .ant-tabs-tab {
@apply pt-2 pb-3; @apply pt-3 pb-3 text-small leading-[18px];
}
} }
</style> </style>

342
packages/nc-gui/components/smartsheet/details/Api.vue

@ -26,38 +26,49 @@ const indicator = h(LoadingOutlined, {
const { copy } = useCopy() const { copy } = useCopy()
const isCopied = ref(false)
const langs = [ const langs = [
{ {
name: 'shell', name: 'shell',
clients: ['curl', 'wget'], clients: ['curl', 'wget'],
icon: iconMap.langShell,
}, },
{ {
name: 'javascript', name: 'javascript',
clients: ['axios', 'fetch', 'jquery', 'xhr'], clients: ['axios', 'fetch', 'jquery', 'xhr'],
icon: iconMap.langJavascript,
}, },
{ {
name: 'node', name: 'node',
clients: ['axios', 'fetch', 'request', 'native', 'unirest'], clients: ['axios', 'fetch', 'request', 'native', 'unirest'],
icon: iconMap.langNode,
}, },
{ {
name: 'nocodb-sdk', name: 'NocoDB-SDK',
clients: ['javascript', 'node'], clients: ['javascript', 'node'],
icon: iconMap.langNocodbSdk,
}, },
{ {
name: 'php', name: 'php',
icon: iconMap.langPhp,
}, },
{ {
name: 'python', name: 'python',
clients: ['python3', 'requests'], clients: ['python3', 'requests'],
icon: iconMap.langPython,
}, },
{ {
name: 'ruby', name: 'ruby',
icon: iconMap.langRuby,
}, },
{ {
name: 'java', name: 'java',
icon: iconMap.langJava,
}, },
{ {
name: 'c', name: 'c',
icon: iconMap.langC,
}, },
] ]
@ -96,31 +107,31 @@ const snippet = computed(
const activeLang = computed(() => langs.find((lang) => lang.name === selectedLangName.value)) const activeLang = computed(() => langs.find((lang) => lang.name === selectedLangName.value))
const code = computed(() => { const code = computed(() => {
if (activeLang.value?.name === 'nocodb-sdk') { if (activeLang.value?.name === 'NocoDB-SDK') {
return `${selectedClient.value === 'node' ? 'const { Api } = require("nocodb-sdk");' : 'import { Api } from "nocodb-sdk";'} return `${selectedClient.value === 'node' ? 'const { Api } = require("nocodb-sdk");' : 'import { Api } from "nocodb-sdk";'}
const api = new Api({ const api = new Api({
baseURL: "${(appInfo.value && appInfo.value.ncSiteUrl) || '/'}", baseURL: "${(appInfo.value && appInfo.value.ncSiteUrl) || '/'}",
headers: { headers: {
"xc-token": "CREATE_YOUR_API_TOKEN_FROM ${location.origin + location.pathname}#/account/tokens" "xc-token": "CREATE_YOUR_API_TOKEN_FROM ${location.origin + location.pathname}#/account/tokens"
} }
}) })
api.dbViewRow.list( api.dbViewRow.list(
"noco", "noco",
${JSON.stringify(base.value?.id)}, ${JSON.stringify(base.value?.id)},
${JSON.stringify(meta.value?.id)}, ${JSON.stringify(meta.value?.id)},
${JSON.stringify(view.value?.id)}, ${JSON.stringify(queryParams.value, null, 4)}).then(function (data) { ${JSON.stringify(view.value?.id)}, ${JSON.stringify(queryParams.value, null, 4)}).then(function (data) {
console.log(data); console.log(data);
}).catch(function (error) { }).catch(function (error) {
console.error(error); console.error(error);
}); });`
`
} }
return snippet.value.convert( return snippet.value.convert(
activeLang.value?.name, activeLang.value?.name,
selectedClient.value || (activeLang.value?.clients && activeLang.value?.clients[0]), selectedClient.value || (activeLang.value?.clients && activeLang.value?.clients[0]),
{}, { indent: '\t' },
) )
}) })
@ -129,6 +140,12 @@ const onCopyToClipboard = async () => {
await copy(code.value) await copy(code.value)
// Copied to clipboard // Copied to clipboard
message.info(t('msg.info.copiedToClipboard')) message.info(t('msg.info.copiedToClipboard'))
isCopied.value = true
setTimeout(() => {
isCopied.value = false
}, 5000)
} catch (e: any) { } catch (e: any) {
message.error(e.message) message.error(e.message)
} }
@ -137,79 +154,248 @@ const onCopyToClipboard = async () => {
watch(activeLang, (newLang) => { watch(activeLang, (newLang) => {
selectedClient.value = newLang?.clients?.[0] selectedClient.value = newLang?.clients?.[0]
}) })
const supportedDocs = [
{
title: 'Data APIs',
href: 'https://data-apis-v2.nocodb.com/',
},
{
title: 'Meta APIs',
href: 'https://meta-apis-v2.nocodb.com/',
},
{
title: 'Create API Token',
href: 'https://docs.nocodb.com/account-settings/api-tokens/#create-api-token',
},
{
title: 'Swagger',
href: 'https://docs.nocodb.com/bases/actions-on-base/#rest-apis',
},
] as {
title: string
href: string
}[]
const handleNavigateToDocs = (href: string) => {
navigateTo(href, {
open: navigateToBlankTargetOpenOption,
})
}
</script> </script>
<template> <template>
<div class="flex flex-col w-full h-full px-6 mt-1"> <div
<NcTabs v-model:activeKey="selectedLangName" class="!h-full"> class="p-6"
<a-tab-pane v-for="item in langs" :key="item.name" class="!h-full"> :style="{
<template #tab> height: 'calc(100vh - var(--topbar-height) - var(--toolbar-height) - 16px)',
<div class="text-sm capitalize select-none"> maxHeight: 'calc(100vh - var(--topbar-height) - var(--toolbar-height) - 16px)',
}"
>
<div class="flex gap-4 max-w-[1000px] mx-auto h-full">
<NcMenu class="nc-api-snippets-menu !h-full w-[252px] min-w-[252px] nc-scrollbar-thin !pr-3">
<div
class="p-2 text-xs text-gray-500 uppercase font-semibold"
:style="{
letterSpacing: '0.3px',
}"
>
{{ $t('general.languages') }}
</div>
<NcMenuItem
v-for="item in langs"
:key="item.name"
class="rounded-md capitalize select-none"
:class="{
'active-menu': selectedLangName === item.name,
}"
@click="selectedLangName = item.name"
>
<div class="flex gap-2 items-center">
<component :is="item.icon" class="!stroke-transparent h-5 w-5" />
{{ item.name }} {{ item.name }}
</div> </div>
</template> </NcMenuItem>
<div class="flex flex-row w-full space-x-3 my-4 items-center"> <NcDivider class="!my-3" />
<NcSelect
v-if="activeLang?.clients" <div class="flex flex-col gap-1">
v-model:value="selectedClient" <div
style="width: 10rem" class="p-2 text-xs text-gray-500 uppercase font-semibold"
class="capitalize" :style="{
dropdown-class-name="nc-dropdown-snippet-active-lang" letterSpacing: '0.3px',
> }"
<a-select-option v-for="(client, i) in activeLang?.clients" :key="i" class="!w-full capitalize" :value="client">
<div class="flex items-center w-full justify-between w-full gap-2">
<div class="truncate flex-1">{{ client }}</div>
<component
:is="iconMap.check"
v-if="selectedClient === client"
id="nc-selected-item-icon"
class="text-primary w-4 h-4"
/>
</div>
</a-select-option>
</NcSelect>
<NcButton
v-e="[
'c:snippet:copy',
{ client: activeLang?.clients && (selectedClient || activeLang?.clients[0]), lang: activeLang?.name },
]"
type="secondary"
size="small"
@click="onCopyToClipboard"
> >
<div class="flex items-center"> {{ $t('labels.documentation') }}
<GeneralIcon icon="copy" class="mr-1" /> </div>
{{ $t('general.copy') }} code
</div> <div v-for="(doc, idx) of supportedDocs" :key="idx" class="flex items-center gap-2 px-2 h-7">
</NcButton> <GeneralIcon icon="bookOpen" class="flex-none w-4 h-4 text-gray-600" />
<a
:href="doc.href"
target="_blank"
rel="noopener noreferrer"
class="!text-gray-700 text-small leading-[18px] !no-underline !hover:underline"
>
{{ doc.title }}
</a>
</div>
</div> </div>
</NcMenu>
<div class="w-[calc(100%_-_264px)] flex flex-col gap-6 h-full max-h-full">
<div class="nc-api-clents-tab-wrapper h-[calc(100%_-_56px)] flex flex-col mt-2">
<NcTabs v-model:activeKey="selectedClient" class="nc-api-clents-tab">
<template #rightExtra>
<NcButton
v-e="[
'c:snippet:copy',
{ client: activeLang?.clients && (selectedClient || activeLang?.clients[0]), lang: activeLang?.name },
]"
type="text"
size="small"
class="!hover:bg-gray-200"
@click="onCopyToClipboard"
>
<div class="flex items-center gap-2 text-small leading-[18px] min-w-80px justify-center">
<GeneralIcon
:icon="isCopied ? 'circleCheck' : 'copy'"
class="h-4 w-4"
:class="{
'text-gray-700': !isCopied,
'text-green-700': isCopied,
}"
/>
{{ isCopied ? $t('general.copied') : $t('general.copy') }}
</div>
</NcButton>
</template>
<Suspense> <a-tab-pane v-for="client in activeLang?.clients || ['default']" :key="client" class="!h-full">
<MonacoEditor <template #tab>
class="border-1 border-gray-200 py-4 rounded-lg" <div class="text-small leading-[18px] capitalize select-none">
style="height: calc(100vh - (var(--topbar-height) * 2) - 8rem)" {{ client }}
:model-value="code" </div>
:read-only="true" </template>
lang="typescript" <div></div>
:validate="false" </a-tab-pane>
:disable-deep-compare="true" </NcTabs>
hide-minimap <Suspense>
/> <MonacoEditor
<template #fallback> class="h-[calc(100%_-_36px)] !bg-gray-50 pl-2"
<div class="h-full w-full flex flex-col justify-center items-center mt-28"> :model-value="code"
<a-spin size="large" :indicator="indicator" /> :read-only="true"
</div> lang="typescript"
</template> :validate="false"
</Suspense> :disable-deep-compare="true"
</a-tab-pane> :monaco-config="{
</NcTabs> minimap: {
enabled: false,
},
fontSize: 13,
lineHeight: 18,
padding: {
top: 12,
bottom: 12,
},
overviewRulerBorder: false,
overviewRulerLanes: 0,
hideCursorInOverviewRuler: true,
lineDecorationsWidth: 12,
lineNumbersMinChars: 0,
roundedSelection: false,
selectOnLineNumbers: false,
scrollBeyondLastLine: false,
contextmenu: false,
glyphMargin: false,
folding: false,
bracketPairColorization: { enabled: false },
wordWrap: 'on',
scrollbar: {
horizontal: 'hidden',
verticalScrollbarSize: 6,
},
wrappingStrategy: 'advanced',
renderLineHighlight: 'none',
tabSize: 4,
detectIndentation: false,
insertSpaces: true,
lineNumbers: 'off',
}"
hide-minimap
/>
<template #fallback>
<div class="h-full w-full flex flex-col justify-center items-center mt-28">
<a-spin size="large" :indicator="indicator" />
</div>
</template>
</Suspense>
</div>
</div>
</div>
</div> </div>
</template> </template>
<style scoped> <style lang="scss" scoped>
:deep(.ant-tabs-tab + .ant-tabs-tab) { .nc-api-snippets-menu {
@apply !ml-7; @apply border-r-0 !py-0;
:deep(.ant-menu-item) {
@apply h-7 leading-5 my-1.5 px-2 text-gray-700 flex items-center;
.nc-menu-item-inner {
@apply text-small leading-[18px] text-current font-weight-500;
}
&:hover:not(.active-menu) {
@apply !bg-gray-100;
}
&.active-menu {
@apply bg-brand-50;
.nc-menu-item-inner {
@apply text-brand-600 font-semibold;
}
}
}
}
:deep(.nc-api-clents-tab.ant-tabs) {
.ant-tabs-nav {
@apply px-3;
.ant-tabs-tab {
@apply px-3 pt-2 pb-2.5;
& + .ant-tabs-tab {
@apply !ml-2;
}
&.ant-tabs-tab-active {
@apply font-semibold;
}
}
}
.ant-tabs-content {
@apply h-full;
}
}
</style>
<style lang="scss">
.nc-api-clents-tab-wrapper {
@apply bg-gray-50 border-1 border-gray-200 rounded-lg flex-1;
.monaco-editor {
@apply !border-0 !rounded-none pr-3;
}
.overflow-guard {
@apply !border-0 !rounded-none;
}
.monaco-editor,
.monaco-diff-editor,
.monaco-component {
--vscode-editor-background: #f9f9fa;
--vscode-editorGutter-background: #f9f9fa;
}
} }
</style> </style>

7
packages/nc-gui/lang/en.json

@ -210,6 +210,7 @@
"confirm": "Confirm", "confirm": "Confirm",
"generate": "Generate", "generate": "Generate",
"copy": "Copy", "copy": "Copy",
"copied": "Copied",
"are": "are", "are": "are",
"misc": "Miscellaneous", "misc": "Miscellaneous",
"lock": "Lock", "lock": "Lock",
@ -283,7 +284,8 @@
"connection": "Connection", "connection": "Connection",
"connections": "Connections", "connections": "Connections",
"private": "Private", "private": "Private",
"request": "Request" "request": "Request",
"languages": "Languages"
}, },
"objects": { "objects": {
"files": "files", "files": "files",
@ -1235,7 +1237,8 @@
"lockedFieldTooltip": "Pre-filled value" "lockedFieldTooltip": "Pre-filled value"
}, },
"getPreFilledLink": "Get Pre-filled Link", "getPreFilledLink": "Get Pre-filled Link",
"group": "Group" "group": "Group",
"goToDocs": "Go to Docs"
}, },
"tooltip": { "tooltip": {
"privateConnection": "Enable to make this connection private and hidden from other creators in this workspace.", "privateConnection": "Enable to make this connection private and hidden from other creators in this workspace.",

20
packages/nc-gui/utils/iconUtils.ts

@ -535,6 +535,17 @@ import NcChevronUpSmall from '~icons/nc-icons/chevron-up-small'
import NcChevronDownSmall from '~icons/nc-icons/chevron-down-small' import NcChevronDownSmall from '~icons/nc-icons/chevron-down-small'
import NcChevronUpDownSmall from '~icons/nc-icons/chevron-up-down-small' import NcChevronUpDownSmall from '~icons/nc-icons/chevron-up-down-small'
// Api snippets lang
import NcLangShell from '~icons/nc-icons/lang-shell.svg'
import NcLangJavascript from '~icons/nc-icons/lang-js.svg'
import NcLangNode from '~icons/nc-icons/lang-node.svg'
import NcLangNocodbSdk from '~icons/nc-icons/lang-nocodb-sdk.svg'
import NcLangPhp from '~icons/nc-icons/lang-php.svg'
import NcLangPython from '~icons/nc-icons/lang-python.svg'
import NcLangRuby from '~icons/nc-icons/lang-ruby.svg'
import NcLangJava from '~icons/nc-icons/lang-java.svg'
import NcLangC from '~icons/nc-icons/lang-c.svg'
// keep it for reference // keep it for reference
// todo: remove it after all icons are migrated // todo: remove it after all icons are migrated
/* export const iconMapOld = { /* export const iconMapOld = {
@ -1287,6 +1298,15 @@ export const iconMap = {
chevronUpSmall: NcChevronUpSmall, chevronUpSmall: NcChevronUpSmall,
chevronDownSmall: NcChevronDownSmall, chevronDownSmall: NcChevronDownSmall,
chevronUpDownSmall: NcChevronUpDownSmall, chevronUpDownSmall: NcChevronUpDownSmall,
langShell: NcLangShell,
langJavascript: NcLangJavascript,
langNode: NcLangNode,
langNocodbSdk: NcLangNocodbSdk,
langPhp: NcLangPhp,
langPython: NcLangPython,
langRuby: NcLangRuby,
langJava: NcLangJava,
langC: NcLangC,
} }
export const getMdiIcon = (type: string): any => { export const getMdiIcon = (type: string): any => {

Loading…
Cancel
Save