fix table design mismatch issues (#20653)

* fix table design mismatch issues

* change the table tag and description action buttons

* fix the table aligment in case of floating app on right side

* change the draggable icon

* icon change in NextPrevious component

* fix unit test

* fix localization issue

openmetadata-ui/src/main/resources/ui/src/assets/svg/arrow-right.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" fill="none"><path fill="#000" fill-rule="evenodd" d="M.305 9.708a1 1 0 0 1 0-1.413L3.59 5.006.305 1.717A.999.999 0 1 1 1.715.305L5.709 4.3a1 1 0 0 1 0 1.412L1.716 9.708a.998.998 0 0 1-1.411 0Z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"><path fill="currentColor" fill-rule="evenodd" d="M.305 9.708a1 1 0 0 1 0-1.413L3.59 5.006.305 1.717A.999.999 0 1 1 1.715.305L5.709 4.3a1 1 0 0 1 0 1.412L1.716 9.708a.998.998 0 0 1-1.411 0Z" clip-rule="evenodd"/></svg>

openmetadata-ui/src/main/resources/ui/src/assets/svg/comment.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"  fill="none"><path fill="currentColor" d="M9.406 3.313H3.781a.469.469 0 0 0 0 .937h5.625a.469.469 0 0 0 0-.938ZM7.531 5.188h-3.75a.469.469 0 0 0 0 .937h3.75a.469.469 0 0 0 0-.938Z"/><path fill="currentColor" d="M10.813.5H2.374C1.341.5.5 1.34.5 2.375v9.375a.468.468 0 0 0 .769.36L3.95 9.875h6.861c1.035 0 1.876-.84 1.876-1.875V2.375c0-1.034-.841-1.875-1.876-1.875ZM11.75 8c0 .517-.42.938-.938.938h-7.03a.468.468 0 0 0-.3.108L1.436 10.75V2.375c0-.517.42-.938.938-.938h8.438c.517 0 .937.421.937.938V8Z"/><path fill="currentColor" d="M13.625 4.25a.469.469 0 0 0 0 .938c.518 0 .938.42.938.937v7.93L12.98 12.79a.473.473 0 0 0-.293-.102H6.125a.938.938 0 0 1-.938-.938v-.469a.469.469 0 0 0-.937 0v.469c0 1.034.84 1.875 1.875 1.875h6.398l2.215 1.773a.473.473 0 0 0 .497.056.47.47 0 0 0 .265-.423V6.125c0-1.034-.84-1.875-1.875-1.875Z"/></svg>
+<svg viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9668 8.58336C15.9697 9.68325 15.7127 10.7683 15.2168 11.75C14.6288 12.9265 13.7249 13.916 12.6063 14.6078C11.4878 15.2995 10.1987 15.6662 8.88346 15.6667C7.78357 15.6696 6.69856 15.4126 5.7168 14.9167L0.966797 16.5L2.55013 11.75C2.05424 10.7683 1.79726 9.68325 1.80013 8.58336C1.80064 7.26815 2.16731 5.97907 2.85906 4.86048C3.55082 3.7419 4.54034 2.838 5.7168 2.25002C6.69856 1.75413 7.78357 1.49716 8.88346 1.50002H9.30013C11.0371 1.59585 12.6777 2.32899 13.9077 3.55907C15.1378 4.78915 15.871 6.42973 15.9668 8.16669V8.58336Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/assets/svg/drag.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" fill="none"><path fill="#76746F" d="M1.835 11.333c-.323 0-.598-.114-.825-.341a1.124 1.124 0 0 1-.342-.825c0-.322.114-.597.342-.825.227-.228.502-.342.825-.342.322 0 .597.114.825.342.227.228.341.503.341.825 0 .322-.114.597-.341.825a1.124 1.124 0 0 1-.825.341Zm4.333 0c-.322 0-.597-.114-.825-.341a1.124 1.124 0 0 1-.342-.825c0-.322.114-.597.342-.825.228-.228.503-.342.825-.342.322 0 .597.114.825.342.228.228.342.503.342.825 0 .322-.114.597-.342.825a1.124 1.124 0 0 1-.825.341ZM1.835 7.167c-.323 0-.598-.114-.825-.342A1.124 1.124 0 0 1 .668 6c0-.322.114-.597.342-.825.227-.228.502-.342.825-.342.322 0 .597.114.825.342.227.228.341.503.341.825 0 .322-.114.597-.341.825a1.124 1.124 0 0 1-.825.342Zm4.333 0c-.322 0-.597-.114-.825-.342A1.124 1.124 0 0 1 5.001 6c0-.322.114-.597.342-.825.228-.228.503-.342.825-.342.322 0 .597.114.825.342.228.228.342.503.342.825 0 .322-.114.597-.342.825a1.124 1.124 0 0 1-.825.342ZM1.835 3c-.323 0-.598-.114-.825-.342a1.124 1.124 0 0 1-.342-.825c0-.322.114-.597.342-.825.227-.227.502-.341.825-.341.322 0 .597.114.825.341.227.228.341.503.341.825 0 .323-.114.598-.341.825A1.124 1.124 0 0 1 1.835 3Zm4.333 0c-.322 0-.597-.114-.825-.342a1.124 1.124 0 0 1-.342-.825c0-.322.114-.597.342-.825.228-.227.503-.341.825-.341.322 0 .597.114.825.341.228.228.342.503.342.825 0 .323-.114.598-.342.825A1.124 1.124 0 0 1 6.168 3Z"/></svg>
+<svg viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.18182 1.98909C3.18182 1.16818 2.46909 0.5 1.59091 0.5C0.712727 0.5 0 1.16818 0 1.98909C0 2.81127 0.712727 3.47818 1.59091 3.47818C2.46909 3.47818 3.18182 2.81127 3.18182 1.98909ZM3.18182 13.0109C3.18182 12.1887 2.46909 11.5218 1.59091 11.5218C0.712727 11.5218 0 12.1887 0 13.0109C0 13.8318 0.712727 14.5 1.59091 14.5C2.46909 14.5 3.18182 13.8318 3.18182 13.0109ZM1.59091 6.01091C2.46909 6.01091 3.18182 6.67909 3.18182 7.5C3.18182 8.32091 2.46909 8.98909 1.59091 8.98909C0.712727 8.98909 0 8.32091 0 7.5C0 6.67909 0.712727 6.01091 1.59091 6.01091ZM7.95455 1.98909C7.95455 1.16818 7.24182 0.5 6.36364 0.5C5.48546 0.5 4.77273 1.16818 4.77273 1.98909C4.77273 2.81127 5.48546 3.47818 6.36364 3.47818C7.24182 3.47818 7.95455 2.81127 7.95455 1.98909ZM6.36364 11.5218C7.24182 11.5218 7.95455 12.1887 7.95455 13.0109C7.95455 13.8318 7.24182 14.5 6.36364 14.5C5.48546 14.5 4.77273 13.8318 4.77273 13.0109C4.77273 12.1887 5.48546 11.5218 6.36364 11.5218ZM7.95455 7.5C7.95455 6.67909 7.24182 6.01091 6.36364 6.01091C5.48546 6.01091 4.77273 6.67909 4.77273 7.5C4.77273 8.32091 5.48546 8.98909 6.36364 8.98909C7.24182 8.98909 7.95455 8.32091 7.95455 7.5Z" fill="currentColor"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/assets/svg/request-icon.svg

@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path fill="currentColor" stroke="currentColor" stroke-width=".2" d="M15.063 3.153a.44.44 0 0 0-.438.444v6.844c0 1.223-.98 2.219-2.187 2.219h-4.15a.44.44 0 0 0-.438.443v.883l-1.045-1.06a.437.437 0 0 0-.401-.266H3.562c-1.206 0-2.187-.996-2.187-2.22V3.608c0-1.224.98-2.22 2.187-2.22h8.768a.44.44 0 0 0 .438-.443A.44.44 0 0 0 12.33.5H3.562C1.874.5.5 1.894.5 3.607v6.834c0 1.713 1.374 3.106 3.062 3.106H6.18l1.796 1.823a.434.434 0 0 0 .477.096.444.444 0 0 0 .27-.41l.001-1.509h3.714c1.688 0 3.062-1.393 3.062-3.106V3.597a.44.44 0 0 0-.437-.444Z"/><path fill="currentColor" fill-rule="evenodd" stroke="currentColor" stroke-width=".2" d="M14.625 3.607h.875C15.5 1.894 14.127.5 12.438.5v.888c1.206 0 2.187.995 2.187 2.219Z" clip-rule="evenodd"/><path fill="currentColor" stroke="currentColor" stroke-width=".2" d="M9.91 5.406a1.87 1.87 0 0 0-1.718-1.742 1.822 1.822 0 0 0-1.394.5A1.899 1.899 0 0 0 6.21 5.54a.44.44 0 0 0 .437.443.44.44 0 0 0 .438-.443c0-.278.11-.536.31-.725.2-.19.462-.283.737-.264a.985.985 0 0 1 .904.917.985.985 0 0 1-.76 1.039.837.837 0 0 0-.652.823v1.066a.44.44 0 0 0 .438.444.44.44 0 0 0 .437-.444v-1.03a1.866 1.866 0 0 0 1.41-1.959Z"/><path fill="currentColor" stroke="currentColor" stroke-width=".1" d="M8.368 9.838a.438.438 0 0 0-.309-.13.438.438 0 0 0-.437.443.437.437 0 0 0 .747.314.451.451 0 0 0 0-.627Z"/></svg>
+<svg viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.80593 20.9905H2.62473C1.99491 20.9905 1.39089 20.7403 0.945543 20.295C0.500194 19.8496 0.25 19.2456 0.25 18.6158L0.25 3.37473C0.25 2.74491 0.500194 2.14089 0.945543 1.69554C1.39089 1.25019 1.99491 1 2.62473 1L13.6197 1C14.2496 1 14.8536 1.25019 15.2989 1.69554C15.7443 2.14089 15.9945 2.74491 15.9945 3.37473V9.07409C16.0015 9.14849 15.9929 9.22354 15.9693 9.29443C15.9456 9.36532 15.9074 9.43048 15.8571 9.48575C15.8068 9.54102 15.7455 9.58518 15.6772 9.61539C15.6088 9.64561 15.5349 9.66121 15.4602 9.66121C15.3854 9.66121 15.3115 9.64561 15.2432 9.61539C15.1748 9.58518 15.1135 9.54102 15.0632 9.48575C15.0129 9.43048 14.9747 9.36532 14.9511 9.29443C14.9274 9.22354 14.9188 9.14849 14.9258 9.07409V3.37473C14.9259 3.20531 14.8924 3.03755 14.8274 2.88108C14.7624 2.72461 14.6672 2.58251 14.5472 2.46293C14.4272 2.34335 14.2847 2.24864 14.128 2.18424C13.9713 2.11983 13.8034 2.087 13.634 2.08763H2.62473C2.45451 2.08574 2.28561 2.11764 2.1278 2.18148C1.97 2.24532 1.82642 2.33983 1.70539 2.45954C1.58436 2.57924 1.48827 2.72177 1.4227 2.87887C1.35713 3.03596 1.32337 3.2045 1.32338 3.37473V18.63C1.32337 18.8002 1.35713 18.9688 1.4227 19.1259C1.48827 19.283 1.58436 19.4255 1.70539 19.5452C1.82642 19.6649 1.97 19.7594 2.1278 19.8233C2.28561 19.8871 2.45451 19.919 2.62473 19.9171H9.80593C9.94827 19.9171 10.0848 19.9737 10.1854 20.0743C10.2861 20.175 10.3426 20.3115 10.3426 20.4538C10.3426 20.5962 10.2861 20.7327 10.1854 20.8333C10.0848 20.934 9.94827 20.9905 9.80593 20.9905Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.62473 1.25C2.06122 1.25 1.52078 1.47386 1.12232 1.87232C0.723855 2.27078 0.5 2.81122 0.5 3.37473V18.6158C0.5 19.1793 0.723855 19.7197 1.12232 20.1182C1.52078 20.5166 2.06122 20.7405 2.62473 20.7405H9.80593C9.88196 20.7405 9.95488 20.7103 10.0086 20.6565C10.0624 20.6028 10.0926 20.5298 10.0926 20.4538C10.0926 20.3778 10.0624 20.3049 10.0086 20.2511C9.95488 20.1973 9.88196 20.1671 9.80593 20.1671H2.62606C2.42326 20.1692 2.22206 20.1311 2.03405 20.055C1.84559 19.9788 1.67413 19.8659 1.52959 19.723C1.38505 19.58 1.2703 19.4098 1.19199 19.2222C1.11368 19.0346 1.07337 18.8333 1.07338 18.63V3.37475C1.07337 3.17146 1.11368 2.97017 1.19199 2.78257C1.2703 2.59496 1.38505 2.42475 1.52959 2.28179C1.67413 2.13883 1.84559 2.02597 2.03405 1.94973C2.22206 1.87367 2.42326 1.83557 2.62606 1.83763H13.6336M0.768766 1.51877C1.261 1.02653 1.92861 0.75 2.62473 0.75H13.6197C14.3159 0.75 14.9835 1.02653 15.4757 1.51877C15.9679 2.011 16.2445 2.67861 16.2445 3.37473V9.06345C16.2526 9.16828 16.2397 9.27374 16.2064 9.37357C16.1717 9.47748 16.1157 9.573 16.042 9.65402C15.9683 9.73503 15.8784 9.79976 15.7782 9.84405C15.678 9.88834 15.5697 9.91121 15.4602 9.91121C15.3506 9.91121 15.2423 9.88834 15.1421 9.84405C15.0419 9.79976 14.9521 9.73503 14.8783 9.65402C14.8046 9.573 14.7486 9.47748 14.7139 9.37357C14.6806 9.27374 14.6677 9.16828 14.6758 9.06345V3.37473C14.6758 3.23821 14.6489 3.10304 14.5965 2.97696C14.5442 2.85088 14.4674 2.73638 14.3707 2.64003C14.274 2.54368 14.1592 2.46736 14.033 2.41547C13.9067 2.36358 13.7714 2.33712 13.6349 2.33763L2.62197 2.33763C2.48481 2.33611 2.34871 2.3618 2.22156 2.41324C2.0944 2.46468 1.97871 2.54083 1.88119 2.63728C1.78366 2.73374 1.70624 2.84858 1.65341 2.97516C1.60057 3.10175 1.57337 3.23755 1.57338 3.37472V18.63C1.57337 18.7672 1.60057 18.903 1.65341 19.0296C1.70624 19.1562 1.78366 19.271 1.88119 19.3675C1.97871 19.4639 2.0944 19.5401 2.22156 19.5915C2.34871 19.643 2.48481 19.6687 2.62197 19.6671L2.62473 19.6671L9.80593 19.6671C10.0146 19.6671 10.2147 19.75 10.3622 19.8975C10.5097 20.0451 10.5926 20.2452 10.5926 20.4538C10.5926 20.6625 10.5097 20.8626 10.3622 21.0101C10.2147 21.1576 10.0146 21.2405 9.80593 21.2405H2.62473C1.92861 21.2405 1.261 20.964 0.768766 20.4717C0.276534 19.9795 0 19.3119 0 18.6158V3.37473C0 2.67861 0.276534 2.011 0.768766 1.51877Z" fill="currentColor"/>
+<path d="M12.6228 6.73739H3.59884C3.52444 6.74441 3.44939 6.73582 3.3785 6.71216C3.30762 6.6885 3.24245 6.6503 3.18718 6.6C3.13191 6.5497 3.08776 6.48841 3.05754 6.42006C3.02733 6.35171 3.01172 6.2778 3.01172 6.20307C3.01172 6.12834 3.02733 6.05443 3.05754 5.98608C3.08776 5.91773 3.13191 5.85644 3.18718 5.80614C3.24245 5.75585 3.30762 5.71764 3.3785 5.69399C3.44939 5.67033 3.52444 5.66173 3.59884 5.66876H12.6228C12.7558 5.68131 12.8794 5.74303 12.9693 5.84184C13.0592 5.94066 13.1091 6.06946 13.1091 6.20307C13.1091 6.33668 13.0592 6.46548 12.9693 6.5643C12.8794 6.66311 12.7558 6.72483 12.6228 6.73739Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.57535 5.91765C3.5356 5.9139 3.49552 5.91849 3.45765 5.93113C3.41978 5.94377 3.38497 5.96417 3.35545 5.99104C3.32592 6.01791 3.30234 6.05065 3.2862 6.08716C3.27006 6.12367 3.26172 6.16315 3.26172 6.20307C3.26172 6.24299 3.27006 6.28247 3.2862 6.31898C3.30234 6.3555 3.32592 6.38823 3.35545 6.4151C3.38497 6.44197 3.41978 6.46238 3.45765 6.47502C3.49552 6.48765 3.5356 6.49224 3.57535 6.48849L3.58707 6.48739H12.6092C12.6765 6.47867 12.7386 6.44636 12.7844 6.39603C12.8325 6.34325 12.8591 6.27444 12.8591 6.20307C12.8591 6.1317 12.8325 6.0629 12.7844 6.01011C12.7386 5.95978 12.6765 5.92747 12.6092 5.91876H3.58707L3.57535 5.91765ZM3.60949 5.41876C3.50465 5.41059 3.39919 5.42353 3.29936 5.45684C3.19545 5.49152 3.09993 5.54752 3.01892 5.62125C2.9379 5.69498 2.87317 5.78481 2.82889 5.885C2.7846 5.98519 2.76172 6.09353 2.76172 6.20307C2.76172 6.31261 2.7846 6.42095 2.82889 6.52114C2.87317 6.62133 2.9379 6.71117 3.01892 6.78489C3.09993 6.85862 3.19545 6.91462 3.29936 6.9493C3.39919 6.98262 3.50465 6.99555 3.60949 6.98739H12.6346L12.6463 6.98628C12.8413 6.96788 13.0224 6.87741 13.1542 6.73256C13.286 6.58772 13.3591 6.39892 13.3591 6.20307C13.3591 6.00723 13.286 5.81842 13.1542 5.67358C13.0224 5.52873 12.8413 5.43827 12.6463 5.41986L12.6346 5.41876H3.60949Z" fill="currentColor"/>
+<path d="M8.57605 10.9074H3.61286C3.47052 10.9074 3.33401 10.8508 3.23336 10.7502C3.13272 10.6495 3.07617 10.513 3.07617 10.3707C3.07617 10.2283 3.13272 10.0918 3.23336 9.99118C3.33401 9.89053 3.47052 9.83398 3.61286 9.83398H8.57605C8.71839 9.83398 8.8549 9.89053 8.95555 9.99118C9.0562 10.0918 9.11274 10.2283 9.11274 10.3707C9.11274 10.513 9.0562 10.6495 8.95555 10.7502C8.8549 10.8508 8.71839 10.9074 8.57605 10.9074Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.61286 10.084C3.53683 10.084 3.46391 10.1142 3.41014 10.168C3.35638 10.2217 3.32617 10.2946 3.32617 10.3707C3.32617 10.4467 3.35638 10.5196 3.41014 10.5734C3.46391 10.6272 3.53683 10.6574 3.61286 10.6574H8.57605C8.65209 10.6574 8.72501 10.6272 8.77877 10.5734C8.83254 10.5196 8.86274 10.4467 8.86274 10.3707C8.86274 10.2946 8.83254 10.2217 8.77877 10.168C8.72501 10.1142 8.65209 10.084 8.57605 10.084H3.61286ZM3.05659 9.8144C3.20412 9.66687 3.40422 9.58398 3.61286 9.58398H8.57605C8.7847 9.58398 8.98479 9.66687 9.13233 9.8144C9.27986 9.96193 9.36274 10.162 9.36274 10.3707C9.36274 10.5793 9.27986 10.7794 9.13233 10.9269C8.98479 11.0745 8.7847 11.1574 8.57605 11.1574H3.61286C3.40422 11.1574 3.20412 11.0745 3.05659 10.9269C2.90906 10.7794 2.82617 10.5793 2.82617 10.3707C2.82617 10.162 2.90906 9.96193 3.05659 9.8144Z" fill="currentColor"/>
+<path d="M11.9008 21C11.7597 21 11.624 20.945 11.5229 20.8465C11.4218 20.748 11.3631 20.6139 11.3594 20.4728C11.3974 18.0078 13.6201 16.7302 15.8144 16.7302H15.8524C17.9564 16.7302 20.2171 17.9176 20.2171 20.4633C20.2045 20.5975 20.1423 20.7222 20.0426 20.813C19.9429 20.9038 19.8129 20.9541 19.6781 20.9541C19.5432 20.9541 19.4133 20.9038 19.3136 20.813C19.2139 20.7222 19.1516 20.5975 19.139 20.4633C19.139 18.6538 17.4292 17.8179 15.8429 17.8084C14.2566 17.7989 12.466 18.611 12.4375 20.4728C12.435 20.6135 12.3774 20.7476 12.277 20.8462C12.1766 20.9448 12.0415 21 11.9008 21Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6087 20.4707C11.6118 20.545 11.6432 20.6154 11.6965 20.6674C11.751 20.7204 11.824 20.75 11.8999 20.75C11.9751 20.75 12.0474 20.7205 12.101 20.6678C12.1546 20.6152 12.1853 20.5437 12.1867 20.4687C12.2025 19.4453 12.7079 18.705 13.4162 18.2311C14.1161 17.7627 15.0123 17.5534 15.8436 17.5584C16.6753 17.5633 17.5518 17.7842 18.228 18.2557C18.9093 18.7308 19.3838 19.4604 19.3882 20.4495C19.3969 20.5181 19.4298 20.5815 19.4811 20.6282C19.5347 20.677 19.6047 20.7041 19.6773 20.7041C19.7498 20.7041 19.8198 20.677 19.8735 20.6282C19.9246 20.5816 19.9575 20.5184 19.9663 20.4499C19.9624 19.2685 19.4402 18.4119 18.6739 17.8428C17.8969 17.2658 16.861 16.9802 15.8516 16.9802H15.8136C14.7613 16.9802 13.7122 17.2872 12.9277 17.877C12.1507 18.4612 11.6281 19.3249 11.6087 20.4707ZM12.6273 17.4773C13.5122 16.8121 14.6716 16.4802 15.8136 16.4802H15.8516C16.9462 16.4802 18.0926 16.7883 18.972 17.4414C19.8592 18.1003 20.4663 19.1059 20.4663 20.4633V20.475L20.4652 20.4867C20.4468 20.6829 20.3558 20.8652 20.2101 20.9979C20.0644 21.1306 19.8744 21.2041 19.6773 21.2041C19.4802 21.2041 19.2902 21.1306 19.1445 20.9979C18.9987 20.8652 18.9077 20.6829 18.8893 20.4867L18.8882 20.475V20.4633C18.8882 19.6499 18.5091 19.0613 17.942 18.6659C17.3667 18.2647 16.5952 18.0629 15.8406 18.0583C15.0856 18.0538 14.2933 18.2458 13.6942 18.6466C13.1037 19.0418 12.6995 19.6384 12.6867 20.4766C12.683 20.6829 12.5985 20.88 12.4514 21.0245C12.3043 21.169 12.1063 21.25 11.9001 21.25M12.6273 17.4773C11.7362 18.1472 11.1289 19.1527 11.1086 20.469L12.6273 17.4773ZM11.3477 21.0256C11.1999 20.8817 12 18.5 11.1087 20.4794L11.1086 20.469M11.3477 21.0256C11.3477 19.8275 12.2374 19.5 11.9001 21.25L11.3477 21.0256Z" fill="currentColor"/>
+<path d="M15.819 15.7234C15.3161 15.7253 14.8239 15.5778 14.4048 15.2998C13.9856 15.0217 13.6585 14.6255 13.4647 14.1614C13.2709 13.6973 13.2193 13.1861 13.3162 12.6926C13.4132 12.199 13.6544 11.7454 14.0094 11.3891C14.3644 11.0328 14.8171 10.7898 15.3103 10.691C15.8035 10.5922 16.3148 10.642 16.7797 10.834C17.2446 11.026 17.642 11.3517 17.9216 11.7698C18.2012 12.1878 18.3505 12.6795 18.3505 13.1824C18.3505 13.8547 18.0841 14.4996 17.6096 14.9758C17.1351 15.4521 16.4913 15.7209 15.819 15.7234ZM15.819 11.5011C15.4861 11.4992 15.1601 11.5962 14.8824 11.7798C14.6046 11.9634 14.3876 12.2254 14.2589 12.5324C14.1302 12.8395 14.0956 13.1778 14.1594 13.5046C14.2232 13.8313 14.3825 14.1318 14.6173 14.3679C14.852 14.604 15.1516 14.7651 15.478 14.8307C15.8044 14.8964 16.1429 14.8636 16.4507 14.7366C16.7585 14.6097 17.0216 14.3942 17.2068 14.1175C17.392 13.8408 17.4908 13.5154 17.4908 13.1824C17.4908 12.7386 17.3148 12.3129 17.0015 11.9986C16.6881 11.6843 16.2628 11.5071 15.819 11.5059V11.5011Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6842 11.065C16.2651 10.8919 15.8041 10.847 15.3594 10.9361C14.9148 11.0252 14.5066 11.2443 14.1865 11.5655C13.8665 11.8868 13.649 12.2958 13.5615 12.7408C13.4741 13.1857 13.5207 13.6466 13.6954 14.0651C13.8701 14.4836 14.1651 14.8408 14.543 15.0915C14.9208 15.3422 15.3646 15.4751 15.8181 15.4734C16.4242 15.4711 17.0047 15.2288 17.4325 14.7994C17.8603 14.37 18.1005 13.7885 18.1005 13.1824C18.1005 12.729 17.9659 12.2857 17.7138 11.9088C17.4617 11.5318 17.1034 11.2382 16.6842 11.065ZM15.2612 10.4459C15.8029 10.3373 16.3646 10.392 16.8752 10.6029C17.3857 10.8139 17.8222 11.1716 18.1294 11.6308C18.4365 12.09 18.6005 12.63 18.6005 13.1824C18.6005 13.9208 18.3079 14.6291 17.7867 15.1523C17.2656 15.6754 16.5584 15.9706 15.82 15.9734C15.2675 15.9755 14.7269 15.8135 14.2665 15.5081C13.8062 15.2027 13.4469 14.7675 13.234 14.2577C13.0212 13.7479 12.9644 13.1864 13.0709 12.6444C13.1774 12.1023 13.4424 11.604 13.8323 11.2126C14.2222 10.8213 14.7195 10.5544 15.2612 10.4459ZM14.7445 11.5713C15.0635 11.3604 15.438 11.249 15.8204 11.2511L16.069 11.2525V11.2728C16.4869 11.3285 16.8776 11.5203 17.1785 11.8221C17.5386 12.1832 17.7408 12.6724 17.7408 13.1824C17.7408 13.5649 17.6273 13.9387 17.4146 14.2565C17.2019 14.5744 16.8996 14.8219 16.5461 14.9678C16.1925 15.1136 15.8036 15.1512 15.4287 15.0758C15.0538 15.0004 14.7097 14.8154 14.44 14.5442C14.1704 14.273 13.9873 13.9278 13.914 13.5525C13.8407 13.1771 13.8805 12.7885 14.0284 12.4358C14.1762 12.0831 14.4255 11.7822 14.7445 11.5713ZM15.697 11.7555C15.456 11.7745 15.223 11.8544 15.0202 11.9884C14.7838 12.1447 14.5991 12.3677 14.4895 12.6291C14.3799 12.8905 14.3504 13.1785 14.4047 13.4567C14.459 13.7348 14.5947 13.9906 14.7946 14.1916C14.9944 14.3926 15.2494 14.5297 15.5273 14.5856C15.8052 14.6415 16.0934 14.6136 16.3554 14.5055C16.6174 14.3974 16.8414 14.214 16.999 13.9785C17.1567 13.7429 17.2408 13.4659 17.2408 13.1824C17.2408 12.8048 17.0911 12.4425 16.8244 12.1751C16.5578 11.9077 16.196 11.7569 15.8183 11.7559L15.697 11.7555Z" fill="currentColor"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx

@@ -496,8 +496,8 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
   return (
     <>
       <Table
-        className="test-case-table-container"
         columns={columns}
+        containerClassName="test-case-table-container"
         {...(pagingData && showPagination
           ? {
               customPaginationProps: {

openmetadata-ui/src/main/resources/ui/src/components/Database/TableDescription/TableDescription.component.tsx

@@ -11,16 +11,15 @@
  *  limitations under the License.
  */
 
-import { Button, Space, Tooltip } from 'antd';
+import { Space } from 'antd';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as EditIcon } from '../../../assets/svg/edit-new.svg';
-import { DE_ACTIVE_COLOR, ICON_DIMENSION } from '../../../constants/constants';
 import { EntityField } from '../../../constants/Feeds.constants';
 import { EntityType } from '../../../enums/entity.enum';
 import EntityTasks from '../../../pages/TasksPage/EntityTasks/EntityTasks.component';
 import EntityLink from '../../../utils/EntityLink';
 import { getEntityFeedLink } from '../../../utils/EntityUtils';
+import { EditIconButton } from '../../common/IconButtons/EditIconButton';
 import RichTextEditorPreviewerNew from '../../common/RichTextEditor/RichTextEditorPreviewNew';
 import { useGenericContext } from '../../Customization/GenericProvider/GenericProvider';
 import SuggestionsAlert from '../../Suggestions/SuggestionsAlert/SuggestionsAlert';
@@ -95,27 +94,17 @@ const TableDescription = ({
       {descriptionContent}
 
       {!suggestionData && !isReadOnly ? (
-        <Space align="baseline" size="middle">
+        <div className="d-flex items-baseline gap-4">
           {hasEditPermission && (
-            <Tooltip
+            <EditIconButton
+              className="hover-cell-icon"
+              data-testid="edit-button"
+              size="small"
               title={t('label.edit-entity', {
                 entity: t('label.description'),
-              })}>
+              })}
-              <Button
+              onClick={onClick}
-                className="cursor-pointer hover-cell-icon"
-                data-testid="edit-button"
-                style={{
-                  color: DE_ACTIVE_COLOR,
-                  padding: 0,
-                  border: 'none',
-                  background: 'transparent',
-                }}
-                onClick={onClick}>
-                <EditIcon
-                  style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
             />
-              </Button>
-            </Tooltip>
           )}
 
           <EntityTasks
@@ -125,7 +114,7 @@ const TableDescription = ({
             entityType={entityType}
             onThreadLinkSelect={onThreadLinkSelect}
           />
-        </Space>
+        </div>
       ) : null}
     </Space>
   );

openmetadata-ui/src/main/resources/ui/src/components/IncidentManager/IncidentManager.component.tsx

@@ -575,8 +575,8 @@ const IncidentManager = ({
 
       <Col span={24}>
         <Table
-          className="test-case-table-container"
           columns={columns}
+          containerClassName="test-case-table-container"
           data-testid="test-case-incident-manager-table"
           dataSource={testCaseListData.data}
           loading={testCaseListData.isLoading}

openmetadata-ui/src/main/resources/ui/src/components/PaginationComponent/PaginationComponent.tsx

@@ -14,8 +14,7 @@ import Icon from '@ant-design/icons';
 import { Button, Pagination, PaginationProps } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as ArrowRightOutlined } from '../../assets/svg/arrow-right-full.svg';
+import { ReactComponent as ArrowRightOutlined } from '../../assets/svg/arrow-right.svg';
-import { ICON_DIMENSION } from '../../constants/constants';
 
 const PaginationComponent = (props: PaginationProps) => {
   const { t } = useTranslation();
@@ -31,9 +30,8 @@ const PaginationComponent = (props: PaginationProps) => {
           data-testid="previous"
           icon={
             <Icon
-              className="rotate-inverse"
+              className="pagination-prev-icon"
               component={ArrowRightOutlined}
-              style={ICON_DIMENSION}
             />
           }
           type="text">
@@ -48,7 +46,10 @@ const PaginationComponent = (props: PaginationProps) => {
           data-testid="next"
           type="text">
           <span> {t('label.next')}</span>
-          <Icon component={ArrowRightOutlined} style={ICON_DIMENSION} />
+          <Icon
+            className="pagination-next-icon"
+            component={ArrowRightOutlined}
+          />
         </Button>
       );
     }

openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx

@@ -42,7 +42,6 @@ import {
   getEpochMillisForPastDays,
 } from '../../../utils/date-time/DateTimeUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
-import Searchbar from '../../common/SearchBarComponent/SearchBar.component';
 import './execution.less';
 import ListView from './ListView/ListViewTab.component';
 import TreeViewTab from './TreeView/TreeViewTab.component';
@@ -204,25 +203,13 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => {
         </Col>
         <Col span={24}>
           {view === PIPELINE_EXECUTION_TABS.LIST_VIEW ? (
-            <div>
-              <Row>
-                <Col className="mb-4" span={6}>
-                  <Searchbar
-                    removeMargin
-                    placeholder="Filter by task name"
-                    searchValue={searchValue}
-                    typingInterval={500}
-                    onSearch={handleSearch}
-                  />
-                </Col>
-              </Row>
             <ListView
               executions={executions}
+              handleSearch={handleSearch}
               loading={isLoading}
               searchString={searchValue}
               status={status}
             />
-            </div>
           ) : (
             <TreeViewTab
               endTime={endTime}

openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/ListView/ListViewTab.component.test.tsx

@@ -21,6 +21,10 @@ jest.mock('../../../common/ErrorWithPlaceholder/FilterTablePlaceHolder', () =>
   jest.fn().mockImplementation(() => <div>FilterTablePlaceHolder</div>)
 );
 
+jest.mock('../../../common/SearchBarComponent/SearchBar.component', () =>
+  jest.fn().mockImplementation(() => <div>SearchBar</div>)
+);
+
 jest.mock('../../../../utils/executionUtils', () => ({
   getTableViewData: jest.fn().mockImplementation((data) => data),
   StatusIndicator: jest
@@ -33,6 +37,7 @@ const mockProps = {
   status: StatusType.Successful,
   loading: false,
   searchString: undefined,
+  handleSearch: jest.fn(),
 };
 
 describe('Test ListViewTab Component', () => {

openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/ListView/ListViewTab.component.tsx

@@ -29,6 +29,7 @@ interface ListViewProps {
   status: string;
   loading: boolean;
   searchString: string | undefined;
+  handleSearch: (value: string) => void;
 }
 
 const ListView = ({
@@ -36,6 +37,7 @@ const ListView = ({
   status,
   loading,
   searchString,
+  handleSearch,
 }: ListViewProps) => {
   const { t } = useTranslation();
 
@@ -44,6 +46,17 @@ const ListView = ({
     [executions, status, searchString]
   );
 
+  const searchProps = useMemo(
+    () => ({
+      removeMargin: true,
+      placeholder: t('message.filter-task-name-description'),
+      searchValue: searchString,
+      typingInterval: 500,
+      onSearch: handleSearch,
+    }),
+    [searchString, handleSearch]
+  );
+
   const columns = useMemo(
     () => [
       {
@@ -78,6 +91,7 @@ const ListView = ({
       }}
       pagination={false}
       rowKey={(record) => `${record.name}-${record.status}-${record.key}`}
+      searchProps={searchProps}
     />
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/Settings/CustomProperty/CustomPropertyTable.tsx

@@ -269,8 +269,8 @@ export const CustomPropertyTable: FC<CustomPropertyTableProp> = ({
   return (
     <Fragment>
       <Table
-        className="entity-custom-properties-table"
         columns={tableColumn}
+        containerClassName="entity-custom-properties-table"
         data-testid="entity-custom-properties-table"
         dataSource={customProperties}
         loading={isLoading}

openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.tsx

@@ -453,8 +453,8 @@ function IngestionListTable({
         className={classNames('ingestion-list-table', tableContainerClassName)}
         data-testid="ingestion-table">
         <Table
-          className={tableClassName}
           columns={tableColumn}
+          containerClassName={tableClassName}
           {...(!isUndefined(ingestionPagingInfo) &&
           ingestionPagingInfo.showPagination &&
           onPageChange

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/RolesAndPoliciesList.tsx

@@ -119,8 +119,8 @@ const ListEntities = ({
 
   return (
     <Table
-      className="list-table"
       columns={columns}
+      containerClassName="list-table"
       dataSource={list}
       pagination={false}
       rowKey="id"

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx

@@ -89,7 +89,6 @@ import ManageButton from '../../../common/EntityPageInfos/ManageButton/ManageBut
 import ErrorPlaceHolder from '../../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import Loader from '../../../common/Loader/Loader';
 import { ManageButtonItemLabel } from '../../../common/ManageButtonContentItem/ManageButtonContentItem.component';
-import Searchbar from '../../../common/SearchBarComponent/SearchBar.component';
 import TabsLabel from '../../../common/TabsLabel/TabsLabel.component';
 import TitleBreadcrumb from '../../../common/TitleBreadcrumb/TitleBreadcrumb.component';
 import { TitleBreadcrumbProps } from '../../../common/TitleBreadcrumb/TitleBreadcrumb.interface';
@@ -200,8 +199,6 @@ const TeamDetailsV1 = ({
     entity: t('label.role'),
   });
 
-  const addTeam = t('label.add-entity', { entity: t('label.team') });
-
   const isTeamDeleted = useMemo(
     () => currentTeam.deleted ?? false,
     [currentTeam]
@@ -663,57 +660,21 @@ const TeamDetailsV1 = ({
         </Tooltip>
       </ErrorPlaceHolder>
     ) : (
-      <Row
-        className="team-list-container"
-        gutter={[0, 16]}
-        justify="space-between">
-        <Col span={8}>
-          <Searchbar
-            removeMargin
-            placeholder={t('label.search-entity', {
-              entity: t('label.team'),
-            })}
-            searchValue={searchTerm}
-            typingInterval={500}
-            onSearch={handleTeamSearch}
-          />
-        </Col>
-        <Col>
-          <Space align="center">
-            <span>
-              <Switch
-                checked={showDeletedTeam}
-                data-testid="show-deleted"
-                onClick={onShowDeletedTeamChange}
-              />
-              <Typography.Text className="m-l-xs">
-                {t('label.deleted')}
-              </Typography.Text>
-            </span>
-
-            {createTeamPermission && !isTeamDeleted && (
-              <Button
-                data-testid="add-team"
-                type="primary"
-                onClick={handleAddTeamButtonClick}>
-                {addTeam}
-              </Button>
-            )}
-          </Space>
-        </Col>
-        <Col span={24}>
       <TeamHierarchy
+        createTeamPermission={createTeamPermission}
         currentTeam={currentTeam}
         data={childTeamList}
+        handleAddTeamButtonClick={handleAddTeamButtonClick}
+        handleTeamSearch={handleTeamSearch}
         isFetchingAllTeamAdvancedDetails={isFetchingAllTeamAdvancedDetails}
+        isTeamDeleted={isTeamDeleted}
         searchTerm={searchTerm}
+        showDeletedTeam={showDeletedTeam}
+        onShowDeletedTeamChange={onShowDeletedTeamChange}
         onTeamExpand={onTeamExpand}
       />
-        </Col>
-      </Row>
     );
   }, [
-    addTeam,
     searchTerm,
     isTeamDeleted,
     currentTeam,
@@ -1182,7 +1143,7 @@ const TeamDetailsV1 = ({
           <Tabs
             destroyInactiveTabPane
             activeKey={currentTab}
-            className="tabs-new p-md"
+            className="tabs-new"
             items={tabs}
             onChange={updateActiveTab}
           />

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamHierarchy.test.tsx

@@ -26,6 +26,12 @@ const teamHierarchyPropsData: TeamHierarchyProps = {
   currentTeam: MOCK_CURRENT_TEAM,
   onTeamExpand: jest.fn(),
   isFetchingAllTeamAdvancedDetails: false,
+  showDeletedTeam: false,
+  onShowDeletedTeamChange: jest.fn(),
+  handleAddTeamButtonClick: jest.fn(),
+  createTeamPermission: true,
+  isTeamDeleted: false,
+  handleTeamSearch: jest.fn(),
 };
 
 const mockShowErrorToast = jest.fn();
@@ -71,6 +77,10 @@ jest.mock('../../../../utils/ToastUtils', () => ({
   showErrorToast: jest.fn().mockImplementation(() => mockShowErrorToast),
 }));
 
+jest.mock('../../../common/SearchBarComponent/SearchBar.component', () =>
+  jest.fn().mockImplementation(() => <div>SearchBar</div>)
+);
+
 describe('Team Hierarchy page', () => {
   it('Initially, Table should load', async () => {
     await act(async () => {

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamHierarchy.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Modal, Skeleton, Typography } from 'antd';
+import { Button, Modal, Skeleton, Space, Switch, Typography } from 'antd';
 import { ColumnsType, TableProps } from 'antd/lib/table';
 import { ExpandableConfig } from 'antd/lib/table/interface';
 import { AxiosError } from 'axios';
@@ -55,6 +55,12 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
   onTeamExpand,
   isFetchingAllTeamAdvancedDetails,
   searchTerm,
+  showDeletedTeam,
+  onShowDeletedTeamChange,
+  handleAddTeamButtonClick,
+  createTeamPermission,
+  isTeamDeleted,
+  handleTeamSearch,
 }) => {
   const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
@@ -62,6 +68,18 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
   const [movedTeam, setMovedTeam] = useState<MovedTeamProps>();
   const [isTableHovered, setIsTableHovered] = useState(false);
 
+  const searchProps = useMemo(
+    () => ({
+      placeholder: t('label.search-entity', {
+        entity: t('label.team'),
+      }),
+      searchValue: searchTerm,
+      typingInterval: 500,
+      onSearch: handleTeamSearch,
+    }),
+    [searchTerm, handleTeamSearch]
+  );
+
   const columns: ColumnsType<Team> = useMemo(() => {
     return [
       {
@@ -252,7 +270,7 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
   );
 
   return (
-    <>
+    <div className="team-list-container">
       <DndProvider backend={HTML5Backend}>
         <Table
           className={classNames('teams-list-table drop-over-background', {
@@ -263,12 +281,36 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
           data-testid="team-hierarchy-table"
           dataSource={data}
           expandable={expandableConfig}
+          extraTableFilters={
+            <Space align="center">
+              <span>
+                <Switch
+                  checked={showDeletedTeam}
+                  data-testid="show-deleted"
+                  onClick={onShowDeletedTeamChange}
+                />
+                <Typography.Text className="m-l-xs">
+                  {t('label.deleted')}
+                </Typography.Text>
+              </span>
+
+              {createTeamPermission && !isTeamDeleted && (
+                <Button
+                  data-testid="add-team"
+                  type="primary"
+                  onClick={handleAddTeamButtonClick}>
+                  {t('label.add-entity', { entity: t('label.team') })}
+                </Button>
+              )}
+            </Space>
+          }
           loading={isTableLoading}
           locale={{
             emptyText: <FilterTablePlaceHolder />,
           }}
           pagination={false}
           rowKey="name"
+          searchProps={searchProps}
           size="small"
           onHeaderRow={onTableHeader}
           onRow={onTableRow}
@@ -297,7 +339,7 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
           }}
         />
       </Modal>
-    </>
+    </div>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/team.interface.ts

@@ -27,6 +27,12 @@ export interface TeamHierarchyProps {
   ) => void;
   isFetchingAllTeamAdvancedDetails: boolean;
   searchTerm?: string;
+  showDeletedTeam: boolean;
+  onShowDeletedTeamChange: () => void;
+  handleAddTeamButtonClick: () => void;
+  createTeamPermission: boolean;
+  isTeamDeleted: boolean;
+  handleTeamSearch: (text: string) => void;
 }
 
 export interface MovedTeamProps {

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/teams.less

@@ -14,7 +14,7 @@
 @import url('../../../../styles/variables.less');
 
 .team-list-container {
-  padding: 20px 0;
+  padding: 20px 0 10px 0;
   .ant-btn {
     border-radius: 4px;
   }

openmetadata-ui/src/main/resources/ui/src/components/common/IconButtons/EditIconButton.tsx

@@ -18,7 +18,6 @@ import { ReactComponent as CommentIcon } from '../../../assets/svg/comment.svg';
 import { ReactComponent as EditIcon } from '../../../assets/svg/edit-new.svg';
 import { ReactComponent as ExpandIcon } from '../../../assets/svg/ic-expand-right.svg';
 import { ReactComponent as RequestIcon } from '../../../assets/svg/request-icon.svg';
-import { DE_ACTIVE_COLOR } from '../../../constants/constants';
 
 type IconButtonPropsInternal = ButtonProps & {
   newLook?: boolean;
@@ -43,7 +42,7 @@ export const EditIconButton = ({
       ) : (
         <Button
           className={className}
-          icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
+          icon={<EditIcon className="table-action-icon" />}
           size="small"
           type="text"
           {...props}
@@ -71,8 +70,8 @@ export const RequestIconButton = ({
         />
       ) : (
         <Icon
+          className={classNames('table-action-icon', className)}
           component={RequestIcon}
-          style={{ color: DE_ACTIVE_COLOR }}
           {...props}
         />
       )}
@@ -98,8 +97,8 @@ export const CommentIconButton = ({
         />
       ) : (
         <Icon
+          className={classNames('table-action-icon', className)}
           component={CommentIcon}
-          style={{ color: DE_ACTIVE_COLOR }}
           {...props}
         />
       )}

openmetadata-ui/src/main/resources/ui/src/components/common/NextPrevious/NextPrevious.tsx

@@ -16,7 +16,7 @@ import { Button, Dropdown } from 'antd';
 import classNames from 'classnames';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as ArrowRightOutlined } from '../../../assets/svg/arrow-right-full.svg';
+import { ReactComponent as ArrowRightOutlined } from '../../../assets/svg/arrow-right.svg';
 import { ReactComponent as DownOutlined } from '../../../assets/svg/ic-arrow-down.svg';
 import {
   ICON_DIMENSION,
@@ -97,9 +97,8 @@ const NextPrevious: FC<NextPreviousProps> = ({
         disabled={computePrevDisableState() || isLoading}
         icon={
           <Icon
-            className="rotate-inverse"
+            className="pagination-prev-icon"
             component={ArrowRightOutlined}
-            style={ICON_DIMENSION}
           />
         }
         type="text"
@@ -119,7 +118,7 @@ const NextPrevious: FC<NextPreviousProps> = ({
         type="text"
         onClick={onNextHandler}>
         <span> {t('label.next')}</span>
-        <Icon component={ArrowRightOutlined} style={ICON_DIMENSION} />
+        <Icon className="pagination-next-icon" component={ArrowRightOutlined} />
       </Button>
       {onShowSizeChange && (
         <Dropdown

openmetadata-ui/src/main/resources/ui/src/components/common/SearchBarComponent/SearchBar.component.tsx

@@ -24,6 +24,7 @@ import './search-bar.less';
 
 export type SearchBarProps = {
   inputClassName?: string;
+  containerClassName?: string;
   onSearch: (text: string) => void;
   searchValue?: string;
   typingInterval?: number;
@@ -42,6 +43,7 @@ export type SearchBarProps = {
 
 const Searchbar = ({
   inputClassName = '',
+  containerClassName = '',
   onSearch,
   searchValue,
   typingInterval = 0,
@@ -96,7 +98,7 @@ const Searchbar = ({
 
   return (
     <div
-      className={classNames('page-search-bar', {
+      className={classNames('page-search-bar', containerClassName, {
         'm-b-md': !removeMargin,
       })}
       data-testid="search-bar-container">

openmetadata-ui/src/main/resources/ui/src/components/common/SearchBarComponent/search-bar.less

@@ -13,10 +13,21 @@
 @import (reference) url('../../../styles/variables.less');
 
 .page-search-bar {
+  width: 100%;
   .ant-input-affix-wrapper {
     border-radius: 10px;
-    border: 1px solid @blue-15;
+    border: 1px solid @border-color-6;
+    background: @grey-17;
     height: 40px;
+
+    .ant-input {
+      background: @grey-17;
+
+      &::placeholder {
+        color: @grey-21;
+        font-weight: 300;
+      }
+    }
   }
 
   .ant-input-affix-wrapper:focus,

openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx

@@ -47,6 +47,7 @@ import {
   handleUpdateTableColumnSelections,
 } from '../../../utils/TableUtils';
 import { useGenericContext } from '../../Customization/GenericProvider/GenericProvider';
+import AppBadge from '../Badge/Badge.component';
 import Loader from '../Loader/Loader';
 import NextPrevious from '../NextPrevious/NextPrevious';
 import Searchbar from '../SearchBarComponent/SearchBar.component';
@@ -241,31 +242,41 @@ const Table = <T extends Record<string, unknown>>(
 
   return (
     <Row className={classNames('table-container', rest.containerClassName)}>
-      <Col
+      <Col span={24}>
-        className={classNames({
+        <Row className="p-md">
-          'p-y-md': searchProps ?? rest.extraTableFilters ?? !isFullViewTable,
-        })}
-        span={24}>
-        <Row className="p-x-md">
-          {searchProps ? (
           <Col span={12}>
+            <div className="h-full d-flex items-center">
+              <div className="table-data-count-container">
+                <Typography.Text>{t('label.table-plural')}</Typography.Text>
+                <AppBadge
+                  className="total-count-badge"
+                  label={(
+                    customPaginationProps?.paging?.total ??
+                    (rest.dataSource ?? []).length
+                  ).toString()}
+                />
+              </div>
+
+              {searchProps ? (
                 <Searchbar
                   {...searchProps}
                   removeMargin
+                  containerClassName="m-l-xlg w-400"
                   placeholder={searchProps?.placeholder ?? t('label.search')}
                   searchValue={searchProps?.value}
                   typingInterval={searchProps?.searchDebounceTime ?? 500}
                   onSearch={handleSearchAction}
                 />
-            </Col>
               ) : null}
+            </div>
+          </Col>
           {(rest.extraTableFilters || !isFullViewTable) && (
             <Col
               className={classNames(
                 'd-flex justify-end items-center gap-5',
                 rest.extraTableFiltersClassName
               )}
-              span={searchProps ? 12 : 24}>
+              span={12}>
               {rest.extraTableFilters}
               {!isFullViewTable && (
                 <DndProvider backend={HTML5Backend}>

openmetadata-ui/src/main/resources/ui/src/components/common/Table/table.less

@@ -16,9 +16,32 @@
   height: initial !important;
   border-radius: 12px;
   background-color: @white;
-  border: 1px solid @border-color;
+  border: 1px solid @border-color-1;
   overflow: hidden;
 
+  .table-data-count-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .ant-typography {
+      font-size: 16px;
+      font-weight: 600;
+      color: @text-color;
+    }
+
+    .total-count-badge {
+      background-color: @blue-1;
+      padding: 6px 12px;
+
+      .ant-typography {
+        color: @primary-color;
+        font-size: 12px;
+        font-weight: 500;
+      }
+    }
+  }
+
   .ant-table-body {
     scrollbar-width: none;
 

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "Schließen Sie explizit {{filterPattern}} durch Hinzufügen einer Liste von durch Kommas getrennten regulären Ausdrücken {{activity}} ein oder aus.",
     "filter-pattern-info": "Wählen Sie aus, ob {{filterPattern}} als Teil der Metadaten-Erfassung ein- oder ausgeschlossen werden soll.",
     "filter-pattern-placeholder": "Um einen Filtermuster hinzuzufügen, geben Sie es einfach ein und drücken Sie Enter.",
+    "filter-task-name-description": "Nach Aufgabenname filtern",
     "find-apps-to-improve-data": "Finden Sie Anwendungsfälle, um Ihre Daten zu verbessern.",
     "find-in-table": "In Tabelle suchen",
     "fosters-collaboration-among-producers-and-consumers": "Setzen Sie Unternehmensziele und KPIs, um die Datenkultur Ihres Unternehmens proaktiv voranzutreiben. Fördern Sie eine Kultur kontinuierlicher Verbesserung mit rechtzeitigen Berichten zur Überwachung der Datenqualität.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "Explicitly {{activity}} {{filterPattern}} by adding a list of comma-separated regex.",
     "filter-pattern-info": "Choose to include or exclude {{filterPattern}} as part of the metadata ingestion.",
     "filter-pattern-placeholder": "To add a filter pattern, simply type it in and press Enter",
+    "filter-task-name-description": "Filter by task name",
     "find-apps-to-improve-data": "Find applications to improve your data",
     "find-in-table": "Find in table",
     "fosters-collaboration-among-producers-and-consumers": "Set organizational goals and KPIs to proactively drive the data culture of your company. Foster a culture of continuous improvement with timely reports to monitor data health.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "Excluya o incluya explícitamente {{filterPattern}} mediante la adición de una lista de expresiones regulares separadas por comas.",
     "filter-pattern-info": "Elija incluir o excluir {{filterPattern}} como parte de la ingestión de metadatos.",
     "filter-pattern-placeholder": "Para agregar un patrón de filtro, simplemente escríbalo y presione Enter",
+    "filter-task-name-description": "Filtrar por nombre de tarea",
     "find-apps-to-improve-data": "Encuentra aplicaciones para mejorar tus datos",
     "find-in-table": "Buscar en la tabla",
     "fosters-collaboration-among-producers-and-consumers": "Fomenta la colaboración entre los productores y consumidores de datos.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "Explicitement {{filterPattern}} {{activity}} en ajoutant une liste d'expressions régulières séparées par des virgules.",
     "filter-pattern-info": "Choisir d'inclure ou d'exclure {{filterPattern}} en tant que partie de l'ingestion de métadonnées.",
     "filter-pattern-placeholder": "Pour ajouter un pattern de filtre, entrez-le et appuyez sur Entrée",
+    "filter-task-name-description": "Filtrer par nom de tâche",
     "find-apps-to-improve-data": "Trouvez des applications pour améliorer vos données",
     "find-in-table": "Trouver dans la table",
     "fosters-collaboration-among-producers-and-consumers": "Encouragez la collaborations entre les consommateurs et producteurs de données",

openmetadata-ui/src/main/resources/ui/src/locale/languages/gl-es.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "{{activity}} explícitamente {{filterPattern}} engadindo unha lista de regex separados por comas.",
     "filter-pattern-info": "Escolle incluir ou excluír {{filterPattern}} como parte da inxestión de metadatos.",
     "filter-pattern-placeholder": "Para engadir un patrón de filtro, simplemente escríbeo e preme Enter",
+    "filter-task-name-description": "Filtrar por nome da tarefa",
     "find-apps-to-improve-data": "Atopa aplicacións para mellorar os teus datos",
     "find-in-table": "Buscar na táboa",
     "fosters-collaboration-among-producers-and-consumers": "Establece obxectivos organizativos e KPI para impulsar proactivamente a cultura de datos da túa empresa. Fomenta unha cultura de mellora continua con informes oportunos para supervisar a saúde dos datos.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/he-he.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "הגדר {{activity}} באופן מפורש {{filterPattern}} על ידי הוספת רשימה של רגקס מופרדות בפסיקים.",
     "filter-pattern-info": "בחר לכלול או לא לכלול {{filterPattern}} כחלק מתהליך הקליטה של המטא-דאטה.",
     "filter-pattern-placeholder": "כדי להוסיף דפוס מסנן, פשוט הקלד אותו ולחץ על Enter",
+    "filter-task-name-description": "סנן לפי שם משימה",
     "find-apps-to-improve-data": "מצא אפליקציות לשיפור הנתונים שלך",
     "find-in-table": "מצא בטבלה",
     "fosters-collaboration-among-producers-and-consumers": "קבע מטרות וקודקודים מפתיעים לקידום תרבות הנתונים של החברה שלך. קידום תרבות של שיפור רגעי עם דוחות זמינים לצפייה כדי למזער בריאות הנתונים.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "Explicitly {{activity}} {{filterPattern}} by adding a list of comma-separated regex.",
     "filter-pattern-info": "メタデータ取り込み時に{{filterPattern}}を含めるか除外するか選択する。",
     "filter-pattern-placeholder": "To add a filter pattern, simply type it in and press Enter",
+    "filter-task-name-description": "タスク名でフィルター",
     "find-apps-to-improve-data": "Find applications to improve your data",
     "find-in-table": "テーブルで探す",
     "fosters-collaboration-among-producers-and-consumers": "Fosters collaboration among the producers and consumers of data.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ko-kr.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "쉼표로 구분된 정규식 목록을 추가하여 명시적으로 {{filterPattern}}을(를) {{activity}}합니다.",
     "filter-pattern-info": "메타데이터 수집의 일부로서 {{filterPattern}}을 포함하거나 제외할지를 선택하세요.",
     "filter-pattern-placeholder": "필터 패턴을 추가하려면 입력 후 Enter 키를 누르세요.",
+    "filter-task-name-description": "작업 이름으로 필터링",
     "find-apps-to-improve-data": "데이터 개선을 위한 애플리케이션을 찾으세요.",
     "find-in-table": "테이블에서 찾기",
     "fosters-collaboration-among-producers-and-consumers": "조직의 목표와 KPI를 설정하여 데이터 문화를 촉진하고, 시기적절한 보고서로 데이터 상태를 모니터링하며 지속적인 개선 문화를 구축하세요.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/mr-in.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "स्वल्पविराम-विभक्त regex यादी जोडून स्पष्टपणे {{activity}} {{filterPattern}}.",
     "filter-pattern-info": "मेटाडेटा अंतर्ग्रहणाचा भाग म्हणून {{filterPattern}} समाविष्ट किंवा वगळण्याचा पर्याय निवडा.",
     "filter-pattern-placeholder": "फिल्टर पॅटर्न जोडण्यासाठी, फक्त टाइप करा आणि Enter दाबा",
+    "filter-task-name-description": "कामाचे नावानुसार फिल्टर करा",
     "find-apps-to-improve-data": "तुमचा डेटा सुधारण्यासाठी अनुप्रयोग शोधा",
     "find-in-table": "तक्त्यात शोधा",
     "fosters-collaboration-among-producers-and-consumers": "तुमच्या कंपनीच्या डेटा संस्कृतीला सक्रियपणे चालवण्यासाठी संघटनेचे उद्दिष्टे आणि KPI सेट करा. डेटा आरोग्याचे निरीक्षण करण्यासाठी वेळेवर अहवालांसह सतत सुधारणा संस्कृतीला प्रोत्साहन द्या.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/nl-nl.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "Expliciet {{activity}} {{filterPattern}} door een lijst met door komma's gescheiden regex toe te voegen.",
     "filter-pattern-info": "Kies ervoor om {{filterPattern}} wel of niet op te nemen als onderdeel van de metadataingestie.",
     "filter-pattern-placeholder": "Voeg een filterpatroon toe door het eenvoudig in te typen en op Enter te drukken",
+    "filter-task-name-description": "Filter op taaknaam",
     "find-apps-to-improve-data": "Zoek naar applicaties om je data te verbeteren",
     "find-in-table": "Zoeken in tabel",
     "fosters-collaboration-among-producers-and-consumers": "Stel organisatiedoelen en KPI's om proactief de datacultuur van je bedrijf te stimuleren. Bevorder een cultuur van continue verbetering met tijdige rapporten om de status van de data te volgen.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pr-pr.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "{{activity}} {{filterPattern}} به‌طور صریح با افزودن لیستی از regex جدا شده با کاما.",
     "filter-pattern-info": "انتخاب کنید که آیا می‌خواهید {{filterPattern}} را به عنوان بخشی از استخراج متادیتا شامل کنید یا حذف کنید.",
     "filter-pattern-placeholder": "برای افزودن یک الگوی فیلتر، کافی است آن را تایپ کنید و Enter را فشار دهید.",
+    "filter-task-name-description": "نام وظیفه را فیلتر کنید",
     "find-apps-to-improve-data": "برنامه‌هایی برای بهبود داده‌های خود پیدا کنید.",
     "find-in-table": "پیدا کردن در جدول",
     "fosters-collaboration-among-producers-and-consumers": "اهداف سازمانی و KPIها را تعیین کنید تا فرهنگ داده شرکت خود را به صورت فعالانه هدایت کنید. با گزارش‌های به‌موقع برای نظارت بر سلامت داده‌ها، فرهنگ بهبود مستمر را تقویت کنید.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "Explicitamente {{activity}} {{filterPattern}} adicionando uma lista de regex separados por vírgula.",
     "filter-pattern-info": "Escolha incluir ou excluir {{filterPattern}} como parte da ingestão de metadados.",
     "filter-pattern-placeholder": "Para adicionar um padrão de filtro, basta digitá-lo e pressionar Enter",
+    "filter-task-name-description": "Filtrar por nome da tarefa",
     "find-apps-to-improve-data": "Encontre aplicativos para melhorar seus dados",
     "find-in-table": "Encontrar na tabela",
     "fosters-collaboration-among-producers-and-consumers": "Estabeleça metas organizacionais e KPIs para impulsionar proativamente a cultura de dados da sua empresa. Fomente uma cultura de melhoria contínua com relatórios oportunos para monitorar a saúde dos dados.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-pt.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "Explicitamente {{activity}} {{filterPattern}} adicionando uma lista de regex separados por vírgula.",
     "filter-pattern-info": "Escolha incluir ou excluir {{filterPattern}} como parte da ingestão de metadados.",
     "filter-pattern-placeholder": "Para adicionar um padrão de filtro, basta digitá-lo e pressionar Enter",
+    "filter-task-name-description": "Filtrar por nome da tarefa",
     "find-apps-to-improve-data": "Encontre aplicativos para melhorar seus dados",
     "find-in-table": "Encontrar na tabela",
     "fosters-collaboration-among-producers-and-consumers": "Estabeleça metas organizacionais e KPIs para impulsionar proativamente a cultura de dados da sua empresa. Fomente uma cultura de melhoria contínua com relatórios oportunos para monitorar a saúde dos dados.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "{{activity}} {{filterPattern}} путем добавления списка регулярных выражений, разделенных запятыми.",
     "filter-pattern-info": "Выберите, следует ли включить или исключить {{filterPattern}} при приеме метаданных.",
     "filter-pattern-placeholder": "Чтобы добавить шаблон фильтра, просто введите его и нажмите Enter.",
+    "filter-task-name-description": "Фильтровать по имени задачи",
     "find-apps-to-improve-data": "Find applications to improve your data",
     "find-in-table": "Найти в таблице",
     "fosters-collaboration-among-producers-and-consumers": "Способствует сотрудничеству между производителями и потребителями данных.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/th-th.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "เพิ่มหรือเรียงลำดับ {{activity}} {{filterPattern}} โดยการเพิ่มรายการของ regex ที่แยกด้วยเครื่องหมายจุลภาค",
     "filter-pattern-info": "เลือกที่จะรวมเข้าหรือยกเว้น {{filterPattern}} เป็นส่วนหนึ่งของการนำเข้าข้อมูลเมตา",
     "filter-pattern-placeholder": "ในการเพิ่มรูปแบบการกรอง เพียงแค่พิมพ์และกด Enter",
+    "filter-task-name-description": "กรองตามชื่องาน",
     "find-apps-to-improve-data": "ค้นหาแอปพลิเคชันเพื่อปรับปรุงข้อมูลของคุณ",
     "find-in-table": "ค้นหาในตาราง",
     "fosters-collaboration-among-producers-and-consumers": "ตั้งเป้าหมายองค์กรและ KPI เพื่อขับเคลื่อนวัฒนธรรมข้อมูลของบริษัทคุณแบบเชิงรุก ส่งเสริมวัฒนธรรมของการปรับปรุงอย่างต่อเนื่องด้วยรายงานที่ตรงเวลาเพื่อติดตามสุขภาพข้อมูล",

openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json

@@ -1759,6 +1759,7 @@
     "filter-pattern-include-exclude-info": "通过添加逗号分隔的正则表达式列表明确{{activity}} {{filterPattern}}",
     "filter-pattern-info": "选择包含或排除{{filterPattern}}作为元数据提取的一部分",
     "filter-pattern-placeholder": "输入并按回车键, 即可新建一个过滤器",
+    "filter-task-name-description": "按任务名称过滤",
     "find-apps-to-improve-data": "查找应用以改进您的数据",
     "find-in-table": "在数据表中查找",
     "fosters-collaboration-among-producers-and-consumers": "促进数据生产者和使用者之间的合作",

openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.test.tsx

@@ -40,19 +40,22 @@ jest.mock('../../components/common/DeleteWidget/DeleteWidgetModal', () =>
   jest.fn().mockReturnValue(<div data-testid="delete-modal">Delete Modal</div>)
 );
 
-jest.mock('../../components/common/NextPrevious/NextPrevious', () =>
+jest.mock(
+  '../../components/common/RichTextEditor/RichTextEditorPreviewNew',
+  () =>
     jest
       .fn()
-    .mockReturnValue(<div data-testid="next-previous">Next Previous</div>)
+      .mockReturnValue(
+        <div data-testid="richTextEditorPreviewerNew">
+          RichTextEditorPreviewerNew
+        </div>
+      )
 );
 
-jest.mock(
+jest.mock('../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder', () =>
-  '../../components/common/RichTextEditor/RichTextEditorPreviewerV1',
+  jest
-  () => jest.fn().mockReturnValue(<div data-testid="editor">Editor</div>)
+    .fn()
-);
+    .mockReturnValue(<div data-testid="errorPlaceHolder">ErrorPlaceHolder</div>)
-
-jest.mock('../../components/common/Loader/Loader', () =>
-  jest.fn().mockReturnValue(<div data-testid="loader">Loader</div>)
 );
 
 jest.mock('../../hooks/authHooks', () => ({
@@ -60,9 +63,32 @@ jest.mock('../../hooks/authHooks', () => ({
 }));
 
 jest.mock('../../rest/KpiAPI', () => ({
-  getListKPIs: jest
+  getListKPIs: jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      data: KPI_DATA,
+      paging: { after: '', before: '', total: 2 },
+    })
+  ),
+}));
+
+jest.mock('../../components/DataInsight/EmptyGraphPlaceholder', () => ({
+  EmptyGraphPlaceholder: jest
     .fn()
-    .mockImplementation(() => Promise.resolve({ data: KPI_DATA })),
+    .mockImplementation(() => <div>EmptyGraphPlaceholder</div>),
+}));
+
+jest.mock('../../utils/PermissionsUtils', () => ({
+  checkPermission: jest.fn(),
+}));
+
+jest.mock('../../utils/RouterUtils', () => ({
+  getKpiPath: jest.fn(),
+}));
+
+jest.mock('../../context/PermissionProvider/PermissionProvider', () => ({
+  usePermissionProvider: jest.fn().mockReturnValue({
+    viewKPIPermission: true,
+  }),
 }));
 
 describe('KPI list component', () => {

openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx

@@ -231,8 +231,8 @@ const KPIList = () => {
   return (
     <>
       <Table
-        className="kpi-table"
         columns={columns}
+        containerClassName="kpi-table"
         customPaginationProps={{
           currentPage: kpiPage,
           isLoading,

openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailsList.component.tsx

@@ -110,8 +110,8 @@ const PoliciesDetailsList = ({
 
   return (
     <Table
-      className="list-table"
       columns={columns}
+      containerClassName="list-table"
       dataSource={list}
       pagination={false}
       rowKey="id"

openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesListPage.tsx

@@ -297,8 +297,8 @@ const PoliciesListPage = () => {
         </Col>
         <Col span={24}>
           <Table
-            className="policies-list-table"
             columns={columns}
+            containerClassName="policies-list-table"
             customPaginationProps={{
               currentPage,
               isLoading,

openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPageList.component.tsx

@@ -115,8 +115,8 @@ const RolesDetailPageList = ({
 
   return (
     <Table
-      className="list-table"
       columns={columns}
+      containerClassName="list-table"
       dataSource={list}
       pagination={false}
       rowKey="id"

openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesListPage.tsx

@@ -295,8 +295,8 @@ const RolesListPage = () => {
         </Col>
         <Col span={24}>
           <Table
-            className="roles-list-table"
             columns={columns}
+            containerClassName="roles-list-table"
             customPaginationProps={{
               currentPage,
               isLoading,

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/EntityTasks/EntityTasks.component.tsx

@@ -18,7 +18,6 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { ReactComponent as IconRequest } from '../../../assets/svg/request-icon.svg';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
-import { DE_ACTIVE_COLOR } from '../../../constants/constants';
 import { ENTITY_TASKS_TOOLTIP } from '../../../constants/entity.constants';
 import { EntityField } from '../../../constants/Feeds.constants';
 import { TagSource } from '../../../generated/type/tagLabel';
@@ -92,12 +91,9 @@ const EntityTasks = ({
             : ENTITY_TASKS_TOOLTIP[entityTaskType].request
         }>
         <IconRequest
-          className="hover-cell-icon cursor-pointer"
+          className="table-action-icon hover-cell-icon"
           data-testid="task-element"
-          height={14}
           name={t('label.request-tag-plural')}
-          style={{ color: DE_ACTIVE_COLOR }}
-          width={14}
           onClick={() => handleTask(hasData)}
         />
       </Tooltip>

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -968,13 +968,14 @@ a[href].link-text-grey,
   width: 350px;
 }
 
-// Table icons
+// Pagination styles
 
-.filter-icon {
+.pagination-next-icon {
-  width: 16px;
+  font-size: 12px;
-  height: 16px;
 }
 
-.filter-icon-active {
+.pagination-prev-icon {
-  fill: @primary-color;
+  font-size: 12px;
+  margin-top: -3px;
+  transform: rotate(180deg);
 }

openmetadata-ui/src/main/resources/ui/src/styles/components/table.less

@@ -17,10 +17,9 @@
   .ant-table-thead {
     tr > th {
       font-weight: 500;
-      color: @grey-4;
+      color: @grey-600;
-      text-transform: uppercase;
       border-right: none;
-      border-color: @border-color;
+      border-color: @border-color-1;
     }
     tr > td {
       color: @text-color;
@@ -29,7 +28,7 @@
   }
   .ant-table-body {
     tr > td {
-      border-color: @border-color;
+      border-color: @border-color-1;
     }
   }
   .ant-table-cell {
@@ -37,7 +36,7 @@
   }
   .ant-table-bordered {
     table {
-      border-color: @border-color;
+      border-color: @border-color-1;
       tbody {
         tr {
           td {
@@ -84,7 +83,7 @@
             border-bottom: none;
 
             td {
-              border-bottom: 1px solid @border-color;
+              border-bottom: 1px solid @border-color-1;
             }
           }
         }
@@ -176,3 +175,32 @@
     width: 1px;
   }
 }
+
+// Table icons
+
+.table-action-icon {
+  width: 14px;
+  height: 14px;
+  color: @grey-600;
+  cursor: pointer;
+}
+
+.table-expand-icon {
+  margin-right: 8px;
+  color: @text-color;
+  font-size: 12px;
+}
+
+.filter-icon {
+  color: @grey-600;
+}
+
+.filter-icon-active {
+  color: @primary-color;
+}
+
+.drag-icon {
+  width: 6px;
+  margin-right: 8px;
+  color: @grey-4;
+}

openmetadata-ui/src/main/resources/ui/src/styles/variables.less

@@ -128,6 +128,7 @@
 @grey-18: #afb5d9;
 @grey-19: #363f72;
 @grey-20: #dce3ec;
+@grey-21: #ababab;
 
 @text-grey-muted: @grey-4;
 @de-active-color: #6b7280;

openmetadata-ui/src/main/resources/ui/src/utils/FeedElementUtils.tsx

@@ -15,19 +15,11 @@ import { Tooltip } from 'antd';
 import { t } from 'i18next';
 import React from 'react';
 import { ReactComponent as IconComments } from '../assets/svg/comment.svg';
-import { DE_ACTIVE_COLOR } from '../constants/constants';
 import { EntityField } from '../constants/Feeds.constants';
 import { EntityType } from '../enums/entity.enum';
 import { ThreadType } from '../generated/entity/feed/thread';
 import { ENTITY_LINK_SEPARATOR, getEntityFeedLink } from './EntityUtils';
 
-const iconsProps = {
-  height: 14,
-  name: 'comments',
-  width: 14,
-  style: { color: DE_ACTIVE_COLOR },
-};
-
 export const getFieldThreadElement = (
   onThreadLinkSelect: (value: string, threadType?: ThreadType) => void,
   entityType: EntityType,
@@ -50,9 +42,9 @@ export const getFieldThreadElement = (
         entity: t('label.conversation'),
       })}>
       <IconComments
-        {...iconsProps}
+        className="table-action-icon hover-cell-icon"
-        className="hover-cell-icon cursor-pointer"
         data-testid="field-thread"
+        name="comments"
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();

openmetadata-ui/src/main/resources/ui/src/utils/TableColumn.util.tsx

@@ -16,7 +16,6 @@ import classNames from 'classnames';
 import React from 'react';
 import { ReactComponent as FilterIcon } from '../assets/svg/ic-filter.svg';
 import { OwnerLabel } from '../components/common/OwnerLabel/OwnerLabel.component';
-import { ICON_DIMENSION } from '../constants/constants';
 import { TABLE_COLUMNS_KEYS } from '../constants/TableKeys.constants';
 import { EntityReference } from '../generated/type/entityReference';
 import i18n from './i18next/LocalUtil';
@@ -28,7 +27,6 @@ export const columnFilterIcon = (filtered: boolean) => (
     })}
     component={FilterIcon}
     data-testid="filter-icon"
-    style={ICON_DIMENSION}
   />
 );
 

openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx

@@ -137,7 +137,7 @@ import Lineage from '../components/Lineage/Lineage.component';
 import { SourceType } from '../components/SearchedData/SearchedData.interface';
 import { NON_SERVICE_TYPE_ASSETS } from '../constants/Assets.constants';
 import { FQN_SEPARATOR_CHAR } from '../constants/char.constants';
-import { DE_ACTIVE_COLOR, TEXT_BODY_COLOR } from '../constants/constants';
+import { DE_ACTIVE_COLOR } from '../constants/constants';
 import { ExportTypes } from '../constants/Export.constants';
 import LineageProvider from '../context/LineageProvider/LineageProvider';
 import { OperationPermission } from '../context/PermissionProvider/PermissionProvider.interface';
@@ -557,21 +557,18 @@ export function getTableExpandableConfig<T>(
     expandIcon: ({ expanded, onExpand, expandable, record }) =>
       expandable ? (
         <>
-          {isDraggable && (
+          {isDraggable && <IconDrag className="drag-icon" />}
-            <IconDrag className="m-r-xs drag-icon" height={12} width={8} />
-          )}
           <Icon
-            className="m-r-xs vertical-baseline"
+            className="table-expand-icon vertical-baseline"
             component={expanded ? IconDown : IconRight}
             data-testid="expand-icon"
-            style={{ fontSize: '10px', color: TEXT_BODY_COLOR }}
             onClick={(e) => onExpand(record, e)}
           />
         </>
       ) : (
         isDraggable && (
           <>
-            <IconDrag className="m-r-xs drag-icon" height={12} width={8} />
+            <IconDrag className="drag-icon" />
             <span className="expand-cell-empty-icon-container" />
           </>
         )