Compare commits
3 Commits
users/chsk
...
users/v-da
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
88b1265ce9 | ||
|
|
b1a434c011 | ||
|
|
bc951b4e13 |
@@ -1,3 +0,0 @@
|
||||
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.4852 1.13266C6.25055 1.69386 5.20039 2.5918 5.20039 3.8002V7.41652C5.39862 7.40568 5.59878 7.4002 5.80039 7.4002C6.00246 7.4002 6.20261 7.40569 6.40039 7.41649V5.83795C6.72565 6.08075 7.09627 6.29095 7.4852 6.46774C8.77401 7.05356 10.5123 7.4002 12.4004 7.4002C14.2885 7.4002 16.0268 7.05356 17.3156 6.46774C17.7045 6.29095 18.0752 6.08075 18.4004 5.83795V15.8002C18.4004 16.2486 17.9731 16.8507 16.819 17.3753C15.7191 17.8752 14.1574 18.2002 12.4005 18.2002L12.4004 18.7995C12.4004 19.0077 12.379 19.208 12.3392 19.4001L12.4004 19.4002C14.2885 19.4002 16.0268 19.0535 17.3156 18.4677C18.5503 17.9066 19.6004 17.0086 19.6004 15.8002V3.8002C19.6004 2.5918 18.5503 1.69386 17.3156 1.13266C16.0268 0.546827 14.2885 0.200195 12.4004 0.200195C10.5123 0.200195 8.77401 0.546827 7.4852 1.13266ZM7.98176 5.37529C6.82769 4.85071 6.40039 4.24866 6.40039 3.8002C6.40039 3.35173 6.82769 2.74968 7.98176 2.2251C9.08168 1.72513 10.6434 1.4002 12.4004 1.4002C14.1574 1.4002 15.7191 1.72513 16.819 2.2251C17.9731 2.74968 18.4004 3.35173 18.4004 3.8002C18.4004 4.24866 17.9731 4.85071 16.819 5.37529C15.7191 5.87526 14.1574 6.2002 12.4004 6.2002C10.6434 6.2002 9.08168 5.87526 7.98176 5.37529ZM6.40039 8.61851C6.76422 8.64085 7.11714 8.68327 7.4555 8.74374C7.93669 8.82972 8.38843 8.95219 8.80015 9.10529C10.2475 9.64345 11.2004 10.56 11.2004 11.6002C11.2004 13.257 8.78273 14.6002 5.80039 14.6002C2.81805 14.6002 0.400391 13.257 0.400391 11.6002C0.400391 10.056 2.50043 8.78432 5.20039 8.61851C5.39739 8.60641 5.59759 8.6002 5.80039 8.6002C6.00319 8.6002 6.20339 8.60641 6.40039 8.61851ZM11.1112 19.3454C10.6494 20.7416 8.44723 21.7995 5.80039 21.7995C2.81805 21.7995 0.400391 20.4564 0.400391 18.7995V14.0648C0.706223 14.3399 1.04834 14.5755 1.39925 14.7705C2.58615 15.4299 4.14455 15.8002 5.80039 15.8002C7.45623 15.8002 9.01463 15.4299 10.2015 14.7705C10.553 14.5752 10.8957 14.3391 11.202 14.0633C11.2015 15.2351 11.2008 16.9706 11.2005 18.1486V18.1508C11.2004 18.3942 11.2004 18.6137 11.2004 18.7995C11.2004 18.986 11.1698 19.1684 11.1112 19.3454Z" fill="#0078D4"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
3
images/CopilotQueryTablesTab.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="22" viewBox="0 0 20 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5849 1.28251C11.0125 0.262601 8.98746 0.2626 7.41509 1.28251L2.16509 4.68792C0.8149 5.56372 0 7.06362 0 8.67298V13.3266C0 14.9359 0.814898 16.4358 2.16509 17.3116L7.41509 20.717C8.98746 21.737 11.0125 21.737 12.5849 20.717L17.8349 17.3116C19.1851 16.4358 20 14.9359 20 13.3266V8.67298C20 7.06362 19.1851 5.56372 17.8349 4.68792L12.5849 1.28251ZM9.50097 2.05606C10.2759 1.93579 11.0848 2.09742 11.7686 2.54095L17.0186 5.94636C17.9424 6.54559 18.5 7.57184 18.5 8.67298V11.3953C18.287 11.1924 18.0465 11.0115 17.7802 10.8583L11.8647 7.45689C10.7104 6.79321 9.29086 6.79131 8.13486 7.45187L7.5 7.81465V4.41921C7.5 3.54159 8.01028 2.74407 8.80712 2.3763L9.50097 2.05606ZM17.8644 15.2255L17.7932 15.3501C17.5776 15.6212 17.3172 15.8595 17.0186 16.0532L11.7686 19.4586C10.6928 20.1564 9.30721 20.1564 8.23138 19.4586L5.86807 17.9256C6.11557 17.8358 6.35595 17.719 6.58487 17.5752L12.2457 14.0169C13.3374 13.3307 14 12.1316 14 10.8421V10.415L17.0324 12.1587C18.1077 12.7769 18.4798 14.1486 17.8644 15.2255ZM12.5 9.55251V10.8421C12.5 11.6158 12.1025 12.3352 11.4474 12.747L10.0303 13.6377L8.57078 12.7396C7.90535 12.3301 7.5 11.6047 7.5 10.8233V9.54228L8.87907 8.75424C9.57267 8.3579 10.4244 8.35904 11.1169 8.75725L12.5 9.55251ZM8.61445 14.5277L5.78662 16.3052C5.02045 16.7868 4.04031 16.7625 3.29894 16.2435L2.5521 15.7207C1.88767 15.1109 1.5 14.2448 1.5 13.3266V8.67298C1.5 7.57184 2.05756 6.54559 2.98138 5.94636L6.0268 3.97095C6.00907 4.11852 6 4.26815 6 4.41921V10.8233C6 12.1256 6.67558 13.3345 7.78463 14.017L8.61445 14.5277Z" fill="#0078D4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.39804 9.80882C4.57428 9.93313 4.78476 9.99968 5.00043 9.9993C5.21633 9.99946 5.42686 9.93197 5.60243 9.8063C5.77993 9.67582 5.91464 9.49552 5.98943 9.2883L6.43643 7.9153C6.55086 7.57101 6.74391 7.25811 7.00028 7.00139C7.25665 6.74467 7.56929 6.5512 7.91343 6.4363L9.30443 5.9853C9.45636 5.93095 9.59364 5.84214 9.70551 5.72586C9.81738 5.60957 9.9008 5.46896 9.94924 5.31503C9.99767 5.16111 10.0098 4.99806 9.98468 4.83867C9.95955 4.67927 9.89786 4.52786 9.80443 4.3963C9.67034 4.21038 9.47939 4.07314 9.26043 4.0053L7.88543 3.5583C7.54091 3.44407 7.22777 3.25111 6.97087 2.99472C6.71396 2.73833 6.52035 2.42558 6.40543 2.0813L5.95343 0.693301C5.88113 0.490997 5.74761 0.316236 5.57143 0.193301C5.43877 0.0995741 5.28607 0.0380931 5.12548 0.0137472C4.96489 -0.0105984 4.80083 0.00286224 4.64636 0.0530596C4.49188 0.103257 4.35125 0.188806 4.23564 0.302903C4.12004 0.417 4.03265 0.556497 3.98043 0.710301L3.52343 2.1103C3.40884 2.44513 3.21967 2.74954 2.97022 3.00055C2.72076 3.25157 2.41753 3.44263 2.08343 3.5593L0.692428 4.0073C0.540653 4.0617 0.403522 4.15048 0.291767 4.26669C0.180011 4.3829 0.0966621 4.5234 0.0482407 4.67719C-0.000180673 4.83097 -0.0123605 4.99388 0.0126534 5.15315C0.0376676 5.31243 0.0991972 5.46376 0.192428 5.5953C0.320272 5.77475 0.501046 5.90972 0.709428 5.9813L2.08343 6.4263C2.52354 6.57278 2.90999 6.84713 3.19343 7.2143C3.35585 7.42494 3.4813 7.66164 3.56443 7.9143L4.01643 9.3053C4.08846 9.50859 4.22179 9.68452 4.39804 9.80882ZM4.48343 2.3943L5.01043 1.0173L5.44943 2.3943C5.61312 2.88745 5.88991 3.33546 6.25767 3.70253C6.62544 4.0696 7.07397 4.34554 7.56743 4.5083L8.97343 5.0373L7.59143 5.4853C7.09866 5.6496 6.65095 5.92646 6.28382 6.29393C5.9167 6.66141 5.64026 7.10938 5.47643 7.6023L4.95343 8.9803L4.50443 7.6013C4.34335 7.10803 4.06943 6.65913 3.70443 6.2903C3.3356 5.92226 2.88653 5.64467 2.39243 5.4793L1.01443 4.9573L2.40043 4.5073C2.88672 4.33867 3.32775 4.06051 3.68943 3.6943C4.04901 3.3266 4.32049 2.88211 4.48343 2.3943ZM10.5353 13.8513C10.6713 13.9475 10.8337 13.9992 11.0003 13.9993C11.1654 13.9994 11.3264 13.9484 11.4613 13.8533C11.6008 13.7548 11.7058 13.6149 11.7613 13.4533L12.0093 12.6913C12.0625 12.5329 12.1515 12.3888 12.2693 12.2703C12.3867 12.1518 12.5307 12.063 12.6893 12.0113L13.4613 11.7593C13.619 11.7048 13.7557 11.6024 13.8523 11.4663C13.9257 11.3633 13.9736 11.2444 13.9921 11.1193C14.0106 10.9942 13.9992 10.8665 13.9588 10.7467C13.9184 10.6268 13.8501 10.5183 13.7597 10.4299C13.6692 10.3415 13.5591 10.2759 13.4383 10.2383L12.6743 9.98933C12.5162 9.93676 12.3724 9.84814 12.2544 9.73048C12.1364 9.61281 12.0473 9.46932 11.9943 9.31133L11.7423 8.53833C11.6886 8.38048 11.586 8.24387 11.4493 8.14833C11.3473 8.07538 11.2295 8.02744 11.1056 8.00838C10.9816 7.98932 10.8549 7.99967 10.7357 8.0386C10.6164 8.07753 10.508 8.14395 10.4192 8.23249C10.3304 8.32104 10.2636 8.42923 10.2243 8.54833L9.97731 9.31033C9.92502 9.46798 9.83747 9.61162 9.72131 9.73033C9.60657 9.8468 9.46665 9.93541 9.31231 9.98933L8.53931 10.2413C8.38025 10.2952 8.2422 10.3978 8.1447 10.5346C8.04721 10.6713 7.99522 10.8353 7.99611 11.0032C7.99699 11.1712 8.0507 11.3346 8.14963 11.4703C8.24856 11.606 8.38769 11.7071 8.54731 11.7593L9.31031 12.0063C9.46917 12.0597 9.61358 12.149 9.73231 12.2673C9.85053 12.3856 9.93896 12.5302 9.99031 12.6893L10.2433 13.4633C10.2981 13.6198 10.4001 13.7554 10.5353 13.8513ZM9.62231 11.0583L9.44331 10.9993L9.62731 10.9353C9.92907 10.8304 10.2027 10.6576 10.4273 10.4303C10.6537 10.2013 10.8248 9.92359 10.9273 9.61833L10.9853 9.44033L11.0443 9.62133C11.1463 9.92803 11.3185 10.2067 11.5471 10.4352C11.7757 10.6636 12.0545 10.8356 12.3613 10.9373L12.5563 11.0003L12.3763 11.0593C12.0689 11.1615 11.7898 11.3342 11.5611 11.5636C11.3324 11.793 11.1606 12.0727 11.0593 12.3803L11.0003 12.5613L10.9423 12.3803C10.8409 12.0722 10.6687 11.792 10.4394 11.5625C10.2102 11.3329 9.93033 11.1602 9.62231 11.0583Z" fill="#424242"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.9 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.799805 3.99971C0.799805 2.79131 1.8498 1.89371 3.0798 1.33211C4.6378 0.684806 6.313 0.367334 7.9998 0.39971C9.68664 0.367334 11.3618 0.684806 12.9198 1.33211C14.1498 1.89371 15.1998 2.79131 15.1998 3.99971V10.1304C14.827 10.1594 14.4604 10.2471 14.1138 10.3906C14.0755 10.4066 14.0375 10.423 13.9998 10.4403V6.03971C13.6631 6.28732 13.301 6.49849 12.9198 6.66971C11.3616 7.3162 9.6864 7.63285 7.9998 7.59971C6.313 7.63209 4.6378 7.31461 3.0798 6.66731C2.69864 6.49686 2.33662 6.28648 1.9998 6.03971V15.9997C1.9998 16.4485 2.427 17.0497 3.5814 17.5753C4.98209 18.1502 6.48605 18.4308 7.9998 18.3997L8.02536 18.4002C8.03904 18.4647 8.05452 18.529 8.0718 18.593L7.15982 19.5098C7.13596 19.5337 7.11282 19.5582 7.09042 19.5832C5.71356 19.507 4.35728 19.198 3.0798 18.6673C1.8498 18.1057 0.799805 17.2081 0.799805 15.9997V3.99971ZM1.9998 3.99971C1.9998 4.44851 2.427 5.04971 3.5814 5.57531C4.98209 6.15018 6.48605 6.4308 7.9998 6.39971C9.5136 6.4308 11.0176 6.15018 12.4182 5.57531C13.5726 5.04971 13.9998 4.44851 13.9998 3.99971C13.9998 3.55091 13.5726 2.94971 12.4182 2.42411C11.0176 1.84924 9.5136 1.56863 7.9998 1.59971C6.48605 1.56863 4.98209 1.84924 3.5814 2.42411C2.427 2.94971 1.9998 3.55091 1.9998 3.99971ZM19.0373 11.0246C19.15 10.9122 19.2133 10.7595 19.2134 10.6003C19.2136 10.441 19.1504 10.2883 19.0379 10.1756C18.9254 10.0629 18.7728 9.99963 18.6136 9.99952C18.4543 9.9994 18.3016 10.0626 18.1889 10.175L16.7657 11.5982C16.7506 11.6187 16.7366 11.64 16.7237 11.6618C16.2658 11.3886 15.7297 11.2755 15.2004 11.3407C14.6711 11.4058 14.1785 11.6456 13.8005 12.0218L13.0805 12.7418C12.8603 12.9626 12.7366 13.2616 12.7366 13.5734C12.7366 13.8853 12.8603 14.1843 13.0805 14.405L14.8109 16.1318C15.0317 16.3525 15.331 16.4764 15.6431 16.4764C15.9552 16.4764 16.2546 16.3525 16.4753 16.1318L17.1953 15.4118C17.5718 15.0338 17.8117 14.541 17.8769 14.0114C17.942 13.4817 17.829 12.9456 17.5553 12.4874C17.5777 12.4753 17.599 12.4612 17.6189 12.4454L19.0373 11.0246ZM12.2317 15.2498C12.1225 15.1405 11.9928 15.054 11.8501 14.9948C11.7074 14.9356 11.5546 14.9053 11.4001 14.9053C11.2457 14.9053 11.0927 14.9356 10.95 14.9948C10.8073 15.054 10.6777 15.1405 10.5685 15.2498L9.84852 15.9698C9.47196 16.3478 9.23208 16.8406 9.16692 17.3702C9.10176 17.8998 9.21492 18.436 9.48852 18.8942C9.46632 18.9066 9.44508 18.9206 9.42492 18.9362L8.00652 20.3582C7.89722 20.4714 7.83674 20.6229 7.8381 20.7802C7.83947 20.9376 7.90258 21.088 8.01384 21.1993C8.12508 21.3105 8.27556 21.3736 8.43288 21.375C8.5902 21.3763 8.74176 21.3158 8.85492 21.2066L10.2769 19.7834C10.2926 19.7631 10.3072 19.7419 10.3201 19.7198C10.778 19.993 11.3141 20.1061 11.8434 20.0409C12.3727 19.9756 12.8653 19.736 13.2433 19.3598L13.9633 18.6398C14.184 18.419 14.3078 18.1197 14.3078 17.8076C14.3078 17.4955 14.184 17.1961 13.9633 16.9754L12.2317 15.2498Z" fill="#0078D4"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.9 KiB |
@@ -1,34 +0,0 @@
|
||||
<svg width="32" height="34" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 0.739258L16 1.04436V9.68622L11.2 10.8013L9.60002 12.9967V16.4479C9.60002 18.7669 10.8545 20.9045 12.879 22.0353L17.4036 24.5626L9.6 28.69L6.35592 29.1523L3.27902 27.4337C1.25445 26.3028 0 24.1652 0 21.8462V11.7591C0 9.43952 1.25512 7.30147 3.28055 6.17085L12.3174 1.12639L12.3121 1.13012L13 0.739258Z" fill="url(#paint0_radial_857_143948)"/>
|
||||
<path d="M13 0.739258L16 1.04436V9.68622L11.2 10.8013L9.60002 12.9967V16.4479C9.60002 18.7669 10.8545 20.9045 12.879 22.0353L17.4036 24.5626L9.6 28.69L6.35592 29.1523L3.27902 27.4337C1.25445 26.3028 0 24.1652 0 21.8462V11.7591C0 9.43952 1.25512 7.30147 3.28055 6.17085L12.3174 1.12639L12.3121 1.13012L13 0.739258Z" fill="url(#paint1_linear_857_143948)"/>
|
||||
<path d="M22.399 12.001L30.399 16.801L31.999 18.401V21.8452C31.999 24.1642 30.7446 26.3018 28.72 27.4327L19.12 32.7949C17.1804 33.8784 14.8177 33.8784 12.878 32.7949L3.27804 27.4327C3.09146 27.3284 2.91141 27.2157 2.73828 27.095L3.278 27.3965C5.21762 28.4799 7.58035 28.4799 9.51996 27.3965L19.12 22.0342C21.1445 20.9033 22.399 18.7657 22.399 16.4467V12.001Z" fill="url(#paint2_radial_857_143948)"/>
|
||||
<path d="M22.399 12.001L30.399 16.801L31.999 18.401V21.8452C31.999 24.1642 30.7446 26.3018 28.72 27.4327L19.12 32.7949C17.1804 33.8784 14.8177 33.8784 12.878 32.7949L3.27804 27.4327C3.09146 27.3284 2.91141 27.2157 2.73828 27.095L3.278 27.3965C5.21762 28.4799 7.58035 28.4799 9.51996 27.3965L19.12 22.0342C21.1445 20.9033 22.399 18.7657 22.399 16.4467V12.001Z" fill="url(#paint3_linear_857_143948)"/>
|
||||
<path d="M28.7191 6.17053L19.119 0.811705C17.1802 -0.270568 14.819 -0.270568 12.8802 0.811704L12.3151 1.1271C10.6239 2.31737 9.59961 4.26472 9.59961 6.36025V13.0461L12.8802 11.2149C14.819 10.1326 17.1802 10.1326 19.119 11.2149L28.7191 16.5737C30.6984 17.6786 31.9421 19.7456 31.9977 22.0039C31.999 21.9514 31.9996 21.8987 31.9996 21.8459V11.7588C31.9996 9.4392 30.7445 7.30115 28.7191 6.17053Z" fill="url(#paint4_radial_857_143948)"/>
|
||||
<path d="M28.7191 6.17053L19.119 0.811705C17.1802 -0.270568 14.819 -0.270568 12.8802 0.811704L12.3151 1.1271C10.6239 2.31737 9.59961 4.26472 9.59961 6.36025V13.0461L12.8802 11.2149C14.819 10.1326 17.1802 10.1326 19.119 11.2149L28.7191 16.5737C30.6984 17.6786 31.9421 19.7456 31.9977 22.0039C31.999 21.9514 31.9996 21.8987 31.9996 21.8459V11.7588C31.9996 9.4392 30.7445 7.30115 28.7191 6.17053Z" fill="url(#paint5_linear_857_143948)"/>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.5054 9.8837) rotate(112.544) scale(23.4519 19.3067)">
|
||||
<stop offset="0.206732" stop-color="#4995D0"/>
|
||||
<stop offset="0.875628" stop-color="#0078D4"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint1_linear_857_143948" x1="11.0625" y1="26.6174" x2="9.78695" y2="24.2436" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.9999" stop-color="#0078D4"/>
|
||||
<stop offset="1" stop-color="#0078D4" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint2_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.899 24.5214) rotate(-3.9995) scale(24.6197 15.4594)">
|
||||
<stop offset="0.140029" stop-color="#80C8FF"/>
|
||||
<stop offset="0.952721" stop-color="#0078D4"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint3_linear_857_143948" x1="26.8932" y1="15.5508" x2="25.5491" y2="17.8921" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.9999" stop-color="#3F8AC3"/>
|
||||
<stop offset="1" stop-color="#8C66BA" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint4_radial_857_143948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26.632 16.3878) rotate(-138.33) scale(22.8015 13.0047)">
|
||||
<stop stop-color="#7BC6FF"/>
|
||||
<stop offset="0.839255" stop-color="#0078D4"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint5_linear_857_143948" x1="9.59961" y1="8.71337" x2="12.2131" y2="8.71337" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.9999" stop-color="#0078D4"/>
|
||||
<stop offset="1" stop-color="#436DCD" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.9342 7.04998C15.4095 3.21975 11.8792 0.540074 8.04894 1.06475C6.10618 1.33087 4.46008 2.36951 3.37682 3.82964L3.25046 3.99997H6.49985C6.77599 3.99997 6.99985 4.22383 6.99985 4.49997C6.99985 4.77611 6.77599 4.99997 6.49985 4.99997H2.49985C2.22371 4.99997 1.99985 4.77611 1.99985 4.49997V0.499969C1.99985 0.223826 2.22371 -3.14998e-05 2.49985 -3.14998e-05C2.77599 -3.14998e-05 2.99985 0.223826 2.99985 0.499968V2.70729C4.22416 1.31847 5.93463 0.345036 7.91322 0.0740017C12.2906 -0.525627 16.3253 2.53686 16.9249 6.91426C17.5246 11.2917 14.4621 15.3263 10.0847 15.926C5.70727 16.5256 1.67259 13.4631 1.07296 9.08571C0.998819 8.54443 0.980672 8.00788 1.01426 7.48208C1.03186 7.2065 1.26953 6.99737 1.54511 7.01497C1.82069 7.03258 2.02982 7.27025 2.01222 7.54583C1.98287 8.00544 1.99867 8.47516 2.06371 8.94999C2.58839 12.7802 6.11873 15.4599 9.94896 14.9352C13.7792 14.4105 16.4589 10.8802 15.9342 7.04998Z" fill="#424242"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="12" height="20" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 5.5V4.75H0.75V5.5H0ZM0 3.25V2.5H0.75V3.25H0ZM2.25 3.25V2.5H12V3.25H2.25ZM0 1V0.25H0.75V1H0ZM2.25 0.25H12V1H2.25V0.25ZM2.25 5.5V4.75H12V5.5H2.25ZM0 7.75V7H0.75V7.75H0ZM2.25 7.75V7H12V7.75H2.25Z" fill="#0078D4"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 325 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 4C0 3.30945 0.3153 2.70664 0.77423 2.22025C1.2294 1.73784 1.85301 1.33745 2.56668 1.01752C3.99575 0.3769 5.91738 0 8 0C10.0826 0 12.0042 0.3769 13.4333 1.01752C14.147 1.33745 14.7706 1.73784 15.2258 2.22025C15.6847 2.70664 16 3.30945 16 4V10.2572C15.5537 9.8886 15.0482 9.589 14.5 9.3749V6.39242C14.1791 6.61282 13.8194 6.80942 13.4333 6.98248C12.0042 7.6231 10.0826 8 8 8C5.91738 8 3.99575 7.6231 2.56668 6.98248C2.18063 6.80942 1.82094 6.61282 1.5 6.39242V16C1.5 16.2069 1.59044 16.4591 1.86525 16.7503C2.14382 17.0456 2.58195 17.3455 3.18027 17.6137C4.37519 18.1494 6.0786 18.5 8 18.5C8.2396 18.5 8.4759 18.4945 8.7081 18.484C9.3109 19.0579 10.0438 19.4964 10.858 19.7507C9.9673 19.9127 9.0023 20 8 20C5.91738 20 3.99575 19.6231 2.56668 18.9825C1.85301 18.6626 1.2294 18.2622 0.77423 17.7798C0.3153 17.2934 0 16.6906 0 16V4ZM1.5 4C1.5 4.20691 1.59044 4.45909 1.86525 4.75034C2.14382 5.04559 2.58195 5.3455 3.18027 5.61372C4.37519 6.14937 6.0786 6.5 8 6.5C9.9214 6.5 11.6248 6.14937 12.8197 5.61372C13.418 5.3455 13.8562 5.04559 14.1348 4.75034C14.4096 4.45909 14.5 4.20691 14.5 4C14.5 3.79309 14.4096 3.54091 14.1348 3.24966C13.8562 2.95441 13.418 2.65449 12.8197 2.38628C11.6248 1.85063 9.9214 1.5 8 1.5C6.0786 1.5 4.37519 1.85063 3.18027 2.38628C2.58195 2.65449 2.14382 2.95441 1.86525 3.24966C1.59044 3.54091 1.5 3.79309 1.5 4ZM12.5 19C13.4719 19 14.3718 18.6919 15.1074 18.1681L17.7197 20.7803C18.0126 21.0732 18.4874 21.0732 18.7803 20.7803C19.0732 20.4874 19.0732 20.0126 18.7803 19.7197L16.1681 17.1074C16.6919 16.3718 17 15.4719 17 14.5C17 12.0147 14.9853 10 12.5 10C10.0147 10 8 12.0147 8 14.5C8 16.9853 10.0147 19 12.5 19ZM12.5 17.5C10.8431 17.5 9.5 16.1569 9.5 14.5C9.5 12.8431 10.8431 11.5 12.5 11.5C14.1569 11.5 15.5 12.8431 15.5 14.5C15.5 16.1569 14.1569 17.5 12.5 17.5Z" fill="#0078D4"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -1,4 +0,0 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="#57A300"/>
|
||||
<path d="M3.10891 7.25414C3.04416 7.18502 3.01091 7.09402 3.01441 6.99952C3.01791 6.90414 3.05816 6.81664 3.12816 6.75102L3.85879 6.07552C3.92529 6.01514 4.01016 5.98189 4.09854 5.98189C4.19654 5.98189 4.29104 6.02302 4.35754 6.09477L6.22654 8.10027L9.55766 3.83464C9.62504 3.74802 9.72653 3.69727 9.83678 3.69727C9.91553 3.69727 9.98991 3.72264 10.0529 3.77077L10.8457 4.38239C10.997 4.49439 11.0294 4.71227 10.9157 4.86714L6.65616 10.321C6.49079 10.5328 6.17491 10.5468 5.99116 10.3499L3.10891 7.25414Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 756 B |
@@ -650,4 +650,4 @@ tr:hover td.nameColumnText {
|
||||
|
||||
.context-menu-item.icon-customize-columns {
|
||||
background-image: url(../../images/Options.svg);
|
||||
}
|
||||
}
|
||||
19
package-lock.json
generated
@@ -9,7 +9,7 @@
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@azure/arm-cosmosdb": "9.1.0",
|
||||
"@azure/cosmos": "3.17.4-beta.1",
|
||||
"@azure/cosmos": "3.16.2",
|
||||
"@azure/cosmos-language-service": "0.0.5",
|
||||
"@azure/identity": "1.2.1",
|
||||
"@azure/ms-rest-nodeauth": "3.0.7",
|
||||
@@ -396,12 +396,10 @@
|
||||
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
|
||||
},
|
||||
"node_modules/@azure/cosmos": {
|
||||
"version": "3.17.4-beta.1",
|
||||
"resolved": "https://msazure.pkgs.visualstudio.com/_packaging/AzurePortal/npm/registry/@azure/cosmos/-/cosmos-3.17.4-beta.1.tgz",
|
||||
"integrity": "sha1-axE6QafE98LT4IOEeug1NB2hC74=",
|
||||
"license": "MIT",
|
||||
"version": "3.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-3.16.2.tgz",
|
||||
"integrity": "sha512-sceY5LWj0BHGj8PSyaVCfDRQLVZyoCfIY78kyIROJVEw0k+p9XFs8fhpykN8JklkCftL0WlaVY+X25SQwnhZsw==",
|
||||
"dependencies": {
|
||||
"@azure/abort-controller": "^1.0.0",
|
||||
"@azure/core-auth": "^1.3.0",
|
||||
"@azure/core-rest-pipeline": "^1.2.0",
|
||||
"@azure/core-tracing": "^1.0.0",
|
||||
@@ -416,7 +414,7 @@
|
||||
"uuid": "^8.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@azure/cosmos-language-service": {
|
||||
@@ -31472,11 +31470,10 @@
|
||||
}
|
||||
},
|
||||
"@azure/cosmos": {
|
||||
"version": "3.17.4-beta.1",
|
||||
"resolved": "https://msazure.pkgs.visualstudio.com/_packaging/AzurePortal/npm/registry/@azure/cosmos/-/cosmos-3.17.4-beta.1.tgz",
|
||||
"integrity": "sha1-axE6QafE98LT4IOEeug1NB2hC74=",
|
||||
"version": "3.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-3.16.2.tgz",
|
||||
"integrity": "sha512-sceY5LWj0BHGj8PSyaVCfDRQLVZyoCfIY78kyIROJVEw0k+p9XFs8fhpykN8JklkCftL0WlaVY+X25SQwnhZsw==",
|
||||
"requires": {
|
||||
"@azure/abort-controller": "^1.0.0",
|
||||
"@azure/core-auth": "^1.3.0",
|
||||
"@azure/core-rest-pipeline": "^1.2.0",
|
||||
"@azure/core-tracing": "^1.0.0",
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"@azure/arm-cosmosdb": "9.1.0",
|
||||
"@azure/cosmos": "3.17.4-beta.1",
|
||||
"@azure/cosmos": "3.16.2",
|
||||
"@azure/cosmos-language-service": "0.0.5",
|
||||
"@azure/identity": "1.2.1",
|
||||
"@azure/ms-rest-nodeauth": "3.0.7",
|
||||
|
||||
@@ -7,7 +7,6 @@ interface QueryResponse {
|
||||
hasMoreResults: boolean;
|
||||
activityId: string;
|
||||
requestCharge: number;
|
||||
indexMetrics: string;
|
||||
}
|
||||
|
||||
export interface MinimalQueryIterator {
|
||||
@@ -31,7 +30,6 @@ export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex
|
||||
headers,
|
||||
activityId: response.activityId,
|
||||
requestCharge: response.requestCharge,
|
||||
indexMetrics: response.indexMetrics,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
import * as Cosmos from "@azure/cosmos";
|
||||
import { userContext } from "UserContext";
|
||||
|
||||
let _sampleDataclient: Cosmos.CosmosClient;
|
||||
|
||||
export function sampleDataClient(): Cosmos.CosmosClient {
|
||||
if (_sampleDataclient) {
|
||||
return _sampleDataclient;
|
||||
}
|
||||
|
||||
const sampleDataConnectionInfo = userContext.sampleDataConnectionInfo;
|
||||
const options: Cosmos.CosmosClientOptions = {
|
||||
endpoint: sampleDataConnectionInfo.accountEndpoint,
|
||||
tokenProvider: async () => {
|
||||
const sampleDataConnectionInfo = userContext.sampleDataConnectionInfo;
|
||||
return Promise.resolve(sampleDataConnectionInfo.resourceToken);
|
||||
},
|
||||
connectionPolicy: {
|
||||
enableEndpointDiscovery: false,
|
||||
},
|
||||
userAgentSuffix: "Azure Portal",
|
||||
};
|
||||
|
||||
_sampleDataclient = new Cosmos.CosmosClient(options);
|
||||
return _sampleDataclient;
|
||||
}
|
||||
@@ -1,39 +1,13 @@
|
||||
import { CosmosClient } from "@azure/cosmos";
|
||||
import { sampleDataClient } from "Common/SampleDataClient";
|
||||
import { userContext } from "UserContext";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
|
||||
import { client } from "../CosmosClient";
|
||||
import { handleError } from "../ErrorHandlingUtils";
|
||||
import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
|
||||
|
||||
export async function readCollection(databaseId: string, collectionId: string): Promise<DataModels.Collection> {
|
||||
const cosmosClient = client();
|
||||
return await readCollectionInternal(cosmosClient, databaseId, collectionId);
|
||||
}
|
||||
|
||||
export async function readSampleCollection(): Promise<DataModels.Collection> {
|
||||
const cosmosClient = sampleDataClient();
|
||||
|
||||
const sampleDataConnectionInfo = userContext.sampleDataConnectionInfo;
|
||||
const databaseId = sampleDataConnectionInfo?.databaseId;
|
||||
const collectionId = sampleDataConnectionInfo?.collectionId;
|
||||
|
||||
if (!databaseId || !collectionId) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return await readCollectionInternal(cosmosClient, databaseId, collectionId);
|
||||
}
|
||||
|
||||
export async function readCollectionInternal(
|
||||
cosmosClient: CosmosClient,
|
||||
databaseId: string,
|
||||
collectionId: string
|
||||
): Promise<DataModels.Collection> {
|
||||
let collection: DataModels.Collection;
|
||||
const clearMessage = logConsoleProgress(`Querying container ${collectionId}`);
|
||||
try {
|
||||
const response = await cosmosClient.database(databaseId).container(collectionId).read();
|
||||
const response = await client().database(databaseId).container(collectionId).read();
|
||||
collection = response.resource as DataModels.Collection;
|
||||
} catch (error) {
|
||||
handleError(error, "ReadCollection", `Error while querying container ${collectionId}`);
|
||||
|
||||
@@ -45,7 +45,6 @@ export interface QueryResults extends QueryResultsMetadata {
|
||||
roundTrips?: number;
|
||||
headers?: any;
|
||||
queryMetrics?: QueryMetrics;
|
||||
indexMetrics?: string;
|
||||
}
|
||||
|
||||
export interface Button {
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
import {
|
||||
Checkbox,
|
||||
CheckboxVisibility,
|
||||
DetailsHeader,
|
||||
DetailsList,
|
||||
IDetailsHeaderProps,
|
||||
IDetailsListCheckboxProps,
|
||||
IRenderFunction,
|
||||
Stack,
|
||||
Text
|
||||
} from "@fluentui/react";
|
||||
import React from "react";
|
||||
|
||||
interface IndexAdvisorComponentProps { };
|
||||
|
||||
export const IndexAdvisorComponent: React.FC = (): JSX.Element => {
|
||||
|
||||
const onRenderCheckbox = (props: IDetailsListCheckboxProps, _defaultRender?: IRenderFunction<IDetailsListCheckboxProps>) => {
|
||||
return <Checkbox {...props} />;
|
||||
};
|
||||
|
||||
const onRenderDetailsHeader = (props: IDetailsHeaderProps, _defaultRender?: IRenderFunction<IDetailsHeaderProps>) => {
|
||||
return <DetailsHeader {...props} ariaLabelForSelectAllCheckbox="Select all" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text>
|
||||
Here is an analysis on the indexes utilized for executing this query.
|
||||
Based on the analysis, Cosmos DB recommends adding the selected index(es) to your indexing policy to
|
||||
optimize your query performance.
|
||||
</Text>
|
||||
<Text>Indexes analysis</Text>
|
||||
<DetailsList
|
||||
items={[]}
|
||||
groups={[]}
|
||||
columns={[]}
|
||||
onRenderCheckbox={onRenderCheckbox}
|
||||
checkboxVisibility={CheckboxVisibility.always}
|
||||
onRenderDetailsHeader={onRenderDetailsHeader}
|
||||
groupProps={{
|
||||
showEmptyGroups: true,
|
||||
}}/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -133,10 +133,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
|
||||
if (isDirty(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline)) {
|
||||
isDiscardable = true;
|
||||
if (
|
||||
this.props.softAllowedMaximumThroughput
|
||||
? this.props.maxAutoPilotThroughput <= this.props.softAllowedMaximumThroughput &&
|
||||
AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)
|
||||
: AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)
|
||||
this.props.maxAutoPilotThroughput <= this.props.softAllowedMaximumThroughput &&
|
||||
AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)
|
||||
) {
|
||||
isSaveable = true;
|
||||
}
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
import { Link } from "@fluentui/react/lib/Link";
|
||||
import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
|
||||
import { IGalleryItem } from "Juno/JunoClient";
|
||||
import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
|
||||
import * as ko from "knockout";
|
||||
import React from "react";
|
||||
import _ from "underscore";
|
||||
import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
|
||||
import shallow from "zustand/shallow";
|
||||
import { AuthType } from "../AuthType";
|
||||
import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
|
||||
import * as Constants from "../Common/Constants";
|
||||
import { Areas, ConnectionStatusType, HttpStatusCodes, Notebook, PoolIdType } from "../Common/Constants";
|
||||
import { readCollection } from "../Common/dataAccess/readCollection";
|
||||
import { readDatabases } from "../Common/dataAccess/readDatabases";
|
||||
import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
|
||||
import * as Logger from "../Common/Logger";
|
||||
import { QueriesClient } from "../Common/QueriesClient";
|
||||
import { readCollection, readSampleCollection } from "../Common/dataAccess/readCollection";
|
||||
import { readDatabases } from "../Common/dataAccess/readDatabases";
|
||||
import * as DataModels from "../Contracts/DataModels";
|
||||
import { ContainerConnectionInfo, IPhoenixServiceInfo, IProvisionData, IResponse } from "../Contracts/DataModels";
|
||||
import * as ViewModels from "../Contracts/ViewModels";
|
||||
import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
|
||||
import { useSidePanel } from "../hooks/useSidePanel";
|
||||
import { useTabs } from "../hooks/useTabs";
|
||||
import { PhoenixClient } from "../Phoenix/PhoenixClient";
|
||||
import * as ExplorerSettings from "../Shared/ExplorerSettings";
|
||||
import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../UserContext";
|
||||
import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
|
||||
import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
|
||||
import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
|
||||
import { stringToBlob } from "../Utils/BlobUtils";
|
||||
import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
|
||||
import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
|
||||
import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
|
||||
import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
|
||||
import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
|
||||
import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
|
||||
import { useSidePanel } from "../hooks/useSidePanel";
|
||||
import { useTabs } from "../hooks/useTabs";
|
||||
import "./ComponentRegisterer";
|
||||
import { DialogProps, useDialog } from "./Controls/Dialog";
|
||||
import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
|
||||
@@ -1272,26 +1272,5 @@ export default class Explorer {
|
||||
if (useNotebook.getState().isPhoenixNotebooks) {
|
||||
await this.initNotebooks(userContext.databaseAccount);
|
||||
}
|
||||
|
||||
await this.refreshSampleData();
|
||||
}
|
||||
|
||||
public async refreshSampleData(): Promise<void> {
|
||||
if (!userContext.sampleDataConnectionInfo) {
|
||||
return;
|
||||
}
|
||||
|
||||
const collection: DataModels.Collection = await readSampleCollection();
|
||||
if (!collection) {
|
||||
return;
|
||||
}
|
||||
|
||||
const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
|
||||
if (!databaseId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection);
|
||||
useDatabases.setState({ sampleDataResourceTokenCollection });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -205,7 +205,6 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
|
||||
role="button"
|
||||
onClick={onAddNewProperty}
|
||||
onKeyPress={(event: React.KeyboardEvent<HTMLSpanElement>) => onAddNewPropertyKeyPress(event)}
|
||||
aria-label="Add property"
|
||||
>
|
||||
<img className="refreshcol rightPaneAddPropertyImg" src={AddIcon} alt="Add property" /> Add Property
|
||||
</span>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { Text, TextField } from "@fluentui/react";
|
||||
import { useBoolean } from "@fluentui/react-hooks";
|
||||
import { Areas } from "Common/Constants";
|
||||
import { deleteDatabase } from "Common/dataAccess/deleteDatabase";
|
||||
import DeleteFeedback from "Common/DeleteFeedback";
|
||||
import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
|
||||
import { deleteDatabase } from "Common/dataAccess/deleteDatabase";
|
||||
import { Collection, Database } from "Contracts/ViewModels";
|
||||
import { useSidePanel } from "hooks/useSidePanel";
|
||||
import { useTabs } from "hooks/useTabs";
|
||||
import React, { FunctionComponent, useState } from "react";
|
||||
import { DefaultExperienceUtility } from "Shared/DefaultExperienceUtility";
|
||||
import { Action, ActionModifiers } from "Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "UserContext";
|
||||
import { logConsoleError } from "Utils/NotificationConsoleUtils";
|
||||
import { useSidePanel } from "hooks/useSidePanel";
|
||||
import { useTabs } from "hooks/useTabs";
|
||||
import React, { FunctionComponent, useState } from "react";
|
||||
import { useDatabases } from "../useDatabases";
|
||||
import { useSelectedNode } from "../useSelectedNode";
|
||||
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
|
||||
@@ -36,13 +36,8 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
|
||||
|
||||
const submit = async (): Promise<void> => {
|
||||
if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
|
||||
setFormError(
|
||||
`Input database name "${databaseInput}" does not match the selected database "${selectedDatabase.id()}"`
|
||||
);
|
||||
setFormError("Input database name does not match the selected database");
|
||||
logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
|
||||
logConsoleError(
|
||||
`Input database name "${databaseInput}" does not match the selected database "${selectedDatabase.id()}"`
|
||||
);
|
||||
return;
|
||||
}
|
||||
setFormError("");
|
||||
|
||||
@@ -295,9 +295,8 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
|
||||
className="addButtonEntiy"
|
||||
tabIndex={0}
|
||||
onKeyPress={handlekeypressaddentity}
|
||||
aria-label="Add Property"
|
||||
>
|
||||
<Image {...imageProps} src={AddPropertyIcon} alt="Add Property" />
|
||||
<Image {...imageProps} src={AddPropertyIcon} alt="Add Entity" />
|
||||
<Text className="addNewParamStyle">{getAddButtonLabel(userContext.apiType)}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
@@ -26,7 +26,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
|
||||
className="panelMainContent"
|
||||
>
|
||||
<Stack
|
||||
aria-label="Add Property"
|
||||
className="addButtonEntiy"
|
||||
horizontal={true}
|
||||
onClick={[Function]}
|
||||
@@ -34,21 +33,20 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
|
||||
tabIndex={0}
|
||||
>
|
||||
<div
|
||||
aria-label="Add Property"
|
||||
className="ms-Stack addButtonEntiy css-53"
|
||||
onClick={[Function]}
|
||||
onKeyPress={[Function]}
|
||||
tabIndex={0}
|
||||
>
|
||||
<StyledImageBase
|
||||
alt="Add Property"
|
||||
alt="Add Entity"
|
||||
height={30}
|
||||
key=".0:$.0"
|
||||
src=""
|
||||
width={16}
|
||||
>
|
||||
<ImageBase
|
||||
alt="Add Property"
|
||||
alt="Add Entity"
|
||||
height={30}
|
||||
src=""
|
||||
styles={[Function]}
|
||||
@@ -337,7 +335,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
|
||||
}
|
||||
>
|
||||
<img
|
||||
alt="Add Property"
|
||||
alt="Add Entity"
|
||||
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-55"
|
||||
key="fabricImage"
|
||||
onError={[Function]}
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import { any } from "underscore";
|
||||
import { CopyPopup } from "./CopyPopup";
|
||||
|
||||
describe("Copy Popup snapshot test", () => {
|
||||
it("should render when showCopyPopup is true", () => {
|
||||
const wrapper = shallow(<CopyPopup showCopyPopup={true} setShowCopyPopup={() => any} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,63 +0,0 @@
|
||||
import { IconButton, Image, Stack, Text } from "@fluentui/react";
|
||||
import React, { Dispatch, SetStateAction } from "react";
|
||||
import Success from "../../../../images/successfulPopup.svg";
|
||||
|
||||
export const CopyPopup = ({
|
||||
showCopyPopup,
|
||||
setShowCopyPopup,
|
||||
}: {
|
||||
showCopyPopup: boolean;
|
||||
setShowCopyPopup: Dispatch<SetStateAction<boolean>>;
|
||||
}): JSX.Element => {
|
||||
const closePopup = () => {
|
||||
setShowCopyPopup(false);
|
||||
};
|
||||
|
||||
return showCopyPopup ? (
|
||||
<Stack
|
||||
style={{
|
||||
position: "fixed",
|
||||
width: 345,
|
||||
height: 66,
|
||||
padding: 10,
|
||||
gap: 5,
|
||||
top: 75,
|
||||
right: 20,
|
||||
background: "#FFFFFF",
|
||||
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.16)",
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
horizontal
|
||||
verticalAlign="center"
|
||||
style={{ display: "flex", justifyContent: "space-between", padding: "5px, 2px, 0px, 0px" }}
|
||||
>
|
||||
<Stack horizontal verticalAlign="center" style={{ display: "flex", gap: 10 }}>
|
||||
<Image style={{ width: 15, height: 15 }} src={Success} />
|
||||
<Text>
|
||||
<b>Code copied successfully</b>
|
||||
</Text>
|
||||
</Stack>
|
||||
<IconButton
|
||||
styles={{
|
||||
root: {
|
||||
border: "none",
|
||||
backgroundColor: "transparent",
|
||||
padding: 0,
|
||||
selectors: {
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
iconProps={{ iconName: "Cancel" }}
|
||||
onClick={closePopup}
|
||||
/>
|
||||
</Stack>
|
||||
<Text style={{ marginTop: -10 }}>The query has been copied to the clipboard</Text>
|
||||
</Stack>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import { any } from "underscore";
|
||||
import { DeletePopup } from "./DeletePopup";
|
||||
|
||||
describe("Delete Popup snapshot test", () => {
|
||||
it("should render when showDeletePopup is true", () => {
|
||||
const wrapper = shallow(<DeletePopup showDeletePopup={true} setShowDeletePopup={() => any} setQuery={() => any} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,38 +0,0 @@
|
||||
import { DefaultButton, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
|
||||
import React, { Dispatch, SetStateAction } from "react";
|
||||
|
||||
export const DeletePopup = ({
|
||||
showDeletePopup,
|
||||
setShowDeletePopup,
|
||||
setQuery,
|
||||
}: {
|
||||
showDeletePopup: boolean;
|
||||
setShowDeletePopup: Dispatch<SetStateAction<boolean>>;
|
||||
setQuery: Dispatch<SetStateAction<string>>;
|
||||
}): JSX.Element => {
|
||||
const deleteCode = () => {
|
||||
setQuery("");
|
||||
setShowDeletePopup(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={showDeletePopup} styles={{ main: { minHeight: "122px", minWidth: "880px" } }}>
|
||||
<Stack style={{ padding: "16px 24px", height: "auto" }}>
|
||||
<Text style={{ height: 24, fontSize: "18px" }}>
|
||||
<b>Delete code?</b>
|
||||
</Text>
|
||||
<Text style={{ marginTop: 10, marginBottom: 20 }}>
|
||||
This will clear the query from the query builder pane along with all comments and also reset the prompt pane
|
||||
</Text>
|
||||
<Stack horizontal tokens={{ childrenGap: 10 }} horizontalAlign="start">
|
||||
<PrimaryButton style={{ padding: "0px 20px", height: 24 }} onClick={deleteCode}>
|
||||
Delete
|
||||
</PrimaryButton>
|
||||
<DefaultButton style={{ padding: "0px 20px", height: 24 }} onClick={() => setShowDeletePopup(false)}>
|
||||
Close
|
||||
</DefaultButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -1,88 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] = `
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"background": "#FFFFFF",
|
||||
"boxShadow": "0 2px 6px rgba(0, 0, 0, 0.16)",
|
||||
"gap": 5,
|
||||
"height": 66,
|
||||
"padding": 10,
|
||||
"position": "fixed",
|
||||
"right": 20,
|
||||
"top": 75,
|
||||
"width": 345,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "space-between",
|
||||
"padding": "5px, 2px, 0px, 0px",
|
||||
}
|
||||
}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"gap": 10,
|
||||
}
|
||||
}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 15,
|
||||
"width": 15,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text>
|
||||
<b>
|
||||
Code copied successfully
|
||||
</b>
|
||||
</Text>
|
||||
</Stack>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Cancel",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"backgroundColor": "transparent",
|
||||
"border": "none",
|
||||
"padding": 0,
|
||||
"selectors": Object {
|
||||
"&:focus": Object {
|
||||
"outline": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"marginTop": -10,
|
||||
}
|
||||
}
|
||||
>
|
||||
The query has been copied to the clipboard
|
||||
</Text>
|
||||
</Stack>
|
||||
`;
|
||||
@@ -1,79 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Delete Popup snapshot test should render when showDeletePopup is true 1`] = `
|
||||
<Modal
|
||||
isOpen={true}
|
||||
styles={
|
||||
Object {
|
||||
"main": Object {
|
||||
"minHeight": "122px",
|
||||
"minWidth": "880px",
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"height": "auto",
|
||||
"padding": "16px 24px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "18px",
|
||||
"height": 24,
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
Delete code?
|
||||
</b>
|
||||
</Text>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": 20,
|
||||
"marginTop": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
This will clear the query from the query builder pane along with all comments and also reset the prompt pane
|
||||
</Text>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
horizontalAlign="start"
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"height": 24,
|
||||
"padding": "0px 20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</CustomizedPrimaryButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"height": 24,
|
||||
"padding": "0px 20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Close
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
`;
|
||||
@@ -3,9 +3,7 @@ import { FeedOptions } from "@azure/cosmos";
|
||||
import {
|
||||
Callout,
|
||||
CommandBarButton,
|
||||
DefaultButton,
|
||||
DirectionalHint,
|
||||
IButtonStyles,
|
||||
IconButton,
|
||||
Image,
|
||||
Link,
|
||||
@@ -31,24 +29,16 @@ import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
|
||||
import Explorer from "Explorer/Explorer";
|
||||
import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
|
||||
import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane";
|
||||
import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
|
||||
import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
|
||||
import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
|
||||
import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/SamplePrompts/SamplePrompts";
|
||||
import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
|
||||
import { userContext } from "UserContext";
|
||||
import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
|
||||
import { useQueryCopilot } from "hooks/useQueryCopilot";
|
||||
import { useSidePanel } from "hooks/useSidePanel";
|
||||
import React, { useState } from "react";
|
||||
import SplitterLayout from "react-splitter-layout";
|
||||
import CopilotIcon from "../../../images/Copilot.svg";
|
||||
import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
|
||||
import HintIcon from "../../../images/Hint.svg";
|
||||
import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
|
||||
import RecentIcon from "../../../images/Recent.svg";
|
||||
import SamplePromptsIcon from "../../../images/SamplePromptsIcon.svg";
|
||||
import SaveQueryIcon from "../../../images/save-cosmos.svg";
|
||||
import { useTabs } from "../../hooks/useTabs";
|
||||
|
||||
interface QueryCopilotTabProps {
|
||||
initialInput: string;
|
||||
@@ -63,17 +53,12 @@ interface GenerateSQLQueryResponse {
|
||||
generateEnd: string;
|
||||
}
|
||||
|
||||
const promptStyles: IButtonStyles = {
|
||||
root: { border: 0, selectors: { ":hover": { outline: "1px dashed #605e5c" } } },
|
||||
label: { fontWeight: 400, textAlign: "left", paddingLeft: 8 },
|
||||
};
|
||||
|
||||
export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
|
||||
initialInput,
|
||||
explorer,
|
||||
}: QueryCopilotTabProps): JSX.Element => {
|
||||
const hideFeedbackModalForLikedQueries = useQueryCopilot((state) => state.hideFeedbackModalForLikedQueries);
|
||||
const [userPrompt, setUserPrompt] = useState<string>(initialInput || "");
|
||||
const [userInput, setUserInput] = useState<string>(initialInput || "");
|
||||
const [generatedQuery, setGeneratedQuery] = useState<string>("");
|
||||
const [query, setQuery] = useState<string>("");
|
||||
const [selectedQuery, setSelectedQuery] = useState<string>("");
|
||||
@@ -81,56 +66,17 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
|
||||
const [isExecuting, setIsExecuting] = useState<boolean>(false);
|
||||
const [likeQuery, setLikeQuery] = useState<boolean>();
|
||||
const [showCallout, setShowCallout] = useState<boolean>(false);
|
||||
const [showSamplePrompts, setShowSamplePrompts] = useState<boolean>(false);
|
||||
const [queryIterator, setQueryIterator] = useState<MinimalQueryIterator>();
|
||||
const [queryResults, setQueryResults] = useState<QueryResults>();
|
||||
const [errorMessage, setErrorMessage] = useState<string>("");
|
||||
const [isSamplePromptsOpen, setIsSamplePromptsOpen] = useState<boolean>(false);
|
||||
const [showDeletePopup, setShowDeletePopup] = useState<boolean>(false);
|
||||
const [showFeedbackBar, setShowFeedbackBar] = useState<boolean>(false);
|
||||
const [showCopyPopup, setshowCopyPopup] = useState<boolean>(false);
|
||||
|
||||
const sampleProps: SamplePromptsProps = {
|
||||
isSamplePromptsOpen: isSamplePromptsOpen,
|
||||
setIsSamplePromptsOpen: setIsSamplePromptsOpen,
|
||||
setTextBox: setUserPrompt,
|
||||
};
|
||||
|
||||
const copyGeneratedCode = () => {
|
||||
if (!query) {
|
||||
return;
|
||||
}
|
||||
const queryElement = document.createElement("textarea");
|
||||
queryElement.value = query;
|
||||
document.body.appendChild(queryElement);
|
||||
queryElement.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(queryElement);
|
||||
|
||||
setshowCopyPopup(true);
|
||||
setTimeout(() => {
|
||||
setshowCopyPopup(false);
|
||||
}, 6000);
|
||||
};
|
||||
|
||||
const cachedHistoriesString = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotHistories`);
|
||||
const cachedHistories = cachedHistoriesString?.split(",");
|
||||
const [histories, setHistories] = useState<string[]>(cachedHistories || []);
|
||||
|
||||
const updateHistories = (): void => {
|
||||
const newHistories = histories.length < 3 ? [userPrompt, ...histories] : [userPrompt, histories[1], histories[2]];
|
||||
setHistories(newHistories);
|
||||
localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join(","));
|
||||
};
|
||||
const generateSQLQuery = async (): Promise<void> => {
|
||||
try {
|
||||
setIsGeneratingQuery(true);
|
||||
useTabs.getState().setIsTabExecuting(true);
|
||||
const payload = {
|
||||
containerSchema: QueryCopilotSampleContainerSchema,
|
||||
userPrompt: userPrompt,
|
||||
userPrompt: userInput,
|
||||
};
|
||||
setShowDeletePopup(false);
|
||||
const response = await fetch("https://copilotorchestrater.azurewebsites.net/generateSQLQuery", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
@@ -141,9 +87,10 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
|
||||
|
||||
const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json();
|
||||
if (generateSQLQueryResponse?.sql) {
|
||||
let query = `-- **Prompt:** ${userPrompt}\r\n`;
|
||||
let query = `-- ${userInput}\r\n`;
|
||||
if (generateSQLQueryResponse.explanation) {
|
||||
query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`;
|
||||
query += "-- **Explanation of query**\r\n";
|
||||
query += `-- ${generateSQLQueryResponse.explanation}\r\n`;
|
||||
}
|
||||
query += generateSQLQueryResponse.sql;
|
||||
setQuery(query);
|
||||
@@ -154,8 +101,6 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
|
||||
throw error;
|
||||
} finally {
|
||||
setIsGeneratingQuery(false);
|
||||
useTabs.getState().setIsTabExecuting(false);
|
||||
setShowFeedbackBar(true);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -174,7 +119,6 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
|
||||
const queryDocumentsPerPage = async (firstItemIndex: number, queryIterator: MinimalQueryIterator): Promise<void> => {
|
||||
try {
|
||||
setIsExecuting(true);
|
||||
useTabs.getState().setIsTabExecuting(true);
|
||||
const queryResults: QueryResults = await queryPagesUntilContentPresent(
|
||||
firstItemIndex,
|
||||
async (firstItemIndex: number) =>
|
||||
@@ -189,7 +133,6 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
|
||||
handleError(errorMessage, "executeQueryCopilotTab");
|
||||
} finally {
|
||||
setIsExecuting(false);
|
||||
useTabs.getState().setIsTabExecuting(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -214,22 +157,19 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
|
||||
hasPopup: false,
|
||||
};
|
||||
|
||||
const samplePromptsBtn = {
|
||||
iconSrc: SamplePromptsIcon,
|
||||
iconAlt: "Sample Prompts",
|
||||
onCommandClick: () => setIsSamplePromptsOpen(true),
|
||||
commandButtonLabel: "Sample Prompts",
|
||||
ariaLabel: "Sample Prompts",
|
||||
hasPopup: false,
|
||||
};
|
||||
|
||||
return [executeQueryBtn, saveQueryBtn, samplePromptsBtn];
|
||||
return [executeQueryBtn, saveQueryBtn];
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
useCommandBar.getState().setContextButtons(getCommandbarButtons());
|
||||
}, [query, selectedQuery]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (initialInput) {
|
||||
generateSQLQuery();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack className="tab-pane" style={{ padding: 24, width: "100%", height: "100%" }}>
|
||||
<Stack horizontal verticalAlign="center">
|
||||
@@ -238,122 +178,19 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
|
||||
</Stack>
|
||||
<Stack horizontal verticalAlign="center" style={{ marginTop: 16, width: "100%" }}>
|
||||
<TextField
|
||||
id="naturalLanguageInput"
|
||||
value={userPrompt}
|
||||
onChange={(_, newValue) => setUserPrompt(newValue)}
|
||||
value={userInput}
|
||||
onChange={(_, newValue) => setUserInput(newValue)}
|
||||
style={{ lineHeight: 30 }}
|
||||
styles={{ root: { width: "95%" } }}
|
||||
styles={{ root: { width: "90%" } }}
|
||||
disabled={isGeneratingQuery}
|
||||
onClick={() => setShowSamplePrompts(true)}
|
||||
/>
|
||||
<IconButton
|
||||
iconProps={{ iconName: "Send" }}
|
||||
disabled={isGeneratingQuery}
|
||||
style={{ marginLeft: 8 }}
|
||||
onClick={() => {
|
||||
updateHistories();
|
||||
generateSQLQuery();
|
||||
}}
|
||||
onClick={() => generateSQLQuery()}
|
||||
/>
|
||||
{isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
|
||||
{showSamplePrompts && (
|
||||
<Callout
|
||||
styles={{ root: { minWidth: 400 } }}
|
||||
style={{ padding: "8px 0" }}
|
||||
target="#naturalLanguageInput"
|
||||
isBeakVisible={false}
|
||||
onDismiss={() => setShowSamplePrompts(false)}
|
||||
directionalHint={DirectionalHint.bottomLeftEdge}
|
||||
>
|
||||
<Stack>
|
||||
{histories?.length > 0 && (
|
||||
<Stack>
|
||||
<Text
|
||||
style={{
|
||||
width: "100%",
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
color: "#0078D4",
|
||||
marginLeft: 16,
|
||||
padding: "4px 0",
|
||||
}}
|
||||
>
|
||||
Recent
|
||||
</Text>
|
||||
{histories.map((history, i) => (
|
||||
<DefaultButton
|
||||
key={i}
|
||||
onClick={() => {
|
||||
setUserPrompt(history);
|
||||
setShowSamplePrompts(false);
|
||||
}}
|
||||
onRenderIcon={() => <Image src={RecentIcon} />}
|
||||
styles={promptStyles}
|
||||
>
|
||||
{history}
|
||||
</DefaultButton>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
<Text
|
||||
style={{
|
||||
width: "100%",
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
color: "#0078D4",
|
||||
marginLeft: 16,
|
||||
padding: "4px 0",
|
||||
}}
|
||||
>
|
||||
Suggested Prompts
|
||||
</Text>
|
||||
<DefaultButton
|
||||
onClick={() => {
|
||||
setUserPrompt("Give me all customers whose names start with C");
|
||||
setShowSamplePrompts(false);
|
||||
}}
|
||||
onRenderIcon={() => <Image src={HintIcon} />}
|
||||
styles={promptStyles}
|
||||
>
|
||||
Give me all customers whose names start with C
|
||||
</DefaultButton>
|
||||
<DefaultButton
|
||||
onClick={() => {
|
||||
setUserPrompt("Show me all customers");
|
||||
setShowSamplePrompts(false);
|
||||
}}
|
||||
onRenderIcon={() => <Image src={HintIcon} />}
|
||||
styles={promptStyles}
|
||||
>
|
||||
Show me all customers
|
||||
</DefaultButton>
|
||||
<DefaultButton
|
||||
onClick={() => {
|
||||
setUserPrompt("Show me all customers who bought a bike in 2019");
|
||||
setShowSamplePrompts(false);
|
||||
}}
|
||||
onRenderIcon={() => <Image src={HintIcon} />}
|
||||
styles={promptStyles}
|
||||
>
|
||||
Show me all customers who bought a bike in 2019
|
||||
</DefaultButton>
|
||||
<Separator styles={{ root: { selectors: { "::before": { background: "#E1DFDD" } }, padding: 0 } }} />
|
||||
<Text
|
||||
style={{
|
||||
width: "100%",
|
||||
fontSize: 14,
|
||||
marginLeft: 16,
|
||||
padding: "4px 0",
|
||||
}}
|
||||
>
|
||||
Learn about{" "}
|
||||
<Link target="_blank" href="">
|
||||
writing effective prompts
|
||||
</Link>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Callout>
|
||||
)}
|
||||
</Stack>
|
||||
<Text style={{ marginTop: 8, marginBottom: 24, fontSize: 12 }}>
|
||||
AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.{" "}
|
||||
@@ -362,70 +199,57 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
|
||||
</Link>
|
||||
</Text>
|
||||
|
||||
{showFeedbackBar ? (
|
||||
<Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
|
||||
<Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
|
||||
{showCallout && !hideFeedbackModalForLikedQueries && (
|
||||
<Callout
|
||||
style={{ padding: 8 }}
|
||||
target="#likeBtn"
|
||||
onDismiss={() => {
|
||||
setShowCallout(false);
|
||||
submitFeedback({ generatedQuery, likeQuery, description: "", userPrompt: userPrompt });
|
||||
}}
|
||||
directionalHint={DirectionalHint.topCenter}
|
||||
>
|
||||
<Text>
|
||||
Thank you. Need to give{" "}
|
||||
<Link
|
||||
onClick={() => {
|
||||
setShowCallout(false);
|
||||
useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
|
||||
}}
|
||||
>
|
||||
more feedback?
|
||||
</Link>
|
||||
</Text>
|
||||
</Callout>
|
||||
)}
|
||||
<IconButton
|
||||
id="likeBtn"
|
||||
style={{ marginLeft: 20 }}
|
||||
iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
|
||||
onClick={() => {
|
||||
setLikeQuery(true);
|
||||
setShowCallout(true);
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
style={{ margin: "0 10px" }}
|
||||
iconProps={{ iconName: likeQuery === false ? "DislikeSolid" : "Dislike" }}
|
||||
onClick={() => {
|
||||
setLikeQuery(false);
|
||||
<Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
|
||||
<Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
|
||||
{showCallout && !hideFeedbackModalForLikedQueries && (
|
||||
<Callout
|
||||
style={{ padding: 8 }}
|
||||
target="#likeBtn"
|
||||
onDismiss={() => {
|
||||
setShowCallout(false);
|
||||
useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
|
||||
submitFeedback({ generatedQuery, likeQuery, description: "", userPrompt: userInput });
|
||||
}}
|
||||
/>
|
||||
<Separator vertical style={{ color: "#EDEBE9" }} />
|
||||
<CommandBarButton
|
||||
onClick={copyGeneratedCode}
|
||||
iconProps={{ iconName: "Copy" }}
|
||||
style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
|
||||
directionalHint={DirectionalHint.topCenter}
|
||||
>
|
||||
Copy code
|
||||
</CommandBarButton>
|
||||
<CommandBarButton
|
||||
onClick={() => setShowDeletePopup(true)}
|
||||
iconProps={{ iconName: "Delete" }}
|
||||
style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
|
||||
>
|
||||
Delete code
|
||||
</CommandBarButton>
|
||||
</Stack>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
||||
<Text>
|
||||
Thank you. Need to give{" "}
|
||||
<Link
|
||||
onClick={() => {
|
||||
setShowCallout(false);
|
||||
useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userInput);
|
||||
}}
|
||||
>
|
||||
more feedback?
|
||||
</Link>
|
||||
</Text>
|
||||
</Callout>
|
||||
)}
|
||||
<IconButton
|
||||
id="likeBtn"
|
||||
style={{ marginLeft: 20 }}
|
||||
iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
|
||||
onClick={() => {
|
||||
setLikeQuery(true);
|
||||
setShowCallout(true);
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
style={{ margin: "0 10px" }}
|
||||
iconProps={{ iconName: likeQuery === false ? "DislikeSolid" : "Dislike" }}
|
||||
onClick={() => {
|
||||
setLikeQuery(false);
|
||||
setShowCallout(false);
|
||||
useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userInput);
|
||||
}}
|
||||
/>
|
||||
<Separator vertical style={{ color: "#EDEBE9" }} />
|
||||
<CommandBarButton iconProps={{ iconName: "Copy" }} style={{ margin: "0 10px", backgroundColor: "#FFF8F0" }}>
|
||||
Copy code
|
||||
</CommandBarButton>
|
||||
<CommandBarButton iconProps={{ iconName: "Delete" }} style={{ backgroundColor: "#FFF8F0" }}>
|
||||
Delete code
|
||||
</CommandBarButton>
|
||||
</Stack>
|
||||
<Stack className="tabPaneContentContainer">
|
||||
<SplitterLayout vertical={true} primaryIndex={0} primaryMinSize={100} secondaryMinSize={200}>
|
||||
<EditorReact
|
||||
@@ -447,13 +271,6 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
|
||||
/>
|
||||
</SplitterLayout>
|
||||
</Stack>
|
||||
{isSamplePromptsOpen ? <SamplePrompts sampleProps={sampleProps} /> : <></>}
|
||||
{query !== "" && query.trim().length !== 0 ? (
|
||||
<DeletePopup showDeletePopup={showDeletePopup} setShowDeletePopup={setShowDeletePopup} setQuery={setQuery} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import { SamplePrompts, SamplePromptsProps } from "./SamplePrompts";
|
||||
|
||||
describe("Sample Prompts snapshot test", () => {
|
||||
it("should render properly if isSamplePromptsOpen is true", () => {
|
||||
const sampleProps: SamplePromptsProps = {
|
||||
isSamplePromptsOpen: true,
|
||||
setIsSamplePromptsOpen: () => undefined,
|
||||
setTextBox: () => undefined,
|
||||
};
|
||||
|
||||
const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should render properly if isSamplePromptsOpen is false", () => {
|
||||
const sampleProps: SamplePromptsProps = {
|
||||
isSamplePromptsOpen: false,
|
||||
setIsSamplePromptsOpen: () => undefined,
|
||||
setTextBox: () => undefined,
|
||||
};
|
||||
const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,138 +0,0 @@
|
||||
import { DefaultButton, FontIcon, IconButton, Image, Modal, Stack, Text } from "@fluentui/react";
|
||||
import React, { Dispatch, SetStateAction } from "react";
|
||||
import ComplexPrompts from "../../../../images/ComplexPrompts.svg";
|
||||
import IntermediatePrompts from "../../../../images/IntermediatePrompts.svg";
|
||||
import SimplePrompts from "../../../../images/SimplePrompts.svg";
|
||||
|
||||
export interface SamplePromptsProps {
|
||||
isSamplePromptsOpen: boolean;
|
||||
setIsSamplePromptsOpen: Dispatch<SetStateAction<boolean>>;
|
||||
setTextBox: Dispatch<SetStateAction<string>>;
|
||||
}
|
||||
|
||||
const SampleUserInputs: string[] = [
|
||||
"Show me products less than 100 dolars",
|
||||
"Show schema",
|
||||
"Show items with a description that contains a number between 0 and 99 inclusive.",
|
||||
"Write a query to return all records in this table created in the last thirty days",
|
||||
"Show all the products that customer Bob has reviewed.",
|
||||
"Which computers are more than 300 dollars and less than 400 dollars?",
|
||||
];
|
||||
|
||||
export const SamplePrompts = ({ sampleProps }: { sampleProps: SamplePromptsProps }): JSX.Element => {
|
||||
const updateTextBox = (userInput: string) => {
|
||||
sampleProps.setTextBox(userInput);
|
||||
sampleProps.setIsSamplePromptsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={sampleProps.isSamplePromptsOpen}>
|
||||
<Stack
|
||||
style={{ padding: "16px 24px", overflowY: "auto", maxHeight: "calc(100vh - 120px)" }}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<Stack>
|
||||
<Stack horizontal style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Text style={{ fontSize: 24, fontWeight: 600 }}>Sample Prompts</Text>
|
||||
<IconButton
|
||||
styles={{
|
||||
root: {
|
||||
border: "none",
|
||||
backgroundColor: "transparent",
|
||||
padding: 0,
|
||||
selectors: {
|
||||
"&:hover": {
|
||||
backgroundColor: "transparent",
|
||||
color: "#000", // Set the desired color for the X button on hover
|
||||
},
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
iconProps={{ iconName: "Cancel" }}
|
||||
onClick={() => sampleProps.setIsSamplePromptsOpen(false)}
|
||||
/>
|
||||
</Stack>
|
||||
<Text style={{ fontWeight: 400, fontSize: 13, marginTop: 10 }}>
|
||||
Here are some sample prompts for writing queries in NoSQL, ranging from simple to complex
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack style={{ marginTop: 30, display: "flex" }}>
|
||||
<Stack horizontal verticalAlign="center">
|
||||
<Image style={{ width: 25, height: 25 }} src={SimplePrompts} />
|
||||
<Text style={{ fontSize: 14, fontWeight: 600 }}>Simple Prompts</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal style={{ gap: 35 }}>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[0])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[0]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[1])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[1]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
</Stack>
|
||||
|
||||
<Stack style={{ marginTop: 30, display: "flex" }}>
|
||||
<Stack horizontal verticalAlign="center">
|
||||
<Image style={{ width: 25, height: 25 }} src={IntermediatePrompts} />
|
||||
<Text style={{ fontSize: 14, fontWeight: 600 }}>Intermediate Prompts</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal style={{ gap: 35 }}>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[2])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[2]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[3])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[3]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
</Stack>
|
||||
|
||||
<Stack style={{ marginTop: 30, display: "flex" }}>
|
||||
<Stack horizontal verticalAlign="center">
|
||||
<Image style={{ width: 25, height: 25 }} src={ComplexPrompts} />
|
||||
<Text style={{ fontSize: 14, fontWeight: 600 }}>Complex Prompts</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal style={{ gap: 35 }}>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[4])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[4]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[5])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[5]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -1,781 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Sample Prompts snapshot test should render properly if isSamplePromptsOpen is false 1`] = `
|
||||
<Modal
|
||||
isOpen={false}
|
||||
>
|
||||
<Stack
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
style={
|
||||
Object {
|
||||
"maxHeight": "calc(100vh - 120px)",
|
||||
"overflowY": "auto",
|
||||
"padding": "16px 24px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "space-between",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 24,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Sample Prompts
|
||||
</Text>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Cancel",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"backgroundColor": "transparent",
|
||||
"border": "none",
|
||||
"padding": 0,
|
||||
"selectors": Object {
|
||||
"&:focus": Object {
|
||||
"outline": "none",
|
||||
},
|
||||
"&:hover": Object {
|
||||
"backgroundColor": "transparent",
|
||||
"color": "#000",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"fontWeight": 400,
|
||||
"marginTop": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
Here are some sample prompts for writing queries in NoSQL, ranging from simple to complex
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Simple Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show me products less than 100 dolars
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show schema
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Intermediate Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show items with a description that contains a number between 0 and 99 inclusive.
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Write a query to return all records in this table created in the last thirty days
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Complex Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show all the products that customer Bob has reviewed.
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Which computers are more than 300 dollars and less than 400 dollars?
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
`;
|
||||
|
||||
exports[`Sample Prompts snapshot test should render properly if isSamplePromptsOpen is true 1`] = `
|
||||
<Modal
|
||||
isOpen={true}
|
||||
>
|
||||
<Stack
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
style={
|
||||
Object {
|
||||
"maxHeight": "calc(100vh - 120px)",
|
||||
"overflowY": "auto",
|
||||
"padding": "16px 24px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "space-between",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 24,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Sample Prompts
|
||||
</Text>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Cancel",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"backgroundColor": "transparent",
|
||||
"border": "none",
|
||||
"padding": 0,
|
||||
"selectors": Object {
|
||||
"&:focus": Object {
|
||||
"outline": "none",
|
||||
},
|
||||
"&:hover": Object {
|
||||
"backgroundColor": "transparent",
|
||||
"color": "#000",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"fontWeight": 400,
|
||||
"marginTop": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
Here are some sample prompts for writing queries in NoSQL, ranging from simple to complex
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Simple Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show me products less than 100 dolars
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show schema
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Intermediate Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show items with a description that contains a number between 0 and 99 inclusive.
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Write a query to return all records in this table created in the last thirty days
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Complex Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show all the products that customer Bob has reviewed.
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Which computers are more than 300 dollars and less than 400 dollars?
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
`;
|
||||
@@ -42,9 +42,7 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
|
||||
>
|
||||
<StyledTextFieldBase
|
||||
disabled={false}
|
||||
id="naturalLanguageInput"
|
||||
onChange={[Function]}
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"lineHeight": 30,
|
||||
@@ -53,7 +51,7 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": "95%",
|
||||
"width": "90%",
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -92,6 +90,91 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
|
||||
Read preview terms
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFF8F0",
|
||||
"padding": "2px 8px",
|
||||
}
|
||||
}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Provide feedback on the query generated
|
||||
</Text>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Like",
|
||||
}
|
||||
}
|
||||
id="likeBtn"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": 20,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Dislike",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"margin": "0 10px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Separator
|
||||
style={
|
||||
Object {
|
||||
"color": "#EDEBE9",
|
||||
}
|
||||
}
|
||||
vertical={true}
|
||||
/>
|
||||
<CustomizedCommandBarButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Copy",
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFF8F0",
|
||||
"margin": "0 10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Copy code
|
||||
</CustomizedCommandBarButton>
|
||||
<CustomizedCommandBarButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Delete",
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FFF8F0",
|
||||
}
|
||||
}
|
||||
>
|
||||
Delete code
|
||||
</CustomizedCommandBarButton>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="tabPaneContentContainer"
|
||||
>
|
||||
@@ -124,9 +207,5 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
|
||||
/>
|
||||
</t>
|
||||
</Stack>
|
||||
<CopyPopup
|
||||
setShowCopyPopup={[Function]}
|
||||
showCopyPopup={false}
|
||||
/>
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
|
||||
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
||||
import { traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "UserContext";
|
||||
import { useCarousel } from "hooks/useCarousel";
|
||||
import React, { useState } from "react";
|
||||
import Youtube from "react-youtube";
|
||||
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
||||
import { traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "UserContext";
|
||||
import Image1 from "../../../images/CarouselImage1.svg";
|
||||
import Image2 from "../../../images/CarouselImage2.svg";
|
||||
|
||||
@@ -25,7 +25,7 @@ export const QuickstartCarousel: React.FC<QuickstartCarouselProps> = ({
|
||||
<Stack>
|
||||
<Stack horizontal horizontalAlign="space-between" style={{ padding: 16 }}>
|
||||
<Text variant="xLarge">{getHeaderText(page)}</Text>
|
||||
<IconButton iconProps={{ iconName: "Cancel" }} onClick={() => setPage(4)} ariaLabel="Close" />
|
||||
<IconButton iconProps={{ iconName: "Cancel" }} onClick={() => setPage(4)} />
|
||||
</Stack>
|
||||
{getContent(page)}
|
||||
<Text variant="medium" style={{ padding: "0 16px" }}>
|
||||
|
||||
@@ -23,10 +23,10 @@ import { ReactTabKind, useTabs } from "hooks/useTabs";
|
||||
import * as React from "react";
|
||||
import ConnectIcon from "../../../images/Connect_color.svg";
|
||||
import ContainersIcon from "../../../images/Containers.svg";
|
||||
import CopilotIcon from "../../../images/Copilot.svg";
|
||||
import LinkIcon from "../../../images/Link_blue.svg";
|
||||
import NotebookColorIcon from "../../../images/Notebooks.svg";
|
||||
import PowerShellIcon from "../../../images/PowerShell.svg";
|
||||
import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
|
||||
import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
|
||||
import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
|
||||
import CollectionIcon from "../../../images/tree-collection.svg";
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { extractPartitionKey, ItemDefinition, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
|
||||
import { ReactTabKind, useTabs } from "hooks/useTabs";
|
||||
import * as ko from "knockout";
|
||||
import Q from "q";
|
||||
import CopilotQueryTablesTab from "../../../images/CopilotQueryTablesTab.svg";
|
||||
import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
|
||||
import DiscardIcon from "../../../images/discard.svg";
|
||||
import NewDocumentIcon from "../../../images/NewDocument.svg";
|
||||
@@ -304,6 +306,7 @@ export default class DocumentsTab extends TabsBase {
|
||||
return true;
|
||||
}),
|
||||
};
|
||||
|
||||
this.buildCommandBarOptions();
|
||||
this.shouldShowEditor = ko.computed<boolean>(() => {
|
||||
const documentHasContent: boolean =
|
||||
@@ -768,6 +771,10 @@ export default class DocumentsTab extends TabsBase {
|
||||
}
|
||||
};
|
||||
|
||||
public onCopilotEntityClick = (): void => {
|
||||
useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
|
||||
};
|
||||
|
||||
protected _loadNextPageInternal(): Q.Promise<DataModels.DocumentId[]> {
|
||||
return Q(this._documentsIterator.fetchNext().then((response) => response.resources));
|
||||
}
|
||||
@@ -884,6 +891,19 @@ export default class DocumentsTab extends TabsBase {
|
||||
buttons.push(DocumentsTab._createUploadButton(this.collection.container));
|
||||
}
|
||||
|
||||
if (userContext.features.enableCopilot) {
|
||||
const label = "Query Copliot";
|
||||
buttons.push({
|
||||
iconSrc: CopilotQueryTablesTab,
|
||||
iconAlt: label,
|
||||
onCommandClick: this.onCopilotEntityClick,
|
||||
commandButtonLabel: label,
|
||||
ariaLabel: label,
|
||||
hasPopup: true,
|
||||
disabled: false,
|
||||
});
|
||||
}
|
||||
|
||||
return buttons;
|
||||
}
|
||||
|
||||
|
||||
@@ -195,10 +195,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
|
||||
this.props.collection.databaseId,
|
||||
this.props.collection.id(),
|
||||
this.state.selectedContent || this.state.sqlQueryEditorContent,
|
||||
{
|
||||
enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey(),
|
||||
populateIndexMetrics: userContext.apiType === "SQL",
|
||||
} as FeedOptions
|
||||
{ enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey() } as FeedOptions
|
||||
);
|
||||
}
|
||||
|
||||
@@ -219,13 +216,11 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
|
||||
});
|
||||
|
||||
try {
|
||||
//CTODO: Add index metrics to the following method?
|
||||
const queryResults: ViewModels.QueryResults = await QueryUtils.queryPagesUntilContentPresent(
|
||||
firstItemIndex,
|
||||
queryDocuments
|
||||
);
|
||||
console.log("Index Metrics: " + queryResults.indexMetrics);
|
||||
this.setState({ queryResults, error: "" });
|
||||
this.setState({ queryResults });
|
||||
} catch (error) {
|
||||
this.props.tabsBaseInstance.isExecutionError(true);
|
||||
this.setState({
|
||||
|
||||
@@ -77,13 +77,7 @@
|
||||
<div class="addClause" data-bind=" ">
|
||||
<div class="addClause-heading">
|
||||
<span class="clause-table addClause-title">
|
||||
<img
|
||||
class="addclauseProperty-Img"
|
||||
style="margin-bottom: 5px"
|
||||
src="/Add-property.svg"
|
||||
alt="Add new Clause"
|
||||
role="presentation"
|
||||
/>
|
||||
<img class="addclauseProperty-Img" style="margin-bottom: 5px" src="/Add-property.svg" />
|
||||
<span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -125,12 +119,7 @@
|
||||
aria-label="Show top results"
|
||||
/>
|
||||
<div role="alert" aria-atomic="true" class="inline-div" data-bind="visible: isExceedingLimit">
|
||||
<img
|
||||
class="advanced-options-icon"
|
||||
src="/QueryBuilder/StatusWarning_16x.png"
|
||||
alt="Warning"
|
||||
role="presentation"
|
||||
/>
|
||||
<img class="advanced-options-icon" src="/QueryBuilder/StatusWarning_16x.png" />
|
||||
<span data-bind="text: topValueLimitMessage"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -113,7 +113,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
|
||||
<div className="tab_Content">
|
||||
<span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
|
||||
{useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
|
||||
{isTabExecuting(tab, tabKind) && (
|
||||
{useObservable(tab?.isExecuting || ko.observable(false)) && (
|
||||
<img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
|
||||
)}
|
||||
</span>
|
||||
@@ -211,15 +211,6 @@ const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
|
||||
}
|
||||
};
|
||||
|
||||
const isTabExecuting = (tab?: Tab, tabKind?: ReactTabKind): boolean => {
|
||||
if (useObservable(tab?.isExecuting || ko.observable(false))) {
|
||||
return true;
|
||||
} else if (tabKind !== undefined && tabKind !== ReactTabKind.Home && useTabs.getState()?.isTabExecuting) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
|
||||
switch (activeReactTab) {
|
||||
case ReactTabKind.Connect:
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
|
||||
import { SampleDataTree } from "Explorer/Tree/SampleDataTree";
|
||||
import { getItemName } from "Utils/APITypeUtils";
|
||||
import * as React from "react";
|
||||
import { getItemName } from "Utils/APITypeUtils";
|
||||
import shallow from "zustand/shallow";
|
||||
import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
|
||||
import GalleryIcon from "../../../images/GalleryIcon.svg";
|
||||
import DeleteIcon from "../../../images/delete.svg";
|
||||
import GalleryIcon from "../../../images/GalleryIcon.svg";
|
||||
import FileIcon from "../../../images/notebook/file-cosmos.svg";
|
||||
import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
|
||||
import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
|
||||
import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
|
||||
import FileIcon from "../../../images/notebook/file-cosmos.svg";
|
||||
import PublishIcon from "../../../images/notebook/publish_content.svg";
|
||||
import RefreshIcon from "../../../images/refresh-cosmos.svg";
|
||||
import CollectionIcon from "../../../images/tree-collection.svg";
|
||||
@@ -17,14 +16,14 @@ import { Areas, ConnectionStatusType, Notebook } from "../../Common/Constants";
|
||||
import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import { useSidePanel } from "../../hooks/useSidePanel";
|
||||
import { useTabs } from "../../hooks/useTabs";
|
||||
import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
|
||||
import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../UserContext";
|
||||
import { isServerlessAccount } from "../../Utils/CapabilityUtils";
|
||||
import * as GitHubUtils from "../../Utils/GitHubUtils";
|
||||
import { useSidePanel } from "../../hooks/useSidePanel";
|
||||
import { useTabs } from "../../hooks/useTabs";
|
||||
import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
|
||||
import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
|
||||
import { useDialog } from "../Controls/Dialog";
|
||||
@@ -765,59 +764,23 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
|
||||
};
|
||||
|
||||
const dataRootNode = buildDataTree();
|
||||
const isSampleDataEnabled = userContext.sampleDataConnectionInfo && userContext.apiType === "SQL";
|
||||
const sampleDataResourceTokenCollection = useDatabases((state) => state.sampleDataResourceTokenCollection);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!isNotebookEnabled && !isSampleDataEnabled && (
|
||||
<TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
|
||||
)}
|
||||
{isNotebookEnabled && !isSampleDataEnabled && (
|
||||
<>
|
||||
<AccordionComponent>
|
||||
<AccordionItemComponent title={"DATA"} isExpanded={!gitHubNotebooksContentRoot}>
|
||||
<TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
|
||||
</AccordionItemComponent>
|
||||
<AccordionItemComponent title={"NOTEBOOKS"}>
|
||||
<TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
|
||||
</AccordionItemComponent>
|
||||
</AccordionComponent>
|
||||
if (isNotebookEnabled) {
|
||||
return (
|
||||
<>
|
||||
<AccordionComponent>
|
||||
<AccordionItemComponent title={"DATA"} isExpanded={!gitHubNotebooksContentRoot}>
|
||||
<TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
|
||||
</AccordionItemComponent>
|
||||
<AccordionItemComponent title={"NOTEBOOKS"}>
|
||||
<TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
|
||||
</AccordionItemComponent>
|
||||
</AccordionComponent>
|
||||
|
||||
{buildGalleryCallout()}
|
||||
</>
|
||||
)}
|
||||
{!isNotebookEnabled && isSampleDataEnabled && (
|
||||
<>
|
||||
<AccordionComponent>
|
||||
<AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
|
||||
<TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
|
||||
</AccordionItemComponent>
|
||||
<AccordionItemComponent title={"SAMPLE DATA"}>
|
||||
<SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
|
||||
</AccordionItemComponent>
|
||||
</AccordionComponent>
|
||||
{buildGalleryCallout()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
{buildGalleryCallout()}
|
||||
</>
|
||||
)}
|
||||
{isNotebookEnabled && isSampleDataEnabled && (
|
||||
<>
|
||||
<AccordionComponent>
|
||||
<AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
|
||||
<TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
|
||||
</AccordionItemComponent>
|
||||
<AccordionItemComponent title={"SAMPLE DATA"}>
|
||||
<SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
|
||||
</AccordionItemComponent>
|
||||
<AccordionItemComponent title={"NOTEBOOKS"}>
|
||||
<TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
|
||||
</AccordionItemComponent>
|
||||
</AccordionComponent>
|
||||
|
||||
{buildGalleryCallout()}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
|
||||
};
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
|
||||
import CollectionIcon from "../../../images/tree-collection.svg";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
|
||||
|
||||
export const SampleDataTree = ({
|
||||
sampleDataResourceTokenCollection,
|
||||
}: {
|
||||
sampleDataResourceTokenCollection: ViewModels.CollectionBase;
|
||||
}): JSX.Element => {
|
||||
const [root, setRoot] = useState<TreeNode | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
if (sampleDataResourceTokenCollection) {
|
||||
const updatedSampleTree: TreeNode = {
|
||||
label: sampleDataResourceTokenCollection.databaseId,
|
||||
isExpanded: true,
|
||||
iconSrc: CosmosDBIcon,
|
||||
children: [
|
||||
{
|
||||
label: sampleDataResourceTokenCollection.id(),
|
||||
iconSrc: CollectionIcon,
|
||||
isExpanded: true,
|
||||
className: "collectionHeader",
|
||||
children: [
|
||||
{
|
||||
label: "Items",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
setRoot(updatedSampleTree);
|
||||
}
|
||||
}, [sampleDataResourceTokenCollection]);
|
||||
|
||||
return (
|
||||
<TreeComponent className="sampleDataResourceTree" rootNode={root || { label: "Sample data not initialized." }} />
|
||||
);
|
||||
};
|
||||
@@ -8,7 +8,6 @@ import { useSelectedNode } from "./useSelectedNode";
|
||||
interface DatabasesState {
|
||||
databases: ViewModels.Database[];
|
||||
resourceTokenCollection: ViewModels.CollectionBase;
|
||||
sampleDataResourceTokenCollection: ViewModels.CollectionBase;
|
||||
updateDatabase: (database: ViewModels.Database) => void;
|
||||
addDatabases: (databases: ViewModels.Database[]) => void;
|
||||
deleteDatabase: (database: ViewModels.Database) => void;
|
||||
@@ -29,7 +28,6 @@ interface DatabasesState {
|
||||
export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
|
||||
databases: [],
|
||||
resourceTokenCollection: undefined,
|
||||
sampleDataResourceTokenCollection: undefined,
|
||||
updateDatabase: (updatedDatabase: ViewModels.Database) =>
|
||||
set((state) => {
|
||||
const updatedDatabases = state.databases.map((database: ViewModels.Database) => {
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
export interface ParsedResourceTokenConnectionString {
|
||||
accountEndpoint?: string;
|
||||
collectionId?: string;
|
||||
databaseId?: string;
|
||||
accountEndpoint: string;
|
||||
collectionId: string;
|
||||
databaseId: string;
|
||||
partitionKey?: string;
|
||||
resourceToken?: string;
|
||||
resourceToken: string;
|
||||
}
|
||||
|
||||
export function parseResourceTokenConnectionString(connectionString: string): ParsedResourceTokenConnectionString {
|
||||
let accountEndpoint: string | undefined;
|
||||
let collectionId: string | undefined;
|
||||
let databaseId: string | undefined;
|
||||
let partitionKey: string | undefined;
|
||||
let resourceToken: string | undefined;
|
||||
|
||||
let accountEndpoint: string;
|
||||
let collectionId: string;
|
||||
let databaseId: string;
|
||||
let partitionKey: string;
|
||||
let resourceToken: string;
|
||||
const connectionStringParts = connectionString.split(";");
|
||||
connectionStringParts.forEach((part: string) => {
|
||||
if (part.startsWith("type=resource")) {
|
||||
@@ -40,5 +39,5 @@ export function parseResourceTokenConnectionString(connectionString: string): Pa
|
||||
}
|
||||
|
||||
export function isResourceTokenConnectionString(connectionString: string): boolean {
|
||||
return !!connectionString && connectionString.includes("type=resource");
|
||||
return connectionString && connectionString.includes("type=resource");
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useCarousel } from "hooks/useCarousel";
|
||||
import { usePostgres } from "hooks/usePostgres";
|
||||
import { ParsedResourceTokenConnectionString } from "Platform/Hosted/Helpers/ResourceTokenUtils";
|
||||
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
||||
import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
|
||||
import { AuthType } from "./AuthType";
|
||||
@@ -70,7 +69,6 @@ interface UserContext {
|
||||
readonly postgresConnectionStrParams?: PostgresConnectionStrParams;
|
||||
readonly isReplica?: boolean;
|
||||
collectionCreationDefaults: CollectionCreationDefaults;
|
||||
sampleDataConnectionInfo?: ParsedResourceTokenConnectionString;
|
||||
}
|
||||
|
||||
export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra" | "Postgres";
|
||||
@@ -159,4 +157,4 @@ function apiType(account: DatabaseAccount | undefined): ApiType {
|
||||
return "SQL";
|
||||
}
|
||||
|
||||
export { updateUserContext, userContext };
|
||||
export { userContext, updateUserContext };
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { createUri } from "Common/UrlUtility";
|
||||
import Explorer from "Explorer/Explorer";
|
||||
import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
|
||||
import { ReactTabKind, useTabs } from "hooks/useTabs";
|
||||
import { useEffect, useState } from "react";
|
||||
import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
|
||||
import { applyExplorerBindings } from "../applyExplorerBindings";
|
||||
import { AuthType } from "../AuthType";
|
||||
import { AccountKind, Flights } from "../Common/Constants";
|
||||
import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
|
||||
import { sendMessage, sendReadyMessage } from "../Common/MessageHandler";
|
||||
import { Platform, configContext, updateConfigContext } from "../ConfigContext";
|
||||
import { configContext, Platform, updateConfigContext } from "../ConfigContext";
|
||||
import { ActionType, DataExplorerAction } from "../Contracts/ActionContracts";
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import { DataExplorerInputsFrame } from "../Contracts/ViewModels";
|
||||
@@ -21,20 +21,19 @@ import {
|
||||
ResourceToken,
|
||||
} from "../HostedExplorerChildFrame";
|
||||
import { emulatorAccount } from "../Platform/Emulator/emulatorAccount";
|
||||
import { extractFeatures } from "../Platform/Hosted/extractFeatures";
|
||||
import { parseResourceTokenConnectionString } from "../Platform/Hosted/Helpers/ResourceTokenUtils";
|
||||
import {
|
||||
getDatabaseAccountKindFromExperience,
|
||||
getDatabaseAccountPropertiesFromMetadata,
|
||||
} from "../Platform/Hosted/HostedUtils";
|
||||
import { extractFeatures } from "../Platform/Hosted/extractFeatures";
|
||||
import { CollectionCreation } from "../Shared/Constants";
|
||||
import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
|
||||
import { Node, PortalEnv, updateUserContext, userContext } from "../UserContext";
|
||||
import { getAuthorizationHeader, getMsalInstance } from "../Utils/AuthorizationUtils";
|
||||
import { isInvalidParentFrameOrigin, shouldProcessMessage } from "../Utils/MessageValidation";
|
||||
import { listKeys } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
|
||||
import { DatabaseAccountListKeysResult } from "../Utils/arm/generatedClients/cosmos/types";
|
||||
import { applyExplorerBindings } from "../applyExplorerBindings";
|
||||
import { getMsalInstance } from "../Utils/AuthorizationUtils";
|
||||
import { isInvalidParentFrameOrigin, shouldProcessMessage } from "../Utils/MessageValidation";
|
||||
|
||||
// This hook will create a new instance of Explorer.ts and bind it to the DOM
|
||||
// This hook has a LOT of magic, but ideally we can delete it once we have removed KO and switched entirely to React
|
||||
@@ -62,10 +61,6 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
|
||||
setExplorer(explorer);
|
||||
}
|
||||
}
|
||||
|
||||
if (userContext.features.enableCopilot) {
|
||||
await updateContextForSampleData();
|
||||
}
|
||||
};
|
||||
effect();
|
||||
}, [platform]);
|
||||
@@ -414,29 +409,3 @@ interface PortalMessage {
|
||||
type?: MessageTypes;
|
||||
inputs?: DataExplorerInputsFrame;
|
||||
}
|
||||
|
||||
async function updateContextForSampleData(): Promise<void> {
|
||||
if (!userContext.features.enableCopilot) {
|
||||
return;
|
||||
}
|
||||
|
||||
const url = createUri(`${configContext.BACKEND_ENDPOINT}`, `/api/tokens/sampledataconnection`);
|
||||
const authorizationHeader = getAuthorizationHeader();
|
||||
const headers = { [authorizationHeader.header]: authorizationHeader.token };
|
||||
|
||||
const response = await window.fetch(url, {
|
||||
headers,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const data: SampledataconnectionResponse = await response.json();
|
||||
const sampleDataConnectionInfo = parseResourceTokenConnectionString(data.connectionString);
|
||||
updateUserContext({ sampleDataConnectionInfo });
|
||||
}
|
||||
|
||||
interface SampledataconnectionResponse {
|
||||
connectionString: string;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,6 @@ interface TabsState {
|
||||
activeReactTab: ReactTabKind | undefined;
|
||||
networkSettingsWarning: string;
|
||||
queryCopilotTabInitialInput: string;
|
||||
isTabExecuting: boolean;
|
||||
activateTab: (tab: TabsBase) => void;
|
||||
activateNewTab: (tab: TabsBase) => void;
|
||||
activateReactTab: (tabkind: ReactTabKind) => void;
|
||||
@@ -25,7 +24,6 @@ interface TabsState {
|
||||
closeReactTab: (tabKind: ReactTabKind) => void;
|
||||
setNetworkSettingsWarning: (warningMessage: string) => void;
|
||||
setQueryCopilotTabInitialInput: (input: string) => void;
|
||||
setIsTabExecuting: (state: boolean) => void;
|
||||
}
|
||||
|
||||
export enum ReactTabKind {
|
||||
@@ -42,7 +40,6 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
|
||||
activeReactTab: ReactTabKind.Home,
|
||||
networkSettingsWarning: "",
|
||||
queryCopilotTabInitialInput: "",
|
||||
isTabExecuting: false,
|
||||
activateTab: (tab: TabsBase): void => {
|
||||
if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
|
||||
set({ activeTab: tab, activeReactTab: undefined });
|
||||
@@ -154,7 +151,4 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
|
||||
},
|
||||
setNetworkSettingsWarning: (warningMessage: string) => set({ networkSettingsWarning: warningMessage }),
|
||||
setQueryCopilotTabInitialInput: (input: string) => set({ queryCopilotTabInitialInput: input }),
|
||||
setIsTabExecuting: (state: boolean) => {
|
||||
set({ isTabExecuting: state });
|
||||
},
|
||||
}));
|
||||
|
||||