Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-10 21:58:23 -05:00
Code Issues Activity

feat(console): table empty state (#446)

Browse source 
* feat(console): table empty state

* fix: cr
This commit is contained in:
Wang Sijie 2022-03-28 15:03:11 +08:00 • committed by GitHub
parent 7d76428e57
commit 9a437e3c0d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 170 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
packages/console/src/assets/images/social-connectors-placeholder.svg
View file

@ -1,75 +0,0 @@
<svg width="245" height="110" viewBox="0 0 245 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1640_62321)">
<path d="M220.888 44.3013H213.529V69.775H220.888V44.3013Z" fill="#F2F2F2"/>
<path d="M225.748 64.9831L207.85 43.6899L171.922 44.0184L150.128 65.2464L150.568 65.5295H150.411V109.684H225.7V65.5295L225.748 64.9831Z" fill="#F2F2F2"/>
<path d="M207.868 43.7354L185.508 69.9504V109.684H225.7V64.9634L207.868 43.7354Z" fill="#E6E6E6"/>
<path d="M209.85 87.7104H201.641V94.9656H209.85V87.7104Z" fill="#3F3D56"/>
<path d="M209.85 75.1528H201.641V82.2929H209.85V75.1528Z" fill="#3F3D56"/>
<path d="M209.85 87.7104H201.641V94.9656H209.85V87.7104Z" fill="white"/>
<path d="M209.85 75.1528H201.641V82.2929H209.85V75.1528Z" fill="white"/>
<path d="M173.372 85.7856H165.164V93.0407H173.372V85.7856Z" fill="white"/>
<path d="M173.372 73.2275H165.164V80.3676H173.372V73.2275Z" fill="white"/>
<path d="M162.815 44.3013H155.456V69.775H162.815V44.3013Z" fill="#F2F2F2"/>
<path d="M167.675 64.9831L149.776 43.6899L113.849 44.0184L92.0542 65.2464L92.4946 65.5295H92.3372V109.684H167.627V65.5295L167.675 64.9831Z" fill="#F2F2F2"/>
<path d="M149.795 43.7354L127.435 69.9504V109.684H167.627V64.9634L149.795 43.7354Z" fill="#E6E6E6"/>
<path d="M151.776 87.7104H143.568V94.9656H151.776V87.7104Z" fill="#3F3D56"/>
<path d="M151.776 75.1528H143.568V82.2929H151.776V75.1528Z" fill="#3F3D56"/>
<path d="M151.776 87.7104H143.568V94.9656H151.776V87.7104Z" fill="white"/>
<path d="M151.776 75.1528H143.568V82.2929H151.776V75.1528Z" fill="white"/>
<path d="M115.298 85.7856H107.09V93.0407H115.298V85.7856Z" fill="white"/>
<path d="M115.298 73.2275H107.09V80.3676H115.298V73.2275Z" fill="white"/>
<path d="M103.351 22.3169H93.5177V56.356H103.351V22.3169Z" fill="#F2F2F2"/>
<path d="M109.845 49.9526L85.9285 21.5L37.9205 21.9387L8.7981 50.3047L9.38639 50.6829H9.17631V109.684H109.781V50.6829L109.845 49.9526Z" fill="#F2F2F2"/>
<path d="M85.9533 21.5605L56.0745 56.5903V109.684H109.781V49.9265L85.9533 21.5605Z" fill="#E6E6E6"/>
<path d="M88.6009 80.3223H77.6327V90.0169H88.6009V80.3223Z" fill="#3F3D56"/>
<path d="M88.6009 63.542H77.6327V73.0829H88.6009V63.542Z" fill="#3F3D56"/>
<path d="M88.6009 80.3223H77.6327V90.0169H88.6009V80.3223Z" fill="white"/>
<path d="M88.6009 63.542H77.6327V73.0829H88.6009V63.542Z" fill="white"/>
<path d="M39.8576 77.75H28.8894V87.4446H39.8576V77.75Z" fill="white"/>
<path d="M39.8576 60.9697H28.8894V70.5106H39.8576V60.9697Z" fill="white"/>
<path d="M235.968 109.466H0.757812V109.954H235.968V109.466Z" fill="#3F3D56"/>
<path d="M37.8156 100.493C41.7371 100.493 44.916 94.0066 44.916 86.0053C44.916 78.004 41.7371 71.5176 37.8156 71.5176C33.8942 71.5176 30.7152 78.004 30.7152 86.0053C30.7152 94.0066 33.8942 100.493 37.8156 100.493Z" fill="#3F3D56"/>
<path d="M38.4713 109.72C35.6276 92.6575 38.4427 75.6569 38.4715 75.4873L39.0246 75.581C38.996 75.7498 36.197 92.661 39.0248 109.628L38.4713 109.72Z" fill="#5D34F2"/>
<path d="M44.0668 82.8899L37.6461 86.3242L37.9108 86.819L44.3315 83.3847L44.0668 82.8899Z" fill="#5D34F2"/>
<path d="M31.1344 84.6102L30.8696 85.105L37.2896 88.5413L37.5544 88.0466L31.1344 84.6102Z" fill="#5D34F2"/>
<path d="M20.7554 91.9982C28.4253 91.9982 34.643 79.3116 34.643 63.6619C34.643 48.0123 28.4253 35.3257 20.7554 35.3257C13.0855 35.3257 6.8678 48.0123 6.8678 63.6619C6.8678 79.3116 13.0855 91.9982 20.7554 91.9982Z" fill="#5D34F2"/>
<path d="M22.3023 110C16.7476 76.6726 22.2463 43.4663 22.3024 43.1348L22.8556 43.2285C22.7996 43.5592 17.3171 76.6761 22.8557 109.908L22.3023 110Z" fill="#3F3D56"/>
<path d="M33.1087 57.8052L20.5503 64.5225L20.815 65.0173L33.3734 58.3L33.1087 57.8052Z" fill="#3F3D56"/>
<path d="M7.56131 61.1703L7.29651 61.665L19.8531 68.3858L20.1179 67.8911L7.56131 61.1703Z" fill="#3F3D56"/>
<path d="M53.647 85.383C64.1426 85.383 72.6511 68.0224 72.6511 46.607C72.6511 25.1916 64.1426 7.83105 53.647 7.83105C43.1513 7.83105 34.6429 25.1916 34.6429 46.607C34.6429 68.0224 43.1513 85.383 53.647 85.383Z" fill="#5D34F2"/>
<path d="M55.8658 110C48.2675 64.4106 55.7891 18.9876 55.866 18.5342L56.4191 18.6279C56.3424 19.0805 48.8369 64.4142 56.4193 109.908L55.8658 110Z" fill="#3F3D56"/>
<path d="M70.6003 38.6834L53.4152 47.8755L53.6798 48.3703L70.865 39.1782L70.6003 38.6834Z" fill="#3F3D56"/>
<path d="M35.5431 43.2885L35.2783 43.7832L52.4611 52.9798L52.7259 52.4851L35.5431 43.2885Z" fill="#3F3D56"/>
<path d="M213.294 100.493C217.216 100.493 220.395 94.0066 220.395 86.0053C220.395 78.004 217.216 71.5176 213.294 71.5176C209.373 71.5176 206.194 78.004 206.194 86.0053C206.194 94.0066 209.373 100.493 213.294 100.493Z" fill="#3F3D56"/>
<path d="M212.639 109.72C215.483 92.6575 212.667 75.6569 212.639 75.4873L212.085 75.581C212.114 75.7498 214.913 92.661 212.085 109.628L212.639 109.72Z" fill="#5D34F2"/>
<path d="M207.043 82.89L206.779 83.3848L213.199 86.8191L213.464 86.3243L207.043 82.89Z" fill="#5D34F2"/>
<path d="M219.976 84.6106L213.556 88.0469L213.82 88.5416L220.24 85.1053L219.976 84.6106Z" fill="#5D34F2"/>
<path d="M230.355 91.9982C238.024 91.9982 244.242 79.3116 244.242 63.6619C244.242 48.0123 238.024 35.3257 230.355 35.3257C222.685 35.3257 216.467 48.0123 216.467 63.6619C216.467 79.3116 222.685 91.9982 230.355 91.9982Z" fill="#5D34F2"/>
<path d="M228.808 110C234.362 76.6726 228.864 43.4663 228.808 43.1348L228.254 43.2285C228.31 43.5592 233.793 76.6761 228.254 109.908L228.808 110Z" fill="#3F3D56"/>
<path d="M218.001 57.805L217.737 58.2998L230.295 65.0171L230.56 64.5223L218.001 57.805Z" fill="#3F3D56"/>
<path d="M243.549 61.1703L230.992 67.8911L231.257 68.3858L243.814 61.6651L243.549 61.1703Z" fill="#3F3D56"/>
<path d="M197.463 85.383C207.959 85.383 216.467 68.0224 216.467 46.607C216.467 25.1916 207.959 7.83105 197.463 7.83105C186.967 7.83105 178.459 25.1916 178.459 46.607C178.459 68.0224 186.967 85.383 197.463 85.383Z" fill="#5D34F2"/>
<path d="M195.244 110C202.843 64.4106 195.321 18.9876 195.244 18.5342L194.691 18.6279C194.768 19.0805 202.273 64.4142 194.691 109.908L195.244 110Z" fill="#3F3D56"/>
<path d="M180.51 38.6834L180.245 39.1782L197.43 48.3703L197.695 47.8755L180.51 38.6834Z" fill="#3F3D56"/>
<path d="M215.567 43.2882L198.384 52.4849L198.649 52.9796L215.831 43.783L215.567 43.2882Z" fill="#3F3D56"/>
<path d="M144.625 24.7583L146.871 22.9617C145.126 22.7692 144.409 23.7209 144.116 24.4741C142.753 23.908 141.268 24.6499 141.268 24.6499L145.763 26.2815C145.536 25.6759 145.141 25.1475 144.625 24.7583Z" fill="#3F3D56"/>
<path d="M89.7236 8.8979L91.9699 7.10133C90.2248 6.90881 89.5079 7.8605 89.2144 8.61377C87.8512 8.04768 86.3671 8.78957 86.3671 8.78957L90.8614 10.4212C90.6347 9.81557 90.24 9.28716 89.7236 8.8979Z" fill="#3F3D56"/>
<path d="M179.274 1.82173L181.52 0.0251599C179.775 -0.167361 179.058 0.784328 178.765 1.5376C177.401 0.971505 175.917 1.7134 175.917 1.7134L180.412 3.345C180.185 2.7394 179.79 2.21099 179.274 1.82173Z" fill="#3F3D56"/>
<path d="M183.809 106.643C183.212 106.643 182.625 106.801 182.108 107.1C181.584 106.625 180.932 106.313 180.233 106.201C179.534 106.089 178.818 106.183 178.171 106.471C177.524 106.758 176.975 107.227 176.59 107.821C176.205 108.415 176 109.108 176.001 109.815H187.213C187.152 108.954 186.767 108.148 186.135 107.56C185.504 106.971 184.672 106.644 183.809 106.643Z" fill="#3F3D56"/>
<path d="M69.8581 106.643C69.261 106.643 68.6744 106.801 68.1575 107.1C67.6326 106.625 66.9811 106.313 66.2822 106.201C65.5833 106.089 64.867 106.183 64.2202 106.471C63.5735 106.758 63.0242 107.227 62.6389 107.821C62.2537 108.415 62.0491 109.108 62.0499 109.815H73.2619C73.2008 108.954 72.8157 108.148 72.1841 107.56C71.5526 106.971 70.7214 106.644 69.8581 106.643Z" fill="#3F3D56"/>
<path d="M128.176 106.643C127.579 106.643 126.992 106.801 126.475 107.1C125.95 106.625 125.299 106.313 124.6 106.201C123.901 106.089 123.184 106.183 122.538 106.471C121.891 106.758 121.342 107.227 120.956 107.821C120.571 108.415 120.367 109.108 120.367 109.815H131.579C131.518 108.954 131.133 108.148 130.502 107.56C129.87 106.971 129.039 106.644 128.176 106.643Z" fill="#3F3D56"/>
<path d="M115.87 98.6343H83.5226V99.6776H88.5674V109.591H89.6108V99.6776H109.26V109.591H110.303V99.6776H115.87V98.6343Z" fill="#3F3D56"/>
<path d="M115.934 95.5122H83.5862V96.5557H115.934V95.5122Z" fill="#3F3D56"/>
<path d="M115.934 92.9038H83.5862V93.9473H115.934V92.9038Z" fill="#3F3D56"/>
<path d="M115.934 90.2949H83.5862V91.3384H115.934V90.2949Z" fill="#3F3D56"/>
<path d="M166.379 98.6343H134.032V99.6776H139.077V109.591H140.12V99.6776H159.769V109.591H160.813V99.6776H166.379V98.6343Z" fill="#3F3D56"/>
<path d="M166.443 95.5122H134.095V96.5557H166.443V95.5122Z" fill="#3F3D56"/>
<path d="M166.443 92.9038H134.095V93.9473H166.443V92.9038Z" fill="#3F3D56"/>
<path d="M166.443 90.2949H134.095V91.3384H166.443V90.2949Z" fill="#3F3D56"/>
</g>
<defs>
<clipPath id="clip0_1640_62321">
<rect width="243.484" height="110" fill="white" transform="translate(0.757812)"/>
</clipPath>
</defs>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 8.7 KiB

75
packages/console/src/assets/images/table-empty.svg Normal file
View file

@ -0,0 +1,75 @@
<svg width="245" height="110" viewBox="0 0 245 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_307_1571)">
<path d="M220.888 44.3013H213.529V69.7751H220.888V44.3013Z" fill="#F2F2F2"/>
<path d="M225.748 64.983L207.85 43.6898L171.922 44.0182L150.128 65.2463L150.568 65.5293H150.411V109.684H225.7V65.5293L225.748 64.983Z" fill="#F2F2F2"/>
<path d="M207.868 43.7352L185.508 69.9503V109.684H225.7V64.9633L207.868 43.7352Z" fill="#E6E6E6"/>
<path d="M209.85 87.7107H201.642V94.9658H209.85V87.7107Z" fill="#3F3D56"/>
<path d="M209.85 75.1529H201.642V82.2929H209.85V75.1529Z" fill="#3F3D56"/>
<path d="M209.85 87.7107H201.642V94.9658H209.85V87.7107Z" fill="white"/>
<path d="M209.85 75.1529H201.642V82.2929H209.85V75.1529Z" fill="white"/>
<path d="M173.371 85.7856H165.163V93.0407H173.371V85.7856Z" fill="white"/>
<path d="M173.371 73.2278H165.163V80.3678H173.371V73.2278Z" fill="white"/>
<path d="M162.815 44.3013H155.456V69.7751H162.815V44.3013Z" fill="#F2F2F2"/>
<path d="M167.675 64.983L149.777 43.6898L113.849 44.0182L92.0547 65.2463L92.4951 65.5293H92.3377V109.684H167.627V65.5293L167.675 64.983Z" fill="#F2F2F2"/>
<path d="M149.795 43.7352L127.435 69.9503V109.684H167.627V64.9633L149.795 43.7352Z" fill="#E6E6E6"/>
<path d="M151.777 87.7107H143.568V94.9658H151.777V87.7107Z" fill="#3F3D56"/>
<path d="M151.777 75.1529H143.568V82.2929H151.777V75.1529Z" fill="#3F3D56"/>
<path d="M151.777 87.7107H143.568V94.9658H151.777V87.7107Z" fill="white"/>
<path d="M151.777 75.1529H143.568V82.2929H151.777V75.1529Z" fill="white"/>
<path d="M115.298 85.7856H107.09V93.0407H115.298V85.7856Z" fill="white"/>
<path d="M115.298 73.2278H107.09V80.3678H115.298V73.2278Z" fill="white"/>
<path d="M103.351 22.3169H93.5176V56.356H103.351V22.3169Z" fill="#F2F2F2"/>
<path d="M109.845 49.9525L85.9283 21.4999L37.9202 21.9386L8.79785 50.3046L9.38615 50.6828H9.17606V109.684H109.781V50.6828L109.845 49.9525Z" fill="#F2F2F2"/>
<path d="M85.953 21.5604L56.0742 56.5902V109.684H109.78V49.9264L85.953 21.5604Z" fill="#E6E6E6"/>
<path d="M88.601 80.3223H77.6328V90.0169H88.601V80.3223Z" fill="#3F3D56"/>
<path d="M88.601 63.5421H77.6328V73.0829H88.601V63.5421Z" fill="#3F3D56"/>
<path d="M88.601 80.3223H77.6328V90.0169H88.601V80.3223Z" fill="white"/>
<path d="M88.601 63.5421H77.6328V73.0829H88.601V63.5421Z" fill="white"/>
<path d="M39.8578 77.7499H28.8896V87.4445H39.8578V77.7499Z" fill="white"/>
<path d="M39.8578 60.9697H28.8896V70.5105H39.8578V60.9697Z" fill="white"/>
<path d="M235.968 109.466H0.757812V109.954H235.968V109.466Z" fill="#3F3D56"/>
<path d="M37.8153 100.493C41.7367 100.493 44.9157 94.0067 44.9157 86.0054C44.9157 78.004 41.7367 71.5177 37.8153 71.5177C33.8938 71.5177 30.7148 78.004 30.7148 86.0054C30.7148 94.0067 33.8938 100.493 37.8153 100.493Z" fill="#3F3D56"/>
<path d="M38.4714 109.719C35.6277 92.6572 38.4428 75.6567 38.4716 75.4871L39.0247 75.5808C38.9961 75.7496 36.1971 92.6608 39.0249 109.627L38.4714 109.719Z" fill="#5D34F2"/>
<path d="M44.0672 82.8901L37.6465 86.3244L37.9111 86.8192L44.3318 83.3849L44.0672 82.8901Z" fill="#5D34F2"/>
<path d="M31.1339 84.6104L30.8691 85.1052L37.2891 88.5415L37.5539 88.0467L31.1339 84.6104Z" fill="#5D34F2"/>
<path d="M20.7557 91.9983C28.4256 91.9983 34.6433 79.3118 34.6433 63.6621C34.6433 48.0124 28.4256 35.3258 20.7557 35.3258C13.0858 35.3258 6.86816 48.0124 6.86816 63.6621C6.86816 79.3118 13.0858 91.9983 20.7557 91.9983Z" fill="#5D34F2"/>
<path d="M22.3025 110C16.7478 76.6723 22.2465 43.466 22.3027 43.1345L22.8558 43.2282C22.7998 43.5589 17.3173 76.6759 22.856 109.908L22.3025 110Z" fill="#3F3D56"/>
<path d="M33.1092 57.8052L20.5508 64.5225L20.8154 65.0173L33.3739 58.3L33.1092 57.8052Z" fill="#3F3D56"/>
<path d="M7.56168 61.1702L7.29688 61.6649L19.8535 68.3857L20.1183 67.891L7.56168 61.1702Z" fill="#3F3D56"/>
<path d="M53.6466 85.3831C64.1423 85.3831 72.6507 68.0225 72.6507 46.6072C72.6507 25.1918 64.1423 7.83121 53.6466 7.83121C43.151 7.83121 34.6426 25.1918 34.6426 46.6072C34.6426 68.0225 43.151 85.3831 53.6466 85.3831Z" fill="#5D34F2"/>
<path d="M55.8658 110C48.2675 64.4106 55.7891 18.9876 55.866 18.5341L56.4191 18.6278C56.3424 19.0804 48.8369 64.4141 56.4193 109.908L55.8658 110Z" fill="#3F3D56"/>
<path d="M70.6002 38.6836L53.415 47.8757L53.6797 48.3705L70.8649 39.1784L70.6002 38.6836Z" fill="#3F3D56"/>
<path d="M35.5431 43.2884L35.2783 43.7831L52.4611 52.9798L52.7259 52.485L35.5431 43.2884Z" fill="#3F3D56"/>
<path d="M213.295 100.493C217.216 100.493 220.395 94.0067 220.395 86.0054C220.395 78.004 217.216 71.5177 213.295 71.5177C209.373 71.5177 206.194 78.004 206.194 86.0054C206.194 94.0067 209.373 100.493 213.295 100.493Z" fill="#3F3D56"/>
<path d="M212.638 109.719C215.482 92.6572 212.667 75.6567 212.638 75.4871L212.085 75.5808C212.114 75.7496 214.913 92.6608 212.085 109.627L212.638 109.719Z" fill="#5D34F2"/>
<path d="M207.043 82.8901L206.778 83.3849L213.199 86.8192L213.464 86.3244L207.043 82.8901Z" fill="#5D34F2"/>
<path d="M219.976 84.6104L213.556 88.0467L213.82 88.5415L220.24 85.1052L219.976 84.6104Z" fill="#5D34F2"/>
<path d="M230.354 91.9983C238.024 91.9983 244.242 79.3118 244.242 63.6621C244.242 48.0124 238.024 35.3258 230.354 35.3258C222.684 35.3258 216.467 48.0124 216.467 63.6621C216.467 79.3118 222.684 91.9983 230.354 91.9983Z" fill="#5D34F2"/>
<path d="M228.807 110C234.362 76.6723 228.863 43.466 228.807 43.1345L228.254 43.2282C228.31 43.5589 233.793 76.6759 228.254 109.908L228.807 110Z" fill="#3F3D56"/>
<path d="M218.001 57.8052L217.736 58.3L230.295 65.0174L230.559 64.5225L218.001 57.8052Z" fill="#3F3D56"/>
<path d="M243.549 61.1702L230.992 67.891L231.257 68.3857L243.814 61.665L243.549 61.1702Z" fill="#3F3D56"/>
<path d="M197.463 85.3831C207.959 85.3831 216.467 68.0225 216.467 46.6072C216.467 25.1918 207.959 7.83121 197.463 7.83121C186.967 7.83121 178.459 25.1918 178.459 46.6072C178.459 68.0225 186.967 85.3831 197.463 85.3831Z" fill="#5D34F2"/>
<path d="M195.244 110C202.842 64.4106 195.321 18.9876 195.244 18.5341L194.691 18.6278C194.767 19.0804 202.273 64.4141 194.69 109.908L195.244 110Z" fill="#3F3D56"/>
<path d="M180.51 38.6836L180.245 39.1784L197.43 48.3705L197.695 47.8757L180.51 38.6836Z" fill="#3F3D56"/>
<path d="M215.566 43.2884L198.384 52.485L198.649 52.9797L215.831 43.7831L215.566 43.2884Z" fill="#3F3D56"/>
<path d="M144.625 24.7583L146.871 22.9617C145.126 22.7692 144.409 23.7209 144.116 24.4742C142.753 23.9081 141.269 24.65 141.269 24.65L145.763 26.2816C145.536 25.676 145.141 25.1476 144.625 24.7583Z" fill="#3F3D56"/>
<path d="M89.7237 8.89791L91.97 7.10135C90.225 6.90883 89.508 7.86051 89.2145 8.61379C87.8513 8.04769 86.3672 8.78958 86.3672 8.78958L90.8615 10.4212C90.6348 9.81558 90.2401 9.28717 89.7237 8.89791Z" fill="#3F3D56"/>
<path d="M179.274 1.82173L181.52 0.0251599C179.775 -0.167361 179.058 0.784328 178.764 1.5376C177.401 0.971505 175.917 1.7134 175.917 1.7134L180.411 3.345C180.185 2.7394 179.79 2.21099 179.274 1.82173Z" fill="#3F3D56"/>
<path d="M183.809 106.643C183.212 106.643 182.625 106.801 182.109 107.1C181.584 106.625 180.932 106.313 180.233 106.201C179.534 106.09 178.818 106.183 178.171 106.471C177.525 106.758 176.975 107.227 176.59 107.821C176.205 108.415 176 109.108 176.001 109.815H187.213C187.152 108.954 186.767 108.148 186.135 107.56C185.504 106.971 184.673 106.644 183.809 106.643Z" fill="#3F3D56"/>
<path d="M69.858 106.643C69.2609 106.643 68.6743 106.801 68.1574 107.1C67.6324 106.625 66.981 106.313 66.282 106.201C65.5831 106.09 64.8668 106.183 64.2201 106.471C63.5734 106.758 63.0241 107.227 62.6388 107.821C62.2536 108.415 62.0489 109.108 62.0498 109.815H73.2618C73.2007 108.954 72.8156 108.148 72.184 107.56C71.5524 106.971 70.7213 106.644 69.858 106.643Z" fill="#3F3D56"/>
<path d="M128.175 106.643C127.578 106.643 126.992 106.801 126.475 107.1C125.95 106.625 125.298 106.313 124.599 106.201C123.901 106.09 123.184 106.183 122.538 106.471C121.891 106.758 121.341 107.227 120.956 107.821C120.571 108.415 120.366 109.108 120.367 109.815H131.579C131.518 108.954 131.133 108.148 130.501 107.56C129.87 106.971 129.039 106.644 128.175 106.643Z" fill="#3F3D56"/>
<path d="M115.87 98.6342H83.5225V99.6775H88.5673V109.591H89.6107V99.6775H109.26V109.591H110.303V99.6775H115.87V98.6342Z" fill="#3F3D56"/>
<path d="M115.933 95.5124H83.5859V96.5558H115.933V95.5124Z" fill="#3F3D56"/>
<path d="M115.933 92.9037H83.5859V93.9472H115.933V92.9037Z" fill="#3F3D56"/>
<path d="M115.933 90.295H83.5859V91.3385H115.933V90.295Z" fill="#3F3D56"/>
<path d="M166.38 98.6342H134.032V99.6775H139.077V109.591H140.12V99.6775H159.77V109.591H160.813V99.6775H166.38V98.6342Z" fill="#3F3D56"/>
<path d="M166.443 95.5124H134.096V96.5558H166.443V95.5124Z" fill="#3F3D56"/>
<path d="M166.443 92.9037H134.096V93.9472H166.443V92.9037Z" fill="#3F3D56"/>
<path d="M166.443 90.295H134.096V91.3385H166.443V90.295Z" fill="#3F3D56"/>
</g>
<defs>
<clipPath id="clip0_307_1571">
<rect width="243.484" height="110" fill="white" transform="translate(0.757812)"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.7 KiB

17
packages/console/src/components/Table/TableEmpty.module.scss Normal file
View file

@ -0,0 +1,17 @@
@use '@/scss/underscore' as _;
.tableEmpty {
padding: _.unit(4) 0;
text-align: center;
.title {
font: var(--font-subhead-2);
margin-bottom: _.unit(2);
}
.content {
font: var(--font-body-2);
color: var(--color-neutral-50);
margin-bottom: _.unit(2);
}
}

33
packages/console/src/components/Table/TableEmpty.tsx Normal file
View file

@ -0,0 +1,33 @@
import React, { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import EmptyImage from '@/assets/images/table-empty.svg';
import * as styles from './TableEmpty.module.scss';
type Props = {
title?: string;
content?: string;
children?: ReactNode;
};
const TableEmpty = ({ title, content, children }: Props) => {
const { t } = useTranslation();
return (
<tr>
<td colSpan={0}>
<div className={styles.tableEmpty}>
<div>
<img src={EmptyImage} />
</div>
<div className={styles.title}>{title ?? t('admin_console.errors.empty')}</div>
{content && <div className={styles.content}>{content}</div>}
{children}
</div>
</td>
</tr>
);
};
export default TableEmpty;

12
packages/console/src/pages/ApiResources/index.tsx
View file

@ -13,6 +13,7 @@ import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview';
import TableEmpty from '@/components/Table/TableEmpty';
import TableError from '@/components/Table/TableError';
import TableLoading from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
@ -80,6 +81,17 @@ const ApiResources = () => {
/>
)}
{isLoading && <TableLoading columns={2} />}
{data?.length === 0 && (
<TableEmpty>
<Button
title="admin_console.api_resources.create"
type="outline"
onClick={() => {
setIsCreateFormOpen(true);
}}
/>
</TableEmpty>
)}
{data?.map(({ id, name, indicator }) => (
<tr
key={id}

12
packages/console/src/pages/Applications/index.tsx
View file

@ -13,6 +13,7 @@ import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview';
import TableEmpty from '@/components/Table/TableEmpty';
import TableError from '@/components/Table/TableError';
import TableLoading from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
@ -78,6 +79,17 @@ const Applications = () => {
/>
)}
{isLoading && <TableLoading columns={2} />}
{data?.length === 0 && (
<TableEmpty>
<Button
title="admin_console.applications.create"
type="outline"
onClick={() => {
setIsCreateFormOpen(true);
}}
/>
</TableEmpty>
)}
{data?.map(({ id, name, type }) => (
<tr
key={id}

20
packages/console/src/pages/Connectors/index.tsx
View file

@ -4,11 +4,11 @@ import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
import useSWR from 'swr';
import placeholder from '@/assets/images/social-connectors-placeholder.svg';
import Button from '@/components/Button';
import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import TabNav, { TabNavLink } from '@/components/TabNav';
import TableEmpty from '@/components/Table/TableEmpty';
import TableError from '@/components/Table/TableError';
import TableLoading from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
@ -88,18 +88,12 @@ const Connectors = () => {
)}
{isLoading && <TableLoading columns={3} />}
{socialConnectors?.length === 0 && (
<tr>
<td colSpan={3}>
<div className={styles.empty}>
<div>
<img src={placeholder} />
</div>
<div className={styles.emptyLine}>{t('connectors.type.social')}</div>
<div className={styles.emptyLine}>{t('connectors.social_connector_eg')}</div>
<Button disabled title="admin_console.connectors.create" type="primary" />
</div>
</td>
</tr>
<TableEmpty
title={t('connectors.type.social')}
content={t('connectors.social_connector_eg')}
>
<Button title="admin_console.connectors.create" type="outline" />
</TableEmpty>
)}
{!isLoading && !isSocial && (
<ConnectorRow

12
packages/console/src/pages/Users/index.tsx
View file

@ -10,6 +10,7 @@ import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview';
import TableEmpty from '@/components/Table/TableEmpty';
import TableError from '@/components/Table/TableError';
import TableLoading from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
@ -73,6 +74,17 @@ const Users = () => {
/>
)}
{isLoading && <TableLoading columns={3} />}
{data?.length === 0 && (
<TableEmpty>
<Button
title="admin_console.users.create"
type="outline"
onClick={() => {
setIsCreateFormOpen(true);
}}
/>
</TableEmpty>
)}
{data?.map(({ id, name, username }) => (
<tr
key={id}

1
packages/phrases/src/locales/en.ts
View file

@ -39,6 +39,7 @@ const translation = {
errors: {
something_went_wrong: 'Oops! Something went wrong',
unknown_server_error: 'Unknown server error occurred.',
empty: 'No Data',
},
tab_sections: {
overview: 'Overview',

1
packages/phrases/src/locales/zh-cn.ts
View file

@ -41,6 +41,7 @@ const translation = {
errors: {
something_went_wrong: '哎哟喂，遇到了一个错误',
unknown_server_error: '服务器发生未知错误。',
empty: '没有数据',
},
tab_sections: {
overview: '概览',