Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: app builder design changes (#5041)

Browse source 
* feat: version manager, realtime avatars + popover addition
This commit is contained in:
Gandharv 2022-12-29 17:18:24 +05:30 committed by GitHub
parent 0cb8507640
commit f9aa596994
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
73 changed files with 2734 additions and 1930 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/assets/images/icons/clear.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.08333 3.50033C4.08333 3.17816 4.3445 2.91699 4.66667 2.91699H11.6667C11.9888 2.91699 12.25 3.17816 12.25 3.50033C12.25 3.82249 11.9888 4.08366 11.6667 4.08366H4.66667C4.3445 4.08366 4.08333 3.82249 4.08333 3.50033ZM2.91667 7.00033C2.91667 6.67816 3.17783 6.41699 3.5 6.41699H10.5C10.8222 6.41699 11.0833 6.67816 11.0833 7.00033C11.0833 7.32249 10.8222 7.58366 10.5 7.58366H3.5C3.17783 7.58366 2.91667 7.32249 2.91667 7.00033ZM1.75 10.5003C1.75 10.1782 2.01117 9.91699 2.33333 9.91699H9.33333C9.6555 9.91699 9.91667 10.1782 9.91667 10.5003C9.91667 10.8225 9.6555 11.0837 9.33333 11.0837H2.33333C2.01117 11.0837 1.75 10.8225 1.75 10.5003Z" fill="#889096"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 810 B

5
frontend/assets/images/icons/editor/left-sidebar/comments-selected.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.863281" y="1.20898" width="31" height="31" rx="5.5" fill="#E6EDFE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0299 12.7093C12.6763 12.7093 12.3372 12.8498 12.0871 13.0998C11.8371 13.3499 11.6966 13.689 11.6966 14.0426V21.0998L13.2252 19.5712C13.3502 19.4462 13.5198 19.376 13.6966 19.376H19.6966C20.0502 19.376 20.3894 19.2355 20.6394 18.9855C20.8895 18.7354 21.0299 18.3963 21.0299 18.0426V14.0426C21.0299 13.689 20.8895 13.3499 20.6394 13.0998C20.3894 12.8498 20.0502 12.7093 19.6966 12.7093H13.0299ZM11.1443 12.157C11.6444 11.6569 12.3227 11.376 13.0299 11.376H19.6966C20.4039 11.376 21.0821 11.6569 21.5822 12.157C22.0823 12.6571 22.3633 13.3354 22.3633 14.0426V18.0426C22.3633 18.7499 22.0823 19.4282 21.5822 19.9283C21.0821 20.4284 20.4039 20.7093 19.6966 20.7093H13.9728L11.5014 23.1807C11.3107 23.3714 11.0239 23.4284 10.7748 23.3252C10.5257 23.222 10.3633 22.979 10.3633 22.7093V14.0426C10.3633 13.3354 10.6442 12.6571 11.1443 12.157ZM13.6966 15.376C14.0648 15.376 14.3633 15.6745 14.3633 16.0426V16.0493C14.3633 16.4175 14.0648 16.716 13.6966 16.716C13.3284 16.716 13.0299 16.4175 13.0299 16.0493V16.0426C13.0299 15.6745 13.3284 15.376 13.6966 15.376ZM16.3633 15.376C16.7315 15.376 17.0299 15.6745 17.0299 16.0426V16.0493C17.0299 16.4175 16.7315 16.716 16.3633 16.716C15.9951 16.716 15.6966 16.4175 15.6966 16.0493V16.0426C15.6966 15.6745 15.9951 15.376 16.3633 15.376ZM19.0299 15.376C19.3981 15.376 19.6966 15.6745 19.6966 16.0426V16.0493C19.6966 16.4175 19.3981 16.716 19.0299 16.716C18.6618 16.716 18.3633 16.4175 18.3633 16.0493V16.0426C18.3633 15.6745 18.6618 15.376 19.0299 15.376Z" fill="#3E63DD"/>
<rect x="0.863281" y="1.20898" width="31" height="31" rx="5.5" stroke="#3E63DD"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

4
frontend/assets/images/icons/editor/left-sidebar/comments.svg
View file

@ -1,3 +1,3 @@
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.125 1H3.875C3.17942 1.00198 2.51289 1.27918 2.02103 1.77103C1.52918 2.26289 1.25198 2.92942 1.25 3.625V12.625C1.25198 13.3206 1.52918 13.9871 2.02103 14.479C2.51289 14.9708 3.17942 15.248 3.875 15.25H5.75V19L10.1431 15.3372C10.2106 15.2808 10.2957 15.25 10.3836 15.25H18.125C18.8206 15.248 19.4871 14.9708 19.979 14.479C20.4708 13.9871 20.748 13.3206 20.75 12.625V3.625C20.748 2.92942 20.4708 2.26289 19.979 1.77103C19.4871 1.27918 18.8206 1.00198 18.125 1V1Z" stroke="black" stroke-linejoin="round"/>
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5417 12.8714C13.188 12.8714 12.8489 13.0119 12.5989 13.2619C12.3488 13.512 12.2083 13.8511 12.2083 14.2048V21.2619L13.7369 19.7333C13.862 19.6083 14.0315 19.5381 14.2083 19.5381H20.2083C20.562 19.5381 20.9011 19.3976 21.1511 19.1476C21.4012 18.8975 21.5417 18.5584 21.5417 18.2048V14.2048C21.5417 13.8511 21.4012 13.512 21.1511 13.2619C20.9011 13.0119 20.562 12.8714 20.2083 12.8714H13.5417ZM11.656 12.3191C12.1561 11.819 12.8344 11.5381 13.5417 11.5381H20.2083C20.9156 11.5381 21.5939 11.819 22.094 12.3191C22.594 12.8192 22.875 13.4975 22.875 14.2048V18.2048C22.875 18.912 22.594 19.5903 22.094 20.0904C21.5939 20.5905 20.9156 20.8714 20.2083 20.8714H14.4845L12.0131 23.3428C11.8224 23.5335 11.5357 23.5905 11.2865 23.4873C11.0374 23.3842 10.875 23.1411 10.875 22.8714V14.2048C10.875 13.4975 11.156 12.8192 11.656 12.3191ZM14.2083 15.5381C14.5765 15.5381 14.875 15.8366 14.875 16.2048V16.2114C14.875 16.5796 14.5765 16.8781 14.2083 16.8781C13.8401 16.8781 13.5417 16.5796 13.5417 16.2114V16.2048C13.5417 15.8366 13.8401 15.5381 14.2083 15.5381ZM16.875 15.5381C17.2432 15.5381 17.5417 15.8366 17.5417 16.2048V16.2114C17.5417 16.5796 17.2432 16.8781 16.875 16.8781C16.5068 16.8781 16.2083 16.5796 16.2083 16.2114V16.2048C16.2083 15.8366 16.5068 15.5381 16.875 15.5381ZM19.5417 15.5381C19.9099 15.5381 20.2083 15.8366 20.2083 16.2048V16.2114C20.2083 16.5796 19.9099 16.8781 19.5417 16.8781C19.1735 16.8781 18.875 16.5796 18.875 16.2114V16.2048C18.875 15.8366 19.1735 15.5381 19.5417 15.5381Z" fill="#C1C8CD"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 618 B

After

Width:  |  Height:  |  Size: 1.6 KiB

4
frontend/assets/images/icons/editor/left-sidebar/database-selected.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.363281" y="0.871094" width="32" height="32" rx="4" fill="#E6EDFE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.65537 10.4516C9.3735 10.7015 9.36328 10.8456 9.36328 10.8711C9.36328 10.8966 9.3735 11.0407 9.65537 11.2906C9.93607 11.5394 10.3993 11.8092 11.0576 12.0561C12.3667 12.547 14.2423 12.8711 16.3633 12.8711C18.4843 12.8711 20.3599 12.547 21.669 12.0561C22.3273 11.8092 22.7905 11.5394 23.0712 11.2906C23.3531 11.0407 23.3633 10.8966 23.3633 10.8711C23.3633 10.8456 23.3531 10.7015 23.0712 10.4516C22.7905 10.2027 22.3273 9.93295 21.669 9.6861C20.3599 9.19518 18.4843 8.87109 16.3633 8.87109C14.2423 8.87109 12.3667 9.19518 11.0576 9.6861C10.3993 9.93295 9.93607 10.2027 9.65537 10.4516ZM23.3633 13.4873C23.0542 13.6509 22.7207 13.7977 22.3713 13.9287C20.785 14.5236 18.6606 14.8711 16.3633 14.8711C14.066 14.8711 11.9416 14.5236 10.3553 13.9287C10.0059 13.7977 9.67239 13.6509 9.36328 13.4873V16.8711C9.36328 16.8898 9.37017 17.0305 9.64339 17.2778C9.91625 17.5248 10.3769 17.8008 11.0576 18.0561C12.4157 18.5654 14.3248 18.8711 16.3633 18.8711C18.4018 18.8711 20.3108 18.5654 21.669 18.0561C22.3497 17.8008 22.8103 17.5248 23.0832 17.2778C23.3564 17.0305 23.3633 16.8898 23.3633 16.8711V13.4873ZM23.3633 19.4869C23.0569 19.6493 22.7242 19.7964 22.3713 19.9287C20.7288 20.5446 18.5683 20.8711 16.3633 20.8711C14.1583 20.8711 11.9977 20.5446 10.3553 19.9287C10.0024 19.7964 9.66962 19.6493 9.36328 19.4869V22.8711C9.36328 22.8898 9.37017 23.0305 9.64339 23.2778C9.91625 23.5248 10.3769 23.8008 11.0576 24.0561C12.4157 24.5654 14.3248 24.8711 16.3633 24.8711C18.4018 24.8711 20.3108 24.5654 21.669 24.0561C22.3497 23.8008 22.8103 23.5248 23.0832 23.2778C23.3564 23.0305 23.3633 22.8898 23.3633 22.8711V19.4869ZM25.3633 22.8711C25.3633 23.648 24.9487 24.2867 24.4255 24.7605C23.9018 25.2345 23.1909 25.6214 22.3713 25.9287C20.7288 26.5446 18.5683 26.8711 16.3633 26.8711C14.1583 26.8711 11.9977 26.5446 10.3553 25.9287C9.53566 25.6214 8.82474 25.2345 8.3011 24.7605C7.77782 24.2867 7.36328 23.648 7.36328 22.8711V10.8711C7.36328 10.0682 7.80077 9.42303 8.32855 8.9551C8.8575 8.48614 9.56584 8.10949 10.3553 7.81344C11.9416 7.21858 14.066 6.87109 16.3633 6.87109C18.6606 6.87109 20.785 7.21858 22.3713 7.81344C23.1607 8.10949 23.8691 8.48614 24.398 8.9551C24.9258 9.42303 25.3633 10.0682 25.3633 10.8711V22.8711Z" fill="#3E63DD"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

93
frontend/assets/images/icons/editor/left-sidebar/database.svg
View file

@ -1,92 +1,3 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 55 55" style="enable-background:new 0 0 55 55;" xml:space="preserve">
<path d="M52.354,8.51C51.196,4.22,42.577,0,27.5,0C12.423,0,3.803,4.22,2.646,8.51C2.562,8.657,2.5,8.818,2.5,9v0.5V21v0.5V22v11
v0.5V34v12c0,0.162,0.043,0.315,0.117,0.451C3.798,51.346,14.364,55,27.5,55c13.106,0,23.655-3.639,24.875-8.516
C52.455,46.341,52.5,46.176,52.5,46V34v-0.5V33V22v-0.5V21V9.5V9C52.5,8.818,52.438,8.657,52.354,8.51z M50.421,33.985
c-0.028,0.121-0.067,0.241-0.116,0.363c-0.04,0.099-0.089,0.198-0.143,0.297c-0.067,0.123-0.142,0.246-0.231,0.369
c-0.066,0.093-0.141,0.185-0.219,0.277c-0.111,0.131-0.229,0.262-0.363,0.392c-0.081,0.079-0.17,0.157-0.26,0.236
c-0.164,0.143-0.335,0.285-0.526,0.426c-0.082,0.061-0.17,0.12-0.257,0.18c-0.226,0.156-0.462,0.311-0.721,0.463
c-0.068,0.041-0.141,0.08-0.212,0.12c-0.298,0.168-0.609,0.335-0.945,0.497c-0.043,0.021-0.088,0.041-0.132,0.061
c-0.375,0.177-0.767,0.351-1.186,0.519c-0.012,0.005-0.024,0.009-0.036,0.014c-2.271,0.907-5.176,1.67-8.561,2.17
c-0.017,0.002-0.034,0.004-0.051,0.007c-0.658,0.097-1.333,0.183-2.026,0.259c-0.113,0.012-0.232,0.02-0.346,0.032
c-0.605,0.063-1.217,0.121-1.847,0.167c-0.288,0.021-0.59,0.031-0.883,0.049c-0.474,0.028-0.943,0.059-1.429,0.076
C29.137,40.984,28.327,41,27.5,41s-1.637-0.016-2.432-0.044c-0.486-0.017-0.955-0.049-1.429-0.076
c-0.293-0.017-0.595-0.028-0.883-0.049c-0.63-0.046-1.242-0.104-1.847-0.167c-0.114-0.012-0.233-0.02-0.346-0.032
c-0.693-0.076-1.368-0.163-2.026-0.259c-0.017-0.002-0.034-0.004-0.051-0.007c-3.385-0.5-6.29-1.263-8.561-2.17
c-0.012-0.004-0.024-0.009-0.036-0.014c-0.419-0.168-0.812-0.342-1.186-0.519c-0.043-0.021-0.089-0.041-0.132-0.061
c-0.336-0.162-0.647-0.328-0.945-0.497c-0.07-0.04-0.144-0.079-0.212-0.12c-0.259-0.152-0.495-0.307-0.721-0.463
c-0.086-0.06-0.175-0.119-0.257-0.18c-0.191-0.141-0.362-0.283-0.526-0.426c-0.089-0.078-0.179-0.156-0.26-0.236
c-0.134-0.13-0.252-0.26-0.363-0.392c-0.078-0.092-0.153-0.184-0.219-0.277c-0.088-0.123-0.163-0.246-0.231-0.369
c-0.054-0.099-0.102-0.198-0.143-0.297c-0.049-0.121-0.088-0.242-0.116-0.363C4.541,33.823,4.5,33.661,4.5,33.5
c0-0.113,0.013-0.226,0.031-0.338c0.025-0.151,0.011-0.302-0.031-0.445v-7.424c0.028,0.026,0.063,0.051,0.092,0.077
c0.218,0.192,0.44,0.383,0.69,0.567C9.049,28.786,16.582,31,27.5,31c10.872,0,18.386-2.196,22.169-5.028
c0.302-0.22,0.574-0.447,0.83-0.678l0.001-0.001v7.424c-0.042,0.143-0.056,0.294-0.031,0.445c0.019,0.112,0.031,0.225,0.031,0.338
C50.5,33.661,50.459,33.823,50.421,33.985z M50.5,13.293v7.424c-0.042,0.143-0.056,0.294-0.031,0.445
c0.019,0.112,0.031,0.225,0.031,0.338c0,0.161-0.041,0.323-0.079,0.485c-0.028,0.121-0.067,0.241-0.116,0.363
c-0.04,0.099-0.089,0.198-0.143,0.297c-0.067,0.123-0.142,0.246-0.231,0.369c-0.066,0.093-0.141,0.185-0.219,0.277
c-0.111,0.131-0.229,0.262-0.363,0.392c-0.081,0.079-0.17,0.157-0.26,0.236c-0.164,0.143-0.335,0.285-0.526,0.426
c-0.082,0.061-0.17,0.12-0.257,0.18c-0.226,0.156-0.462,0.311-0.721,0.463c-0.068,0.041-0.141,0.08-0.212,0.12
c-0.298,0.168-0.609,0.335-0.945,0.497c-0.043,0.021-0.088,0.041-0.132,0.061c-0.375,0.177-0.767,0.351-1.186,0.519
c-0.012,0.005-0.024,0.009-0.036,0.014c-2.271,0.907-5.176,1.67-8.561,2.17c-0.017,0.002-0.034,0.004-0.051,0.007
c-0.658,0.097-1.333,0.183-2.026,0.259c-0.113,0.012-0.232,0.02-0.346,0.032c-0.605,0.063-1.217,0.121-1.847,0.167
c-0.288,0.021-0.59,0.031-0.883,0.049c-0.474,0.028-0.943,0.059-1.429,0.076C29.137,28.984,28.327,29,27.5,29
s-1.637-0.016-2.432-0.044c-0.486-0.017-0.955-0.049-1.429-0.076c-0.293-0.017-0.595-0.028-0.883-0.049
c-0.63-0.046-1.242-0.104-1.847-0.167c-0.114-0.012-0.233-0.02-0.346-0.032c-0.693-0.076-1.368-0.163-2.026-0.259
c-0.017-0.002-0.034-0.004-0.051-0.007c-3.385-0.5-6.29-1.263-8.561-2.17c-0.012-0.004-0.024-0.009-0.036-0.014
c-0.419-0.168-0.812-0.342-1.186-0.519c-0.043-0.021-0.089-0.041-0.132-0.061c-0.336-0.162-0.647-0.328-0.945-0.497
c-0.07-0.04-0.144-0.079-0.212-0.12c-0.259-0.152-0.495-0.307-0.721-0.463c-0.086-0.06-0.175-0.119-0.257-0.18
c-0.191-0.141-0.362-0.283-0.526-0.426c-0.089-0.078-0.179-0.156-0.26-0.236c-0.134-0.13-0.252-0.26-0.363-0.392
c-0.078-0.092-0.153-0.184-0.219-0.277c-0.088-0.123-0.163-0.246-0.231-0.369c-0.054-0.099-0.102-0.198-0.143-0.297
c-0.049-0.121-0.088-0.242-0.116-0.363C4.541,21.823,4.5,21.661,4.5,21.5c0-0.113,0.013-0.226,0.031-0.338
c0.025-0.151,0.011-0.302-0.031-0.445v-7.424c0.12,0.109,0.257,0.216,0.387,0.324c0.072,0.06,0.139,0.12,0.215,0.18
c0.3,0.236,0.624,0.469,0.975,0.696c0.073,0.047,0.155,0.093,0.231,0.14c0.294,0.183,0.605,0.362,0.932,0.538
c0.121,0.065,0.242,0.129,0.367,0.193c0.365,0.186,0.748,0.367,1.151,0.542c0.066,0.029,0.126,0.059,0.193,0.087
c0.469,0.199,0.967,0.389,1.485,0.573c0.143,0.051,0.293,0.099,0.44,0.149c0.412,0.139,0.838,0.272,1.279,0.401
c0.159,0.046,0.315,0.094,0.478,0.138c0.585,0.162,1.189,0.316,1.823,0.458c0.087,0.02,0.181,0.036,0.269,0.055
c0.559,0.122,1.139,0.235,1.735,0.341c0.202,0.036,0.407,0.07,0.613,0.104c0.567,0.093,1.151,0.178,1.75,0.256
c0.154,0.02,0.301,0.043,0.457,0.062c0.744,0.09,1.514,0.167,2.305,0.233c0.195,0.016,0.398,0.028,0.596,0.042
c0.633,0.046,1.28,0.084,1.942,0.114c0.241,0.011,0.481,0.022,0.727,0.031C25.712,18.979,26.59,19,27.5,19s1.788-0.021,2.65-0.05
c0.245-0.009,0.485-0.02,0.727-0.031c0.662-0.03,1.309-0.068,1.942-0.114c0.198-0.015,0.4-0.026,0.596-0.042
c0.791-0.065,1.561-0.143,2.305-0.233c0.156-0.019,0.303-0.042,0.457-0.062c0.599-0.078,1.182-0.163,1.75-0.256
c0.206-0.034,0.411-0.068,0.613-0.104c0.596-0.106,1.176-0.219,1.735-0.341c0.088-0.019,0.182-0.036,0.269-0.055
c0.634-0.142,1.238-0.297,1.823-0.458c0.163-0.045,0.319-0.092,0.478-0.138c0.441-0.129,0.867-0.262,1.279-0.401
c0.147-0.05,0.297-0.098,0.44-0.149c0.518-0.184,1.017-0.374,1.485-0.573c0.067-0.028,0.127-0.058,0.193-0.087
c0.403-0.176,0.786-0.356,1.151-0.542c0.125-0.064,0.247-0.128,0.367-0.193c0.327-0.175,0.638-0.354,0.932-0.538
c0.076-0.047,0.158-0.093,0.231-0.14c0.351-0.227,0.675-0.459,0.975-0.696c0.075-0.06,0.142-0.12,0.215-0.18
C50.243,13.509,50.38,13.402,50.5,13.293z M27.5,2c13.555,0,23,3.952,23,7.5s-9.445,7.5-23,7.5s-23-3.952-23-7.5S13.945,2,27.5,2z
M50.5,45.703c-0.014,0.044-0.024,0.089-0.032,0.135C49.901,49.297,40.536,53,27.5,53S5.099,49.297,4.532,45.838
c-0.008-0.045-0.019-0.089-0.032-0.131v-8.414c0.028,0.026,0.063,0.051,0.092,0.077c0.218,0.192,0.44,0.383,0.69,0.567
C9.049,40.786,16.582,43,27.5,43c10.872,0,18.386-2.196,22.169-5.028c0.302-0.22,0.574-0.447,0.83-0.678l0.001-0.001V45.703z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.65537 9.80123C9.3735 10.0511 9.36328 10.1952 9.36328 10.2207C9.36328 10.2462 9.3735 10.3903 9.65537 10.6402C9.93607 10.889 10.3993 11.1588 11.0576 11.4057C12.3667 11.8966 14.2423 12.2207 16.3633 12.2207C18.4843 12.2207 20.3599 11.8966 21.669 11.4057C22.3273 11.1588 22.7905 10.889 23.0712 10.6402C23.3531 10.3903 23.3633 10.2462 23.3633 10.2207C23.3633 10.1952 23.3531 10.0511 23.0712 9.80123C22.7905 9.55236 22.3273 9.28256 21.669 9.03571C20.3599 8.54479 18.4843 8.2207 16.3633 8.2207C14.2423 8.2207 12.3667 8.54479 11.0576 9.03571C10.3993 9.28256 9.93607 9.55236 9.65537 9.80123ZM23.3633 12.8369C23.0542 13.0005 22.7207 13.1473 22.3713 13.2784C20.785 13.8732 18.6606 14.2207 16.3633 14.2207C14.066 14.2207 11.9416 13.8732 10.3553 13.2784C10.0059 13.1473 9.67239 13.0005 9.36328 12.8369V16.2207C9.36328 16.2394 9.37017 16.3801 9.64339 16.6274C9.91625 16.8745 10.3769 17.1505 11.0576 17.4057C12.4157 17.915 14.3248 18.2207 16.3633 18.2207C18.4018 18.2207 20.3108 17.915 21.669 17.4057C22.3497 17.1505 22.8103 16.8745 23.0832 16.6274C23.3564 16.3801 23.3633 16.2394 23.3633 16.2207V12.8369ZM23.3633 18.8365C23.0569 18.9989 22.7242 19.146 22.3713 19.2784C20.7288 19.8943 18.5683 20.2207 16.3633 20.2207C14.1583 20.2207 11.9977 19.8943 10.3553 19.2784C10.0024 19.146 9.66962 18.9989 9.36328 18.8365V22.2207C9.36328 22.2394 9.37017 22.3801 9.64339 22.6274C9.91625 22.8745 10.3769 23.1505 11.0576 23.4057C12.4157 23.915 14.3248 24.2207 16.3633 24.2207C18.4018 24.2207 20.3108 23.915 21.669 23.4057C22.3497 23.1505 22.8103 22.8745 23.0832 22.6274C23.3564 22.3801 23.3633 22.2394 23.3633 22.2207V18.8365ZM25.3633 22.2207C25.3633 22.9977 24.9487 23.6363 24.4255 24.1101C23.9018 24.5841 23.1909 24.971 22.3713 25.2784C20.7288 25.8943 18.5683 26.2207 16.3633 26.2207C14.1583 26.2207 11.9977 25.8943 10.3553 25.2784C9.53566 24.971 8.82474 24.5841 8.3011 24.1101C7.77782 23.6363 7.36328 22.9977 7.36328 22.2207V10.2207C7.36328 9.41781 7.80077 8.77264 8.32855 8.30471C8.8575 7.83575 9.56584 7.4591 10.3553 7.16305C11.9416 6.56819 14.066 6.2207 16.3633 6.2207C18.6606 6.2207 20.785 6.56819 22.3713 7.16305C23.1607 7.4591 23.8691 7.83575 24.398 8.30471C24.9258 8.77264 25.3633 9.41781 25.3633 10.2207V22.2207Z" fill="#C1C8CD"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

4
frontend/assets/images/icons/editor/left-sidebar/debugger-selected.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.363281" y="0.128906" width="32" height="32" rx="4" fill="#E6EDFE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3633 10.1289C15.8328 10.1289 15.3241 10.3396 14.9491 10.7147C14.574 11.0898 14.3633 11.5985 14.3633 12.1289H18.3633C18.3633 11.5985 18.1526 11.0898 17.7775 10.7147C17.4024 10.3396 16.8937 10.1289 16.3633 10.1289ZM12.9304 14.1289C12.6003 14.7556 12.4062 15.447 12.3633 16.1577V19.1289C12.3633 20.1898 12.7847 21.2072 13.5349 21.9573C14.0444 22.4669 14.6773 22.8247 15.3633 23.0019V18.1289C15.3633 17.5766 15.811 17.1289 16.3633 17.1289C16.9156 17.1289 17.3633 17.5766 17.3633 18.1289V23.0019C18.0493 22.8247 18.6822 22.4669 19.1917 21.9573C19.9419 21.2072 20.3633 20.1898 20.3633 19.1289V16.1577C20.3203 15.447 20.1263 14.7556 19.7961 14.1289H12.9304ZM21.8879 13.9004C22.1596 14.592 22.3205 15.3255 22.3618 16.0739C22.3628 16.0922 22.3633 16.1105 22.3633 16.1289H25.3633C25.9156 16.1289 26.3633 16.5766 26.3633 17.1289C26.3633 17.6812 25.9156 18.1289 25.3633 18.1289H22.3633V19.1289C22.3633 19.6477 22.2961 20.1595 22.1666 20.6528L24.8759 22.2703C25.3501 22.5534 25.505 23.1673 25.2219 23.6415C24.9388 24.1157 24.3249 24.2706 23.8507 23.9875L21.3361 22.4863C21.123 22.8018 20.879 23.0985 20.6059 23.3715C19.4807 24.4968 17.9546 25.1289 16.3633 25.1289C14.772 25.1289 13.2459 24.4968 12.1206 23.3715C11.8476 23.0985 11.6035 22.8018 11.3905 22.4863L8.87589 23.9875C8.40169 24.2706 7.78777 24.1157 7.50466 23.6415C7.22155 23.1673 7.37647 22.5534 7.85067 22.2703L10.56 20.6528C10.4305 20.1595 10.3633 19.6477 10.3633 19.1289V18.1289H7.36328C6.811 18.1289 6.36328 17.6812 6.36328 17.1289C6.36328 16.5766 6.811 16.1289 7.36328 16.1289H10.3633C10.3633 16.1105 10.3638 16.0922 10.3648 16.0739C10.4061 15.3255 10.567 14.592 10.8386 13.9004L7.82423 11.9712C7.35905 11.6735 7.2233 11.055 7.52101 10.5899C7.81872 10.1247 8.43716 9.98892 8.90233 10.2866L11.933 12.2262C12.0654 12.1631 12.2121 12.1289 12.3633 12.1289C12.3633 11.068 12.7847 10.0506 13.5349 9.30048C14.285 8.55033 15.3024 8.12891 16.3633 8.12891C17.4241 8.12891 18.4416 8.55033 19.1917 9.30048C19.9419 10.0506 20.3633 11.068 20.3633 12.1289C20.5145 12.1289 20.6611 12.1631 20.7936 12.2262L23.8242 10.2866C24.2894 9.98892 24.9078 10.1247 25.2056 10.5899C25.5033 11.055 25.3675 11.6735 24.9023 11.9712L21.8879 13.9004Z" fill="#3E63DD"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

70
frontend/assets/images/icons/editor/left-sidebar/debugger.svg
View file

@ -1,69 +1,3 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 480.002 480.002" style="enable-background:new 0 0 480.002 480.002;" xml:space="preserve">
<g>
<g>
<g>
<path d="M454.937,253.555h-46.129c-0.737-24.46-4.62-48.219-11.407-70.503h46.216c5.522,0,10-4.478,10-10V93.87
c0-5.522-4.478-10-10-10c-5.522,0-10,4.478-10,10v69.183h-43.249c-7.879-19.665-18.15-37.878-30.643-54.015
c-12.418-16.041-26.445-29.301-41.623-39.564l41.302-53.352c3.381-4.367,2.581-10.648-1.786-14.028
c-4.365-3.38-10.647-2.582-14.028,1.786l-42.882,55.394c-19.67-9.842-40.834-14.994-62.653-14.994
c-19.866,0-39.188,4.275-57.333,12.466L139.78,3.878c-3.382-4.367-9.661-5.165-14.029-1.783
c-4.366,3.382-5.165,9.662-1.783,14.029l38.879,50.204c-17.042,10.643-32.736,24.978-46.461,42.711
c-12.488,16.136-22.758,34.348-30.635,54.014H46.386V93.87c0-5.522-4.478-10-10-10c-5.523,0-10,4.478-10,10v79.183
c0,5.522,4.477,10,10,10H78.72c-6.784,22.284-10.666,46.042-11.403,70.503H25.065c-5.522,0-10,4.477-10,10
c0,5.522,4.477,10,10,10h42.344c0.984,24.499,5.134,48.26,12.191,70.502H36.386c-5.523,0-10,4.478-10,10v79.183
c0,5.522,4.477,10,10,10c5.522,0,10-4.478,10-10v-69.183h40.509c7.718,18.586,17.604,35.822,29.491,51.182
c32.321,41.763,75.531,64.762,121.669,64.762c46.133,0,89.343-22.999,121.671-64.761c11.891-15.36,21.779-32.597,29.498-51.183
h44.393v69.183c0,5.522,4.478,10,10,10c5.522,0,10-4.478,10-10v-79.183c0-5.522-4.478-10-10-10H396.52
c7.06-22.242,11.21-46.003,12.195-70.502h46.222c5.523,0,10-4.478,10-10C464.937,258.033,460.46,253.555,454.937,253.555z
M238.055,64.279c32.317,0,62.292,13.396,86.871,36.167c-58.356,25.081-103.911,23.195-132.054,17.058
c-20.526-4.478-35.005-11.78-42.527-16.266C175.079,77.985,205.368,64.279,238.055,64.279z M230.001,459.717
C153.423,454.41,91.808,373.87,87.432,273.555h142.569V459.717z M250.001,459.382V273.555h138.691
C384.39,372.165,324.774,451.665,250.001,459.382z M87.325,253.555c0.875-26.747,5.817-52.131,14.036-75.121
c0.762-1.189,1.274-2.549,1.476-4.01c8.366-22.088,19.781-41.852,33.529-58.327c7.627,4.987,24.998,14.808,50.975,20.665
c11.776,2.655,26.268,4.662,43.177,4.662c28.859,0,64.756-5.846,106.179-24.283c0.957-0.426,1.813-0.984,2.558-1.643
c28.994,34.435,47.759,83.41,49.546,138.057H87.325z"/>
<path d="M170.013,148.917c-23.06,0-41.819,18.761-41.819,41.82c0,23.051,18.76,41.805,41.819,41.805
c23.051,0,41.805-18.754,41.805-41.805C211.817,167.678,193.063,148.917,170.013,148.917z M170.013,212.542
c-12.031,0-21.819-9.781-21.819-21.805c0-12.032,9.788-21.82,21.819-21.82c12.023,0,21.805,9.788,21.805,21.82
C191.817,202.761,182.036,212.542,170.013,212.542z"/>
<path d="M305.752,148.917c-23.06,0-41.819,18.761-41.819,41.82c-0.001,23.051,18.759,41.805,41.819,41.805
s41.819-18.754,41.819-41.805C347.571,167.678,328.811,148.917,305.752,148.917z M305.752,212.542
c-12.031,0-21.819-9.781-21.819-21.805c-0.001-12.032,9.788-21.82,21.819-21.82s21.819,9.788,21.819,21.82
C327.571,202.76,317.783,212.542,305.752,212.542z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3633 10.7383C15.8328 10.7383 15.3241 10.949 14.9491 11.3241C14.574 11.6991 14.3633 12.2078 14.3633 12.7383H18.3633C18.3633 12.2078 18.1526 11.6991 17.7775 11.3241C17.4024 10.949 16.8937 10.7383 16.3633 10.7383ZM12.9304 14.7383C12.6003 15.3649 12.4062 16.0564 12.3633 16.7671V19.7383C12.3633 20.7991 12.7847 21.8166 13.5349 22.5667C14.0444 23.0763 14.6773 23.4341 15.3633 23.6113V18.7383C15.3633 18.186 15.811 17.7383 16.3633 17.7383C16.9156 17.7383 17.3633 18.186 17.3633 18.7383V23.6113C18.0493 23.4341 18.6822 23.0763 19.1917 22.5667C19.9419 21.8166 20.3633 20.7991 20.3633 19.7383V16.7671C20.3203 16.0564 20.1263 15.3649 19.7961 14.7383H12.9304ZM21.8879 14.5098C22.1596 15.2014 22.3205 15.9349 22.3618 16.6832C22.3628 16.7016 22.3633 16.7199 22.3633 16.7383H25.3633C25.9156 16.7383 26.3633 17.186 26.3633 17.7383C26.3633 18.2906 25.9156 18.7383 25.3633 18.7383H22.3633V19.7383C22.3633 20.257 22.2961 20.7689 22.1666 21.2621L24.8759 22.8797C25.3501 23.1628 25.505 23.7767 25.2219 24.2509C24.9388 24.7251 24.3249 24.88 23.8507 24.5969L21.3361 23.0956C21.123 23.4111 20.879 23.7078 20.6059 23.9809C19.4807 25.1061 17.9546 25.7383 16.3633 25.7383C14.772 25.7383 13.2459 25.1061 12.1206 23.9809C11.8476 23.7078 11.6035 23.4111 11.3905 23.0956L8.87589 24.5969C8.40169 24.88 7.78777 24.7251 7.50466 24.2509C7.22155 23.7767 7.37647 23.1628 7.85067 22.8797L10.56 21.2621C10.4305 20.7689 10.3633 20.257 10.3633 19.7383V18.7383H7.36328C6.811 18.7383 6.36328 18.2906 6.36328 17.7383C6.36328 17.186 6.811 16.7383 7.36328 16.7383H10.3633C10.3633 16.7199 10.3638 16.7016 10.3648 16.6832C10.4061 15.9349 10.567 15.2014 10.8386 14.5098L7.82423 12.5806C7.35905 12.2828 7.2233 11.6644 7.52101 11.1992C7.81872 10.7341 8.43716 10.5983 8.90233 10.896L11.933 12.8356C12.0654 12.7724 12.2121 12.7383 12.3633 12.7383C12.3633 11.6774 12.7847 10.66 13.5349 9.90985C14.285 9.15971 15.3024 8.73828 16.3633 8.73828C17.4241 8.73828 18.4416 9.15971 19.1917 9.90985C19.9419 10.66 20.3633 11.6774 20.3633 12.7383C20.5145 12.7383 20.6611 12.7724 20.7936 12.8356L23.8242 10.896C24.2894 10.5983 24.9078 10.7341 25.2056 11.1992C25.5033 11.6644 25.3675 12.2828 24.9023 12.5806L21.8879 14.5098Z" fill="#C1C8CD"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

5
frontend/assets/images/icons/editor/left-sidebar/inspect-selected.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.363281" y="0.738281" width="32" height="32" rx="4" fill="#E6EDFE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.66177 10.0257C9.93805 9.7537 10.3466 9.66592 10.7102 9.80042L22.4972 14.1604C22.5151 14.167 22.5328 14.1742 22.5503 14.1818C22.7905 14.2866 22.9952 14.4589 23.1395 14.6777C23.2838 14.8965 23.3615 15.1525 23.3633 15.4146L23.3634 15.428C23.3616 15.6901 23.2838 15.9461 23.1395 16.1649C22.9952 16.3837 22.7905 16.556 22.5503 16.6608L22.5348 16.6674L18.1104 18.5104L16.0893 22.946L16.08 22.9657C15.9677 23.1985 15.7917 23.3947 15.5724 23.5315C15.3547 23.6672 15.1032 23.7389 14.8468 23.7383C14.5904 23.7386 14.339 23.6666 14.1216 23.5306C13.9024 23.3936 13.7267 23.1972 13.6149 22.9642C13.5991 22.9314 13.5852 22.8978 13.5731 22.8635L9.42009 11.0705C9.29131 10.7048 9.3855 10.2976 9.66177 10.0257ZM14.8468 23.7383C14.8448 23.7383 14.8429 23.7383 14.8409 23.7383L14.8473 22.7383L14.8527 23.7383C14.8507 23.7383 14.8487 23.7383 14.8468 23.7383ZM12.014 12.4151L14.9243 20.6793L16.4533 17.3237C16.558 17.0939 16.7457 16.9123 16.9788 16.8152L20.2385 15.4574L12.014 12.4151Z" fill="#3E63DD"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1562 17.5312C17.5467 17.1407 18.1799 17.1407 18.5704 17.5312L23.0704 22.0312C23.4609 22.4217 23.4609 23.0549 23.0704 23.4454C22.6799 23.8359 22.0467 23.8359 21.6562 23.4454L17.1562 18.9454C16.7657 18.5549 16.7657 17.9217 17.1562 17.5312Z" fill="#3E63DD"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

15
frontend/assets/images/icons/editor/left-sidebar/inspect.svg
View file

@ -1,11 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Uploaded to SVGRepo https://www.svgrepo.com -->
<title>ic_fluent_inspect_24_regular</title>
<desc>Created with Sketch.</desc>
<g id="🔍-System-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ic_fluent_inspect_24_regular" fill="#212121" fill-rule="nonzero">
<path d="M11.1950893,10.1463676 L11.2803,10.2197 L18.7803,17.7197 C19.015,17.9544 19.0675,18.3154 18.9095,18.6073 C18.7689667,18.8666778 18.491742,19.0165444 18.203754,18.9986064 L18.0955,18.9839 L13.8348,18.0869 L11.368,21.6749 C11.1819,21.9456 10.8413,22.0637 10.5275,21.9663 C10.2486556,21.8796333 10.0487444,21.6406309 10.0077623,21.3578731 L10,21.25 L10,10.75 C10,10.4467 10.1827,10.1732 10.463,10.0571 C10.708175,9.95553875 10.9858125,9.99197375 11.1950893,10.1463676 Z M11.5,12.5607 L11.5,18.8353 L12.882,16.8251 C13.0320625,16.6067875 13.2841063,16.4861688 13.5432703,16.5012283 L13.6545,16.5161 L15.9357,16.9964 L11.5,12.5607 Z M19.5,4 C20.8807,4 22,5.11929 22,6.5 L22,15.5 C22,16.7183 21.1285,17.7331 19.975,17.9549 C19.9,17.5176 19.6598,17.1137 19.2849,16.8388 L18.9461,16.5 L19.5,16.5 C20.0523,16.5 20.5,16.0523 20.5,15.5 L20.5,6.5 C20.5,5.94772 20.0523,5.5 19.5,5.5 L4.5,5.5 C3.94772,5.5 3.5,5.94772 3.5,6.5 L3.5,15.5 C3.5,16.0523 3.94772,16.5 4.5,16.5 L9,16.5 L9,18 L4.5,18 C3.11929,18 2,16.8807 2,15.5 L2,6.5 C2,5.11929 3.11929,4 4.5,4 L19.5,4 Z" id="🎨-Color"></path>
</g>
</g>
</svg>
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.66177 9.5081C9.93805 9.23612 10.3466 9.14834 10.7102 9.28284L22.4972 13.6428C22.5151 13.6495 22.5328 13.6566 22.5503 13.6642C22.7905 13.769 22.9952 13.9413 23.1395 14.1601C23.2838 14.379 23.3615 14.6349 23.3633 14.8971L23.3634 14.9104C23.3616 15.1725 23.2838 15.4285 23.1395 15.6473C22.9952 15.8661 22.7905 16.0384 22.5503 16.1433L22.5348 16.1498L18.1104 17.9928L16.0893 22.4284L16.08 22.4481C15.9677 22.6809 15.7917 22.8771 15.5724 23.0139C15.3547 23.1496 15.1032 23.2213 14.8468 23.2207C14.5904 23.221 14.339 23.149 14.1216 23.0131C13.9024 22.876 13.7267 22.6796 13.6149 22.4466C13.5991 22.4138 13.5852 22.3802 13.5731 22.3459L9.42009 10.5529C9.29131 10.1872 9.3855 9.78007 9.66177 9.5081ZM14.8468 23.2207C14.8448 23.2207 14.8429 23.2207 14.8409 23.2207L14.8473 22.2207L14.8527 23.2207C14.8507 23.2207 14.8487 23.2207 14.8468 23.2207ZM12.014 11.8975L14.9243 20.1617L16.4533 16.8061C16.558 16.5763 16.7457 16.3947 16.9788 16.2976L20.2385 14.9398L12.014 11.8975Z" fill="#C1C8CD"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1562 17.0136C17.5467 16.6231 18.1799 16.6231 18.5704 17.0136L23.0704 21.5136C23.4609 21.9041 23.4609 22.5373 23.0704 22.9278C22.6799 23.3184 22.0467 23.3184 21.6562 22.9278L17.1562 18.4278C16.7657 18.0373 16.7657 17.4041 17.1562 17.0136Z" fill="#C1C8CD"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

4
frontend/assets/images/icons/editor/left-sidebar/page-selected.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.363281" y="0.220703" width="32" height="32" rx="4" fill="#E6EDFE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3633 8.2207C11.0981 8.2207 10.8437 8.32606 10.6562 8.5136C10.4686 8.70113 10.3633 8.95549 10.3633 9.2207V23.2207C10.3633 23.4859 10.4686 23.7403 10.6562 23.9278C10.8437 24.1153 11.0981 24.2207 11.3633 24.2207H21.3633C21.6285 24.2207 21.8829 24.1153 22.0704 23.9278C22.2579 23.7403 22.3633 23.4859 22.3633 23.2207V13.2207H19.3633C18.8328 13.2207 18.3241 13.01 17.9491 12.6349C17.574 12.2598 17.3633 11.7511 17.3633 11.2207V8.2207H11.3633ZM19.3633 9.63492L20.9491 11.2207H19.3633V9.63492ZM9.24196 7.09938C9.80457 6.53677 10.5676 6.2207 11.3633 6.2207H18.3633C18.6285 6.2207 18.8829 6.32606 19.0704 6.5136L24.0704 11.5136C24.2579 11.7011 24.3633 11.9555 24.3633 12.2207V23.2207C24.3633 24.0164 24.0472 24.7794 23.4846 25.342C22.922 25.9046 22.1589 26.2207 21.3633 26.2207H11.3633C10.5676 26.2207 9.80457 25.9046 9.24196 25.342C8.67935 24.7794 8.36328 24.0164 8.36328 23.2207V9.2207C8.36328 8.42505 8.67935 7.66199 9.24196 7.09938ZM12.3633 17.2207C12.3633 16.6684 12.811 16.2207 13.3633 16.2207H19.3633C19.9156 16.2207 20.3633 16.6684 20.3633 17.2207C20.3633 17.773 19.9156 18.2207 19.3633 18.2207H13.3633C12.811 18.2207 12.3633 17.773 12.3633 17.2207ZM12.3633 21.2207C12.3633 20.6684 12.811 20.2207 13.3633 20.2207H19.3633C19.9156 20.2207 20.3633 20.6684 20.3633 21.2207C20.3633 21.773 19.9156 22.2207 19.3633 22.2207H13.3633C12.811 22.2207 12.3633 21.773 12.3633 21.2207Z" fill="#3E63DD"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
frontend/assets/images/icons/editor/left-sidebar/page.svg
View file

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4C6.73478 4 6.48043 4.10536 6.29289 4.29289C6.10536 4.48043 6 4.73478 6 5V19C6 19.2652 6.10536 19.5196 6.29289 19.7071C6.48043 19.8946 6.73478 20 7 20H17C17.2652 20 17.5196 19.8946 17.7071 19.7071C17.8946 19.5196 18 19.2652 18 19V9H15C14.4696 9 13.9609 8.78929 13.5858 8.41421C13.2107 8.03914 13 7.53043 13 7V4H7ZM15 5.41421L16.5858 7H15V5.41421ZM4.87868 2.87868C5.44129 2.31607 6.20435 2 7 2H14C14.2652 2 14.5196 2.10536 14.7071 2.29289L19.7071 7.29289C19.8946 7.48043 20 7.73478 20 8V19C20 19.7957 19.6839 20.5587 19.1213 21.1213C18.5587 21.6839 17.7957 22 17 22H7C6.20435 22 5.44129 21.6839 4.87868 21.1213C4.31607 20.5587 4 19.7957 4 19V5C4 4.20435 4.31607 3.44129 4.87868 2.87868ZM8 13C8 12.4477 8.44772 12 9 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H9C8.44772 14 8 13.5523 8 13ZM8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z" fill="#2C3E50"/>
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3633 8.73828C11.0981 8.73828 10.8437 8.84364 10.6562 9.03117C10.4686 9.21871 10.3633 9.47306 10.3633 9.73828V23.7383C10.3633 24.0035 10.4686 24.2579 10.6562 24.4454C10.8437 24.6329 11.0981 24.7383 11.3633 24.7383H21.3633C21.6285 24.7383 21.8829 24.6329 22.0704 24.4454C22.2579 24.2579 22.3633 24.0035 22.3633 23.7383V13.7383H19.3633C18.8328 13.7383 18.3241 13.5276 17.9491 13.1525C17.574 12.7774 17.3633 12.2687 17.3633 11.7383V8.73828H11.3633ZM19.3633 10.1525L20.9491 11.7383H19.3633V10.1525ZM9.24196 7.61696C9.80457 7.05435 10.5676 6.73828 11.3633 6.73828H18.3633C18.6285 6.73828 18.8829 6.84364 19.0704 7.03117L24.0704 12.0312C24.2579 12.2187 24.3633 12.4731 24.3633 12.7383V23.7383C24.3633 24.5339 24.0472 25.297 23.4846 25.8596C22.922 26.4222 22.1589 26.7383 21.3633 26.7383H11.3633C10.5676 26.7383 9.80457 26.4222 9.24196 25.8596C8.67935 25.297 8.36328 24.5339 8.36328 23.7383V9.73828C8.36328 8.94263 8.67935 8.17957 9.24196 7.61696ZM12.3633 17.7383C12.3633 17.186 12.811 16.7383 13.3633 16.7383H19.3633C19.9156 16.7383 20.3633 17.186 20.3633 17.7383C20.3633 18.2906 19.9156 18.7383 19.3633 18.7383H13.3633C12.811 18.7383 12.3633 18.2906 12.3633 17.7383ZM12.3633 21.7383C12.3633 21.186 12.811 20.7383 13.3633 20.7383H19.3633C19.9156 20.7383 20.3633 21.186 20.3633 21.7383C20.3633 22.2906 19.9156 22.7383 19.3633 22.7383H13.3633C12.811 22.7383 12.3633 22.2906 12.3633 21.7383Z" fill="#C1C8CD"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

5
frontend/assets/images/icons/editor/left-sidebar/settings-selected.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.03516" y="0.5" width="27" height="27" rx="5.5" fill="#E6EDFE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3672 9.91667C13.3672 9.27233 13.8895 8.75 14.5339 8.75C15.1782 8.75 15.7005 9.27233 15.7005 9.91667C15.7005 10.561 15.1782 11.0833 14.5339 11.0833C13.8895 11.0833 13.3672 10.561 13.3672 9.91667ZM13.3672 14C13.3672 13.3557 13.8895 12.8333 14.5339 12.8333C15.1782 12.8333 15.7005 13.3557 15.7005 14C15.7005 14.6443 15.1782 15.1667 14.5339 15.1667C13.8895 15.1667 13.3672 14.6443 13.3672 14ZM13.3672 18.0833C13.3672 17.439 13.8895 16.9167 14.5339 16.9167C15.1782 16.9167 15.7005 17.439 15.7005 18.0833C15.7005 18.7277 15.1782 19.25 14.5339 19.25C13.8895 19.25 13.3672 18.7277 13.3672 18.0833Z" fill="#3E63DD"/>
<rect x="1.03516" y="0.5" width="27" height="27" rx="5.5" stroke="#3E63DD"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 916 B

49
frontend/assets/images/icons/editor/left-sidebar/settings.svg
View file

@ -1,46 +1,3 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 478.703 478.703" style="enable-background:new 0 0 478.703 478.703;" xml:space="preserve">
<g>
<g>
<path d="M454.2,189.101l-33.6-5.7c-3.5-11.3-8-22.2-13.5-32.6l19.8-27.7c8.4-11.8,7.1-27.9-3.2-38.1l-29.8-29.8
c-5.6-5.6-13-8.7-20.9-8.7c-6.2,0-12.1,1.9-17.1,5.5l-27.8,19.8c-10.8-5.7-22.1-10.4-33.8-13.9l-5.6-33.2
c-2.4-14.3-14.7-24.7-29.2-24.7h-42.1c-14.5,0-26.8,10.4-29.2,24.7l-5.8,34c-11.2,3.5-22.1,8.1-32.5,13.7l-27.5-19.8
c-5-3.6-11-5.5-17.2-5.5c-7.9,0-15.4,3.1-20.9,8.7l-29.9,29.8c-10.2,10.2-11.6,26.3-3.2,38.1l20,28.1
c-5.5,10.5-9.9,21.4-13.3,32.7l-33.2,5.6c-14.3,2.4-24.7,14.7-24.7,29.2v42.1c0,14.5,10.4,26.8,24.7,29.2l34,5.8
c3.5,11.2,8.1,22.1,13.7,32.5l-19.7,27.4c-8.4,11.8-7.1,27.9,3.2,38.1l29.8,29.8c5.6,5.6,13,8.7,20.9,8.7c6.2,0,12.1-1.9,17.1-5.5
l28.1-20c10.1,5.3,20.7,9.6,31.6,13l5.6,33.6c2.4,14.3,14.7,24.7,29.2,24.7h42.2c14.5,0,26.8-10.4,29.2-24.7l5.7-33.6
c11.3-3.5,22.2-8,32.6-13.5l27.7,19.8c5,3.6,11,5.5,17.2,5.5l0,0c7.9,0,15.3-3.1,20.9-8.7l29.8-29.8c10.2-10.2,11.6-26.3,3.2-38.1
l-19.8-27.8c5.5-10.5,10.1-21.4,13.5-32.6l33.6-5.6c14.3-2.4,24.7-14.7,24.7-29.2v-42.1
C478.9,203.801,468.5,191.501,454.2,189.101z M451.9,260.401c0,1.3-0.9,2.4-2.2,2.6l-42,7c-5.3,0.9-9.5,4.8-10.8,9.9
c-3.8,14.7-9.6,28.8-17.4,41.9c-2.7,4.6-2.5,10.3,0.6,14.7l24.7,34.8c0.7,1,0.6,2.5-0.3,3.4l-29.8,29.8c-0.7,0.7-1.4,0.8-1.9,0.8
c-0.6,0-1.1-0.2-1.5-0.5l-34.7-24.7c-4.3-3.1-10.1-3.3-14.7-0.6c-13.1,7.8-27.2,13.6-41.9,17.4c-5.2,1.3-9.1,5.6-9.9,10.8l-7.1,42
c-0.2,1.3-1.3,2.2-2.6,2.2h-42.1c-1.3,0-2.4-0.9-2.6-2.2l-7-42c-0.9-5.3-4.8-9.5-9.9-10.8c-14.3-3.7-28.1-9.4-41-16.8
c-2.1-1.2-4.5-1.8-6.8-1.8c-2.7,0-5.5,0.8-7.8,2.5l-35,24.9c-0.5,0.3-1,0.5-1.5,0.5c-0.4,0-1.2-0.1-1.9-0.8l-29.8-29.8
c-0.9-0.9-1-2.3-0.3-3.4l24.6-34.5c3.1-4.4,3.3-10.2,0.6-14.8c-7.8-13-13.8-27.1-17.6-41.8c-1.4-5.1-5.6-9-10.8-9.9l-42.3-7.2
c-1.3-0.2-2.2-1.3-2.2-2.6v-42.1c0-1.3,0.9-2.4,2.2-2.6l41.7-7c5.3-0.9,9.6-4.8,10.9-10c3.7-14.7,9.4-28.9,17.1-42
c2.7-4.6,2.4-10.3-0.7-14.6l-24.9-35c-0.7-1-0.6-2.5,0.3-3.4l29.8-29.8c0.7-0.7,1.4-0.8,1.9-0.8c0.6,0,1.1,0.2,1.5,0.5l34.5,24.6
c4.4,3.1,10.2,3.3,14.8,0.6c13-7.8,27.1-13.8,41.8-17.6c5.1-1.4,9-5.6,9.9-10.8l7.2-42.3c0.2-1.3,1.3-2.2,2.6-2.2h42.1
c1.3,0,2.4,0.9,2.6,2.2l7,41.7c0.9,5.3,4.8,9.6,10,10.9c15.1,3.8,29.5,9.7,42.9,17.6c4.6,2.7,10.3,2.5,14.7-0.6l34.5-24.8
c0.5-0.3,1-0.5,1.5-0.5c0.4,0,1.2,0.1,1.9,0.8l29.8,29.8c0.9,0.9,1,2.3,0.3,3.4l-24.7,34.7c-3.1,4.3-3.3,10.1-0.6,14.7
c7.8,13.1,13.6,27.2,17.4,41.9c1.3,5.2,5.6,9.1,10.8,9.9l42,7.1c1.3,0.2,2.2,1.3,2.2,2.6v42.1H451.9z" />
<path d="M239.4,136.001c-57,0-103.3,46.3-103.3,103.3s46.3,103.3,103.3,103.3s103.3-46.3,103.3-103.3S296.4,136.001,239.4,136.001
z M239.4,315.601c-42.1,0-76.3-34.2-76.3-76.3s34.2-76.3,76.3-76.3s76.3,34.2,76.3,76.3S281.5,315.601,239.4,315.601z" />
</g>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.832 9.91667C12.832 9.27233 13.3544 8.75 13.9987 8.75C14.643 8.75 15.1654 9.27233 15.1654 9.91667C15.1654 10.561 14.643 11.0833 13.9987 11.0833C13.3544 11.0833 12.832 10.561 12.832 9.91667ZM12.832 14C12.832 13.3557 13.3544 12.8333 13.9987 12.8333C14.643 12.8333 15.1654 13.3557 15.1654 14C15.1654 14.6443 14.643 15.1667 13.9987 15.1667C13.3544 15.1667 12.832 14.6443 12.832 14ZM12.832 18.0833C12.832 17.439 13.3544 16.9167 13.9987 16.9167C14.643 16.9167 15.1654 17.439 15.1654 18.0833C15.1654 18.7277 14.643 19.25 13.9987 19.25C13.3544 19.25 12.832 18.7277 12.832 18.0833Z" fill="#121212"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 746 B

5
frontend/assets/images/icons/editor/left-sidebar/sidebar-selected.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.363281" y="0.738281" width="32" height="32" rx="4" fill="#E6EDFE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.66177 10.0257C9.93805 9.7537 10.3466 9.66592 10.7102 9.80042L22.4972 14.1604C22.5151 14.167 22.5328 14.1742 22.5503 14.1818C22.7905 14.2866 22.9952 14.4589 23.1395 14.6777C23.2838 14.8965 23.3615 15.1525 23.3633 15.4146L23.3634 15.428C23.3616 15.6901 23.2838 15.9461 23.1395 16.1649C22.9952 16.3837 22.7905 16.556 22.5503 16.6608L22.5348 16.6674L18.1104 18.5104L16.0893 22.946L16.08 22.9657C15.9677 23.1985 15.7917 23.3947 15.5724 23.5315C15.3547 23.6672 15.1032 23.7389 14.8468 23.7383C14.5904 23.7386 14.339 23.6666 14.1216 23.5306C13.9024 23.3936 13.7267 23.1972 13.6149 22.9642C13.5991 22.9314 13.5852 22.8978 13.5731 22.8635L9.42009 11.0705C9.29131 10.7048 9.3855 10.2976 9.66177 10.0257ZM14.8468 23.7383C14.8448 23.7383 14.8429 23.7383 14.8409 23.7383L14.8473 22.7383L14.8527 23.7383C14.8507 23.7383 14.8487 23.7383 14.8468 23.7383ZM12.014 12.4151L14.9243 20.6793L16.4533 17.3237C16.558 17.0939 16.7457 16.9123 16.9788 16.8152L20.2385 15.4574L12.014 12.4151Z" fill="#3E63DD"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1562 17.5312C17.5467 17.1407 18.1799 17.1407 18.5704 17.5312L23.0704 22.0312C23.4609 22.4217 23.4609 23.0549 23.0704 23.4454C22.6799 23.8359 22.0467 23.8359 21.6562 23.4454L17.1562 18.9454C16.7657 18.5549 16.7657 17.9217 17.1562 17.5312Z" fill="#3E63DD"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
frontend/assets/translations/en.json
View file

@ -114,16 +114,16 @@
"preview": "Preview",
"share": "Share",
"shareModal": {
"makeApplicationPublic": "Make application public ?",
"makeApplicationPublic": "Make application public?",
"shareableLink": "Get shareable link for this application",
"copy": "copy",
"embeddableLink": "Get embeddable link for this application",
"manageUsers": "Manage Users"
"manageUsers": "Users"
},
"appVersionManager": {
"version": "Version",
"currentlyReleased": "Currently Released",
"createVersion": "Create Version",
"createVersion": "Create new version",
"versionName": "Version Name",
"createVersionFrom": "Create version from",
"save": "Save",
@ -234,10 +234,10 @@
"menus": {
"addWorkspace": "Add workspace",
"menusList": {
"manageUsers": "Manage Users",
"manageGroups": "Manage Groups",
"manageSso": "Manage SSO",
"manageEnv": "Manage Workspace Variables"
"manageUsers": "Users",
"manageGroups": "Groups",
"manageSso": "SSO",
"manageEnv": "Workspace Variables"
},
"manageUsers": {
"usersAndPermission": "Users & Permissions",
@ -279,7 +279,7 @@
}
},
"manageSSO": {
"manageSso": "Manage SSO",
"manageSso": "SSO",
"generalSettings": {
"title": "General Settings",
"enableSignup": "Enable Signup",

815
frontend/package-lock.json generated
View file

@ -10,6 +10,7 @@
"@dnd-kit/core": "^6.0.5",
"@dnd-kit/sortable": "^7.0.1",
"@dnd-kit/utilities": "^3.2.0",
"@radix-ui/react-popover": "^1.0.2",
"@react-google-maps/api": "^2.1.1",
"@sentry/react": "^7.12.0",
"@sentry/tracing": "^7.12.0",
@ -17943,6 +17944,32 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@floating-ui/core": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
"integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
},
"node_modules/@floating-ui/dom": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
"integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
"dependencies": {
"@floating-ui/core": "^0.7.3"
}
},
"node_modules/@floating-ui/react-dom": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.2.tgz",
"integrity": "sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==",
"dependencies": {
"@floating-ui/dom": "^0.5.3",
"use-isomorphic-layout-effect": "^1.1.1"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@googlemaps/js-api-loader": {
"version": "1.11.1",
"integrity": "sha512-2ug4uBu0onRXTAo7Yxkay5N7pdNIz3XpTElMTLdCtEfQDxikbjeR6GS8atVhblX+ubFBNlXvDzz7VtuXv0vMRQ==",
@ -19162,6 +19189,282 @@
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@radix-ui/primitive": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
"integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
"dependencies": {
"@babel/runtime": "^7.13.10"
}
},
"node_modules/@radix-ui/react-arrow": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
"integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-primitive": "1.0.1"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-compose-refs": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
"integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-context": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
"integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-dismissable-layer": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.2.tgz",
"integrity": "sha512-WjJzMrTWROozDqLB0uRWYvj4UuXsM/2L19EmQ3Au+IJWqwvwq9Bwd+P8ivo0Deg9JDPArR1I6MbWNi1CmXsskg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.0",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-use-callback-ref": "1.0.0",
"@radix-ui/react-use-escape-keydown": "1.0.2"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-focus-guards": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
"integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-focus-scope": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.1.tgz",
"integrity": "sha512-Ej2MQTit8IWJiS2uuujGUmxXjF/y5xZptIIQnyd2JHLwtV0R2j9NRVoRj/1j/gJ7e3REdaBw4Hjf4a1ImhkZcQ==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-use-callback-ref": "1.0.0"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-id": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
"integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-layout-effect": "1.0.0"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-popover": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.2.tgz",
"integrity": "sha512-4tqZEl9w95R5mlZ/sFdgBnfhCBOEPepLIurBA5kt/qaAhldJ1tNQd0ngr0ET0AHbPotT4mwxMPr7a+MA/wbK0g==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.0",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-context": "1.0.0",
"@radix-ui/react-dismissable-layer": "1.0.2",
"@radix-ui/react-focus-guards": "1.0.0",
"@radix-ui/react-focus-scope": "1.0.1",
"@radix-ui/react-id": "1.0.0",
"@radix-ui/react-popper": "1.0.1",
"@radix-ui/react-portal": "1.0.1",
"@radix-ui/react-presence": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-slot": "1.0.1",
"@radix-ui/react-use-controllable-state": "1.0.0",
"aria-hidden": "^1.1.1",
"react-remove-scroll": "2.5.5"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-popper": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.0.1.tgz",
"integrity": "sha512-J4Vj7k3k+EHNWgcKrE+BLlQfpewxA7Zd76h5I0bIa+/EqaIZ3DuwrbPj49O3wqN+STnXsBuxiHLiF0iU3yfovw==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@floating-ui/react-dom": "0.7.2",
"@radix-ui/react-arrow": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-context": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-use-layout-effect": "1.0.0",
"@radix-ui/react-use-rect": "1.0.0",
"@radix-ui/react-use-size": "1.0.0",
"@radix-ui/rect": "1.0.0"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-portal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.1.tgz",
"integrity": "sha512-NY2vUWI5WENgAT1nfC6JS7RU5xRYBfjZVLq0HmgEN1Ezy3rk/UruMV4+Rd0F40PEaFC5SrLS1ixYvcYIQrb4Ig==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-primitive": "1.0.1"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-presence": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
"integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-use-layout-effect": "1.0.0"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz",
"integrity": "sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-slot": "1.0.1"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-slot": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
"integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.0"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-use-callback-ref": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
"integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-use-controllable-state": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
"integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-callback-ref": "1.0.0"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-use-escape-keydown": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz",
"integrity": "sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-callback-ref": "1.0.0"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-use-layout-effect": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
"integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-use-rect": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz",
"integrity": "sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/rect": "1.0.0"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-use-size": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz",
"integrity": "sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-layout-effect": "1.0.0"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/rect": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.0.tgz",
"integrity": "sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==",
"dependencies": {
"@babel/runtime": "^7.13.10"
}
},
"node_modules/@react-dnd/asap": {
"version": "4.0.0",
"integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ=="
@ -21137,6 +21440,31 @@
"sprintf-js": "~1.0.2"
}
},
"node_modules/aria-hidden": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.2.tgz",
"integrity": "sha512-6y/ogyDTk/7YAe91T3E2PR1ALVKyM2QbTio5HwM+N1Q6CMlCKhvClyIjkckBswa0f2xJhjsfzIGa1yVSe1UMVA==",
"dependencies": {
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
"react": "^16.9.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/aria-hidden/node_modules/tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
},
"node_modules/aria-query": {
"version": "4.2.2",
"integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
@ -23112,6 +23440,11 @@
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
"dev": true
},
"node_modules/detect-node-es": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
},
"node_modules/diff-sequences": {
"version": "24.9.0",
"integrity": "sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==",
@ -25452,6 +25785,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-nonce": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
"integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
"engines": {
"node": ">=6"
}
},
"node_modules/get-package-type": {
"version": "0.1.0",
"integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
@ -32949,6 +33290,61 @@
"version": "17.0.2",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-remove-scroll": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
"integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
"dependencies": {
"react-remove-scroll-bar": "^2.3.3",
"react-style-singleton": "^2.2.1",
"tslib": "^2.1.0",
"use-callback-ref": "^1.3.0",
"use-sidecar": "^1.1.2"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/react-remove-scroll-bar": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
"integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
"dependencies": {
"react-style-singleton": "^2.2.1",
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/react-remove-scroll-bar/node_modules/tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
},
"node_modules/react-remove-scroll/node_modules/tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
},
"node_modules/react-rnd": {
"version": "10.3.0",
"integrity": "sha512-v+0TRPIaRWY25TYv02vLQHYpACbkX+4xKvsyIrUEy4bMpq0bP1oEiaxTorp0Xn72IVv0QZV1vOnZimgTEB/skw==",
@ -33080,6 +33476,33 @@
"@react-spring/zdog": "~9.2.0"
}
},
"node_modules/react-style-singleton": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
"integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
"dependencies": {
"get-nonce": "^1.0.0",
"invariant": "^2.2.4",
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/react-style-singleton/node_modules/tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
},
"node_modules/react-table": {
"version": "7.6.3",
"integrity": "sha512-hfPF13zDLxPMpLKzIKCE8RZud9T/XrRTsaCIf8zXpWZIZ2juCl7qrGpo3AQw9eAetXV5DP7s2GDm+hht7qq5Dw==",
@ -35184,6 +35607,31 @@
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
}
},
"node_modules/use-callback-ref": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
"integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
"dependencies": {
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/use-callback-ref/node_modules/tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
},
"node_modules/use-composed-ref": {
"version": "1.1.0",
"integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
@ -35228,6 +35676,32 @@
"react": "^16.8.0 || ^17.0.0"
}
},
"node_modules/use-sidecar": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
"integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
"dependencies": {
"detect-node-es": "^1.1.0",
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/use-sidecar/node_modules/tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
},
"node_modules/util": {
"version": "0.10.3",
"integrity": "sha512-5KiHfsmkqacuKjkRkdV7SsfDJ2EGiPsK92s2MhNSY0craxjTdKTtqKsJaCWp4LW33ZZ0OPUv1WO/TFvNQRiQxQ==",
@ -37794,6 +38268,28 @@
}
}
},
"@floating-ui/core": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
"integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
},
"@floating-ui/dom": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
"integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
"requires": {
"@floating-ui/core": "^0.7.3"
}
},
"@floating-ui/react-dom": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.2.tgz",
"integrity": "sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==",
"requires": {
"@floating-ui/dom": "^0.5.3",
"use-isomorphic-layout-effect": "^1.1.1"
}
},
"@googlemaps/js-api-loader": {
"version": "1.11.1",
"integrity": "sha512-2ug4uBu0onRXTAo7Yxkay5N7pdNIz3XpTElMTLdCtEfQDxikbjeR6GS8atVhblX+ubFBNlXvDzz7VtuXv0vMRQ==",
@ -38727,6 +39223,217 @@
"version": "2.9.2",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
},
"@radix-ui/primitive": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
"integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
"requires": {
"@babel/runtime": "^7.13.10"
}
},
"@radix-ui/react-arrow": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
"integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-primitive": "1.0.1"
}
},
"@radix-ui/react-compose-refs": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
"integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
"requires": {
"@babel/runtime": "^7.13.10"
}
},
"@radix-ui/react-context": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
"integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
"requires": {
"@babel/runtime": "^7.13.10"
}
},
"@radix-ui/react-dismissable-layer": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.2.tgz",
"integrity": "sha512-WjJzMrTWROozDqLB0uRWYvj4UuXsM/2L19EmQ3Au+IJWqwvwq9Bwd+P8ivo0Deg9JDPArR1I6MbWNi1CmXsskg==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.0",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-use-callback-ref": "1.0.0",
"@radix-ui/react-use-escape-keydown": "1.0.2"
}
},
"@radix-ui/react-focus-guards": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
"integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
"requires": {
"@babel/runtime": "^7.13.10"
}
},
"@radix-ui/react-focus-scope": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.1.tgz",
"integrity": "sha512-Ej2MQTit8IWJiS2uuujGUmxXjF/y5xZptIIQnyd2JHLwtV0R2j9NRVoRj/1j/gJ7e3REdaBw4Hjf4a1ImhkZcQ==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-use-callback-ref": "1.0.0"
}
},
"@radix-ui/react-id": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
"integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-layout-effect": "1.0.0"
}
},
"@radix-ui/react-popover": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.2.tgz",
"integrity": "sha512-4tqZEl9w95R5mlZ/sFdgBnfhCBOEPepLIurBA5kt/qaAhldJ1tNQd0ngr0ET0AHbPotT4mwxMPr7a+MA/wbK0g==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.0",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-context": "1.0.0",
"@radix-ui/react-dismissable-layer": "1.0.2",
"@radix-ui/react-focus-guards": "1.0.0",
"@radix-ui/react-focus-scope": "1.0.1",
"@radix-ui/react-id": "1.0.0",
"@radix-ui/react-popper": "1.0.1",
"@radix-ui/react-portal": "1.0.1",
"@radix-ui/react-presence": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-slot": "1.0.1",
"@radix-ui/react-use-controllable-state": "1.0.0",
"aria-hidden": "^1.1.1",
"react-remove-scroll": "2.5.5"
}
},
"@radix-ui/react-popper": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.0.1.tgz",
"integrity": "sha512-J4Vj7k3k+EHNWgcKrE+BLlQfpewxA7Zd76h5I0bIa+/EqaIZ3DuwrbPj49O3wqN+STnXsBuxiHLiF0iU3yfovw==",
"requires": {
"@babel/runtime": "^7.13.10",
"@floating-ui/react-dom": "0.7.2",
"@radix-ui/react-arrow": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-context": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-use-layout-effect": "1.0.0",
"@radix-ui/react-use-rect": "1.0.0",
"@radix-ui/react-use-size": "1.0.0",
"@radix-ui/rect": "1.0.0"
}
},
"@radix-ui/react-portal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.1.tgz",
"integrity": "sha512-NY2vUWI5WENgAT1nfC6JS7RU5xRYBfjZVLq0HmgEN1Ezy3rk/UruMV4+Rd0F40PEaFC5SrLS1ixYvcYIQrb4Ig==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-primitive": "1.0.1"
}
},
"@radix-ui/react-presence": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
"integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-use-layout-effect": "1.0.0"
}
},
"@radix-ui/react-primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz",
"integrity": "sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-slot": "1.0.1"
}
},
"@radix-ui/react-slot": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
"integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.0"
}
},
"@radix-ui/react-use-callback-ref": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
"integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
"requires": {
"@babel/runtime": "^7.13.10"
}
},
"@radix-ui/react-use-controllable-state": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
"integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-callback-ref": "1.0.0"
}
},
"@radix-ui/react-use-escape-keydown": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz",
"integrity": "sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-callback-ref": "1.0.0"
}
},
"@radix-ui/react-use-layout-effect": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
"integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
"requires": {
"@babel/runtime": "^7.13.10"
}
},
"@radix-ui/react-use-rect": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz",
"integrity": "sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/rect": "1.0.0"
}
},
"@radix-ui/react-use-size": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz",
"integrity": "sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-layout-effect": "1.0.0"
}
},
"@radix-ui/rect": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.0.tgz",
"integrity": "sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==",
"requires": {
"@babel/runtime": "^7.13.10"
}
},
"@react-dnd/asap": {
"version": "4.0.0",
"integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ=="
@ -52279,6 +52986,21 @@
"sprintf-js": "~1.0.2"
}
},
"aria-hidden": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.2.tgz",
"integrity": "sha512-6y/ogyDTk/7YAe91T3E2PR1ALVKyM2QbTio5HwM+N1Q6CMlCKhvClyIjkckBswa0f2xJhjsfzIGa1yVSe1UMVA==",
"requires": {
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
}
}
},
"aria-query": {
"version": "4.2.2",
"integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
@ -53764,6 +54486,11 @@
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
"dev": true
},
"detect-node-es": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
},
"diff-sequences": {
"version": "24.9.0",
"integrity": "sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==",
@ -55532,6 +56259,11 @@
"has-symbols": "^1.0.1"
}
},
"get-nonce": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
"integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="
},
"get-package-type": {
"version": "0.1.0",
"integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
@ -61065,6 +61797,41 @@
}
}
},
"react-remove-scroll": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
"integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
"requires": {
"react-remove-scroll-bar": "^2.3.3",
"react-style-singleton": "^2.2.1",
"tslib": "^2.1.0",
"use-callback-ref": "^1.3.0",
"use-sidecar": "^1.1.2"
},
"dependencies": {
"tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
}
}
},
"react-remove-scroll-bar": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
"integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
"requires": {
"react-style-singleton": "^2.2.1",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
}
}
},
"react-rnd": {
"version": "10.3.0",
"integrity": "sha512-v+0TRPIaRWY25TYv02vLQHYpACbkX+4xKvsyIrUEy4bMpq0bP1oEiaxTorp0Xn72IVv0QZV1vOnZimgTEB/skw==",
@ -61181,6 +61948,23 @@
"@react-spring/zdog": "~9.2.0"
}
},
"react-style-singleton": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
"integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
"requires": {
"get-nonce": "^1.0.0",
"invariant": "^2.2.4",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
}
}
},
"react-table": {
"version": "7.6.3",
"integrity": "sha512-hfPF13zDLxPMpLKzIKCE8RZud9T/XrRTsaCIf8zXpWZIZ2juCl7qrGpo3AQw9eAetXV5DP7s2GDm+hht7qq5Dw==",
@ -62747,6 +63531,21 @@
"version": "5.0.0",
"integrity": "sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA=="
},
"use-callback-ref": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
"integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
"requires": {
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
}
}
},
"use-composed-ref": {
"version": "1.1.0",
"integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
@ -62771,6 +63570,22 @@
"integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==",
"requires": {}
},
"use-sidecar": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
"integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
"requires": {
"detect-node-es": "^1.1.0",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
}
}
},
"util": {
"version": "0.10.3",
"integrity": "sha512-5KiHfsmkqacuKjkRkdV7SsfDJ2EGiPsK92s2MhNSY0craxjTdKTtqKsJaCWp4LW33ZZ0OPUv1WO/TFvNQRiQxQ==",

1
frontend/package.json
View file

@ -6,6 +6,7 @@
"@dnd-kit/core": "^6.0.5",
"@dnd-kit/sortable": "^7.0.1",
"@dnd-kit/utilities": "^3.2.0",
"@radix-ui/react-popover": "^1.0.2",
"@react-google-maps/api": "^2.1.1",
"@sentry/react": "^7.12.0",
"@sentry/tracing": "^7.12.0",

505
frontend/src/Editor/AppVersionsManager.jsx
View file

@ -1,505 +0,0 @@
import React, { useEffect, useState, useRef } from 'react';
import Modal from '../HomePage/Modal';
import { toast } from 'react-hot-toast';
import { appVersionService } from '@/_services';
import { Confirm } from './Viewer/Confirm';
import Select from '../_ui/Select';
import defaultStyle from '../_ui/Select/styles';
import { useTranslation } from 'react-i18next';
export const AppVersionsManager = function AppVersionsManager({
appId,
editingVersion,
releasedVersionId,
setAppDefinitionFromVersion,
showCreateVersionModalPrompt,
closeCreateVersionModalPrompt,
}) {
const { t } = useTranslation();
const [showDropDown, setShowDropDown] = useState(false);
const [showModal, setShowModal] = useState(false);
const [isCreatingVersion, setIsCreatingVersion] = useState(false);
const [isEditingVersion, setIsEditingVersion] = useState(false);
const [deletingVersion, setDeletingVersion] = useState({ name: null, id: null });
const [updatingVersionId, setUpdatingVersionId] = useState(null);
const [isDeletingVersion, setIsDeletingVersion] = useState(false);
const [editingAppVersion, setEditingAppVersion] = useState(editingVersion);
const [versionName, setVersionName] = useState('');
const [appVersions, setAppVersions] = useState([]);
const [showVersionDeletionConfirmation, setShowVersionDeletionConfirmation] = useState(false);
const [showVersionUpdateModal, setShowVersionUpdateModal] = useState(false);
const [mouseHoveredOnVersion, setMouseHoveredOnVersion] = useState(null);
const [createAppVersionFrom, setCreateAppVersionFrom] = useState(editingAppVersion);
useEffect(() => {
setCreateAppVersionFrom(editingAppVersion);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [appVersions]);
useEffect(() => {
setVersionName('');
setShowModal(showCreateVersionModalPrompt);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [showCreateVersionModalPrompt]);
useEffect(() => {
appVersionService.getAll(appId).then((data) => {
setAppVersions(data.versions);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
setEditingAppVersion(editingVersion);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [editingVersion]);
useEffect(() => {
appVersions[appVersions.findIndex((appVersion) => appVersion.id === editingVersion.id)] = editingAppVersion;
setCreateAppVersionFrom(editingAppVersion);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [editingAppVersion]);
const wrapperRef = useRef(null);
useEffect(() => {
const handleClickOutside = (event) => {
if (!showVersionDeletionConfirmation && wrapperRef.current && !wrapperRef.current.contains(event.target)) {
setShowDropDown(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener('mousedown', handleClickOutside);
};
}, [wrapperRef, showVersionDeletionConfirmation]);
const closeModal = () => {
setShowModal(false);
closeCreateVersionModalPrompt();
};
const createVersion = (versionName, createAppVersionFrom) => {
versionName = versionName.trim();
if (versionName.length > 25) {
toast.error('The version name should not be longer than 25 characters');
setIsCreatingVersion(false);
return;
}
if (versionName == '') {
toast.error('The version name should not be empty');
setIsCreatingVersion(false);
return;
}
setIsCreatingVersion(true);
appVersionService
.create(appId, versionName, createAppVersionFrom.id)
.then(() => {
closeModal();
toast.success('Version Created');
appVersionService.getAll(appId).then((data) => {
setAppVersions(data.versions);
const latestVersion = data.versions.at(0);
setAppDefinitionFromVersion(latestVersion);
setEditingAppVersion(latestVersion);
setVersionName('');
});
setIsCreatingVersion(false);
})
.catch((_error) => {
setIsCreatingVersion(false);
toast.error(_error?.error);
});
};
const deleteAppVersion = (versionId) => {
setIsDeletingVersion(true);
appVersionService
.del(appId, versionId)
.then(() => {
toast.success('Version Deleted');
appVersionService.getAll(appId).then((data) => {
setAppVersions(data.versions);
if (editingAppVersion.id === versionId) {
const latestVersion = data.versions.at(0);
setAppDefinitionFromVersion(latestVersion);
setEditingAppVersion(latestVersion);
}
});
setIsDeletingVersion(false);
setShowVersionDeletionConfirmation(false);
})
.catch((_error) => {
setIsDeletingVersion(false);
setShowVersionDeletionConfirmation(false);
toast.error('Oops, something went wrong');
});
};
const selectVersion = (version) => {
appVersionService.getOne(appId, version.id).then((data) => {
setAppDefinitionFromVersion(data);
});
};
const editVersionName = () => {
if (versionName.trim() !== '') {
setIsEditingVersion(true);
appVersionService
.save(appId, updatingVersionId, { name: versionName })
.then(() => {
toast.success('Version name updated');
appVersionService.getAll(appId).then((data) => {
const versions = data.versions;
setAppVersions(versions);
updatingVersionId === editingAppVersion.id &&
versions.map((appVersion) => {
if (appVersion.id === updatingVersionId) {
setEditingAppVersion(appVersion);
setUpdatingVersionId(null);
}
});
});
setIsEditingVersion(false);
setShowVersionUpdateModal(false);
})
.catch((_error) => {
setIsEditingVersion(false);
setShowVersionDeletionConfirmation(false);
toast.error(_error?.error);
});
} else {
toast.error('The name of version should not be empty');
setIsEditingVersion(false);
}
};
return (
<div ref={wrapperRef} className="input-group app-version-menu" data-cy="app-version-menu-field">
<span className="input-group-text app-version-menu-sm" data-cy="app-version-label">
{t('editor.appVersionManager.version', 'Version')}
</span>
<span
className={`app-version-name form-select app-version-menu-sm ${appVersions ? '' : 'disabled'}`}
onClick={() => {
setShowDropDown(!showDropDown);
}}
>
<span className={`${releasedVersionId === editingAppVersion.id ? 'released' : ''}`}>
{releasedVersionId === editingAppVersion.id && <img src={'assets/images/icons/editor/deploy-rocket.svg'} />}
<span
className="px-1"
data-cy={`${String(editingAppVersion.name).toLowerCase().replace(/\s+/g, '-')}-current-version-text`}
>
{editingAppVersion.name}
</span>
</span>
{showDropDown && (
<>
<div className="dropdown-menu app-version-container show" data-cy="dropdown-menu">
<div className="app-version-content" data-cy="app-version-content">
{appVersions.map((version) =>
releasedVersionId == version.id ? (
<>
<div
className="row dropdown-item released"
key={version.id}
onClick={() => selectVersion(version)}
>
<div className="col-md-4">{version.name}</div>
<div className="released-subtext">
<img src={'assets/images/icons/editor/deploy-rocket.svg'} />
<span className="px-1">
{t('editor.appVersionManager.currentlyReleased', 'Currently Released')}
</span>
</div>
</div>
<div className="dropdown-divider m-0"></div>
</>
) : (
<>
<div
className="dropdown-item row"
key={version.id}
onClick={() => selectVersion(version)}
onMouseEnter={() => setMouseHoveredOnVersion(version.id)}
onMouseLeave={() => setMouseHoveredOnVersion(null)}
>
<div
className="col-md-4"
data-cy={`${String(version.name).toLowerCase().replace(/\s+/g, '-')}-text`}
>
{version.name}
</div>
<div className="col-md-2 offset-md-5 d-flex" style={{ gap: 5, paddingLeft: 10 }}>
<button
className="btn badge bg-azure-lt"
data-cy={`${String(editingAppVersion.name).toLowerCase().replace(/\s+/g, '-')}-edit-button`}
onClick={(e) => {
e.stopPropagation();
setUpdatingVersionId(version.id);
setVersionName(version.name);
setShowVersionUpdateModal(true);
}}
style={{
display: mouseHoveredOnVersion === version.id ? 'flex' : 'none',
}}
>
<img
src="assets/images/icons/edit.svg"
width="12"
height="12"
className="mx-1"
style={{ paddingLeft: '0.6px' }}
/>
</button>
<button
className="btn badge bg-azure-lt"
data-cy={`${String(editingAppVersion.name)
.toLowerCase()
.replace(/\s+/g, '-')}-delete-button`}
onClick={(e) => {
e.stopPropagation();
setDeletingVersion({ name: version.name, id: version.id });
setShowVersionDeletionConfirmation(true);
}}
disabled={isDeletingVersion}
style={{
display: mouseHoveredOnVersion === version.id ? 'flex' : 'none',
}}
>
<img
src="assets/images/icons/query-trash-icon.svg"
width="12"
height="12"
className="mx-1"
style={{ paddingLeft: '0.6px' }}
/>
</button>
</div>
</div>
<div className="dropdown-divider m-0"></div>
</>
)
)}
</div>
<div
className="dropdown-item"
onClick={() => {
setVersionName('');
setShowModal(true);
}}
>
<span className="color-primary create-link" data-cy="create-version-link">
{t('editor.appVersionManager.createVersion', 'Create Version')}
</span>
</div>
<Confirm
show={showVersionDeletionConfirmation}
message={t(
'editor.appVersionManager.deleteVersion',
'Do you really want to delete this version ({{version}})?',
{ version: deletingVersion.name ?? '' }
)}
confirmButtonLoading={isDeletingVersion}
onConfirm={(versionId) => deleteAppVersion(versionId)}
queryConfirmationData={deletingVersion.id}
onCancel={() => setShowVersionDeletionConfirmation(false)}
/>
</div>
</>
)}
<CreateVersionModal
showModal={showModal}
setShowModal={closeModal}
versionName={versionName}
setVersionName={setVersionName}
createAppVersionFrom={createAppVersionFrom}
setCreateAppVersionFrom={setCreateAppVersionFrom}
createVersion={createVersion}
isCreatingVersion={isCreatingVersion}
appVersions={appVersions}
showCreateVersionModalPrompt={showCreateVersionModalPrompt}
/>
</span>
<Modal
show={showVersionUpdateModal}
closeModal={() => setShowVersionUpdateModal(false)}
title={t('editor.appVersionManager.editVersion', 'Edit Version')}
>
<div className="row">
<div className="col modal-main">
<input
type="text"
onChange={(e) => setVersionName(e.target.value)}
className="form-control"
placeholder={t('editor.appVersionManager.versionName', 'Version name')}
disabled={isEditingVersion}
value={versionName}
maxLength={25}
/>
</div>
</div>
<div className="row">
<div className="col d-flex modal-footer-btn">
<button className="btn btn-light" onClick={() => setShowVersionUpdateModal(false)}>
{t('globals.cancel', 'Cancel')}
</button>
<button className={`btn btn-primary ${isEditingVersion ? 'btn-loading' : ''}`} onClick={editVersionName}>
{t('globals.save', 'Save')}
</button>
</div>
</div>
</Modal>
</div>
);
};
const CreateVersionModal = function CreateVersionModal({
showModal,
setShowModal,
versionName,
setVersionName,
createAppVersionFrom,
setCreateAppVersionFrom,
createVersion,
isCreatingVersion,
appVersions,
showCreateVersionModalPrompt,
}) {
const { t } = useTranslation();
const handleKeyPress = (event) => {
if (event.key === 'Enter') {
// eslint-disable-next-line no-undef
createVersion(versionName, createAppVersionFrom);
}
};
const options = appVersions.map((version) => {
return { ...version, label: version.name, value: version };
});
const width = '100%';
const height = 32;
const darkMode = localStorage.getItem('darkMode') === 'true';
const customStyles = {
...defaultStyle(darkMode, width, height),
option: (provided, state) => {
return {
...provided,
backgroundColor: darkMode
? state.isSelected
? '#3650AF'
: 'rgb(31,40,55)'
: state.isSelected
? '#7A95FB'
: 'white',
color: darkMode ? '#fff' : '#232e3c',
'&:hover': {
backgroundColor: darkMode
? state.isSelected
? '#1F2E64'
: '#323C4B'
: state.isSelected
? '#3650AF'
: '#d8dce9',
},
};
},
};
return (
<Modal
show={showModal || showCreateVersionModalPrompt}
setShow={setShowModal}
title={t('editor.appVersionManager.createVersion', 'Create Version')}
autoFocus={false}
closeModal={() => setShowModal(false)}
>
<div className="mb-3">
<div className="col">
<label className="form-label" data-cy="version-name-label">
{t('editor.appVersionManager.versionName', 'Version Name')}
</label>
<input
type="text"
onChange={(e) => setVersionName(e.target.value)}
className="form-control"
data-cy="version-name-input-field"
placeholder={t('editor.appVersionManager.enterVersionName', 'Enter version name')}
disabled={isCreatingVersion}
value={versionName}
autoFocus={true}
onKeyPress={(e) => handleKeyPress(e)}
minLength="1"
maxLength="25"
/>
</div>
</div>
<div className="mb-3" style={{ padding: '2rem 0' }}>
<label className="form-label" data-cy="create-version-from-label">
{t('editor.appVersionManager.createVersionFrom', 'Create version from')}
</label>
<div className="ts-control" data-cy="create-version-input-field">
<Select
options={options}
defaultValue={options[options.length - 1]}
onChange={(version) => {
setCreateAppVersionFrom(version);
}}
useMenuPortal={false}
width="100%"
maxMenuHeight={100}
styles={customStyles}
/>
</div>
</div>
{showCreateVersionModalPrompt && (
<div className="mb-3">
<div className="light border rounded">
<div className="container">
<div className="row py-3">
<div className="col-1 py-2">
<span className="pe-1">
<img src={'assets/images/icons/editor/bulb-sharp.svg'} />
</span>
</div>
<div className="col">
<span>
{t(
'editor.appVersionManager.versionAlreadyReleased',
`Version already released. Kindly create a new version or switch to a different version to continue
making changes.`
)}
</span>
</div>
</div>
</div>
</div>
</div>
)}
<div className="mb-3">
<div className="col d-flex modal-footer-btn">
<button className="btn btn-light" data-cy="cancel-button" onClick={() => setShowModal(false)}>
{t('globals.cancel', 'Cancel')}
</button>
<button
className={`btn btn-primary ${isCreatingVersion ? 'btn-loading' : ''}`}
data-cy="create-version-button"
onClick={() => createVersion(versionName, createAppVersionFrom)}
>
{t('editor.appVersionManager.createVersion', 'Create Version')}
</button>
</div>
</div>
</Modal>
);
};

161
frontend/src/Editor/AppVersionsManager/CreateVersionModal.jsx Normal file
View file

@ -0,0 +1,161 @@
import React, { useState } from 'react';
import { appVersionService } from '@/_services';
import AlertDialog from '@/_ui/AlertDialog';
import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
import { useHotkeys } from 'react-hotkeys-hook';
import Select from '@/_ui/Select';
export const CreateVersion = ({
appId,
appVersions,
setAppVersions,
setAppDefinitionFromVersion,
editingVersion,
showCreateAppVersion,
setShowCreateAppVersion,
showCreateVersionModalPrompt,
closeCreateVersionModalPrompt,
}) => {
const [isCreatingVersion, setIsCreatingVersion] = useState(false);
const [versionName, setVersionName] = useState('');
const { t } = useTranslation();
useHotkeys('enter', () => createVersion());
const createVersion = () => {
if (versionName.trim().length > 25) {
toast.error('The version name should not be longer than 25 characters');
return;
}
if (versionName.trim() == '') {
toast.error('The version name should not be empty');
return;
}
setIsCreatingVersion(true);
appVersionService
.create(appId, versionName, editingVersion.id)
.then(() => {
toast.success('Version Created');
appVersionService.getAll(appId).then((data) => {
setVersionName('');
setIsCreatingVersion(false);
setAppVersions(data.versions);
const latestVersion = data.versions.at(0);
setAppDefinitionFromVersion(latestVersion);
setShowCreateAppVersion(false);
closeCreateVersionModalPrompt();
});
})
.catch((error) => {
toast.error(error?.error);
setIsCreatingVersion(false);
});
};
const options = appVersions.map((version) => {
return { label: version.name, value: version };
});
return (
<AlertDialog
show={showCreateAppVersion || showCreateVersionModalPrompt}
closeModal={() => setShowCreateAppVersion(false)}
title={t('editor.appVersionManager.createVersion', 'Create new version')}
>
<div className="mb-3">
<div className="col">
<label className="form-label">{t('editor.appVersionManager.versionName', 'Version Name')}</label>
<input
type="text"
onChange={(e) => setVersionName(e.target.value)}
className="form-control"
placeholder={t('editor.appVersionManager.enterVersionName', 'Enter version name')}
disabled={isCreatingVersion}
value={versionName}
autoFocus={true}
minLength="1"
maxLength="25"
/>
</div>
</div>
<div className="mb-3" style={{ padding: '2rem 0' }}>
<label className="form-label">{t('editor.appVersionManager.createVersionFrom', 'Create version from')}</label>
<div className="ts-control">
<Select
options={options}
defaultValue={options[options.length - 1]}
onChange={(version) => {
setAppDefinitionFromVersion(version);
}}
useMenuPortal={false}
width="100%"
maxMenuHeight={100}
/>
</div>
</div>
{showCreateVersionModalPrompt && (
<div className="mb-3">
<div className="light border rounded">
<div className="container">
<div className="row py-3">
<div className="col-1 py-2">
<span className="pe-1">
<img src={'assets/images/icons/editor/bulb-sharp.svg'} />
</span>
</div>
<div className="col">
<span>
{t(
'editor.appVersionManager.versionAlreadyReleased',
`Version already released. Kindly create a new version or switch to a different version to continue
making changes.`
)}
</span>
</div>
</div>
</div>
</div>
</div>
)}
<div className="mb-3">
<div className="col d-flex justify-content-end">
<button
className="btn mx-2"
onClick={() => {
closeCreateVersionModalPrompt();
setShowCreateAppVersion(false);
}}
>
{t('globals.cancel', 'Cancel')}
</button>
<button
className={`btn btn-primary ${isCreatingVersion ? 'btn-loading' : ''}`}
onClick={() => createVersion()}
>
<svg
className="icon"
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.34375 4.42643C5.88351 4.42643 5.51042 4.79953 5.51042 5.25977C5.51042 5.72 5.88351 6.0931 6.34375 6.0931C6.80399 6.0931 7.17708 5.72 7.17708 5.25977C7.17708 4.79953 6.80399 4.42643 6.34375 4.42643ZM3.84375 5.25977C3.84375 3.87905 4.96304 2.75977 6.34375 2.75977C7.72446 2.75977 8.84375 3.87905 8.84375 5.25977C8.84375 6.34828 8.14808 7.27431 7.17708 7.61751V12.902C7.88743 13.1531 8.45042 13.7161 8.7015 14.4264H13.0104C13.2314 14.4264 13.4434 14.3386 13.5997 14.1824C13.756 14.0261 13.8438 13.8141 13.8438 13.5931V11.4383L12.7663 12.5157C12.4409 12.8411 11.9133 12.8411 11.5878 12.5157C11.2624 12.1903 11.2624 11.6626 11.5878 11.3372L14.0878 8.83718C14.4133 8.51174 14.9409 8.51174 15.2663 8.83718L17.7663 11.3372C18.0918 11.6626 18.0918 12.1903 17.7663 12.5157C17.4409 12.8411 16.9133 12.8411 16.5878 12.5157L15.5104 11.4383V13.5931C15.5104 14.2561 15.247 14.892 14.7782 15.3609C14.3093 15.8297 13.6735 16.0931 13.0104 16.0931H8.7015C8.3583 17.0641 7.43227 17.7598 6.34375 17.7598C4.96304 17.7598 3.84375 16.6405 3.84375 15.2598C3.84375 14.1712 4.53942 13.2452 5.51042 12.902V7.61751C4.53942 7.27431 3.84375 6.34828 3.84375 5.25977ZM14.6771 4.42643C14.2168 4.42643 13.8438 4.79953 13.8438 5.25977C13.8438 5.72 14.2168 6.0931 14.6771 6.0931C15.1373 6.0931 15.5104 5.72 15.5104 5.25977C15.5104 4.79953 15.1373 4.42643 14.6771 4.42643ZM12.1771 5.25977C12.1771 3.87905 13.2964 2.75977 14.6771 2.75977C16.0578 2.75977 17.1771 3.87905 17.1771 5.25977C17.1771 6.64048 16.0578 7.75977 14.6771 7.75977C13.2964 7.75977 12.1771 6.64048 12.1771 5.25977ZM6.34375 14.4264C5.88351 14.4264 5.51042 14.7995 5.51042 15.2598C5.51042 15.72 5.88351 16.0931 6.34375 16.0931C6.80399 16.0931 7.17708 15.72 7.17708 15.2598C7.17708 14.7995 6.80399 14.4264 6.34375 14.4264Z"
fill="#FDFDFE"
/>
</svg>
{t('editor.appVersionManager.createVersion', 'Create Version')}
</button>
</div>
</div>
</AlertDialog>
);
};

111
frontend/src/Editor/AppVersionsManager/CustomSelect.jsx Normal file
View file

@ -0,0 +1,111 @@
import React, { useState } from 'react';
import Select from '@/_ui/Select';
import { components } from 'react-select';
import { EditVersion } from './EditVersionModal';
import { CreateVersion } from './CreateVersionModal';
const Menu = (props) => {
return (
<components.Menu {...props}>
<div>
<div
className="cursor-pointer"
style={{ padding: '8px 12px' }}
onClick={() => props.selectProps.setShowEditAppVersion(true)}
>
<div className="row">
<div className="col-10">{props?.selectProps?.value?.appVersionName}</div>
<div className="col-1">
<svg
className="icon"
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="28" height="28" rx="6" fill="#F0F4FF" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.7467 8.69582C17.0858 8.35696 17.5456 8.1666 18.025 8.1666C18.5046 8.1666 18.9646 8.35713 19.3037 8.69627C19.6429 9.03541 19.8334 9.49538 19.8334 9.975C19.8334 10.4545 19.643 10.9143 19.304 11.2534C19.3039 11.2535 19.3041 11.2533 19.304 11.2534L18.5667 11.9934C18.5462 12.0236 18.5226 12.0524 18.4958 12.0791C18.4695 12.1054 18.4414 12.1287 18.4118 12.1489L14.4132 16.1617C14.3038 16.2716 14.1551 16.3333 14 16.3333H12.25C11.9278 16.3333 11.6667 16.0722 11.6667 15.75V14C11.6667 13.8449 11.7284 13.6962 11.8383 13.5868L15.8511 9.58823C15.8713 9.55862 15.8946 9.53046 15.9209 9.50419C15.9476 9.4774 15.9764 9.45376 16.0066 9.43327L16.7463 8.69627C16.7464 8.69612 16.7466 8.69597 16.7467 8.69582ZM16.3399 10.7482L12.8333 14.2422V15.1667H13.7578L17.2518 11.6601L16.3399 10.7482ZM18.0753 10.8337L17.1663 9.9247L17.5712 9.52123C17.6916 9.40088 17.8548 9.33327 18.025 9.33327C18.1952 9.33327 18.3584 9.40088 18.4788 9.52123C18.5991 9.64158 18.6667 9.8048 18.6667 9.975C18.6667 10.1452 18.5991 10.3084 18.4788 10.4288L18.0753 10.8337ZM9.26256 11.0126C9.59075 10.6844 10.0359 10.5 10.5 10.5H11.0833C11.4055 10.5 11.6667 10.7612 11.6667 11.0833C11.6667 11.4055 11.4055 11.6667 11.0833 11.6667H10.5C10.3453 11.6667 10.1969 11.7281 10.0875 11.8375C9.97812 11.9469 9.91667 12.0953 9.91667 12.25V17.5C9.91667 17.6547 9.97812 17.8031 10.0875 17.9125C10.1969 18.0219 10.3453 18.0833 10.5 18.0833H15.75C15.9047 18.0833 16.0531 18.0219 16.1625 17.9125C16.2719 17.8031 16.3333 17.6547 16.3333 17.5V16.9167C16.3333 16.5945 16.5945 16.3333 16.9167 16.3333C17.2388 16.3333 17.5 16.5945 17.5 16.9167V17.5C17.5 17.9641 17.3156 18.4092 16.9874 18.7374C16.6592 19.0656 16.2141 19.25 15.75 19.25H10.5C10.0359 19.25 9.59075 19.0656 9.26256 18.7374C8.93437 18.4092 8.75 17.9641 8.75 17.5V12.25C8.75 11.7859 8.93437 11.3408 9.26256 11.0126Z"
fill="#3E63DD"
/>
</svg>
</div>
</div>
</div>
<hr className="m-0" />
<div>{props.children}</div>
<div
className="cursor-pointer"
style={{ padding: '8px 12px', color: '#3E63DD' }}
onClick={props.selectProps.setShowCreateAppVersion}
>
<svg
className="icon me-1"
width="34"
height="34"
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="34" height="34" rx="6" fill="#F0F4FF" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17 11C17.4142 11 17.75 11.3358 17.75 11.75V16.25H22.25C22.6642 16.25 23 16.5858 23 17C23 17.4142 22.6642 17.75 22.25 17.75H17.75V22.25C17.75 22.6642 17.4142 23 17 23C16.5858 23 16.25 22.6642 16.25 22.25V17.75H11.75C11.3358 17.75 11 17.4142 11 17C11 16.5858 11.3358 16.25 11.75 16.25H16.25V11.75C16.25 11.3358 16.5858 11 17 11Z"
fill="#3E63DD"
/>
</svg>
Create new version
</div>
</div>
</components.Menu>
);
};
const SingleValue = ({ selectProps, data }) => {
return (
<div className="d-inline-flex align-items-center">
<svg className="me-2" width="35" height="21" viewBox="0 0 35 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.44531 6.13737C4.12315 6.13737 3.86198 6.39854 3.86198 6.7207C3.86198 7.04287 4.12315 7.30404 4.44531 7.30404C4.76748 7.30404 5.02865 7.04287 5.02865 6.7207C5.02865 6.39854 4.76748 6.13737 4.44531 6.13737ZM2.69531 6.7207C2.69531 5.7542 3.47881 4.9707 4.44531 4.9707C5.41181 4.9707 6.19531 5.7542 6.19531 6.7207C6.19531 7.48266 5.70834 8.13089 5.02865 8.37112V12.0703C5.52589 12.246 5.91998 12.6401 6.09573 13.1374H9.11198C9.26669 13.1374 9.41506 13.0759 9.52446 12.9665C9.63385 12.8571 9.69531 12.7087 9.69531 12.554V11.0457L8.94112 11.7998C8.71332 12.0277 8.34397 12.0277 8.11617 11.7998C7.88836 11.572 7.88836 11.2027 8.11617 10.9749L9.86617 9.22489C10.094 8.99709 10.4633 8.99709 10.6911 9.22489L12.4411 10.9749C12.6689 11.2027 12.6689 11.572 12.4411 11.7998C12.2133 12.0277 11.844 12.0277 11.6162 11.7998L10.862 11.0457V12.554C10.862 13.0182 10.6776 13.4633 10.3494 13.7915C10.0212 14.1197 9.57611 14.304 9.11198 14.304H6.09573C5.8555 14.9837 5.20727 15.4707 4.44531 15.4707C3.47881 15.4707 2.69531 14.6872 2.69531 13.7207C2.69531 12.9587 3.18228 12.3105 3.86198 12.0703V8.37112C3.18228 8.13089 2.69531 7.48266 2.69531 6.7207ZM10.2786 6.13737C9.95648 6.13737 9.69531 6.39854 9.69531 6.7207C9.69531 7.04287 9.95648 7.30404 10.2786 7.30404C10.6008 7.30404 10.862 7.04287 10.862 6.7207C10.862 6.39854 10.6008 6.13737 10.2786 6.13737ZM8.52865 6.7207C8.52865 5.7542 9.31215 4.9707 10.2786 4.9707C11.2451 4.9707 12.0286 5.7542 12.0286 6.7207C12.0286 7.6872 11.2451 8.4707 10.2786 8.4707C9.31215 8.4707 8.52865 7.6872 8.52865 6.7207ZM4.44531 13.1374C4.12315 13.1374 3.86198 13.3985 3.86198 13.7207C3.86198 14.0429 4.12315 14.304 4.44531 14.304C4.76748 14.304 5.02865 14.0429 5.02865 13.7207C5.02865 13.3985 4.76748 13.1374 4.44531 13.1374Z"
fill="#E93D82"
/>
<path
d="M20.1074 12.9258L22.6211 5.68945H23.8457L20.6875 14.2207H19.8145L20.1074 12.9258ZM17.7578 5.68945L20.248 12.9258L20.5586 14.2207H19.6855L16.5332 5.68945H17.7578ZM27.2031 14.3379C26.7617 14.3379 26.3613 14.2637 26.002 14.1152C25.6465 13.9629 25.3398 13.75 25.082 13.4766C24.8281 13.2031 24.6328 12.8789 24.4961 12.5039C24.3594 12.1289 24.291 11.7188 24.291 11.2734V11.0273C24.291 10.5117 24.3672 10.0527 24.5195 9.65039C24.6719 9.24414 24.8789 8.90039 25.1406 8.61914C25.4023 8.33789 25.6992 8.125 26.0312 7.98047C26.3633 7.83594 26.707 7.76367 27.0625 7.76367C27.5156 7.76367 27.9062 7.8418 28.2344 7.99805C28.5664 8.1543 28.8379 8.37305 29.0488 8.6543C29.2598 8.93164 29.416 9.25977 29.5176 9.63867C29.6191 10.0137 29.6699 10.4238 29.6699 10.8691V11.3555H24.9355V10.4707H28.5859V10.3887C28.5703 10.1074 28.5117 9.83398 28.4102 9.56836C28.3125 9.30273 28.1562 9.08398 27.9414 8.91211C27.7266 8.74023 27.4336 8.6543 27.0625 8.6543C26.8164 8.6543 26.5898 8.70703 26.3828 8.8125C26.1758 8.91406 25.998 9.06641 25.8496 9.26953C25.7012 9.47266 25.5859 9.7207 25.5039 10.0137C25.4219 10.3066 25.3809 10.6445 25.3809 11.0273V11.2734C25.3809 11.5742 25.4219 11.8574 25.5039 12.123C25.5898 12.3848 25.7129 12.6152 25.873 12.8145C26.0371 13.0137 26.2344 13.1699 26.4648 13.2832C26.6992 13.3965 26.9648 13.4531 27.2617 13.4531C27.6445 13.4531 27.9688 13.375 28.2344 13.2188C28.5 13.0625 28.7324 12.8535 28.9316 12.5918L29.5879 13.1133C29.4512 13.3203 29.2773 13.5176 29.0664 13.7051C28.8555 13.8926 28.5957 14.0449 28.2871 14.1621C27.9824 14.2793 27.6211 14.3379 27.2031 14.3379ZM32.0195 8.87695V14.2207H30.9355V7.88086H31.9902L32.0195 8.87695ZM34 7.8457L33.9941 8.85352C33.9043 8.83398 33.8184 8.82227 33.7363 8.81836C33.6582 8.81055 33.5684 8.80664 33.4668 8.80664C33.2168 8.80664 32.9961 8.8457 32.8047 8.92383C32.6133 9.00195 32.4512 9.11133 32.3184 9.25195C32.1855 9.39258 32.0801 9.56055 32.002 9.75586C31.9277 9.94727 31.8789 10.1582 31.8555 10.3887L31.5508 10.5645C31.5508 10.1816 31.5879 9.82227 31.6621 9.48633C31.7402 9.15039 31.8594 8.85352 32.0195 8.5957C32.1797 8.33398 32.3828 8.13086 32.6289 7.98633C32.8789 7.83789 33.1758 7.76367 33.5195 7.76367C33.5977 7.76367 33.6875 7.77344 33.7891 7.79297C33.8906 7.80859 33.9609 7.82617 34 7.8457Z"
fill="#E03177"
/>
</svg>
<div>{selectProps.getOptionLabel(data)}</div>
</div>
);
};
export const CustomSelect = ({ ...props }) => {
const [showEditAppVersion, setShowEditAppVersion] = useState(false);
const [showCreateAppVersion, setShowCreateAppVersion] = useState(false);
return (
<>
<CreateVersion
{...props}
showCreateAppVersion={showCreateAppVersion}
setShowCreateAppVersion={setShowCreateAppVersion}
/>
<EditVersion {...props} showEditAppVersion={showEditAppVersion} setShowEditAppVersion={setShowEditAppVersion} />
<Select
width={'100%'}
classNamePrefix="custom-version-selector"
hasSearch={false}
components={{ Menu, SingleValue }}
setShowEditAppVersion={setShowEditAppVersion}
setShowCreateAppVersion={setShowCreateAppVersion}
styles={{ border: 0 }}
{...props}
/>
</>
);
};

75
frontend/src/Editor/AppVersionsManager/EditVersionModal.jsx Normal file
View file

@ -0,0 +1,75 @@
import React, { useState } from 'react';
import { appVersionService } from '@/_services';
import AlertDialog from '@/_ui/AlertDialog';
import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
import { useHotkeys } from 'react-hotkeys-hook';
export const EditVersion = ({
appId,
value: editingVersionId,
setAppVersions,
setShowEditAppVersion,
showEditAppVersion,
}) => {
const [isEditingVersion, setIsEditingVersion] = useState(false);
const [versionName, setVersionName] = useState('');
const { t } = useTranslation();
useHotkeys('enter', () => editVersion());
const editVersion = () => {
if (versionName.trim() === '') {
toast.error('The version name should not be empty');
return;
}
setIsEditingVersion(true);
appVersionService
.save(appId, editingVersionId, { name: versionName })
.then(() => {
toast.success('Version name updated');
appVersionService.getAll(appId).then((data) => {
const versions = data.versions;
setAppVersions(versions);
});
setIsEditingVersion(false);
setShowEditAppVersion(false);
})
.catch((error) => {
setIsEditingVersion(false);
toast.error(error?.error);
});
};
return (
<AlertDialog
show={showEditAppVersion}
closeModal={() => showEditAppVersion(false)}
title={t('editor.appVersionManager.editVersion', 'Edit Version')}
>
<div className="row mb-3">
<div className="col modal-main">
<input
type="text"
onChange={(e) => setVersionName(e.target.value)}
className="form-control"
placeholder={t('editor.appVersionManager.versionName', 'Version name')}
disabled={isEditingVersion}
value={versionName}
maxLength={25}
/>
</div>
</div>
<div className="row">
<div className="col d-flex justify-content-end">
<button className="btn mx-2" onClick={() => setShowEditAppVersion(false)}>
{t('globals.cancel', 'Cancel')}
</button>
<button className={`btn btn-primary ${isEditingVersion ? 'btn-loading' : ''}`} onClick={editVersion}>
{t('globals.save', 'Save')}
</button>
</div>
</div>
</AlertDialog>
);
};

112
frontend/src/Editor/AppVersionsManager/List.jsx Normal file
View file

@ -0,0 +1,112 @@
import React, { useState, useEffect } from 'react';
import cx from 'classnames';
import { appVersionService } from '@/_services';
import { CustomSelect } from './CustomSelect';
import { toast } from 'react-hot-toast';
export const AppVersionsManager = function ({
appId,
editingVersion,
releasedVersionId,
setAppDefinitionFromVersion,
showCreateVersionModalPrompt,
closeCreateVersionModalPrompt,
}) {
const [appVersions, setAppVersions] = useState([]);
const [appVersionStatus, setGetAppVersionStatus] = useState('');
useEffect(() => {
setGetAppVersionStatus('loading');
appVersionService
.getAll(appId)
.then((data) => {
setAppVersions(data.versions);
setGetAppVersionStatus('success');
})
.catch((error) => {
toast.error(error);
setGetAppVersionStatus('failure');
});
}, []);
const selectVersion = (id) => {
appVersionService
.getOne(appId, id)
.then((data) => {
setAppDefinitionFromVersion(data);
})
.catch((error) => {
toast.error(error);
});
};
const deleteAppVersion = (versionId, versionName) => {
if (window.confirm(`Are you sure you want to delete this version - ${versionName}?`) === false) return;
const deleteingToastId = toast.loading('Deleting version...');
appVersionService
.del(appId, versionId)
.then(() => {
toast.dismiss(deleteingToastId);
toast.success(`Version - ${versionName} Deleted`);
appVersionService.getAll(appId).then((data) => {
setAppVersions(data.versions);
});
})
.catch((error) => {
toast.dismiss(deleteingToastId);
toast.error(error?.error ?? 'Oops, something went wrong');
});
};
const options = appVersions.map((appVersion) => ({
value: appVersion.id,
appVersionName: appVersion.name,
label: (
<div className="row align-items-center app-version-list-item">
<div className="col-10">
<div className={cx('app-version-name', { 'color-light-green': appVersion.id === releasedVersionId })}>
{appVersion.name}
{appVersion.id === releasedVersionId && <span className="color-light-green ms-2">Currently released</span>}
</div>
</div>
<div
className="col cursor-pointer m-auto app-version-delete"
onClick={(e) => {
e.stopPropagation();
deleteAppVersion(appVersion.id, appVersion.name);
}}
>
<svg width="13" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.612 13.246c-.355 0-.663-.13-.925-.392a1.265 1.265 0 01-.391-.925V2.596h-.184a.645.645 0 01-.475-.192.645.645 0 01-.191-.475c0-.189.064-.347.191-.475a.645.645 0 01.475-.191h2.884c0-.19.064-.348.191-.475a.645.645 0 01.475-.192H8.03c.189 0 .35.067.483.2a.64.64 0 01.2.467h2.867c.189 0 .347.064.475.191a.645.645 0 01.192.475.645.645 0 01-.192.475.645.645 0 01-.475.192h-.183v9.333c0 .356-.13.664-.392.925-.261.261-.57.392-.925.392H2.612zm0-10.65v9.333h7.467V2.596H2.612zm1.734 7.4c0 .155.055.289.166.4a.545.545 0 00.4.167.565.565 0 00.417-.167.545.545 0 00.167-.4V4.513a.579.579 0 00-.175-.425.56.56 0 00-.409-.175.526.526 0 00-.408.175.61.61 0 00-.158.425v5.483zm2.85 0c0 .155.058.289.175.4a.573.573 0 00.408.167.565.565 0 00.417-.167.545.545 0 00.166-.4V4.513a.579.579 0 00-.175-.425.56.56 0 00-.408-.175.552.552 0 00-.417.175.594.594 0 00-.166.425v5.483zm-4.584-7.4v9.333-9.333z"
fill="#EB1414"
></path>
</svg>
</div>
</div>
),
}));
const customSelectProps = {
appId,
appVersions,
setAppVersions,
setAppDefinitionFromVersion,
editingVersion,
showCreateVersionModalPrompt,
closeCreateVersionModalPrompt,
};
return (
<div className="app-versions-selector">
<CustomSelect
isLoading={appVersionStatus === 'loading'}
options={options}
value={editingVersion.id}
onChange={(id) => selectVersion(id)}
{...customSelectProps}
/>
</div>
);
};

13
frontend/src/Editor/Comment/CommentFooter.jsx
View file

@ -47,7 +47,7 @@ function CommentFooter({
</div>
<div className="card-footer">
<div className="row align-items-center">
<div className="col-8">
<div className="col-9">
<TextareaMentions
searchUser={searchUser}
setMentionedUsers={setMentionedUsers}
@ -69,13 +69,20 @@ function CommentFooter({
</svg>
</div>
<div
className={cx('col-3', {
className={cx('col-2', {
'cursor-pointer': !!comment,
'cursor-not-allowed': !comment,
})}
>
<Button loading={loading} disabled={!comment} className={`m2 btn-sm rounded-2`} onClick={handleClick}>
{t('globals.send', 'Send')}
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.0884 1.91109C18.3169 2.13956 18.3927 2.4795 18.283 2.78339L12.8663 17.7834C12.8584 17.8051 12.8497 17.8265 12.8401 17.8475C12.737 18.0724 12.5716 18.2629 12.3635 18.3965C12.1553 18.5301 11.9132 18.6011 11.6658 18.6011C11.4185 18.6011 11.1764 18.5301 10.9682 18.3965C10.765 18.2661 10.6026 18.0815 10.4991 17.8636L7.71137 12.2881L2.13593 9.50043C1.91807 9.39695 1.73342 9.23448 1.60303 9.0313C1.46945 8.82315 1.39844 8.58102 1.39844 8.33368C1.39844 8.08635 1.46945 7.84422 1.60303 7.63606C1.73661 7.42791 1.92715 7.26248 2.152 7.15944C2.173 7.14982 2.1944 7.14107 2.21613 7.13322L17.2161 1.71655C17.52 1.60682 17.86 1.68263 18.0884 1.91109ZM9.34646 11.8316L11.6093 16.3572L15.4463 5.73176L9.34646 11.8316ZM14.2677 4.55325L3.6423 8.39022L8.16795 10.653L14.2677 4.55325Z"
fill="#FDFDFE"
/>
</svg>
</Button>
</div>
</div>

52
frontend/src/Editor/CommentNotifications/Content.jsx
View file

@ -3,8 +3,6 @@ import cx from 'classnames';
import { isEmpty } from 'lodash';
import { pluralize, hightlightMentionedUserInComment } from '@/_helpers/utils';
import moment from 'moment';
import usePopover from '@/_hooks/use-popover';
import { useSpring } from 'react-spring';
import useRouter from '@/_hooks/use-router';
import Spinner from '@/_ui/Spinner';
@ -12,8 +10,6 @@ import Spinner from '@/_ui/Spinner';
const Content = ({ notifications, loading }) => {
const router = useRouter();
const [selectedCommentId, setSelectedCommentId] = React.useState(router.query.commentId);
const [open, _trigger, _content] = usePopover(false);
const _popoverFadeStyle = useSpring({ opacity: open ? 1 : 0 });
React.useEffect(() => {
if (router.query?.commentId) setSelectedCommentId(router.query?.commentId);
@ -72,54 +68,6 @@ const Content = ({ notifications, loading }) => {
<sub className="fw-400 comment-notification-count light-gray">
Total {pluralize(notifications.length, 'comment')}
</sub>
{/* <div className="ms-auto position-relative">
<svg {...trigger} width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3333 1H1L6.33333 7.30667V11.6667L9 13V7.30667L14.3333 1Z"
stroke="#5E5E5E"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<animated.div
{...content}
style={popoverFadeStyle}
className={cx('card popover comment-notification-filter-popover', {
show: open,
hide: !open,
})}
onClick={(e) => e.stopPropagation()}
>
<div>
<div className="d-flex mb-3">
<span>Show all</span>
<div className="ms-auto">
<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.799988 4.5999L4.39999 8.1999L11.2 1.3999"
stroke="#0565FF"
strokeWidth="1.06667"
strokeLinecap="square"
/>
</svg>
</div>
</div>
<div className="d-flex">
<span>Only mention of you</span>
<div className="ms-auto">
<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.799988 4.5999L4.39999 8.1999L11.2 1.3999"
stroke="#0565FF"
strokeWidth="1.06667"
strokeLinecap="square"
/>
</svg>
</div>
</div>
</div>
</animated.div>
</div> */}
</div>
)}
<div>{getContent()}</div>

73
frontend/src/Editor/CommentNotifications/index.jsx
View file

@ -1,8 +1,6 @@
import '@/_styles/editor/comment-notifications.scss';
import cx from 'classnames';
import React from 'react';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import { commentsService } from '@/_services';
@ -11,32 +9,41 @@ import TabContent from './Content';
import useRouter from '@/_hooks/use-router';
const CommentNotifications = ({ socket, toggleComments, appVersionsId }) => {
const darkMode = localStorage.getItem('darkMode') === 'true';
const [notifications, setNotifications] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const [key, setKey] = React.useState('active');
const router = useRouter();
async function fetchData(k) {
const isResolved = k === 'resolved';
async function fetchData(selectedKey) {
const isResolved = selectedKey === 'resolved';
setLoading(true);
const { data } = await commentsService.getNotifications(router.query.id, isResolved, appVersionsId);
setLoading(false);
setNotifications(data);
}
React.useEffect(() => {
fetchData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
// Listen for messages
socket?.addEventListener('message', function (event) {
if (event.data === 'notifications') fetchData();
if (event.data === 'notifications') fetchData(key);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleClick = async (selectedKey) => {
setLoading(true);
await fetchData(selectedKey);
setLoading(false);
setKey(selectedKey);
};
return (
<div className="comment-notification-sidebar editor-sidebar">
<div className="card-header">
@ -61,23 +68,41 @@ const CommentNotifications = ({ socket, toggleComments, appVersionsId }) => {
</div>
</div>
<span className="border-bottom" />
<Tabs
activeKey={key}
onSelect={async (k) => {
setKey(k);
setLoading(true);
await fetchData(k);
setLoading(false);
}}
className="dflex justify-content-center"
>
<Tab className="comment-notification-nav-item" eventKey="active" title="Active">
<TabContent notifications={notifications} loading={loading} />
</Tab>
<Tab className="comment-notification-nav-item" eventKey="resolved" title="Resolved">
<TabContent notifications={notifications} loading={loading} />
</Tab>
</Tabs>
<div style={{ padding: '16px 8px', borderRadius: 6 }}>
<div className="d-flex p-1" style={{ background: '#ECEEF0' }} role="tablist" aria-orientation="horizontal">
<button
className={cx('btn w-50 comment-notification-nav-item', {
'bg-white': key === 'active' && !darkMode,
'bg-black': key === 'active' && darkMode,
'color-white': key === 'active' && darkMode,
'opacity-100': key === 'active',
})}
role="tab"
type="button"
aria-selected="true"
tabIndex="0"
onClick={() => handleClick('active')}
>
Active
</button>
<button
className={cx('btn w-50 comment-notification-nav-item', {
'bg-white': key === 'resolved' && !darkMode,
'bg-black': key === 'resolved' && darkMode,
'color-white': key === 'resolved' && darkMode,
'opacity-100': key === 'resolved',
})}
role="tab"
type="button"
aria-selected="false"
tabIndex="-1"
onClick={() => handleClick('resolved')}
>
Resolved
</button>
</div>
</div>
<TabContent notifications={notifications} loading={loading} />
</div>
);
};

228
frontend/src/Editor/Editor.jsx
View file

@ -1,6 +1,4 @@
/* eslint-disable import/no-named-as-default */
import React from 'react';
import cx from 'classnames';
import {
datasourceService,
dataqueryService,
@ -43,13 +41,10 @@ import { WidgetManager } from './WidgetManager';
import Fuse from 'fuse.js';
import config from 'config';
import queryString from 'query-string';
import toast from 'react-hot-toast';
import produce, { enablePatches, setAutoFreeze, applyPatches } from 'immer';
import { toast } from 'react-hot-toast';
import { produce, enablePatches, setAutoFreeze, applyPatches } from 'immer';
import Logo from './Icons/logo.svg';
import EditIcon from './Icons/edit.svg';
import MobileSelectedIcon from './Icons/mobile-selected.svg';
import DesktopSelectedIcon from './Icons/desktop-selected.svg';
import { AppVersionsManager } from './AppVersionsManager';
import { AppVersionsManager } from './AppVersionsManager/List';
import { SearchBox } from '@/_components/SearchBox';
import { createWebsocketConnection } from '@/_helpers/websocketConnection';
import Tooltip from 'react-bootstrap/Tooltip';
@ -58,10 +53,12 @@ import RealtimeAvatars from './RealtimeAvatars';
import RealtimeCursors from '@/Editor/RealtimeCursors';
import { initEditorWalkThrough } from '@/_helpers/createWalkThrough';
import { EditorContextWrapper } from './Context/EditorContextWrapper';
// eslint-disable-next-line import/no-unresolved
import Selecto from 'react-selecto';
import { withTranslation } from 'react-i18next';
import { v4 as uuid } from 'uuid';
import EditAppName from './Header/EditAppName';
import HeaderActions from './Header/HeaderActions';
import { GlobalSettings } from './Header/GlobalSettings';
setAutoFreeze(false);
enablePatches();
@ -824,29 +821,6 @@ class EditorComponent extends React.Component {
);
};
saveApp = (id, attributes, notify = false) => {
appService.saveApp(id, attributes).then(() => {
if (notify) {
toast.success('App saved sucessfully');
}
});
};
saveAppName = (id, name, notify = false) => {
if (!name.trim()) {
toast("App name can't be empty or whitespace", {
icon: '🚨',
});
this.setState({
app: { ...this.state.app, name: this.state.oldName },
});
return;
}
this.saveApp(id, { name }, notify);
};
getSourceMetaData = (dataSource) => {
if (dataSource.plugin_id) {
return dataSource.plugin?.manifest_file?.data.source;
@ -1159,35 +1133,6 @@ class EditorComponent extends React.Component {
return canvasBackgroundColor;
};
renderLayoutIcon = (isDesktopSelected) => {
if (isDesktopSelected)
return (
<span
onClick={() =>
this.setState({
currentLayout: isDesktopSelected ? 'mobile' : 'desktop',
})
}
data-cy="change-layout-button"
>
<DesktopSelectedIcon />
</span>
);
return (
<span
onClick={() =>
this.setState({
currentLayout: isDesktopSelected ? 'mobile' : 'desktop',
})
}
data-cy="change-layout-button"
>
<MobileSelectedIcon />
</span>
);
};
saveEditingVersion = () => {
if (this.isVersionReleased()) {
this.setState({ isSaving: false, showCreateVersionModalPrompt: true });
@ -1724,6 +1669,12 @@ class EditorComponent extends React.Component {
} else this.setState({ ...stateToBeUpdated });
};
toggleCurrentLayout = (selectedLayout) => {
this.setState({
currentLayout: selectedLayout,
});
};
render() {
const {
currentSidebarTab,
@ -1765,7 +1716,6 @@ class EditorComponent extends React.Component {
return (
<div className="editor wrapper">
<ReactTooltip type="dark" effect="solid" eventOff="click" delayShow={250} />
{/* This is for viewer to show query confirmations */}
<Confirm
show={queryConfirmationList.length > 0}
message={`Do you want to run this query - ${queryConfirmationList[0]?.queryName}?`}
@ -1785,7 +1735,8 @@ class EditorComponent extends React.Component {
/>
<Confirm
show={this.state.showPageDeletionConfirmation?.isOpen ?? false}
message={'Do you really want to delete this page?'}
title={'Delete Page'}
message={`Do you really want to delete this page?`}
confirmButtonLoading={this.state.isDeletingPage}
onConfirm={() => this.executeDeletepageRequest()}
onCancel={() => this.cancelDeletePageRequest()}
@ -1797,41 +1748,28 @@ class EditorComponent extends React.Component {
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
<span className="navbar-toggler-icon"></span>
</button>
<h1 className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0">
<h1 className="navbar-brand d-none-navbar-horizontal pe-0">
<Link to={'/'} data-cy="editor-page-logo">
<Logo />
</Link>
</h1>
{this.state.app && (
<div className={`app-name input-icon ${this.props.darkMode ? 'dark' : ''}`}>
<input
type="text"
onFocus={(e) => this.setState({ oldName: e.target.value })}
onChange={(e) => this.onNameChanged(e.target.value)}
onBlur={(e) => this.saveAppName(this.state.app.id, e.target.value)}
className="form-control-plaintext form-control-plaintext-sm"
value={this.state.app.name}
data-cy="app-name-input"
/>
<span className="input-icon-addon">
<EditIcon />
</span>
</div>
)}
<span
className={cx('autosave-indicator', {
'autosave-indicator-saving': this.state.isSaving,
'text-danger': this.state.saveError,
'd-none': this.isVersionReleased(),
})}
data-cy="autosave-indicator"
>
{this.state.isSaving
? 'Saving...'
: this.state.saveError
? 'Could not save changes'
: 'All changes are saved'}
</span>
<GlobalSettings
currentState={currentState}
globalSettingsChanged={this.globalSettingsChanged}
globalSettings={appDefinition.globalSettings}
darkMode={this.props.darkMode}
toggleAppMaintenance={this.toggleAppMaintenance}
is_maintenance_on={this.state.app.is_maintenance_on}
/>
<EditAppName appId={app.id} appName={app.name} onNameChanged={this.onNameChanged} />
<HeaderActions
canUndo={this.canUndo}
canRedo={this.canRedo}
handleUndo={this.handleUndo}
handleRedo={this.handleRedo}
currentLayout={currentLayout}
toggleCurrentLayout={this.toggleCurrentLayout}
/>
{config.ENABLE_MULTIPLAYER_EDITING && <RealtimeAvatars />}
{editingVersion && (
<AppVersionsManager
@ -1844,18 +1782,7 @@ class EditorComponent extends React.Component {
/>
)}
<div className="navbar-nav flex-row order-md-last release-buttons">
<div className="nav-item dropdown d-none d-md-flex me-2">
<Link
to={appVersionPreviewLink}
target="_blank"
className="btn btn-sm font-500 color-primary border-0"
rel="noreferrer"
data-cy="preview-link-button"
>
{this.props.t('editor.preview', 'Preview')}
</Link>
</div>
<div className="nav-item dropdown d-none d-md-flex me-2">
<div className="nav-item me-1">
{app.id && (
<ManageAppUsers
app={app}
@ -1865,7 +1792,33 @@ class EditorComponent extends React.Component {
/>
)}
</div>
<div className="nav-item dropdown me-2">
<div className="nav-item me-1">
<Link
title="Preview"
to={appVersionPreviewLink}
target="_blank"
rel="noreferrer"
data-cy="preview-link-button"
>
<svg
className="icon cursor-pointer w-100 h-100"
width="33"
height="33"
viewBox="0 0 33 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.363281" y="0.220703" width="32" height="32" rx="6" fill="#F0F4FF" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.4712 16.2205C12.1364 18.9742 14.1064 20.2205 16.3646 20.2205C18.6227 20.2205 20.5927 18.9742 22.258 16.2205C20.5927 13.4669 18.6227 12.2205 16.3646 12.2205C14.1064 12.2205 12.1364 13.4669 10.4712 16.2205ZM9.1191 15.8898C10.9694 12.6519 13.3779 10.8872 16.3646 10.8872C19.3513 10.8872 21.7598 12.6519 23.6101 15.8898C23.7272 16.0947 23.7272 16.3464 23.6101 16.5513C21.7598 19.7891 19.3513 21.5539 16.3646 21.5539C13.3779 21.5539 10.9694 19.7891 9.1191 16.5513C9.00197 16.3464 9.00197 16.0947 9.1191 15.8898ZM16.3646 15.5539C15.9964 15.5539 15.6979 15.8524 15.6979 16.2205C15.6979 16.5887 15.9964 16.8872 16.3646 16.8872C16.7328 16.8872 17.0312 16.5887 17.0312 16.2205C17.0312 15.8524 16.7328 15.5539 16.3646 15.5539ZM14.3646 16.2205C14.3646 15.116 15.26 14.2205 16.3646 14.2205C17.4692 14.2205 18.3646 15.116 18.3646 16.2205C18.3646 17.3251 17.4692 18.2205 16.3646 18.2205C15.26 18.2205 14.3646 17.3251 14.3646 16.2205Z"
fill="#3E63DD"
/>
</svg>
</Link>
</div>
<div className="nav-item dropdown">
{app.id && (
<ReleaseVersionButton
isVersionReleased={this.isVersionReleased()}
@ -1887,6 +1840,7 @@ class EditorComponent extends React.Component {
<div className="sub-section">
<LeftSidebar
appVersionsId={this.state?.editingVersion?.id}
showComments={showComments}
errorLogs={currentState.errors}
components={currentState.components}
appId={appId}
@ -1897,8 +1851,6 @@ class EditorComponent extends React.Component {
onZoomChanged={this.onZoomChanged}
toggleComments={this.toggleComments}
switchDarkMode={this.changeDarkMode}
globalSettingsChanged={this.globalSettingsChanged}
globalSettings={appDefinition.globalSettings}
currentState={currentState}
debuggerActions={this.sideBarDebugger}
appDefinition={{
@ -1912,8 +1864,6 @@ class EditorComponent extends React.Component {
setSelectedComponent={this.setSelectedComponent}
removeComponent={this.removeComponent}
runQuery={(queryId, queryName) => runQuery(this, queryId, queryName)}
toggleAppMaintenance={this.toggleAppMaintenance}
is_maintenance_on={this.state.app.is_maintenance_on}
ref={this.dataSourceModalRef}
isSaving={this.state.isSaving}
isUnsavedQueriesAvailable={this.state.isUnsavedQueriesAvailable}
@ -1951,7 +1901,7 @@ class EditorComponent extends React.Component {
onScroll={(e) => {
this.canvasContainerRef.current.scrollBy(e.direction[0] * 10, e.direction[1] * 10);
}}
></Selecto>
/>
)}
<div className="main main-editor-canvas" id="main-editor-canvas">
<div
@ -2171,59 +2121,6 @@ class EditorComponent extends React.Component {
</QueryPanel>
</div>
<div className="editor-sidebar">
<div className="editor-actions col-md-12">
<div className="m-auto undo-redo-buttons">
<svg
onClick={this.handleUndo}
xmlns="http://www.w3.org/2000/svg"
className={cx('cursor-pointer icon icon-tabler icon-tabler-arrow-back-up', {
disabled: !this.canUndo,
})}
width="44"
data-tip="undo"
height="44"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke={this.props.darkMode ? '#fff' : '#2c3e50'}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none">
<title>undo</title>
</path>
<path d="M9 13l-4 -4l4 -4m-4 4h11a4 4 0 0 1 0 8h-1" fill="none">
<title>undo</title>
</path>
</svg>
<svg
title="redo"
data-tip="redo"
onClick={this.handleRedo}
xmlns="http://www.w3.org/2000/svg"
className={cx('cursor-pointer icon icon-tabler icon-tabler-arrow-forward-up', {
disabled: !this.canRedo,
})}
width="44"
height="44"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke={this.props.darkMode ? '#fff' : '#2c3e50'}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none">
<title>redo</title>
</path>
<path d="M15 13l4 -4l-4 -4m4 4h-11a4 4 0 0 0 0 8h1" />
</svg>
</div>
<div className="layout-buttons cursor-pointer">
{this.renderLayoutIcon(currentLayout === 'desktop')}
</div>
</div>
<EditorKeyHooks
moveComponents={this.moveComponents}
cloneComponents={this.cloneComponents}
@ -2250,7 +2147,6 @@ class EditorComponent extends React.Component {
switchSidebarTab={this.switchSidebarTab}
apps={apps}
darkMode={this.props.darkMode}
handleEditorEscapeKeyPress={this.handleEditorEscapeKeyPress}
appDefinitionLocalVersion={this.state.appDefinitionLocalVersion}
pages={this.getPagesWithIds()}
></Inspector>

50
frontend/src/Editor/Header/EditAppName.jsx Normal file
View file

@ -0,0 +1,50 @@
import React from 'react';
import EditIcon from '../Icons/edit.svg';
import { appService } from '@/_services';
import { toast } from 'react-hot-toast';
function EditAppName({ appId, appName, onNameChanged }) {
const darkMode = localStorage.getItem('darkMode') === 'true';
const [name, setName] = React.useState(appName);
React.useEffect(() => {
setName(appName);
}, [appName]);
const saveAppName = async (name) => {
if (!name.trim()) {
toast("App name can't be empty or whitespace", {
icon: '🚨',
});
return;
}
await appService
.saveApp(appId, { name })
.then(() => {
onNameChanged(name);
})
.catch(() => {
toast('Something went wrong while editing app name', {
icon: '🚨',
});
});
};
return (
<div className={`app-name input-icon ${darkMode ? 'dark' : ''}`}>
<input
type="text"
onChange={(e) => setName(e.target.value)}
onBlur={(e) => saveAppName(e.target.value)}
className="form-control-plaintext form-control-plaintext-sm"
value={name}
data-cy="app-name-input"
/>
<span className="input-icon-addon">
<EditIcon />
</span>
</div>
);
}
export default EditAppName;

78
frontend/src/Editor/LeftSidebar/SidebarGlobalSettings.jsx → frontend/src/Editor/Header/GlobalSettings.jsx
View file

@ -1,16 +1,18 @@
import React from 'react';
import usePopover from '@/_hooks/use-popover';
import cx from 'classnames';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';
import { SketchPicker } from 'react-color';
import { Confirm } from '../Viewer/Confirm';
import { LeftSidebarItem } from './SidebarItem';
import { HeaderSection } from '@/_ui/LeftSidebar';
import { LeftSidebarItem } from '../LeftSidebar/SidebarItem';
import FxButton from '../CodeBuilder/Elements/FxButton';
import { CodeHinter } from '../CodeBuilder/CodeHinter';
import { resolveReferences } from '@/_helpers/utils';
import { useTranslation } from 'react-i18next';
import _ from 'lodash';
export const LeftSidebarGlobalSettings = ({
export const GlobalSettings = ({
globalSettings,
globalSettingsChanged,
darkMode,
@ -19,13 +21,14 @@ export const LeftSidebarGlobalSettings = ({
currentState,
}) => {
const { t } = useTranslation();
const [open, trigger, content] = usePopover(false);
const { hideHeader, canvasMaxWidth, canvasMaxWidthType, canvasMaxHeight, canvasBackgroundColor, backgroundFxQuery } =
globalSettings;
const [showPicker, setShowPicker] = React.useState(false);
const [forceCodeBox, setForceCodeBox] = React.useState(true);
const [realState, setRealState] = React.useState(currentState);
const [showConfirmation, setConfirmationShow] = React.useState(false);
const [show, setShow] = React.useState('');
const coverStyles = {
position: 'fixed',
top: '0px',
@ -45,28 +48,13 @@ export const LeftSidebarGlobalSettings = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(resolveReferences(backgroundFxQuery, realState))]);
return (
<>
<Confirm
show={showConfirmation}
message={
is_maintenance_on
? 'Users will now be able to launch the released version of this app, do you wish to continue?'
: 'Users will not be able to launch the app until maintenance mode is turned off, do you wish to continue?'
}
onConfirm={() => toggleAppMaintenance()}
onCancel={() => setConfirmationShow(false)}
darkMode={darkMode}
/>
<LeftSidebarItem
tip="Global settings"
{...trigger}
icon="settings"
className={`left-sidebar-item left-sidebar-layout ${open && 'active'}`}
text={'Settings'}
/>
<div {...content} className={`card popover global-settings-popover ${open ? 'show' : 'hide'}`}>
<div style={{ marginTop: '1rem' }} className="card-body">
const popoverContent = (
<Popover id="global-settings-popover" className={cx({ 'theme-dark': darkMode })}>
<Popover.Content bsPrefix="global-settings-popover">
<HeaderSection darkMode={darkMode}>
<HeaderSection.PanelHeader title="Global settings" />
</HeaderSection>
<div className="card-body">
<div>
<div className="d-flex mb-3">
<span>{t('leftSidebar.Settings.hideHeader', 'Hide header for launched apps')}</span>
@ -149,7 +137,7 @@ export const LeftSidebarGlobalSettings = ({
</div>
</div>
</div>
<div className="d-flex">
<div className="d-flex align-items-center">
<span className="w-full">
{t('leftSidebar.Settings.backgroundColorOfCanvas', 'Background color of canvas')}
</span>
@ -219,7 +207,39 @@ export const LeftSidebarGlobalSettings = ({
</div>
</div>
</div>
</div>
</Popover.Content>
</Popover>
);
return (
<>
<Confirm
show={showConfirmation}
message={
is_maintenance_on
? 'Users will now be able to launch the released version of this app, do you wish to continue?'
: 'Users will not be able to launch the app until maintenance mode is turned off, do you wish to continue?'
}
onConfirm={() => toggleAppMaintenance()}
onCancel={() => setConfirmationShow(false)}
darkMode={darkMode}
/>
<OverlayTrigger
onToggle={(show) => {
if (show) setShow('settings');
else setShow('');
}}
rootClose
trigger="click"
placement="bottom"
overlay={popoverContent}
>
<LeftSidebarItem
selectedSidebarItem={show}
icon="settings"
className={cx(`cursor-pointer sidebar-global-settings`)}
/>
</OverlayTrigger>
</>
);
};

111
frontend/src/Editor/Header/HeaderActions.jsx Normal file
View file

@ -0,0 +1,111 @@
import React from 'react';
import cx from 'classnames';
function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo, currentLayout, toggleCurrentLayout }) {
const darkMode = localStorage.getItem('darkMode') === 'true';
return (
<div className="editor-header-actions">
<div style={{ borderRadius: 6, marginRight: 12 }}>
<div
className="d-flex align-items-center p-1"
style={{ height: 28, background: '#ECEEF0', borderRadius: 6 }}
role="tablist"
aria-orientation="horizontal"
>
<button
className={cx('btn border-0 p-1', {
'bg-transparent': currentLayout !== 'desktop',
'bg-white': currentLayout === 'desktop',
'opacity-100': currentLayout === 'desktop',
})}
style={{ height: 20 }}
role="tab"
type="button"
aria-selected="true"
tabIndex="0"
onClick={() => toggleCurrentLayout('desktop')}
>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2.28125 4.17106C2.28125 3.38866 2.91551 2.75439 3.69792 2.75439H15.0312C15.8137 2.75439 16.4479 3.38866 16.4479 4.17106V11.2544C16.4479 12.0368 15.8137 12.6711 15.0312 12.6711H12.1979V14.0877H12.9062C13.2975 14.0877 13.6146 14.4049 13.6146 14.7961C13.6146 15.1873 13.2975 15.5044 12.9062 15.5044H5.82292C5.43172 15.5044 5.11458 15.1873 5.11458 14.7961C5.11458 14.4049 5.43172 14.0877 5.82292 14.0877H6.53125V12.6711H3.69792C2.91551 12.6711 2.28125 12.0368 2.28125 11.2544V4.17106ZM7.94792 12.6711V14.0877H10.7812V12.6711H7.94792ZM3.69792 11.2544V4.17106H15.0312V11.2544H3.69792Z"
fill="#11181C"
/>
</svg>
</button>
<button
className={cx('btn border-0 p-1', {
'bg-transparent': currentLayout !== 'mobile',
'bg-white': currentLayout === 'mobile',
'opacity-100': currentLayout === 'mobile',
})}
role="tab"
type="button"
style={{ height: 20 }}
aria-selected="false"
tabIndex="-1"
onClick={() => toggleCurrentLayout('mobile')}
>
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.86328 3.12939C6.44907 3.12939 6.11328 3.46518 6.11328 3.87939V14.3794C6.11328 14.7936 6.44907 15.1294 6.86328 15.1294H12.8633C13.2775 15.1294 13.6133 14.7936 13.6133 14.3794V3.87939C13.6133 3.46518 13.2775 3.12939 12.8633 3.12939H11.3633C11.3633 3.54361 11.0275 3.87939 10.6133 3.87939H9.11328C8.69907 3.87939 8.36328 3.54361 8.36328 3.12939H6.86328ZM4.61328 3.87939C4.61328 2.63675 5.62064 1.62939 6.86328 1.62939H12.8633C14.1059 1.62939 15.1133 2.63675 15.1133 3.87939V14.3794C15.1133 15.622 14.1059 16.6294 12.8633 16.6294H6.86328C5.62064 16.6294 4.61328 15.622 4.61328 14.3794V3.87939ZM9.86328 12.1294C10.2775 12.1294 10.6133 12.4652 10.6133 12.8794V12.8869C10.6133 13.3011 10.2775 13.6369 9.86328 13.6369C9.44907 13.6369 9.11328 13.3011 9.11328 12.8869V12.8794C9.11328 12.4652 9.44907 12.1294 9.86328 12.1294Z"
fill="#889096"
/>
</svg>
</button>
</div>
</div>
<svg
onClick={handleUndo}
xmlns="http://www.w3.org/2000/svg"
className={cx('undo-button cursor-pointer icon icon-tabler icon-tabler-arrow-back-up', {
disabled: !canUndo,
})}
width="44"
data-tip="undo"
height="44"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke={darkMode ? '#fff' : '#2c3e50'}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none">
<title>undo</title>
</path>
<path d="M9 13l-4 -4l4 -4m-4 4h11a4 4 0 0 1 0 8h-1" fill="none">
<title>undo</title>
</path>
</svg>
<svg
title="redo"
data-tip="redo"
onClick={handleRedo}
xmlns="http://www.w3.org/2000/svg"
className={cx('redo-button cursor-pointer icon icon-tabler icon-tabler-arrow-forward-up', {
disabled: !canRedo,
})}
width="44"
height="44"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke={darkMode ? '#fff' : '#2c3e50'}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none">
<title>redo</title>
</path>
<path d="M15 13l4 -4l-4 -4m4 4h-11a4 4 0 0 0 0 8h1" />
</svg>
</div>
);
}
export default HeaderActions;

31
frontend/src/Editor/Icons/logo.svg
View file

@ -1,30 +1 @@
<svg width="92" height="18" viewBox="0 0 92 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.2649 0.31843V3.08636C14.2649 3.18308 14.1841 3.26209 14.0855 3.26209H8.94222V17.8241C8.94222 17.9209 8.86139 17.9998 8.76277 17.9998H5.48942C5.39066 17.9998 5.30998 17.9208 5.30998 17.8241V3.26209H0.179443C0.0806839 3.26209 0 3.18308 0 3.08636V0.31843C0 0.221856 0.0808285 0.1427 0.179443 0.1427H14.0855C14.1841 0.1427 14.2649 0.221856 14.2649 0.31843Z"
fill="#4D72FA"
/>
<path
d="M27.909 8.00549C27.5285 7.13377 26.9937 6.36401 26.319 5.71547C25.6442 5.06692 24.8276 4.54865 23.8963 4.17255C22.9613 3.79645 21.9295 3.60486 20.8239 3.60486C19.7275 3.60486 18.701 3.79645 17.7714 4.17255C16.8435 4.54865 16.0307 5.06706 15.3559 5.71547C14.6793 6.36401 14.1464 7.13377 13.7714 8.00549C13.3962 8.8772 13.2061 9.82085 13.2061 10.8084C13.2061 11.7981 13.3981 12.7416 13.7785 13.6133C14.1572 14.485 14.6902 15.255 15.3614 15.9033C16.0326 16.5517 16.8419 17.0686 17.766 17.4394C18.6903 17.8119 19.7149 18 20.8115 18C21.924 18 22.9613 17.8119 23.8946 17.4394C24.8278 17.0686 25.646 16.5517 26.3243 15.9033C27.0045 15.255 27.5411 14.487 27.9162 13.6204C28.2913 12.7523 28.4833 11.8069 28.4833 10.8085C28.4833 9.82085 28.2894 8.87706 27.909 8.00549ZM20.851 14.9454C20.2821 14.9454 19.7436 14.8417 19.252 14.6378C18.7585 14.4342 18.3224 14.1457 17.9546 13.7818C17.5885 13.4183 17.2942 12.9771 17.0806 12.4727C16.8671 11.97 16.7576 11.406 16.7576 10.7961C16.7576 10.1968 16.8672 9.6362 17.0806 9.13181C17.2942 8.62741 17.5885 8.18801 17.9546 7.82423C18.3224 7.46045 18.7585 7.17569 19.2503 6.97532C19.7438 6.77509 20.2821 6.67314 20.851 6.67314C21.411 6.67314 21.9457 6.77679 22.4427 6.9807C22.9415 7.18631 23.3795 7.47108 23.7474 7.83132C24.1135 8.19156 24.4077 8.62911 24.6213 9.13181C24.8349 9.6362 24.9426 10.1968 24.9426 10.7961C24.9426 11.406 24.8349 11.9718 24.6213 12.4798C24.4076 12.9877 24.1133 13.4305 23.7455 13.7943C23.3794 14.158 22.9434 14.4428 22.4516 14.643C21.9581 14.8436 21.4198 14.9454 20.851 14.9454Z"
fill="#4D72FA"
/>
<path
d="M45.1096 8.00549C44.7309 7.13377 44.1962 6.36401 43.5195 5.71547C42.8448 5.06692 42.03 4.54865 41.0968 4.17255C40.1637 3.79645 39.13 3.60486 38.0246 3.60486C36.93 3.60486 35.9015 3.79645 34.9722 4.17255C34.0443 4.54865 33.2314 5.06706 32.5567 5.71547C31.882 6.36387 31.3488 7.13377 30.9721 8.00549C30.597 8.8772 30.4067 9.82085 30.4067 10.8084C30.4067 11.7981 30.5988 12.7416 30.9793 13.6133C31.3598 14.485 31.8926 15.255 32.5621 15.9033C33.2334 16.5517 34.0426 17.0686 34.9667 17.4394C35.8911 17.8119 36.9157 18 38.0123 18C39.1247 18 40.162 17.8119 41.0952 17.4394C42.0302 17.0686 42.8467 16.5517 43.5267 15.9033C44.2069 15.255 44.7418 14.487 45.1169 13.6204C45.4935 12.7523 45.684 11.8069 45.684 10.8085C45.684 9.82085 45.4901 8.87706 45.1096 8.00549ZM38.0515 14.9454C37.4825 14.9454 36.9443 14.8417 36.4524 14.6378C35.9589 14.4342 35.523 14.1457 35.1551 13.7818C34.789 13.4183 34.4946 12.9788 34.281 12.4727C34.0673 11.9683 33.9597 11.4041 33.9597 10.7961C33.9597 10.1968 34.0673 9.6362 34.281 9.13181C34.4946 8.62741 34.789 8.18801 35.1551 7.82423C35.523 7.46045 35.9589 7.17569 36.4507 6.97532C36.9442 6.77509 37.4825 6.67314 38.0513 6.67314C38.6112 6.67314 39.148 6.77679 39.6449 6.9807C40.1421 7.18631 40.5799 7.47108 40.9479 7.83132C41.3139 8.19156 41.6083 8.62911 41.8218 9.13181C42.0355 9.6362 42.1431 10.1968 42.1431 10.7961C42.1431 11.406 42.0355 11.9718 41.8218 12.4798C41.6083 12.9894 41.3139 13.4305 40.946 13.7943C40.5799 14.158 40.1439 14.4428 39.6522 14.643C39.1588 14.8436 38.6205 14.9454 38.0515 14.9454Z"
fill="#4D72FA"
/>
<path
d="M51.9371 0.31843V17.8242C51.9371 17.9211 51.8563 18 51.7576 18H48.5628C48.4639 18 48.3833 17.9209 48.3833 17.8242V0.31843C48.3833 0.221856 48.464 0.1427 48.5628 0.1427H51.7576C51.8563 0.1427 51.9371 0.221856 51.9371 0.31843Z"
fill="#4D72FA"
/>
<path
d="M62.6565 0.318207V12.0842C62.6565 13.0473 62.5093 13.9047 62.2168 14.6325C61.9224 15.3669 61.4935 15.9925 60.9424 16.4935C60.3917 16.9925 59.7099 17.3741 58.9184 17.6235C58.1358 17.8731 57.2369 17.9996 56.2463 17.9996H54.17C54.0713 17.9996 53.9907 17.9206 53.9907 17.8239V15.0558C53.9907 14.9592 54.0714 14.8801 54.17 14.8801H56.2463C57.2495 14.8801 57.9709 14.6376 58.3908 14.1579C58.8215 13.6693 59.0385 12.968 59.0385 12.0701L59.0493 0.318064C59.0493 0.22149 59.1301 0.142334 59.2287 0.142334H62.4769C62.5758 0.142476 62.6565 0.221633 62.6565 0.318207Z"
fill="#4D72FA"
/>
<path
d="M79.759 8.00549C79.3785 7.13377 78.8437 6.36401 78.1673 5.71547C77.4926 5.06692 76.6778 4.54865 75.7446 4.17255C74.8114 3.79645 73.7776 3.60486 72.6722 3.60486C71.5778 3.60486 70.551 3.79645 69.6214 4.17255C68.6919 4.54865 67.8789 5.06706 67.2042 5.71547C66.5295 6.36387 65.9962 7.13377 65.6215 8.00549C65.2446 8.8772 65.0542 9.82085 65.0542 10.8084C65.0542 11.7981 65.2445 12.74 65.6215 13.6064C65.9964 14.4745 66.5295 15.2426 67.2042 15.891C67.8789 16.5376 68.6919 17.058 69.6214 17.4341C70.551 17.81 71.5776 17.9999 72.6722 17.9999C73.5822 17.9999 74.4309 17.8733 75.1937 17.6238C75.9581 17.376 76.649 17.035 77.2521 16.617C77.8549 16.1969 78.379 15.7048 78.8097 15.1582C79.2384 14.61 79.5706 14.0299 79.7948 13.4306C79.8145 13.3779 79.8073 13.3182 79.7733 13.2708C79.7392 13.2233 79.6854 13.1951 79.6261 13.1951H76.1698C76.1035 13.1951 76.0442 13.2303 76.0119 13.2866C75.7139 13.8122 75.2726 14.2446 74.6983 14.5697C74.1257 14.8967 73.4527 15.0618 72.6991 15.0618C72.2235 15.0618 71.7533 14.9809 71.3012 14.821C70.8489 14.661 70.4307 14.4326 70.0573 14.1408C69.686 13.8509 69.3629 13.4924 69.0991 13.0724C68.8714 12.712 68.7025 12.3095 68.5966 11.8738H80.0729C80.1625 11.8738 80.238 11.8087 80.2506 11.7226C80.2685 11.6015 80.2846 11.4768 80.3027 11.3482C80.3223 11.2094 80.3311 11.0336 80.3311 10.8085C80.3314 9.82085 80.1396 8.87706 79.759 8.00549ZM72.6993 6.46767C73.2019 6.46767 73.6701 6.54328 74.0901 6.69438C74.5118 6.84547 74.8941 7.05816 75.2278 7.32706C75.5615 7.59767 75.8487 7.92293 76.0819 8.29535C76.2776 8.60646 76.4337 8.9456 76.5485 9.30754H68.7045C68.8212 8.94744 68.9808 8.60816 69.1836 8.29705C69.4259 7.92463 69.7238 7.59937 70.0702 7.33046C70.4165 7.05971 70.8149 6.84717 71.2545 6.69424C71.6924 6.54315 72.1787 6.46767 72.6993 6.46767Z"
fill="#4D72FA"
/>
<path
d="M92 15.2512L91.973 17.8257C91.9711 17.9225 91.8922 17.9997 91.7936 17.9997H89.2041C88.4683 17.9997 87.7648 17.9241 87.1133 17.7749C86.4476 17.6236 85.8591 17.3407 85.3673 16.9347C84.8757 16.5269 84.4808 15.9644 84.1938 15.2632C83.9102 14.5674 83.7666 13.6659 83.7666 12.5849V7.31626H81.6868C81.5879 7.31626 81.5073 7.2371 81.5073 7.14053V4.72051C81.5073 4.64136 81.5611 4.57282 81.6382 4.55172L83.7075 3.98941L84.3319 0.147693C84.3463 0.0632969 84.4215 0 84.5096 0H87.1405C87.2391 0 87.3198 0.0791563 87.3198 0.17573V4.26172H91.4527C91.5515 4.26172 91.6322 4.34087 91.6322 4.43745V7.14039C91.6322 7.23696 91.5514 7.31612 91.4527 7.31612H87.3072V12.5584C87.3072 13.0699 87.3682 13.4936 87.4866 13.8187C87.6051 14.1402 87.7612 14.3949 87.955 14.5762C88.1472 14.7571 88.3766 14.8854 88.6369 14.9574C88.9061 15.0348 89.1986 15.0733 89.5074 15.0733H91.8206C91.869 15.0733 91.9139 15.0927 91.948 15.126C91.982 15.1597 92 15.2037 92 15.2512Z"
fill="#4D72FA"
/>
</svg>
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.587891 6.66479C0.587891 3.35634 3.26992 0.674316 6.57837 0.674316H22.5974C25.9059 0.674316 28.5879 3.35635 28.5879 6.6648V22.6838C28.5879 25.9923 25.9059 28.6743 22.5974 28.6743H6.57837C3.26991 28.6743 0.587891 25.9923 0.587891 22.6838V6.66479Z" fill="#3E63DD"></path><path d="M19.2726 8.73448V10.6128C19.2726 10.6784 19.2196 10.732 19.1548 10.732H15.7763V20.6137C15.7763 20.6795 15.7232 20.733 15.6584 20.733H13.5082C13.4433 20.733 13.3903 20.6794 13.3903 20.6137V10.732H10.0202C9.95534 10.732 9.90234 10.6784 9.90234 10.6128V8.73448C9.90234 8.66895 9.95544 8.61523 10.0202 8.61523H19.1548C19.2196 8.61523 19.2726 8.66895 19.2726 8.73448Z" fill="white"></path></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 774 B

11
frontend/src/Editor/Icons/tooljetdb.svg
View file

@ -1,10 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_874_122127)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.05263 2.52632C4.71762 2.52632 4.39633 2.6594 4.15944 2.89629C3.92256 3.13317 3.78947 3.45446 3.78947 3.78947V7.57895H8.8421V2.52632H5.05263ZM5.05263 0C4.0476 0 3.08373 0.399247 2.37307 1.10991C1.6624 1.82058 1.26316 2.78444 1.26316 3.78947V11.3684C1.26316 12.066 1.82869 12.6316 2.52632 12.6316C3.22394 12.6316 3.78947 12.066 3.78947 11.3684V10.1053H8.8421V11.3684C8.8421 12.066 9.40764 12.6316 10.1053 12.6316C10.8029 12.6316 11.3684 12.066 11.3684 11.3684V10.1053H21.4737V18.9474C21.4737 19.2824 21.3406 19.6037 21.1037 19.8406C20.8668 20.0774 20.5455 20.2105 20.2105 20.2105H12.6316C11.934 20.2105 11.3684 20.7761 11.3684 21.4737C11.3684 22.1713 11.934 22.7368 12.6316 22.7368H20.2105C21.2156 22.7368 22.1794 22.3376 22.8901 21.6269C23.6008 20.9163 24 19.9524 24 18.9474V3.78947C24 2.78444 23.6008 1.82057 22.8901 1.10991C22.1794 0.399247 21.2156 0 20.2105 0H5.05263ZM11.3684 2.52632V7.57895H21.4737V3.78947C21.4737 3.45446 21.3406 3.13317 21.1037 2.89629C20.8668 2.6594 20.5455 2.52632 20.2105 2.52632H11.3684ZM0 16.4211C0 15.0258 1.13107 13.8947 2.52632 13.8947H7.57895C8.97419 13.8947 10.1053 15.0258 10.1053 16.4211V21.4737C10.1053 22.8689 8.97419 24 7.57895 24H2.52632C1.13107 24 0 22.8689 0 21.4737V16.4211ZM2.52632 16.4211V21.4737H7.57895V16.4211H2.52632Z" fill="#3E63DD"/>
</g>
<defs>
<clipPath id="clip0_874_122127">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C3.73478 2 3.48043 2.10536 3.29289 2.29289C3.10536 2.48043 3 2.73478 3 3V6H7V2H4ZM4 0C3.20435 0 2.44129 0.31607 1.87868 0.87868C1.31607 1.44129 1 2.20435 1 3V9C1 9.55229 1.44772 10 2 10C2.55228 10 3 9.55229 3 9V8H7V9C7 9.55229 7.44772 10 8 10C8.55228 10 9 9.55229 9 9V8H17V15C17 15.2652 16.8946 15.5196 16.7071 15.7071C16.5196 15.8946 16.2652 16 16 16H10C9.44771 16 9 16.4477 9 17C9 17.5523 9.44771 18 10 18H16C16.7957 18 17.5587 17.6839 18.1213 17.1213C18.6839 16.5587 19 15.7957 19 15V3C19 2.20435 18.6839 1.44129 18.1213 0.87868C17.5587 0.31607 16.7957 0 16 0H4ZM9 2V6H17V3C17 2.73478 16.8946 2.48043 16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2H9ZM0 13C0 11.8954 0.89543 11 2 11H6C7.10457 11 8 11.8954 8 13V17C8 18.1046 7.10457 19 6 19H2C0.89543 19 0 18.1046 0 17V13ZM2 13V17H6V13H2Z" fill="#C1C8CD"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 964 B

218
frontend/src/Editor/Inspector/Inspector.jsx
View file

@ -1,6 +1,5 @@
import React, { useState, useRef, useLayoutEffect, useEffect } from 'react';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import React, { useState, useRef, useEffect } from 'react';
import cx from 'classnames';
import { componentTypes } from '../WidgetManager/components';
import { Table } from './Components/Table';
import { Chart } from './Components/Chart';
@ -31,8 +30,6 @@ export const Inspector = ({
darkMode,
switchSidebarTab,
removeComponent,
handleEditorEscapeKeyPress,
appDefinitionLocalVersion,
pages,
}) => {
const component = {
@ -42,13 +39,12 @@ export const Inspector = ({
parent: allComponents[selectedComponentId].parent,
};
const [showWidgetDeleteConfirmation, setWidgetDeleteConfirmation] = useState(false);
const [key, setKey] = React.useState('properties');
// eslint-disable-next-line no-unused-vars
const [tabHeight, setTabHeight] = React.useState(0); //?
const tabsRef = useRef(null);
const [tabHeight, setTabHeight] = React.useState(0);
const componentNameRef = useRef(null);
const [newComponentName, setNewComponentName] = useState(component.component.name);
const [inputRef, setInputFocus] = useFocus();
const [selectedTab, setSelectedTab] = useState('properties');
const { t } = useTranslation();
useHotkeys('backspace', () => setWidgetDeleteConfirmation(true));
@ -56,12 +52,6 @@ export const Inspector = ({
const componentMeta = componentTypes.find((comp) => component.component.component === comp.component);
useLayoutEffect(() => {
if (tabsRef.current) {
setTabHeight(tabsRef.current.querySelector('.nav-tabs').clientHeight);
}
}, []);
const isMounted = useMounted();
useEffect(() => {
@ -268,13 +258,41 @@ export const Inspector = ({
return <Accordion items={items} />;
};
const handleTabSelect = (key) => {
setKey(key);
if (key == 'close-inpector' || key == 'close-inpector-light') {
switchSidebarTab(2);
handleEditorEscapeKeyPress();
}
};
const propertiesTab = isMounted && (
<GetAccordion
componentName={componentMeta.component}
layoutPropertyChanged={layoutPropertyChanged}
component={component}
paramUpdated={paramUpdated}
dataQueries={dataQueries}
componentMeta={componentMeta}
eventUpdated={eventUpdated}
eventOptionUpdated={eventOptionUpdated}
components={allComponents}
currentState={currentState}
darkMode={darkMode}
eventsChanged={eventsChanged}
apps={apps}
pages={pages}
allComponents={allComponents}
/>
);
const stylesTab = (
<div style={{ marginBottom: '6rem' }}>
<div className="p-3">
<Inspector.RenderStyleOptions
componentMeta={componentMeta}
component={component}
paramUpdated={paramUpdated}
dataQueries={dataQueries}
currentState={currentState}
allComponents={allComponents}
/>
</div>
{buildGeneralStyle()}
</div>
);
return (
<div className="inspector">
@ -287,94 +305,86 @@ export const Inspector = ({
}}
onCancel={() => setWidgetDeleteConfirmation(false)}
/>
<div ref={tabsRef}>
<Tabs activeKey={key} onSelect={(k) => handleTabSelect(k)} className={`tabs-inspector ${darkMode && 'dark'}`}>
<Tab style={{ marginBottom: 100 }} eventKey="properties" title={t('widget.common.properties', 'Properties')}>
<div className="header py-1 row">
<div>
<div className="input-icon">
<input
onChange={(e) => setNewComponentName(e.target.value)}
type="text"
onKeyUp={(e) => {
if (e.keyCode === 13) handleComponentNameChange(newComponentName);
}}
onBlur={() => handleComponentNameChange(newComponentName)}
className="w-100 form-control-plaintext form-control-plaintext-sm mt-1"
value={newComponentName}
ref={inputRef}
data-cy="edit-widget-name"
/>
<span className="input-icon-addon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.1667 3.11667L10.8833 0.833337C10.5853 0.553417 10.1948 0.392803 9.78611 0.382047C9.3774 0.371291 8.97899 0.511145 8.66667 0.775004L1.16667 8.275C0.897308 8.54664 0.72959 8.90267 0.69167 9.28334L0.333336 12.7583C0.322111 12.8804 0.337948 13.0034 0.379721 13.1187C0.421493 13.2339 0.488172 13.3385 0.575003 13.425C0.65287 13.5022 0.745217 13.5633 0.846748 13.6048C0.948279 13.6463 1.057 13.6673 1.16667 13.6667H1.24167L4.71667 13.35C5.09733 13.3121 5.45337 13.1444 5.725 12.875L13.225 5.375C13.5161 5.06748 13.6734 4.65709 13.6625 4.23378C13.6516 3.81047 13.4733 3.40876 13.1667 3.11667ZM4.56667 11.6833L2.06667 11.9167L2.29167 9.41667L7 4.76667L9.25 7.01667L4.56667 11.6833ZM10.3333 5.9L8.1 3.66667L9.725 2L12 4.275L10.3333 5.9Z"
fill="#8092AC"
/>
</svg>
</span>
</div>
</div>
</div>
{isMounted && (
<GetAccordion
componentName={componentMeta.component}
layoutPropertyChanged={layoutPropertyChanged}
component={component}
paramUpdated={paramUpdated}
dataQueries={dataQueries}
componentMeta={componentMeta}
eventUpdated={eventUpdated}
eventOptionUpdated={eventOptionUpdated}
components={allComponents}
currentState={currentState}
darkMode={darkMode}
eventsChanged={eventsChanged}
apps={apps}
pages={pages}
allComponents={allComponents}
<div>
<div className="row inspector-component-title-input-holder">
<div className="col-11 p-0">
<div className="input-icon">
<input
onChange={(e) => setNewComponentName(e.target.value)}
type="text"
onBlur={() => handleComponentNameChange(newComponentName)}
className="w-100 form-control-plaintext form-control-plaintext-sm mt-1"
value={newComponentName}
ref={inputRef}
data-cy="edit-widget-name"
/>
)}
</Tab>
<Tab eventKey="styles" title={t('widget.common.styles', 'Styles')}>
<div style={{ marginBottom: '6rem' }}>
<div className="p-3">
<Inspector.RenderStyleOptions
componentMeta={componentMeta}
component={component}
paramUpdated={paramUpdated}
dataQueries={dataQueries}
currentState={currentState}
allComponents={allComponents}
/>
</div>
{buildGeneralStyle()}
</div>
</Tab>
<Tab
className="close-inpector-tab"
eventKey={darkMode ? 'close-inpector' : 'close-inpector-light'}
title={
<div className="inspector-close-icon-wrapper">
<svg
width="20"
height="21"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="close-svg"
>
<span className="input-icon-addon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.99931 10.9751L15.0242 16.0014L16 15.027L10.9737 10.0007L16 4.97577L15.0256 4L9.99931 9.0263L4.97439 4L4 4.97577L9.02492 10.0007L4 15.0256L4.97439 16.0014L9.99931 10.9751Z"
d="M13.1667 3.11667L10.8833 0.833337C10.5853 0.553417 10.1948 0.392803 9.78611 0.382047C9.3774 0.371291 8.97899 0.511145 8.66667 0.775004L1.16667 8.275C0.897308 8.54664 0.72959 8.90267 0.69167 9.28334L0.333336 12.7583C0.322111 12.8804 0.337948 13.0034 0.379721 13.1187C0.421493 13.2339 0.488172 13.3385 0.575003 13.425C0.65287 13.5022 0.745217 13.5633 0.846748 13.6048C0.948279 13.6463 1.057 13.6673 1.16667 13.6667H1.24167L4.71667 13.35C5.09733 13.3121 5.45337 13.1444 5.725 12.875L13.225 5.375C13.5161 5.06748 13.6734 4.65709 13.6625 4.23378C13.6516 3.81047 13.4733 3.40876 13.1667 3.11667ZM4.56667 11.6833L2.06667 11.9167L2.29167 9.41667L7 4.76667L9.25 7.01667L4.56667 11.6833ZM10.3333 5.9L8.1 3.66667L9.725 2L12 4.275L10.3333 5.9Z"
fill="#8092AC"
/>
</svg>
</div>
}
></Tab>
</Tabs>
</span>
</div>
</div>
<div className="col-1" onClick={() => switchSidebarTab(2)}>
<div className="inspector-close-icon-wrapper">
<svg
width="20"
height="21"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="close-svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.99931 10.9751L15.0242 16.0014L16 15.027L10.9737 10.0007L16 4.97577L15.0256 4L9.99931 9.0263L4.97439 4L4 4.97577L9.02492 10.0007L4 15.0256L4.97439 16.0014L9.99931 10.9751Z"
fill="#8092AC"
/>
</svg>
</div>
</div>
</div>
<div style={{ padding: '16px 8px', borderRadius: 6 }}>
<div className="d-flex p-1" style={{ background: '#ECEEF0' }} role="tablist" aria-orientation="horizontal">
<button
className={cx('btn w-50 inspector-nav-item', {
'bg-white': selectedTab === 'properties' && !darkMode,
'bg-black': selectedTab === 'properties' && darkMode,
'color-white': selectedTab === 'properties' && darkMode,
'opacity-100': selectedTab === 'properties',
})}
role="tab"
type="button"
aria-selected="true"
tabIndex="0"
onClick={() => setSelectedTab('properties')}
>
{t('widget.common.properties', 'Properties')}
</button>
<button
className={cx('btn w-50 inspector-nav-item', {
'bg-white': selectedTab === 'styles',
'bg-black': selectedTab === 'styles' && darkMode,
'color-white': selectedTab === 'styles' && darkMode,
'opacity-100': selectedTab === 'styles',
})}
role="tab"
type="button"
aria-selected="false"
tabIndex="-1"
onClick={() => setSelectedTab('styles')}
>
{t('widget.common.styles', 'Styles')}
</button>
</div>
</div>
<hr className="m-0" />
{selectedTab === 'properties' && propertiesTab}
{selectedTab === 'styles' && stylesTab}
</div>
<div className="widget-documentation-link p-2">

8
frontend/src/Editor/LeftSidebar/SidebarComment.jsx
View file

@ -4,7 +4,7 @@ import { LeftSidebarItem } from './SidebarItem';
import { commentsService } from '@/_services';
import useRouter from '@/_hooks/use-router';
export const LeftSidebarComment = ({ toggleComments, appVersionsId, currentPageId }) => {
export const LeftSidebarComment = ({ toggleComments, selectedSidebarItem, appVersionsId, currentPageId }) => {
const [isActive, toggleActive] = React.useState(false);
const [notifications, setNotifications] = React.useState([]);
const router = useRouter();
@ -21,13 +21,13 @@ export const LeftSidebarComment = ({ toggleComments, appVersionsId, currentPageI
return (
<LeftSidebarItem
commentBadge={notifications?.length > 0}
tip={appVersionsId ? 'toggle comments' : 'Comments section will be available once you save this application'}
selectedSidebarItem={selectedSidebarItem}
title={appVersionsId ? 'toggle comments' : 'Comments section will be available once you save this application'}
icon={`comments`}
className={cx(`left-sidebar-item sidebar-zoom left-sidebar-layout position-relative sidebar-comments`, {
className={cx(`left-sidebar-item left-sidebar-layout sidebar-comments`, {
disabled: !appVersionsId,
active: isActive,
})}
text={'Comments'}
onClick={() => {
toggleActive(!isActive);
toggleComments();

100
frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx
View file

@ -1,19 +1,21 @@
/* eslint-disable import/no-named-as-default */
import React from 'react';
import usePopover from '../../_hooks/use-popover';
import { LeftSidebarItem } from './SidebarItem';
import { Button, HeaderSection } from '@/_ui/LeftSidebar';
import { DataSourceManager } from '../DataSourceManager';
import { DataSourceTypes } from '../DataSourceManager/SourceComponents';
import OverlayTrigger from 'react-bootstrap/esm/OverlayTrigger';
import Tooltip from 'react-bootstrap/esm/Tooltip';
import { getSvgIcon } from '@/_helpers/appUtils';
import { datasourceService } from '@/_services';
import { ConfirmDialog } from '@/_components';
import toast from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
import Popover from '@/_ui/Popover';
export const LeftSidebarDataSources = ({
appId,
editingVersionId,
selectedSidebarItem,
setSelectedSidebarItem,
darkMode,
dataSources = [],
dataSourcesChanged,
@ -21,7 +23,6 @@ export const LeftSidebarDataSources = ({
toggleDataSourceManagerModal,
showDataSourceManagerModal,
}) => {
const [open, trigger, content] = usePopover(false);
const [selectedDataSource, setSelectedDataSource] = React.useState(null);
const [isDeleteModalVisible, setDeleteModalVisibility] = React.useState(false);
const [isDeletingDatasource, setDeletingDatasource] = React.useState(false);
@ -65,10 +66,10 @@ export const LeftSidebarDataSources = ({
const renderDataSource = (dataSource, idx) => {
const sourceMeta = getSourceMetaData(dataSource);
const icon = getSvgIcon(sourceMeta.kind.toLowerCase(), 25, 25, dataSource?.plugin?.icon_file?.data);
const icon = getSvgIcon(sourceMeta.kind.toLowerCase(), 16, 16, dataSource?.plugin?.icon_file?.data);
return (
<div className="row py-1" key={idx}>
<div className="row mb-3 ds-list-item" key={idx}>
<div
role="button"
onClick={() => {
@ -78,12 +79,12 @@ export const LeftSidebarDataSources = ({
className="col"
>
{icon}
<span className="font-500" style={{ paddingLeft: 5 }}>
<span className="font-400" style={{ paddingLeft: 5 }}>
{dataSource.name}
</span>
</div>
<div className="col-auto">
<button className="btn btn-sm ds-delete-btn" onClick={() => deleteDataSource(dataSource)}>
<button className="btn btn-sm p-0 ds-delete-btn" onClick={() => deleteDataSource(dataSource)}>
<div>
<img src="assets/images/icons/query-trash-icon.svg" width="12" height="12" />
</div>
@ -93,6 +94,15 @@ export const LeftSidebarDataSources = ({
);
};
const popoverContent = (
<LeftSidebarDataSources.Container
darkMode={darkMode}
renderDataSource={renderDataSource}
dataSources={dataSources}
toggleDataSourceManagerModal={toggleDataSourceManagerModal}
/>
);
return (
<>
<ConfirmDialog
@ -103,20 +113,22 @@ export const LeftSidebarDataSources = ({
onCancel={() => cancelDeleteDataSource()}
darkMode={darkMode}
/>
<LeftSidebarItem
tip="Add or edit datasources"
{...trigger}
icon="database"
className={`left-sidebar-item sidebar-datasources left-sidebar-layout ${open && 'active'}`}
text={'Sources'}
/>
<div {...content} className={`card popover datasources-popover ${open ? 'show' : 'hide'}`}>
<LeftSidebarDataSources.Container
renderDataSource={renderDataSource}
dataSources={dataSources}
toggleDataSourceManagerModal={toggleDataSourceManagerModal}
<Popover
handleToggle={(open) => {
if (!open) setSelectedSidebarItem('');
}}
popoverContentClassName="p-0 sidebar-h-100-popover"
side="right"
popoverContent={popoverContent}
>
<LeftSidebarItem
selectedSidebarItem={selectedSidebarItem}
onClick={() => setSelectedSidebarItem('database')}
icon="database"
className={`left-sidebar-item sidebar-datasources left-sidebar-layout`}
/>
</div>
</Popover>
<DataSourceManager
appId={appId}
showDataSourceManagerModal={showDataSourceManagerModal}
@ -133,36 +145,30 @@ export const LeftSidebarDataSources = ({
);
};
const LeftSidebarDataSourcesContainer = ({ renderDataSource, dataSources = [], toggleDataSourceManagerModal }) => {
const LeftSidebarDataSourcesContainer = ({
darkMode,
renderDataSource,
dataSources = [],
toggleDataSourceManagerModal,
}) => {
const { t } = useTranslation();
return (
<div className="card-body">
<div>
<div className="row">
<div className="col">
<h5 className="text-muted" data-cy="label-datasources">
{t('leftSidebar.Sources.dataSources', 'Data sources')}
</h5>
</div>
<div className="col-auto">
<OverlayTrigger
trigger={['hover', 'focus']}
placement="top"
delay={{ show: 800, hide: 100 }}
overlay={<Tooltip id="button-tooltip">{'Add datasource'}</Tooltip>}
<div>
<HeaderSection darkMode={darkMode}>
<HeaderSection.PanelHeader title="Datasources">
<div className="d-flex justify-content-end float-right" style={{ maxWidth: 48 }}>
<Button
styles={{ width: '28px', padding: 0 }}
onClick={() => toggleDataSourceManagerModal(true)}
darkMode={darkMode}
size="sm"
>
<button onClick={() => toggleDataSourceManagerModal(true)} className="btn btn-sm add-btn">
<img
className=""
src="assets/images/icons/plus.svg"
width="12"
height="12"
data-cy="add-datasource-plus-button"
/>
</button>
</OverlayTrigger>
<Button.Content iconSrc={'assets/images/icons/plus.svg'} direction="left" />
</Button>
</div>
</div>
</HeaderSection.PanelHeader>
</HeaderSection>
<div className="card-body">
<div className="d-flex w-100">
{dataSources.length === 0 ? (
<center

117
frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx
View file

@ -1,15 +1,21 @@
import React from 'react';
import usePinnedPopover from '@/_hooks/usePinnedPopover';
import Popover from '@/_ui/Popover';
import { Button, HeaderSection } from '@/_ui/LeftSidebar';
import { LeftSidebarItem } from './SidebarItem';
import _ from 'lodash';
import moment from 'moment';
import { SidebarPinnedButton } from './SidebarPinnedButton';
import { useTranslation } from 'react-i18next';
import JSONTreeViewer from '@/_ui/JSONTreeViewer';
export const LeftSidebarDebugger = ({ darkMode, errors, debuggerActions, currentPageId }) => {
export const LeftSidebarDebugger = ({
darkMode,
selectedSidebarItem,
setSelectedSidebarItem,
errors,
debuggerActions,
currentPageId,
}) => {
const { t } = useTranslation();
const [open, trigger, content, popoverPinned, updatePopoverPinnedState] = usePinnedPopover(false);
const [errorLogs, setErrorLogs] = React.useState([]);
const [errorHistory, setErrorHistory] = React.useState({ appLevel: [], pageLevel: [] });
const [unReadErrorCount, setUnReadErrorCount] = React.useState({ read: 0, unread: 0 });
@ -75,78 +81,53 @@ export const LeftSidebarDebugger = ({ darkMode, errors, debuggerActions, current
return { ...prev, unread: unReadErrors };
});
if (popoverPinned) {
setTimeout(() => {
setUnReadErrorCount((prev) => {
let copy = JSON.parse(JSON.stringify(prev));
copy.read = errorLogs.length;
copy.unread = 0;
return copy;
});
}, 900);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [errorLogs.length, open]);
return (
<>
<LeftSidebarItem
tip="Debugger"
{...trigger}
icon="debugger"
className={`left-sidebar-item left-sidebar-layout ${open && 'active'}`}
badge={true}
count={unReadErrorCount.unread}
text={'Debugger'}
/>
<div
{...content}
className={`card popover debugger-popover ${open || popoverPinned ? 'show' : 'hide'}`}
style={{ resize: 'horizontal', maxWidth: '60%', minWidth: '422px' }}
>
<div className="row-header">
<div className="nav-header">
<ul className="nav nav-tabs d-flex justify-content-between" data-bs-toggle="tabs">
<li className="nav-item">
<a className="nav-link active">{t(`leftSidebar.Debugger.errors`, 'Errors')}</a>
</li>
<li className="btn-group">
{errorLogs.length > 0 && (
<button
onClick={clearErrorLogs}
type="button"
className="btn btn-light btn-sm m-1 py-1"
aria-label="clear button"
>
<span className="text-muted">{t(`leftSidebar.Debugger.clear`, 'clear')}</span>
</button>
)}
<SidebarPinnedButton
darkMode={darkMode}
component={'Debugger'}
state={popoverPinned}
updateState={updatePopoverPinnedState}
/>
</li>
</ul>
const popoverContent = (
<div>
<HeaderSection darkMode={darkMode}>
<HeaderSection.PanelHeader title="Errors">
<div className="d-flex justify-content-end">
<Button onClick={clearErrorLogs} darkMode={darkMode} size="sm" styles={{ width: '76px' }}>
<Button.Content title={'Clear'} iconSrc={'assets/images/icons/clear.svg'} direction="left" />
</Button>
</div>
</div>
</HeaderSection.PanelHeader>
</HeaderSection>
<div className="card-body">
{errorLogs.length === 0 && (
<center className="p-2 text-muted">{t(`leftSidebar.Debugger.noErrors`, 'No errors found.')}</center>
)}
<div className="card-body">
{errorLogs.length === 0 && (
<center className="p-2 text-muted">{t(`leftSidebar.Debugger.noErrors`, 'No errors found.')}</center>
)}
<div className="tab-content">
{errorLogs.map((error, index) => (
<LeftSidebarDebugger.ErrorLogs key={index} errorProps={error} idx={index} darkMode={darkMode} />
))}
</div>
<div className="tab-content">
{errorLogs.map((error, index) => (
<LeftSidebarDebugger.ErrorLogs key={index} errorProps={error} idx={index} darkMode={darkMode} />
))}
</div>
</div>
</>
</div>
);
return (
<Popover
handleToggle={(open) => {
if (!open) setSelectedSidebarItem('');
}}
popoverContentClassName="p-0 sidebar-h-100-popover"
side="right"
popoverContent={popoverContent}
>
<LeftSidebarItem
icon="debugger"
selectedSidebarItem={selectedSidebarItem}
onClick={() => setSelectedSidebarItem('debugger')}
className={`left-sidebar-item left-sidebar-layout`}
badge={true}
count={unReadErrorCount.unread}
/>
</Popover>
);
};

90
frontend/src/Editor/LeftSidebar/SidebarInspector.jsx
View file

@ -1,7 +1,6 @@
import React, { useMemo } from 'react';
import usePinnedPopover from '@/_hooks/usePinnedPopover';
import { LeftSidebarItem } from './SidebarItem';
import { SidebarPinnedButton } from './SidebarPinnedButton';
import { HeaderSection } from '@/_ui/LeftSidebar';
import JSONTreeViewer from '@/_ui/JSONTreeViewer';
import _ from 'lodash';
import RunjsIcon from '../Icons/runjs.svg';
@ -9,18 +8,19 @@ import RunTooljetDbIcon from '../Icons/tooljetdb.svg';
import RunpyIcon from '../Icons/runpy.svg';
import { toast } from 'react-hot-toast';
import { getSvgIcon } from '@/_helpers/appUtils';
import Popover from '@/_ui/Popover';
export const LeftSidebarInspector = ({
darkMode,
currentState,
selectedSidebarItem,
setSelectedSidebarItem,
appDefinition,
setSelectedComponent,
removeComponent,
runQuery,
dataSources,
}) => {
const [open, trigger, content, popoverPinned, updatePopoverPinnedState] = usePinnedPopover(false);
const componentDefinitions = JSON.parse(JSON.stringify(appDefinition))['components'];
const queryDefinitions = appDefinition['queries'];
const selectedComponent = React.useMemo(() => {
@ -125,12 +125,6 @@ export const LeftSidebarInspector = ({
return toast.success('Copied to the clipboard', { position: 'top-center' });
};
const updatePinnedParentState = () => {
if (!popoverPinned) {
updatePopoverPinnedState();
}
};
const callbackActions = [
{
for: 'queries',
@ -162,45 +156,45 @@ export const LeftSidebarInspector = ({
},
];
return (
<>
<LeftSidebarItem
tip="Inspector"
{...trigger}
icon="inspect"
className={`left-sidebar-item left-sidebar-layout ${open && 'active'} left-sidebar-inspector`}
text={'Inspector'}
/>
<div
{...content}
className={`card popover left-sidebar-inspector ${open || popoverPinned ? 'show' : 'hide'}`}
style={{ resize: 'horizontal', maxWidth: '60%', minWidth: '422px' }}
>
<SidebarPinnedButton
darkMode={darkMode}
component={'Inspector'}
state={popoverPinned}
updateState={updatePopoverPinnedState}
const popoverContent = (
<div className={`left-sidebar-inspector`} style={{ resize: 'horizontal', maxWidth: '60%', minWidth: '422px' }}>
<HeaderSection darkMode={darkMode}>
<HeaderSection.PanelHeader title="Inspector" />
</HeaderSection>
<div className="card-body">
<JSONTreeViewer
data={memoizedJSONData}
useIcons={true}
iconsList={iconsList}
useIndentedBlock={true}
enableCopyToClipboard={true}
useActions={true}
actionsList={callbackActions}
currentState={appDefinition}
actionIdentifier="id"
expandWithLabels={true}
selectedComponent={selectedComponent}
treeType="inspector"
/>
<div style={{ marginTop: '1rem' }} className="card-body">
<JSONTreeViewer
data={memoizedJSONData}
useIcons={true}
iconsList={iconsList}
useIndentedBlock={true}
enableCopyToClipboard={true}
useActions={true}
actionsList={callbackActions}
currentState={appDefinition}
actionIdentifier="id"
expandWithLabels={true}
selectedComponent={selectedComponent}
treeType="inspector"
parentPopoverState={popoverPinned}
updateParentState={updatePinnedParentState}
/>
</div>
</div>
</>
</div>
);
return (
<Popover
handleToggle={(open) => {
if (!open) setSelectedSidebarItem('');
}}
side="right"
popoverContentClassName="p-0 sidebar-h-100-popover sidebar-h-100-popover-inspector"
popoverContent={popoverContent}
>
<LeftSidebarItem
selectedSidebarItem={selectedSidebarItem}
onClick={() => setSelectedSidebarItem('inspect')}
icon="inspect"
className={`left-sidebar-item left-sidebar-layout left-sidebar-inspector`}
/>
</Popover>
);
};

47
frontend/src/Editor/LeftSidebar/SidebarItem.jsx
View file

@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
export const LeftSidebarItem = ({
tip = '',
selectedSidebarItem,
className,
icon,
commentBadge,
@ -15,35 +16,35 @@ export const LeftSidebarItem = ({
...rest
}) => {
const { t } = useTranslation();
const displayIcon = selectedSidebarItem === icon ? `${icon}-selected` : icon;
const content = (
<div
{...rest}
className={className}
onClick={onClick && onClick}
data-cy={`left-sidebar-${icon.toLowerCase()}-button`}
>
{icon && (
<div className="sidebar-svg-icon position-relative">
<img src={`assets/images/icons/editor/left-sidebar/${displayIcon}.svg`} />
{commentBadge && <LeftSidebarItem.CommentBadge />}
</div>
)}
{badge && <LeftSidebarItem.Badge count={count} />}
<p>{text && t(`leftSidebar.${text}.text`, text)}</p>
</div>
);
if (!tip) return content;
return (
<OverlayTrigger
trigger={['click', 'hover', 'focus']}
placement="right"
delay={{ show: 800, hide: 100 }}
delay={{ show: 1600, hide: 100 }}
overlay={<Tooltip id="button-tooltip">{t(`leftSidebar.${text}.tip`, tip)}</Tooltip>}
>
<div>
<div
{...rest}
className={className}
onClick={onClick && onClick}
data-cy={`left-sidebar-${text.toLowerCase()}-button`}
>
{icon && (
<div className="position-relative">
<img
className="svg-icon"
src={`assets/images/icons/editor/left-sidebar/${icon}.svg`}
width="20"
height="20"
/>
{commentBadge && <LeftSidebarItem.CommentBadge />}
</div>
)}
{badge && <LeftSidebarItem.Badge count={count} />}
<p>{text && t(`leftSidebar.${text}.text`, text)}</p>
</div>
</div>
{content}
</OverlayTrigger>
);
};

1
frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditModal.jsx
View file

@ -44,6 +44,7 @@ export const EditModal = ({ slug, page, show, handleClose, updatePageHandle, dar
show={show}
onHide={handleClose}
size="sm"
animation={false}
centered
className={`${darkMode && 'theme-dark'} page-handle-edit-modal `}
backdrop="static"

8
frontend/src/Editor/LeftSidebar/SidebarPageSelector/GlobalSettings.jsx
View file

@ -2,12 +2,7 @@ import React from 'react';
import { OverlayTrigger, Popover } from 'react-bootstrap';
import { Button } from '@/_ui/LeftSidebar';
export const GlobalSettings = ({
darkMode,
handlePopoverPinnedState,
showHideViewerNavigationControls,
showPageViwerPageNavitation,
}) => {
export const GlobalSettings = ({ darkMode, showHideViewerNavigationControls, showPageViwerPageNavitation }) => {
const onChange = () => {
showHideViewerNavigationControls();
};
@ -17,7 +12,6 @@ export const GlobalSettings = ({
trigger={'click'}
placement={'bottom-end'}
rootClose={true}
onToggle={handlePopoverPinnedState}
overlay={
<Popover id="page-handler-menu" className={`global-settings ${darkMode && 'popover-dark-themed'}`}>
<Popover.Content bsPrefix="popover-body">

12
frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx
View file

@ -5,7 +5,7 @@ import { EditModal } from './EditModal';
import { SettingsModal } from './SettingsModal';
import _ from 'lodash';
import SortableList from '@/_components/SortableList';
import toast from 'react-hot-toast';
import { toast } from 'react-hot-toast';
export const PageHandler = ({
darkMode,
@ -16,7 +16,6 @@ export const PageHandler = ({
clonePage,
hidePage,
unHidePage,
updatePopoverPinnedState,
homePageId,
currentPageId,
updateHomePage,
@ -51,13 +50,6 @@ export const PageHandler = ({
setShowSettingsModal(true);
};
React.useEffect(() => {
if (showPagehandlerMenu) {
updatePopoverPinnedState(true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [showPagehandlerMenu]);
const handleCallback = (id) => {
setIsHovered(false);
switch (id) {
@ -129,7 +121,7 @@ export const PageHandler = ({
<div className="col-auto">
<SortableList.DragHandle show={isHovered} />
</div>
<div className="col text-truncate" data-cy="event-handler">
<div className="col text-truncate font-weight-400" data-cy="event-handler">
{page.name}
</div>
<div className="col-auto page-icons">

174
frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.js
View file

@ -1,174 +0,0 @@
import React, { useState } from 'react';
import Fuse from 'fuse.js';
import { LeftSidebarItem } from '../SidebarItem';
import usePinnedPopover from '@/_hooks/usePinnedPopover';
import { Button, HeaderSection } from '@/_ui/LeftSidebar';
import { SidebarPinnedButton } from '../SidebarPinnedButton';
import { PageHandler, AddingPageHandler } from './PageHandler';
import { GlobalSettings } from './GlobalSettings';
import _ from 'lodash';
import SortableList from '@/_components/SortableList';
const LeftSidebarPageSelector = ({
appDefinition,
darkMode,
currentPageId,
addNewPage,
switchPage,
deletePage,
renamePage,
clonePage,
hidePage,
unHidePage,
updateHomePage,
updatePageHandle,
pages,
homePageId,
showHideViewerNavigationControls,
updateOnSortingPages,
updateOnPageLoadEvents,
currentState,
apps,
dataQueries,
}) => {
const [open, trigger, content, popoverPinned, updatePopoverPinnedState] = usePinnedPopover(false);
const handlePopoverPinnedState = () => {
if (!popoverPinned) {
updatePopoverPinnedState(true);
}
};
const [allpages, setPages] = useState(pages);
const [newPageBeingCreated, setNewPageBeingCreated] = useState(false);
const filterPages = (value) => {
if (!value || value.length === 0) return clearSearch();
const fuse = new Fuse(pages, { keys: ['name'], threshold: 0.3 });
const result = fuse.search(value);
setPages(result.map((item) => item.item));
};
const clearSearch = () => {
setPages(pages);
};
React.useEffect(() => {
if (!_.isEqual(pages, allpages)) {
setPages(pages);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify({ pages })]);
return (
<>
<LeftSidebarItem
tip="Pages"
{...trigger}
icon="page"
className={`left-sidebar-item left-sidebar-layout ${open && 'active'} left-sidebar-page-selector`}
text={'Pages'}
/>
<div
{...content}
className={`card popover left-sidebar-page-selector ${open || popoverPinned ? 'show' : 'hide'} ${
darkMode && 'dark'
} `}
style={{
minWidth: '295px',
top: '45px',
borderRadius: '0px',
height: '100%',
maxHeight: window.innerHeight,
overflowX: 'hidden',
}}
>
<div className="card-body p-0" onClick={(event) => event.stopPropagation()}>
<HeaderSection darkMode={darkMode}>
<HeaderSection.PanelHeader title="Pages">
<div className="d-flex justify-content-end">
<Button
onClick={() => setNewPageBeingCreated(true)}
darkMode={darkMode}
size="sm"
styles={{ width: '76px' }}
>
<Button.Content title={'Add'} iconSrc={'assets/images/icons/plus.svg'} direction="left" />
</Button>
<GlobalSettings
darkMode={darkMode}
handlePopoverPinnedState={handlePopoverPinnedState}
showHideViewerNavigationControls={showHideViewerNavigationControls}
showPageViwerPageNavitation={appDefinition?.showViewerNavigation || false}
/>
<SidebarPinnedButton
darkMode={darkMode}
component={'PageSelector'}
state={popoverPinned}
updateState={updatePopoverPinnedState}
/>
</div>
</HeaderSection.PanelHeader>
<HeaderSection.SearchBoxComponent onChange={filterPages} placeholder={'Search'} placeholderIcon={'⌘S'} />
</HeaderSection>
<div className={`${darkMode && 'dark'} page-selector-panel-body`}>
<div className="">
{allpages.length > 0 ? (
<SortableList
data={allpages}
Element={PageHandler}
pages={allpages}
darkMode={darkMode}
switchPage={switchPage}
deletePage={deletePage}
renamePage={renamePage}
clonePage={clonePage}
hidePage={hidePage}
unHidePage={unHidePage}
updatePopoverPinnedState={handlePopoverPinnedState}
homePageId={homePageId}
currentPageId={currentPageId}
updateHomePage={updateHomePage}
updatePageHandle={updatePageHandle}
classNames="page-handler"
onSort={updateOnSortingPages}
updateOnPageLoadEvents={updateOnPageLoadEvents}
currentState={currentState}
apps={apps}
allpages={pages}
components={appDefinition?.components ?? {}}
dataQueries={dataQueries}
/>
) : (
<div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
<div className="text-center">
<img src="assets/images/no-results.svg" alt="empty-page" />
<p className="mt-3">No pages found</p>
</div>
</div>
)}
{newPageBeingCreated && (
<div className="page-handler">
<AddingPageHandler
addNewPage={addNewPage}
setNewPageBeingCreated={setNewPageBeingCreated}
switchPage={switchPage}
/>
</div>
)}
</div>
</div>
</div>
</div>
</>
);
};
export default LeftSidebarPageSelector;

164
frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx Normal file
View file

@ -0,0 +1,164 @@
import React, { useState } from 'react';
import Fuse from 'fuse.js';
import { LeftSidebarItem } from '../SidebarItem';
import { Button, HeaderSection } from '@/_ui/LeftSidebar';
import { PageHandler, AddingPageHandler } from './PageHandler';
import { GlobalSettings } from './GlobalSettings';
import _ from 'lodash';
import SortableList from '@/_components/SortableList';
import Popover from '@/_ui/Popover';
const LeftSidebarPageSelector = ({
appDefinition,
selectedSidebarItem,
setSelectedSidebarItem,
darkMode,
currentPageId,
addNewPage,
switchPage,
deletePage,
renamePage,
clonePage,
hidePage,
unHidePage,
updateHomePage,
updatePageHandle,
pages,
homePageId,
showHideViewerNavigationControls,
updateOnSortingPages,
updateOnPageLoadEvents,
currentState,
apps,
dataQueries,
}) => {
const [allpages, setPages] = useState(pages);
const [newPageBeingCreated, setNewPageBeingCreated] = useState(false);
const [showSearch, setShowSearch] = useState(false);
const filterPages = (value) => {
if (!value || value.length === 0) return clearSearch();
const fuse = new Fuse(pages, { keys: ['name'], threshold: 0.3 });
const result = fuse.search(value);
setPages(result.map((item) => item.item));
};
const clearSearch = () => {
setPages(pages);
};
React.useEffect(() => {
if (!_.isEqual(pages, allpages)) {
setPages(pages);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify({ pages })]);
const popoverContent = (
<div>
<div className="card-body p-0" onClick={(event) => event.stopPropagation()}>
<HeaderSection darkMode={darkMode}>
<HeaderSection.PanelHeader title="Pages">
<div className="d-flex justify-content-end">
<Button
onClick={() => setNewPageBeingCreated(true)}
darkMode={darkMode}
size="sm"
styles={{ width: '28px', padding: 0 }}
>
<Button.Content iconSrc={'assets/images/icons/plus.svg'} direction="left" />
</Button>
<Button
onClick={() => setShowSearch(!showSearch)}
darkMode={darkMode}
size="sm"
styles={{ width: '28px', padding: 0 }}
>
<Button.Content iconSrc={'assets/images/icons/search.svg'} direction="left" />
</Button>
<GlobalSettings
darkMode={darkMode}
showHideViewerNavigationControls={showHideViewerNavigationControls}
showPageViwerPageNavitation={appDefinition?.showViewerNavigation || false}
/>
</div>
</HeaderSection.PanelHeader>
{showSearch && (
<HeaderSection.SearchBoxComponent onChange={filterPages} placeholder={'Search'} placeholderIcon={'⌘S'} />
)}
</HeaderSection>
<div className={`${darkMode && 'dark'} page-selector-panel-body`}>
<div className="">
{allpages.length > 0 ? (
<SortableList
data={allpages}
Element={PageHandler}
pages={allpages}
darkMode={darkMode}
switchPage={switchPage}
deletePage={deletePage}
renamePage={renamePage}
clonePage={clonePage}
hidePage={hidePage}
unHidePage={unHidePage}
homePageId={homePageId}
currentPageId={currentPageId}
updateHomePage={updateHomePage}
updatePageHandle={updatePageHandle}
classNames="page-handler"
onSort={updateOnSortingPages}
updateOnPageLoadEvents={updateOnPageLoadEvents}
currentState={currentState}
apps={apps}
allpages={pages}
components={appDefinition?.components ?? {}}
dataQueries={dataQueries}
/>
) : (
<div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
<div>
<img src="assets/images/no-results.svg" alt="empty-page" />
<p className="mt-3">No pages found</p>
</div>
</div>
)}
{newPageBeingCreated && (
<div className="page-handler">
<AddingPageHandler
addNewPage={addNewPage}
setNewPageBeingCreated={setNewPageBeingCreated}
switchPage={switchPage}
/>
</div>
)}
</div>
</div>
</div>
</div>
);
return (
<Popover
handleToggle={(open) => {
if (!open) setSelectedSidebarItem('');
}}
popoverContentClassName="p-0 sidebar-h-100-popover"
side="right"
popoverContent={popoverContent}
>
<LeftSidebarItem
selectedSidebarItem={selectedSidebarItem}
onClick={() => setSelectedSidebarItem('page')}
icon="page"
className={`left-sidebar-item left-sidebar-layout left-sidebar-page-selector`}
/>
</Popover>
);
};
export default LeftSidebarPageSelector;

53
frontend/src/Editor/LeftSidebar/SidebarPinnedButton.jsx
View file

@ -1,53 +0,0 @@
import React from 'react';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Tooltip from 'react-bootstrap/Tooltip';
import { Button } from '@/_ui/LeftSidebar';
export const SidebarPinnedButton = ({ state, component, updateState, darkMode }) => {
const tooltipMsg = state ? `Unpin ${component}` : `Pin ${component}`;
const pinnedIcon = !state ? 'pinned' : 'pinnedoff';
const iconSrc = `assets/images/icons/editor/left-sidebar/${pinnedIcon}.svg`;
// Todo: Uniform styles for all pinned buttons
return (
<SidebarPinnedButton.OverlayContainer tip={tooltipMsg}>
{component === 'PageSelector' ? (
<Button darkMode={darkMode} onClick={updateState} size="sm" styles={{ width: '28px', padding: 0 }}>
<Button.Content iconSrc={iconSrc} />
</Button>
) : (
<div
className={`btn btn-sm btn-light m-1 ${darkMode && 'btn-outline-secondary'} ${state && 'active'} ${
component === 'Inspector' && 'position-absolute end-0'
}`}
onClick={updateState}
>
<img
className="svg-icon"
src={`assets/images/icons/editor/left-sidebar/${pinnedIcon}.svg`}
width="16"
height="16"
/>
</div>
)}
</SidebarPinnedButton.OverlayContainer>
);
};
function OverlayContainer({ children, tip }) {
return (
<>
<OverlayTrigger
trigger={['click', 'hover', 'focus']}
placement="top"
delay={{ show: 800, hide: 100 }}
overlay={<Tooltip id="button-tooltip">{tip}</Tooltip>}
>
{children}
</OverlayTrigger>
</>
);
}
SidebarPinnedButton.OverlayContainer = OverlayContainer;

78
frontend/src/Editor/LeftSidebar/SidebarZoom.jsx
View file

@ -1,78 +0,0 @@
import React from 'react';
import usePopover from '@/_hooks/use-popover';
import { LeftSidebarItem } from './SidebarItem';
export const LeftSidebarZoom = ({ onZoomChanged }) => {
const [open, trigger, content, setOpen] = usePopover(false);
const [text, setText] = React.useState(100);
return (
<>
<LeftSidebarItem
tip="Select zoom level"
{...trigger}
text={`${text} %`}
className={`left-sidebar-item sidebar-zoom ${open && 'active'}`}
/>
<div {...content} className={`card popover zoom-popover ${open ? 'show' : 'hide'}`}>
<div className="card-body">
<div className="table-responsive">
<table className="table table-vcenter table-nowrap">
<tbody>
<tr
role="button"
onClick={() => {
setText(100);
onZoomChanged(1);
setOpen(false);
}}
>
<td>100%</td>
</tr>
<tr
role="button"
onClick={() => {
setText(90);
onZoomChanged(0.9);
setOpen(false);
}}
>
<td>90%</td>
</tr>
<tr
role="button"
onClick={() => {
setText(80);
onZoomChanged(0.8);
setOpen(false);
}}
>
<td>80%</td>
</tr>
<tr
role="button"
onClick={() => {
setText(70);
onZoomChanged(0.7);
setOpen(false);
}}
>
<td>70%</td>
</tr>
<tr
role="button"
onClick={() => {
setText(60);
onZoomChanged(0.6);
setOpen(false);
}}
>
<td>60%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</>
);
};

83
frontend/src/Editor/LeftSidebar/index.js → frontend/src/Editor/LeftSidebar/index.jsx
View file

@ -1,14 +1,12 @@
import '@/_styles/left-sidebar.scss';
import React, { useState, useImperativeHandle, forwardRef } from 'react';
import { LeftSidebarItem } from './SidebarItem';
import { LeftSidebarInspector } from './SidebarInspector';
import { LeftSidebarDataSources } from './SidebarDatasources';
import { DarkModeToggle } from '../../_components/DarkModeToggle';
import useRouter from '../../_hooks/use-router';
import { LeftSidebarDebugger } from './SidebarDebugger';
import { LeftSidebarComment } from './SidebarComment';
import { LeftSidebarGlobalSettings } from './SidebarGlobalSettings';
import LeftSidebarPageSelector from './SidebarPageSelector';
import { ConfirmDialog } from '@/_components';
import config from 'config';
@ -18,6 +16,7 @@ export const LeftSidebar = forwardRef((props, ref) => {
const {
appId,
switchDarkMode,
showComments,
darkMode = false,
components,
toggleComments,
@ -26,18 +25,12 @@ export const LeftSidebar = forwardRef((props, ref) => {
dataQueriesChanged,
errorLogs,
appVersionsId,
globalSettingsChanged,
globalSettings,
debuggerActions,
currentState,
appDefinition,
setSelectedComponent,
removeComponent,
runQuery,
toggleAppMaintenance,
is_maintenance_on,
isSaving,
isUnsavedQueriesAvailable,
currentPageId,
addNewPage,
switchPage,
@ -54,6 +47,7 @@ export const LeftSidebar = forwardRef((props, ref) => {
dataQueries,
clonePage,
} = props;
const [selectedSidebarItem, setSelectedSidebarItem] = useState();
const [showLeaveDialog, setShowLeaveDialog] = useState(false);
const [showDataSourceManagerModal, toggleDataSourceManagerModal] = useState(false);
@ -62,19 +56,21 @@ export const LeftSidebar = forwardRef((props, ref) => {
toggleDataSourceManagerModal(true);
},
}));
const handleSelectedSidebarItem = (item) => {
if(item === selectedSidebarItem) {
setSelectedSidebarItem(null);
} else {
setSelectedSidebarItem(item);
}
}
return (
<div className="left-sidebar" data-cy="left-sidebar-inspector">
<LeftSidebarInspector
darkMode={darkMode}
currentState={currentState}
appDefinition={appDefinition}
setSelectedComponent={setSelectedComponent}
removeComponent={removeComponent}
runQuery={runQuery}
dataSources={dataSources}
/>
<LeftSidebarPageSelector
darkMode={darkMode}
selectedSidebarItem={selectedSidebarItem}
setSelectedSidebarItem={handleSelectedSidebarItem}
appDefinition={appDefinition}
currentPageId={currentPageId}
addNewPage={addNewPage}
@ -95,8 +91,21 @@ export const LeftSidebar = forwardRef((props, ref) => {
apps={apps}
dataQueries={dataQueries}
/>
<LeftSidebarInspector
darkMode={darkMode}
selectedSidebarItem={selectedSidebarItem}
setSelectedSidebarItem={handleSelectedSidebarItem}
currentState={currentState}
appDefinition={appDefinition}
setSelectedComponent={setSelectedComponent}
removeComponent={removeComponent}
runQuery={runQuery}
dataSources={dataSources}
/>
<LeftSidebarDataSources
darkMode={darkMode}
selectedSidebarItem={selectedSidebarItem}
setSelectedSidebarItem={handleSelectedSidebarItem}
appId={appId}
editingVersionId={appVersionsId}
dataSources={dataSources}
@ -105,42 +114,14 @@ export const LeftSidebar = forwardRef((props, ref) => {
toggleDataSourceManagerModal={toggleDataSourceManagerModal}
showDataSourceManagerModal={showDataSourceManagerModal}
/>
<LeftSidebarDebugger
darkMode={darkMode}
components={components}
errors={errorLogs}
debuggerActions={debuggerActions}
currentPageId={currentPageId}
/>
{config.COMMENT_FEATURE_ENABLE && (
<LeftSidebarComment
appVersionsId={appVersionsId}
selectedSidebarItem={showComments ? 'comments' : ''}
toggleComments={toggleComments}
currentPageId={currentPageId}
/>
)}
<LeftSidebarGlobalSettings
currentState={currentState}
globalSettingsChanged={globalSettingsChanged}
globalSettings={globalSettings}
darkMode={darkMode}
toggleAppMaintenance={toggleAppMaintenance}
is_maintenance_on={is_maintenance_on}
/>
<LeftSidebarItem
onClick={() => {
if (isSaving || isUnsavedQueriesAvailable) {
setShowLeaveDialog(true);
} else {
router.push('/');
}
}}
tip="Back to home"
icon="back"
className="left-sidebar-item no-border left-sidebar-layout"
text={'Back'}
data-cy="back-button"
/>
<ConfirmDialog
show={showLeaveDialog}
message={'The unsaved changes will be lost if you leave the editor, do you want to leave?'}
@ -148,7 +129,15 @@ export const LeftSidebar = forwardRef((props, ref) => {
onCancel={() => setShowLeaveDialog(false)}
/>
<div className="left-sidebar-stack-bottom">
{/* <LeftSidebarZoom onZoomChanged={onZoomChanged} /> */}
<LeftSidebarDebugger
darkMode={darkMode}
selectedSidebarItem={selectedSidebarItem}
setSelectedSidebarItem={handleSelectedSidebarItem}
components={components}
errors={errorLogs}
debuggerActions={debuggerActions}
currentPageId={currentPageId}
/>
<div className="left-sidebar-item no-border">
<DarkModeToggle switchDarkMode={switchDarkMode} darkMode={darkMode} tooltipPlacement="right" />
</div>

101
frontend/src/Editor/ManageAppUsers.jsx
View file

@ -32,12 +32,18 @@ class ManageAppUsersComponent extends React.Component {
}
fetchAppUsers = () => {
appService.getAppUsers(this.props.app.id).then((data) =>
this.setState({
users: data.users,
isLoading: false,
})
);
appService
.getAppUsers(this.props.app.id)
.then((data) =>
this.setState({
users: data.users,
isLoading: false,
})
)
.catch((error) => {
this.setState({ isLoading: false });
toast.error(error);
});
};
hideModal = () => {
@ -73,21 +79,29 @@ class ManageAppUsersComponent extends React.Component {
});
// eslint-disable-next-line no-unused-vars
appService.setVisibility(this.state.app.id, newState).then((data) => {
this.setState({
ischangingVisibility: false,
app: {
...this.state.app,
is_public: newState,
},
});
appService
.setVisibility(this.state.app.id, newState)
.then((data) => {
this.setState({
ischangingVisibility: false,
app: {
...this.state.app,
is_public: newState,
},
});
if (newState) {
toast.success('Application is now public.');
} else {
toast.success('Application visibility set to private');
}
});
if (newState) {
toast('Application is now public.');
} else {
toast('Application visibility set to private');
}
})
.catch((error) => {
this.setState({
ischangingVisibility: false,
});
toast.error(error);
});
};
handleSetSlug = (event) => {
@ -124,11 +138,24 @@ class ManageAppUsersComponent extends React.Component {
const embeddableLink = `<iframe width="560" height="315" src="${appLink}${this.props.slug}" title="Tooljet app - ${this.props.slug}" frameborder="0" allowfullscreen></iframe>`;
return (
<div>
<button className="btn font-500 color-primary btn-sm" onClick={() => this.setState({ showModal: true })}>
{this.props.t('editor.share', 'Share')}
</button>
<div title="Share">
<svg
className="w-100 h-100 cursor-pointer icon"
onClick={() => this.setState({ showModal: true })}
width="33"
height="33"
viewBox="0 0 33 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.363281" y="0.220703" width="32" height="32" rx="6" fill="#F0F4FF" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20.362 10.8875C19.6256 10.8875 19.0286 11.4845 19.0286 12.2209C19.0286 12.4112 19.0685 12.5922 19.1404 12.756C19.1453 12.7646 19.15 12.7733 19.1546 12.7822C19.1647 12.8019 19.1738 12.8217 19.1818 12.8418C19.4051 13.2654 19.8498 13.5542 20.362 13.5542C21.0984 13.5542 21.6953 12.9572 21.6953 12.2209C21.6953 11.4845 21.0984 10.8875 20.362 10.8875ZM18.3354 13.9542C18.8245 14.5255 19.551 14.8875 20.362 14.8875C21.8347 14.8875 23.0286 13.6936 23.0286 12.2209C23.0286 10.7481 21.8347 9.5542 20.362 9.5542C18.8892 9.5542 17.6953 10.7481 17.6953 12.2209C17.6953 12.4043 17.7138 12.5834 17.7491 12.7564L14.3886 14.4876C13.8995 13.9163 13.173 13.5542 12.362 13.5542C10.8892 13.5542 9.69531 14.7481 9.69531 16.2209C9.69531 17.6936 10.8892 18.8875 12.362 18.8875C13.173 18.8875 13.8995 18.5255 14.3886 17.9542L17.7491 19.6854C17.7138 19.8584 17.6953 20.0375 17.6953 20.2209C17.6953 21.6936 18.8892 22.8875 20.362 22.8875C21.8347 22.8875 23.0286 21.6936 23.0286 20.2209C23.0286 18.7481 21.8347 17.5542 20.362 17.5542C19.551 17.5542 18.8245 17.9163 18.3354 18.4876L14.9749 16.7564C15.0101 16.5834 15.0286 16.4043 15.0286 16.2209C15.0286 16.0375 15.0101 15.8584 14.9749 15.6854L18.3354 13.9542ZM13.5422 15.5999C13.5502 15.62 13.5592 15.6399 13.5693 15.6595C13.5739 15.6684 13.5787 15.6771 13.5836 15.6857C13.6554 15.8495 13.6953 16.0305 13.6953 16.2209C13.6953 16.4112 13.6554 16.5922 13.5836 16.756C13.5787 16.7646 13.5739 16.7733 13.5693 16.7822C13.5592 16.8019 13.5502 16.8217 13.5422 16.8418C13.3188 17.2654 12.8741 17.5542 12.362 17.5542C11.6256 17.5542 11.0286 16.9572 11.0286 16.2209C11.0286 15.4845 11.6256 14.8875 12.362 14.8875C12.8741 14.8875 13.3188 15.1763 13.5422 15.5999ZM19.1404 19.6857C19.1453 19.6771 19.15 19.6684 19.1546 19.6595C19.1647 19.6399 19.1738 19.62 19.1818 19.5999C19.4051 19.1763 19.8498 18.8875 20.362 18.8875C21.0984 18.8875 21.6953 19.4845 21.6953 20.2209C21.6953 20.9572 21.0984 21.5542 20.362 21.5542C19.6256 21.5542 19.0286 20.9572 19.0286 20.2209C19.0286 20.0305 19.0685 19.8495 19.1404 19.6857Z"
fill="#3E63DD"
/>
</svg>
<Modal
show={this.state.showModal}
size="lg"
@ -137,18 +164,13 @@ class ManageAppUsersComponent extends React.Component {
keyboard={true}
animation={false}
onEscapeKeyDown={this.hideModal}
className="app-sharing-modal"
className="app-sharing-modal animation-fade"
contentClassName={this.props.darkMode ? 'theme-dark' : ''}
>
<Modal.Header>
<Modal.Title>{this.props.t('editor.share', 'Share')}</Modal.Title>
<div>
<Button variant={this.props.darkMode ? 'secondary' : 'light'} size="sm" onClick={() => this.hideModal()}>
x
</Button>
</div>
<button className="btn-close" aria-label="Close" onClick={this.hideModal} data-cy="modal-close-button" />
</Modal.Header>
<Modal.Body>
{isLoading ? (
<div style={{ width: '100%' }} className="p-5">
@ -161,12 +183,12 @@ class ManageAppUsersComponent extends React.Component {
<input
className="form-check-input"
type="checkbox"
onClick={() => this.toggleAppVisibility()}
onClick={this.toggleAppVisibility}
checked={this.state.app.is_public}
disabled={this.state.ischangingVisibility}
/>
<span className="form-check-label">
{this.props.t('editor.shareModal.makeApplicationPublic', 'Make application public ?')}
{this.props.t('editor.shareModal.makeApplicationPublic', 'Make application public?')}
</span>
</div>
</div>
@ -222,12 +244,7 @@ class ManageAppUsersComponent extends React.Component {
<span className="input-group-text">
<CopyToClipboard
text={embeddableLink}
onCopy={() =>
toast.success('Link copied to clipboard', {
hideProgressBar: true,
position: 'bottom-center',
})
}
onCopy={() => toast.success('Embeddable link copied to clipboard')}
>
<button className="btn btn-secondary btn-sm">
{this.props.t('editor.shareModal.copy', 'copy')}
@ -241,8 +258,8 @@ class ManageAppUsersComponent extends React.Component {
</Modal.Body>
<Modal.Footer>
<Link to="/users" target="_blank" className="btn color-primary mt-3">
{this.props.t('editor.shareModal.manageUsers', 'Manage Users')}
<Link to="/organization-settings" target="_blank" className="btn color-primary mt-3">
Manage users
</Link>
</Modal.Footer>
</Modal>

41
frontend/src/Editor/RealtimeAvatars.jsx
View file

@ -1,9 +1,10 @@
import React from 'react';
import ReactTooltip from 'react-tooltip';
import Popover from '@/_ui/Popover';
import Avatar from '@/_ui/Avatar';
import { useOthers, useSelf } from '@y-presence/react';
const MAX_DISPLAY_USERS = 3;
const MAX_DISPLAY_USERS = 2;
const RealtimeAvatars = () => {
const self = useSelf();
const others = useOthers();
@ -23,10 +24,43 @@ const RealtimeAvatars = () => {
ReactTooltip.rebuild();
}, [othersOnSameVersionAndPage?.length]);
const popoverContent = () => {
return othersOnSameVersionAndPage
.slice(MAX_DISPLAY_USERS, othersOnSameVersionAndPage.length)
.map(({ id, presence }) => {
return (
<div key={id} className="list-group">
<div className="list-group-item border-0">
<div className="row align-items-center">
<div className="col-auto">
<Avatar
borderColor={presence.color}
title={getAvatarTitle(presence)}
text={getAvatarText(presence)}
image={presence?.image}
borderShape="rounded"
/>
</div>
<div className="col text-truncate">
{getAvatarTitle(presence)}
<div className="d-block text-muted text-truncate mt-n1">{presence.email}</div>
</div>
</div>
</div>
</div>
);
});
};
return (
<div className="row realtime-avatars">
<div className="col-auto ms-auto">
<div className="col-auto ms-auto d-flex align-items-center">
<div className="avatar-list avatar-list-stacked">
{othersOnSameVersionAndPage.length > MAX_DISPLAY_USERS && (
<Popover fullWidth={false} showArrow popoverContent={popoverContent()}>
<Avatar text={`+${othersOnSameVersionAndPage.length - MAX_DISPLAY_USERS}`} borderShape="rounded" />
</Popover>
)}
{self?.presence && (
<Avatar
key={self?.presence?.id}
@ -49,9 +83,6 @@ const RealtimeAvatars = () => {
/>
);
})}
{othersOnSameVersionAndPage.length > MAX_DISPLAY_USERS && (
<Avatar text={`+${othersOnSameVersionAndPage.length - MAX_DISPLAY_USERS}`} borderShape="rounded" />
)}
</div>
</div>
</div>

9
frontend/src/Editor/RealtimeEditor.jsx
View file

@ -34,9 +34,13 @@ export const RealtimeEditor = (props) => {
React.useEffect(() => {
const currentUser = JSON.parse(localStorage.getItem('currentUser'));
const domain = psl.parse(window.location.host).domain;
document.cookie = `auth_token=${currentUser?.auth_token}; domain=.${domain}; path=/`;
document.cookie = domain
? `auth_token=${currentUser?.auth_token}; domain=.${domain}; path=/`
: `auth_token=${currentUser?.auth_token}; path=/`;
document.cookie = domain
? `app_id=${router.query.id}; domain=.${domain}; path=/`
: `app_id=${router.query.id}; path=/`;
document.cookie = `app_id=${router.query.id}; domain=.${domain}; path=/`;
console.log('getWebsocketUrl()', getWebsocketUrl())
setProvider(new WebsocketProvider(getWebsocketUrl(), 'yjs', ydoc));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [appId]);
@ -59,6 +63,7 @@ export const RealtimeEditor = (props) => {
const initialPresence = {
firstName: currentUser?.first_name ?? '',
lastName: currentUser?.last_name ?? '',
email: currentUser?.email ?? '',
image: '',
editingVersionId: '',
x: 0,

15
frontend/src/Editor/ReleaseVersionButton.jsx
View file

@ -1,4 +1,5 @@
import React, { useState } from 'react';
import cx from 'classnames';
import { appService } from '@/_services';
import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
@ -39,10 +40,22 @@ export const ReleaseVersionButton = function DeployVersionButton({
return (
<div>
<button
className={`btn btn-primary btn-sm ${isVersionReleased ? 'disabled' : ''} ${isReleasing ? 'btn-loading' : ''}`}
className={cx('btn btn-primary btn-sm rounded-2 bg-light-indigo-09', {
disabled: isVersionReleased,
'btn-loading': isReleasing,
})}
style={{ padding: '6px 16px' }}
onClick={() => releaseVersion(editingVersion)}
>
{t('editor.release', 'Release')}
<svg className="ms-2" width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.55985 3.74946C8.82019 3.48911 9.2423 3.48911 9.50265 3.74946L13.5027 7.74946C13.763 8.00981 13.763 8.43192 13.5027 8.69227L9.50265 12.6923C9.2423 12.9526 8.82019 12.9526 8.55985 12.6923C8.2995 12.4319 8.2995 12.0098 8.55985 11.7495L11.4218 8.88753H3.69792C3.32973 8.88753 3.03125 8.58906 3.03125 8.22087C3.03125 7.85268 3.32973 7.5542 3.69792 7.5542H11.4218L8.55985 4.69227C8.2995 4.43192 8.2995 4.00981 8.55985 3.74946Z"
fill="#FDFDFE"
/>
</svg>
</button>
</div>
);

61
frontend/src/Editor/Viewer/Confirm.jsx
View file

@ -1,10 +1,10 @@
import React, { useState, useEffect } from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
export function Confirm({
show,
title,
message,
onConfirm,
onCancel,
@ -38,25 +38,44 @@ export function Confirm({
};
return (
<>
<Modal
show={showModal}
onHide={handleClose}
size="sm"
centered={true}
contentClassName={darkMode ? 'theme-dark' : ''}
>
<div className="modal-status bg-danger"></div>
<Modal.Body data-cy={'modal-message'}>{message}</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose} data-cy={'modal-cancel-button'}>
{cancelButtonText === '' ? t('globals.cancel', 'Cancel') : cancelButtonText}
</Button>
<Button variant="primary" onClick={handleConfirm} data-cy={'modal-confirm-button'}>
{confirmButtonText === '' ? t('globals.yes', 'Yes') : confirmButtonText}
</Button>
</Modal.Footer>
</Modal>
</>
<Modal
show={showModal}
animation={false}
onHide={handleClose}
size="sm"
centered={true}
contentClassName={darkMode ? 'theme-dark' : ''}
>
{title && (
<Modal.Header>
<Modal.Title>{title}</Modal.Title>
<svg
onClick={handleClose}
className="cursor-pointer"
width="33"
height="33"
viewBox="0 0 33 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.5996 11.6201C11.8599 11.3597 12.282 11.3597 12.5424 11.6201L16.071 15.1487L19.5996 11.6201C19.8599 11.3597 20.282 11.3597 20.5424 11.6201C20.8027 11.8804 20.8027 12.3025 20.5424 12.5629L17.0138 16.0915L20.5424 19.6201C20.8027 19.8804 20.8027 20.3025 20.5424 20.5629C20.282 20.8232 19.8599 20.8232 19.5996 20.5629L16.071 17.0343L12.5424 20.5629C12.282 20.8232 11.8599 20.8232 11.5996 20.5629C11.3392 20.3025 11.3392 19.8804 11.5996 19.6201L15.1282 16.0915L11.5996 12.5629C11.3392 12.3025 11.3392 11.8804 11.5996 11.6201Z"
fill="#11181C"
/>
</svg>
</Modal.Header>
)}
<Modal.Body data-cy={'modal-message'}>{message}</Modal.Body>
<Modal.Footer className="mt-3">
<button className="btn" onClick={handleClose} data-cy={'modal-cancel-button'}>
{cancelButtonText === '' ? t('globals.cancel', 'Cancel') : cancelButtonText}
</button>
<button className="btn btn-danger" onClick={handleConfirm} data-cy={'modal-confirm-button'}>
{confirmButtonText === '' ? t('globals.yes', 'Yes') : confirmButtonText}
</button>
</Modal.Footer>
</Modal>
);
}

2
frontend/src/Editor/Viewer/ViewerNavigation.jsx
View file

@ -168,7 +168,7 @@ const ViewerHeader = ({
<Header>
{showHeader && (
<>
<h1 className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0">
<h1 className="navbar-brand d-none-navbar-horizontal pe-0">
<Link to="/" data-cy="viewer-page-logo">
<LogoIcon />
</Link>

5
frontend/src/HomePage/Modal.jsx
View file

@ -5,9 +5,10 @@ export default function Modal({ title, show, closeModal, customClassName, childr
const darkMode = localStorage.getItem('darkMode') === 'true';
return (
<BootstrapModal
className="animation-fade"
onHide={() => closeModal(false)}
contentClassName={`home-modal-component${customClassName ? ` ${customClassName}` : ''} ${darkMode && 'dark'}`}
contentClassName={`home-modal-component animation-fade${customClassName ? ` ${customClassName}` : ''} ${
darkMode && 'dark'
}`}
show={show}
size="md"
backdrop={true}

2
frontend/src/ManageSSO/ManageSSO.jsx
View file

@ -107,7 +107,7 @@ export function ManageSSO({ darkMode }) {
<div className="col">
<div className="page-pretitle"></div>
<h2 className="page-title" data-cy="manage-sso-page-title">
{t('header.organization.menus.manageSSO.manageSso', 'Manage SSO')}
{t('header.organization.menus.manageSSO.manageSso', 'SSO')}
</h2>
</div>
</div>

4
frontend/src/OrganizationSettingsPage/index.jsx
View file

@ -41,7 +41,7 @@ export function OrganizationSettings(props) {
fill="#C1C8CD"
/>
</svg>
&nbsp;{t('header.organization.menus.menusList.manageUsers', 'Manage Users')}
&nbsp;{t('header.organization.menus.menusList.manageUsers', 'Users')}
</div>
<div
className={cx(
@ -81,7 +81,7 @@ export function OrganizationSettings(props) {
fill="#C1C8CD"
/>
</svg>
&nbsp;{t('header.organization.menus.menusList.manageSso', 'Manage SSO')}
&nbsp;{t('header.organization.menus.menusList.manageSso', 'SSO')}
</div>
<div
className={cx(

73
frontend/src/_components/ConfirmDialog.jsx
View file

@ -1,9 +1,9 @@
import React, { useState, useEffect } from 'react';
import cx from 'classnames';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
export function ConfirmDialog({ show, message, onConfirm, onCancel, confirmButtonLoading, darkMode }) {
export function ConfirmDialog({ show, title, message, onConfirm, onCancel, confirmButtonLoading, darkMode }) {
const [showModal, setShow] = useState(show);
const { t } = useTranslation();
@ -21,32 +21,49 @@ export function ConfirmDialog({ show, message, onConfirm, onCancel, confirmButto
};
return (
<>
<Modal
show={showModal}
onHide={handleClose}
size="sm"
centered={true}
contentClassName={darkMode ? 'theme-dark' : ''}
data-cy="modal-component"
>
<div className="modal-status bg-danger"></div>
<Modal.Body data-cy="modal-message">{message}</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose} data-cy="cancel-button">
{t('globals.cancel', 'Cancel')}
</Button>
<Button
variant="danger"
autoFocus
className={`${confirmButtonLoading ? 'btn-loading' : ''}`}
onClick={handleConfirm}
data-cy="yes-button"
<Modal
show={showModal}
onHide={handleClose}
size="sm"
animation={false}
centered={true}
contentClassName={darkMode ? 'theme-dark' : ''}
data-cy="modal-component"
>
{title && (
<Modal.Header>
<Modal.Title>{title}</Modal.Title>
<svg
onClick={handleClose}
className="cursor-pointer"
width="33"
height="33"
viewBox="0 0 33 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
{t('globals.yes', 'Yes')}
</Button>
</Modal.Footer>
</Modal>
</>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.5996 11.6201C11.8599 11.3597 12.282 11.3597 12.5424 11.6201L16.071 15.1487L19.5996 11.6201C19.8599 11.3597 20.282 11.3597 20.5424 11.6201C20.8027 11.8804 20.8027 12.3025 20.5424 12.5629L17.0138 16.0915L20.5424 19.6201C20.8027 19.8804 20.8027 20.3025 20.5424 20.5629C20.282 20.8232 19.8599 20.8232 19.5996 20.5629L16.071 17.0343L12.5424 20.5629C12.282 20.8232 11.8599 20.8232 11.5996 20.5629C11.3392 20.3025 11.3392 19.8804 11.5996 19.6201L15.1282 16.0915L11.5996 12.5629C11.3392 12.3025 11.3392 11.8804 11.5996 11.6201Z"
fill="#11181C"
/>
</svg>
</Modal.Header>
)}
<Modal.Body data-cy="modal-message">{message}</Modal.Body>
<Modal.Footer className="mt-3">
<button className="btn" onClick={handleClose} data-cy="cancel-button">
{t('globals.cancel', 'Cancel')}
</button>
<button
className={cx('btn btn-danger', { 'btn-loading': confirmButtonLoading })}
onClick={handleConfirm}
data-cy="yes-button"
>
{t('globals.yes', 'Yes')}
</button>
</Modal.Footer>
</Modal>
);
}

1
frontend/src/_components/DarkModeToggle.jsx
View file

@ -73,6 +73,7 @@ export const DarkModeToggle = function DarkModeToggle({
stroke="currentColor"
style={{
cursor: 'pointer',
opacity: 0.6,
...svgContainerProps,
}}
>

12
frontend/src/_components/OrganizationManager/CreateOrganization.jsx
View file

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { authenticationService, organizationService } from '@/_services';
import Modal from '../../HomePage/Modal';
import AlertDialog from '@/_ui/AlertDialog';
import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
@ -34,12 +34,12 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
};
return (
<Modal
<AlertDialog
show={showCreateOrg}
closeModal={() => setShowCreateOrg(false)}
title={t('header.organization.createWorkspace', 'Create workspace')}
>
<div className="row">
<div className="row mb-3">
<div className="col modal-main">
<input
type="text"
@ -52,8 +52,8 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
</div>
</div>
<div className="row">
<div className="col d-flex modal-footer-btn">
<button className="btn btn-light" onClick={() => setShowCreateOrg(false)}>
<div className="col d-flex justify-content-end">
<button className="btn mx-2" onClick={() => setShowCreateOrg(false)}>
{t('globals.cancel', 'Cancel')}
</button>
<button
@ -65,6 +65,6 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
</button>
</div>
</div>
</Modal>
</AlertDialog>
);
};

58
frontend/src/_components/OrganizationManager/EditOrganization.jsx
View file

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { authenticationService, organizationService } from '@/_services';
import Modal from '../../HomePage/Modal';
import AlertDialog from '@/_ui/AlertDialog';
import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
@ -31,36 +31,34 @@ export const EditOrganization = ({ showEditOrg, setShowEditOrg }) => {
};
return (
<>
<Modal
show={showEditOrg}
closeModal={() => setShowEditOrg(false)}
title={t('header.organization.editWorkspace', 'Edit workspace')}
>
<div className="row">
<div className="col modal-main">
<input
type="text"
onChange={(e) => setNewOrgName(e.target.value)}
className="form-control"
placeholder={t('header.organization.workspaceName', 'workspace name')}
disabled={isCreating}
value={newOrgName}
maxLength={25}
/>
</div>
<AlertDialog
show={showEditOrg}
closeModal={() => setShowEditOrg(false)}
title={t('header.organization.editWorkspace', 'Edit workspace')}
>
<div className="row mb-3">
<div className="col modal-main">
<input
type="text"
onChange={(e) => setNewOrgName(e.target.value)}
className="form-control"
placeholder={t('header.organization.workspaceName', 'workspace name')}
disabled={isCreating}
value={newOrgName}
maxLength={25}
/>
</div>
<div className="row">
<div className="col d-flex modal-footer-btn">
<button className="btn btn-light" onClick={() => setShowEditOrg(false)}>
{t('globals.cancel', 'Cancel')}
</button>
<button className={`btn btn-primary ${isCreating ? 'btn-loading' : ''}`} onClick={editOrganization}>
{t('globals.save', 'Save')}
</button>
</div>
</div>
<div className="row">
<div className="col d-flex justify-content-end">
<button className="btn mx-1" onClick={() => setShowEditOrg(false)}>
{t('globals.cancel', 'Cancel')}
</button>
<button className={`btn btn-primary ${isCreating ? 'btn-loading' : ''}`} onClick={editOrganization}>
{t('globals.save', 'Save')}
</button>
</div>
</Modal>
</>
</div>
</AlertDialog>
);
};

22
frontend/src/_hooks/usePinnedPopover.jsx
View file

@ -1,22 +0,0 @@
import React from 'react';
import usePopover from './use-popover';
const usePinnedPopover = (defaultOption = false) => {
const [open, trigger, content, setOpen] = usePopover(defaultOption);
const [popoverPinned, setPopoverPinned] = React.useState(defaultOption);
const updatePopoverPinnedState = () => {
setPopoverPinned((prev) => !prev);
};
React.useEffect(() => {
if (popoverPinned) {
setOpen(true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [popoverPinned]);
return [open, trigger, content, popoverPinned, updatePopoverPinnedState];
};
export default usePinnedPopover;

12
frontend/src/_styles/colors.scss
View file

@ -70,6 +70,9 @@ $primary-light: unquote("rgb(#{$primary-rgb-darker})");
color: $primary !important;
}
.color-light-green {
color: #46A758;
}
.bg-white {
background-color: $white;
}
@ -77,7 +80,9 @@ $primary-light: unquote("rgb(#{$primary-rgb-darker})");
.bg-light-1 {
background-color: #A6B6CC !important;
}
.bg-black {
background-color: $black !important;
}
.bg-gray {
background-color: $gray;
}
@ -105,7 +110,7 @@ $primary-light: unquote("rgb(#{$primary-rgb-darker})");
color: #8092AB;
}
.color-white{
color: white;
color: white !important;
}
.color-muted{
color: #DCDCDC;
@ -125,6 +130,9 @@ $primary-light: unquote("rgb(#{$primary-rgb-darker})");
.bg-dark-indigo {
background: #1C274F !important;
}
.bg-light-indigo-09 {
background: $color-light-indigo-09;
}
.color-light-slate-11{
color: $color-light-slate-11;
}

2
frontend/src/_styles/editor/comment-notifications.scss
View file

@ -42,7 +42,7 @@
}
.comment-notification-nav-item {
background-color: #fff !important;
background-color: #fff;
}
.comment-notification-filter-popover {

4
frontend/src/_styles/editor/comments.scss
View file

@ -14,10 +14,6 @@
z-index: 3;
}
.card-header {
border: 0 !important;
}
.mentioned-user {
color: #218DE3;
}

45
frontend/src/_styles/left-sidebar.scss
View file

@ -3,42 +3,39 @@
.left-sidebar {
background: $white;
.sidebar-svg-icon {
&:hover {
background: #ECEEF0;
}
}
.left-sidebar-item {
// margin: 5px;
text-align: center;
padding-top: 1vw;
padding-bottom: 1vw;
border-bottom: 1px solid $grey;
padding-top: 1rem;
transition: all 0.2s ease-in-out;
cursor: pointer;
&:hover {
transform: scale(1.2);
.debugger-badge {
display: none;
}
}
}
.active {
background: #f4f6fa;
}
.left-sidebar-stack-bottom {
width: 76px;
width: 48px;
position: fixed;
bottom: 1vw;
height: 50px;
bottom: 0;
text-align: center;
}
.popover {
position: fixed;
left: 76px;
left: 48px;
top: 55px;
overflow: auto;
max-height: 60%;
}
.datasources-popover {
top: 200px;
top: 160px;
width: 200px;
.add-btn {
border: none;
@ -46,7 +43,7 @@
}
}
.debugger-popover {
top: 270px;
top: 220px;
cursor: pointer;
}
.global-settings-popover {
@ -463,4 +460,22 @@
.viewer-footer {
height: 48px;
}
.sidebar-comments {
position: fixed !important;
top: 0;
right: 260px;
padding: 5px 0 0 0 !important;
}
.sidebar-global-settings {
position: absolute;
left: 65px;
top: 8px;
}
.sidebar-h-100-popover {
height: 100vh;
margin-top: 45px;
}
.sidebar-h-100-popover-inspector {
min-width: 422px;
}

88
frontend/src/_styles/popover.scss Normal file
View file

@ -0,0 +1,88 @@
.PopoverContent {
outline: none;
border-radius: 4px;
padding: 12px;
width: 260px;
background-color: white;
animation-duration: 400ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
border-radius: 8px;
}
.PopoverContent[data-state='open'][data-side='top'] {
animation-name: slideDownAndFade;
}
.PopoverContent[data-state='open'][data-side='right'] {
animation-name: slideLeftAndFade;
}
.PopoverContent[data-state='open'][data-side='bottom'] {
animation-name: slideUpAndFade;
}
.PopoverContent[data-state='open'][data-side='left'] {
animation-name: slideRightAndFade;
}
.PopoverArrow {
fill: white;
}
.PopoverClose {
font-family: inherit;
border-radius: 100%;
border: 0;
height: 25px;
width: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 5px;
right: 5px;
}
@keyframes slideUpAndFade {
from {
opacity: 0;
transform: translateY(2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideRightAndFade {
from {
opacity: 0;
transform: translateX(-2px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideDownAndFade {
from {
opacity: 0;
transform: translateY(-2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideLeftAndFade {
from {
opacity: 0;
transform: translateX(2px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

2
frontend/src/_styles/queryManager.scss
View file

@ -48,7 +48,7 @@ $border-radius: 4px;
z-index: 1;
height: 350px;
position: fixed;
left: 76px; //sidebar is 76px
left: 48px;
right: 300px;
bottom: 0;
overflow-x: hidden;

150
frontend/src/_styles/theme.scss
View file

@ -46,7 +46,7 @@ button {
}
.navbar {
max-height: 48px;
max-height: 45px;
min-height: auto;
.nav-item.active:after {
@ -257,9 +257,7 @@ button {
.left-sidebar-layout {
display: flex;
justify-content: center;
flex-direction: column;
font-size: 11px;
padding: 16px;
align-items: center;
letter-spacing: 0.2px;
@ -271,7 +269,7 @@ button {
.left-sidebar {
height: 100%;
width: 76px;
width: 48px;
position: fixed;
z-index: 2;
left: 0;
@ -355,7 +353,7 @@ button {
width: 300px;
flex: 1 1 auto;
top: 45px;
border-top: 1px solid #E6E8EB;
background-color: #fff;
background-clip: border-box;
border: solid rgba(0, 0, 0, 0.125);
@ -502,7 +500,7 @@ button {
top: 45px;
position: fixed;
right: 300px;
left: 76px;
left: 48px;
overflow-y: auto;
overflow-x: scroll;
-webkit-box-pack: center;
@ -1191,11 +1189,6 @@ button {
}
}
.ds-delete-btn {
border: none;
background: none;
}
.datasource-picker,
.stripe-operation-options {
@ -4081,15 +4074,6 @@ input[type="text"] {
width: 10% !important;
}
.inspector-close-icon-wrapper {
border-left: 1px solid #e7eaef;
svg {
margin-left: 10px;
}
}
.tabs-inspector {
position: sticky;
top: 0;
@ -4157,7 +4141,8 @@ input[type="text"] {
.tabs-inspector.nav-tabs {
border: 0;
width: 81%;
width: 100%;
padding: 8px 16px;
}
.bg-primary-lt {
@ -4171,7 +4156,7 @@ input[type="text"] {
.app-name {
width: 250px;
left: 150px;
left: 100px;
position: absolute;
}
@ -4190,9 +4175,38 @@ input[type="text"] {
color: #36af8b;
}
.undo-redo-buttons {
flex: 1;
padding-left: 0.5rem;
.editor-header-actions {
display: flex;
align-items: center;
position: absolute;
left: 30%;
color: #868aa5;
white-space: nowrap;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.5px;
}
.undo-button, .redo-button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px;
gap: 10px;
width: 28px;
height: 28px;
background: #ECEEF0;
border-radius: 6px;
margin-right: 5px;
flex: none;
order: 0;
flex-grow: 0;
}
.theme-dark {
.undo-button, .redo-button {
background: 0;
}
}
.app-version-menu {
@ -4691,6 +4705,15 @@ input[type="text"] {
padding: 0 10px !important;
}
.comment-notification-nav-item {
background: transparent;
border: 0;
font-size: 12px;
font-weight: 500;
opacity: 0.6;
height: 28px;
border-radius: 6px;
}
// comment styles ::override
.editor-sidebar {
.nav-tabs {
@ -4700,6 +4723,24 @@ input[type="text"] {
.nav-tabs .nav-link.active {
background-color: transparent !important;
}
.inspector-nav-item {
background: transparent;
border: 0;
font-size: 12px;
font-weight: 500;
opacity: 0.6;
height: 28px;
border-radius: 6px;
}
.inspector-component-title-input-holder {
padding: 16px 8px;
margin: 0;
padding-bottom: 0;
display: flex;
align-items: center;
}
}
.comment-card-wrapper {
@ -5279,7 +5320,10 @@ div#driver-page-overlay {
.realtime-avatars {
position: absolute;
left: 50%;
min-width: 118px;
right: 307px;
border-right: 1px solid #E6E8EB;
padding: 10px;
}
.widget-style-field-header {
@ -8488,6 +8532,59 @@ tbody {
// ONBOARDING-SELF-HOST STYLES END------->
//ONBOARD STYLES END---------------------------->>>>>
.app-versions-selector {
display: inline-flex;
align-items: center;
width: 176px;
height: 28px;
position: absolute;
left: 54%;
border-radius: 6px;
}
.app-version-list-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-version-name, .app-version-released {
font-weight: 400;
font-size: 12px;
line-height: 20px;
}
.app-version-delete {
display: none;
}
.custom-version-selector__option:hover .app-version-delete {
display: block;
}
.editor .editor-sidebar {
border-top: 1px solid #E6E8EB;
}
.editor .navbar-brand {
border-right: 1px solid #E6E8EB;
padding-right: 8px !important;
}
.theme-dark {
.editor .navbar-brand {
border-right: 1px solid #333c48;
}
.realtime-avatars {
border-right: 1px solid #333c48;
}
}
.modal-backdrop {
background-color: hsla(0, 0%, 0%, 0.439);
}
.ds-delete-btn {
display: none;
border: none;
background: none;
}
.ds-list-item:hover .ds-delete-btn {
display: block;
}
.toojet-db-table-footer {
position: fixed;
bottom: 0px;
@ -8505,5 +8602,4 @@ tbody {
max-width: 30px;
text-align: center;
}
}

35
frontend/src/_ui/AlertDialog/index.jsx Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import cx from 'classnames';
export default function AlertDialog({ title, show, closeModal, customClassName, children }) {
const darkMode = localStorage.getItem('darkMode') === 'true';
return (
<Modal
onHide={() => closeModal(false)}
contentClassName={cx('animation-fade home-modal-component', customClassName, { dark: darkMode })}
show={show}
size="md"
backdrop={true}
keyboard={true}
enforceFocus={false}
animation={false}
onEscapeKeyDown={() => closeModal()}
centered
data-cy={'modal-component'}
>
{title && (
<Modal.Header>
<Modal.Title data-cy={`${title.toLowerCase().replace(/\s+/g, '-')}-title`}>{title}</Modal.Title>
<button
className="btn-close"
aria-label="Close"
onClick={() => closeModal()}
data-cy="modal-close-button"
></button>
</Modal.Header>
)}
<Modal.Body>{children}</Modal.Body>
</Modal>
);
}

2
frontend/src/_ui/Avatar/index.jsx
View file

@ -20,7 +20,7 @@ const Avatar = ({ text, image, avatarId, title = '', borderColor = '', borderSha
<span
data-tip={title}
style={{
border: borderColor ? `1.5px solid ${borderColor}` : 'none',
// border: borderColor ? `1.5px solid ${borderColor}` : 'none',
...(image || avatar ? { backgroundImage: `url(${avatar ?? image})` } : {}),
}}
// className={`avatar avatar-sm ${borderShape === 'rounded' ? 'avatar-rounded' : ''} animation-fade`}

2
frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
View file

@ -34,7 +34,6 @@ export const JSONNode = ({ data, ...restProps }) => {
getAbsoluteNodePath,
actionsList,
fontSize,
updateParentState = () => null,
inspectorTree,
} = restProps;
@ -233,7 +232,6 @@ export const JSONNode = ({ data, ...restProps }) => {
aria-current="true"
onClick={() => {
action.dispatchAction(data, currentNode);
updateParentState();
}}
>
{action.name}

1
frontend/src/_ui/JSONTreeViewer/JSONTreeViewer.jsx
View file

@ -223,7 +223,6 @@ export class JSONTreeViewer extends React.Component {
getOnSelectLabelDispatchActions={this.getOnSelectLabelDispatchActions}
expandWithLabels={this.props.expandWithLabels ?? false} //expand and collapse: onclick of label
getAbsoluteNodePath={this.getAbsoluteNodePath}
updateParentState={this.state.updateParentState}
fontSize={this.props.fontSize ?? '12px'}
inspectorTree={this.props.treeType === 'inspector'}
/>

6
frontend/src/_ui/LeftSidebar/Header.jsx
View file

@ -2,16 +2,16 @@ import React from 'react';
import { SearchBoxComponent } from '@/_ui/Search';
const Header = ({ children, darkMode }) => {
return <div className={`${darkMode && 'dark'} leftsidebar-panel-header`}>{children}</div>;
return <div className={`${darkMode && 'dark'} leftsidebar-panel-header overflow-hidden`}>{children}</div>;
};
const PanelHeader = ({ children, title }) => {
return (
<div className="panel-header-container row">
<div className="col-3">
<div className="col">
<p className="text-muted m-0 fw-500">{title}</p>
</div>
<div className="col-9 px-1">{children}</div>
<div className="col px-1">{children}</div>
</div>
);
};

41
frontend/src/_ui/Popover/index.jsx Normal file
View file

@ -0,0 +1,41 @@
import '@/_styles/popover.scss';
import React from 'react';
import cx from 'classnames';
import * as Popover from '@radix-ui/react-popover';
const PopoverComponent = ({
children,
fullWidth = true,
popoverContentClassName = '',
popoverContent,
hideCloseIcon = true,
handleToggle,
side = 'bottom',
showArrow = false,
}) => (
<Popover.Root onOpenChange={handleToggle && handleToggle}>
<Popover.Trigger asChild>
<a className={cx({ 'w-100': fullWidth })}>{children}</a>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content side={side} className={`PopoverContent ${popoverContentClassName}`}>
{popoverContent}
{!hideCloseIcon && (
<Popover.Close className="PopoverClose" aria-label="Close">
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.01557 4.26655C4.27592 4.0062 4.69803 4.0062 4.95838 4.26655L8.48698 7.79515L12.0156 4.26655C12.2759 4.0062 12.698 4.0062 12.9584 4.26655C13.2187 4.5269 13.2187 4.94901 12.9584 5.20936L9.42979 8.73796L12.9584 12.2666C13.2187 12.5269 13.2187 12.949 12.9584 13.2094C12.698 13.4697 12.2759 13.4697 12.0156 13.2094L8.48698 9.68076L4.95838 13.2094C4.69803 13.4697 4.27592 13.4697 4.01557 13.2094C3.75523 12.949 3.75523 12.5269 4.01557 12.2666L7.54417 8.73796L4.01557 5.20936C3.75523 4.94901 3.75523 4.5269 4.01557 4.26655Z"
fill="black"
/>
</svg>
</Popover.Close>
)}
{showArrow && <Popover.Arrow className="PopoverArrow" />}
</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
export default PopoverComponent;

2
frontend/src/_ui/Select/SelectComponent.jsx
View file

@ -53,7 +53,7 @@ export const SelectComponent = ({ options = [], value, onChange, ...restProps })
isDisabled={isLoading}
options={selectOptions}
value={currentValue}
search={hasSearch}
isSearchable={hasSearch}
onChange={handleOnChange}
placeholder={placeholder}
styles={customStyles}