Update table and checkbox style to not trim off some portion of checkbox

deepfence · Jun 21, 2024 · 11a940f · 11a940f
1 parent 28ed945
commit 11a940f
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 113 deletions.
diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/components/ReportsTable.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/components/ReportsTable.tsx
@@ -211,9 +211,9 @@ export const ReportTable = ({
   const columns = useMemo(() => {
     const columns = [
       getRowSelectionColumn(columnHelper, {
-        minSize: 15,
-        size: 20,
-        maxSize: 30,
+        minSize: 10,
+        size: 10,
+        maxSize: 10,
       }),
       columnHelper.display({
         id: 'actions',
@@ -237,26 +237,26 @@ export const ReportTable = ({
           );
         },
         header: () => '',
-        minSize: 20,
-        size: 25,
-        maxSize: 30,
+        minSize: 15,
+        size: 15,
+        maxSize: 15,
         enableResizing: false,
       }),
       columnHelper.accessor('type', {
         enableSorting: true,
         cell: (cell) => <span className="uppercase">{cell.getValue()}</span>,
         header: () => 'Report type',
-        minSize: 30,
-        size: 40,
-        maxSize: 55,
+        minSize: 50,
+        size: 70,
+        maxSize: 80,
       }),
       columnHelper.accessor('created_at', {
         enableSorting: true,
         cell: (cell) => formatMilliseconds(cell.getValue() ?? ''),
         header: () => 'Created at',
-        minSize: 40,
-        size: 50,
-        maxSize: 70,
+        minSize: 50,
+        size: 70,
+        maxSize: 80,
       }),
       columnHelper.display({
         id: 'duration',
@@ -279,9 +279,9 @@ export const ReportTable = ({
         enableSorting: true,
         cell: (cell) => <ScanStatusBadge status={cell.getValue() ?? ''} />,
         header: () => 'Status',
-        minSize: 30,
-        size: 40,
-        maxSize: 70,
+        minSize: 50,
+        size: 70,
+        maxSize: 80,
       }),
       columnHelper.accessor('filters', {
         enableSorting: false,

diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/AIIntegrationList.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/AIIntegrationList.tsx
@@ -445,7 +445,7 @@ const AIIntegrationTable = () => {
         header: () => '',
         minSize: 30,
         size: 30,
-        maxSize: 35,
+        maxSize: 30,
         enableResizing: false,
       }),
       columnHelper.accessor('integration_type', {

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx
@@ -1423,9 +1423,9 @@ const MalwareTable = ({
   const columns = useMemo(() => {
     const columns = [
       getRowSelectionColumn(columnHelper, {
-        size: 45,
-        minSize: 45,
-        maxSize: 45,
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
       }),
       columnHelper.display({
         id: 'actions',
@@ -1448,9 +1448,9 @@ const MalwareTable = ({
           />
         ),
         header: () => '',
-        size: 55,
-        minSize: 40,
-        maxSize: 55,
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
         enableResizing: false,
       }),
       columnHelper.accessor('node_id', {

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx
@@ -698,9 +698,9 @@ const ScansTable = ({
   const columns = useMemo(() => {
     const columns = [
       getRowSelectionColumn(columnHelper, {
-        size: 45,
-        minSize: 45,
-        maxSize: 45,
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
       }),
       columnHelper.display({
         id: 'actions',
@@ -719,9 +719,9 @@ const ScansTable = ({
           />
         ),
         header: () => '',
-        size: 30,
-        minSize: 30,
-        maxSize: 50,
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
         enableResizing: false,
       }),
       columnHelper.accessor('node_type', {

diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx
@@ -1223,9 +1223,9 @@ const AccountTable = ({
           );
         },
         header: () => '',
-        size: 20,
-        minSize: 20,
-        maxSize: 20,
+        minSize: 15,
+        size: 15,
+        maxSize: 15,
         enableResizing: false,
       }),
       columnHelper.accessor('node_name', {

diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScanResults.tsx
@@ -1417,9 +1417,9 @@ const SecretTable = ({
   const columns = useMemo(() => {
     const columns = [
       getRowSelectionColumn(columnHelper, {
-        size: 40,
-        minSize: 40,
-        maxSize: 40,
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
       }),
       columnHelper.display({
         id: 'actions',
@@ -1442,9 +1442,9 @@ const SecretTable = ({
           />
         ),
         header: () => '',
-        size: 45,
-        minSize: 40,
-        maxSize: 55,
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
         enableResizing: false,
       }),
       columnHelper.accessor('node_id', {

diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScans.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScans.tsx
@@ -696,9 +696,9 @@ const ScansTable = ({
   const columns = useMemo(() => {
     const columns = [
       getRowSelectionColumn(columnHelper, {
-        size: 45,
-        minSize: 45,
-        maxSize: 45,
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
       }),
       columnHelper.display({
         id: 'actions',
@@ -708,18 +708,16 @@ const ScansTable = ({
             row={cell.row.original}
             onTableAction={onTableAction}
             trigger={
-              <button className="p-1 flex">
-                <span className="block h-4 w-4 text-text-text-and-icon rotate-90 shrink-0">
-                  <EllipsisIcon />
-                </span>
+              <button className="block h-4 w-4 text-text-text-and-icon rotate-90 shrink-0">
+                <EllipsisIcon />
               </button>
             }
           />
         ),
         header: () => '',
-        size: 30,
-        minSize: 30,
-        maxSize: 50,
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
         enableResizing: false,
       }),
       columnHelper.accessor('node_type', {

diff --git a/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx b/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx
@@ -776,10 +776,8 @@ const UsersTable = ({
               user={cell.row.original}
               onTableAction={onTableAction}
               trigger={
-                <button className="p-1">
-                  <div className="h-[16px] w-[16px] text-text-text-and-icon rotate-90">
-                    <EllipsisIcon />
-                  </div>
+                <button className="h-[16px] w-[16px] text-text-text-and-icon rotate-90">
+                  <EllipsisIcon />
                 </button>
               }
             />
@@ -795,7 +793,7 @@ const UsersTable = ({
         cell: (cell) => cell.getValue(),
         header: () => 'ID',
         minSize: 30,
-        size: 30,
+        size: 40,
         maxSize: 85,
       }),
       columnHelper.accessor('first_name', {

diff --git a/..._frontend/apps/dashboard/src/features/topology/data-components/tables/KubernetesTable.tsx b/..._frontend/apps/dashboard/src/features/topology/data-components/tables/KubernetesTable.tsx
@@ -385,8 +385,52 @@ const DataTable = ({
     () => [
       getRowSelectionColumn(columnHelper, {
         minSize: 20,
-        size: 25,
-        maxSize: 40,
+        size: 20,
+        maxSize: 20,
+      }),
+      columnHelper.display({
+        id: 'actions',
+        enableSorting: false,
+        cell: (cell) => (
+          <Dropdown
+            triggerAsChild={true}
+            align={'start'}
+            content={
+              <>
+                <DropdownItem>
+                  <DFLink
+                    to={`../compute/host/table?clusters=${cell.row.original.node_id}`}
+                    unstyled
+                  >
+                    Go to hosts
+                  </DFLink>
+                </DropdownItem>
+                <DropdownItem>
+                  <DFLink
+                    to={`../compute/container/table?clusters=${cell.row.original.node_id}`}
+                    unstyled
+                  >
+                    Go to containers
+                  </DFLink>
+                </DropdownItem>
+                <DropdownItem>
+                  <DFLink to={`../compute/pod/table?clusters=${name}`} unstyled>
+                    Go to pods
+                  </DFLink>
+                </DropdownItem>
+              </>
+            }
+          >
+            <div className="cursor-pointer h-3 w-4 text-text-text-and-icon rotate-90">
+              <EllipsisIcon />
+            </div>
+          </Dropdown>
+        ),
+        header: () => '',
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
+        enableResizing: false,
       }),
       columnHelper.accessor('node_name', {
         cell: (info) => {
@@ -396,44 +440,7 @@ const DataTable = ({
           } else {
             name = info.row.original.node_id;
           }
-          return (
-            <div className="flex gap-x-2 items-center">
-              <Dropdown
-                triggerAsChild={true}
-                align={'start'}
-                content={
-                  <>
-                    <DropdownItem>
-                      <DFLink
-                        to={`../compute/host/table?clusters=${info.row.original.node_id}`}
-                        unstyled
-                      >
-                        Go to hosts
-                      </DFLink>
-                    </DropdownItem>
-                    <DropdownItem>
-                      <DFLink
-                        to={`../compute/container/table?clusters=${info.row.original.node_id}`}
-                        unstyled
-                      >
-                        Go to containers
-                      </DFLink>
-                    </DropdownItem>
-                    <DropdownItem>
-                      <DFLink to={`../compute/pod/table?clusters=${name}`} unstyled>
-                        Go to pods
-                      </DFLink>
-                    </DropdownItem>
-                  </>
-                }
-              >
-                <div className="cursor-pointer h-3 w-4 text-text-text-and-icon rotate-90">
-                  <EllipsisIcon />
-                </div>
-              </Dropdown>
-              <TruncatedText text={name} />
-            </div>
-          );
+          return <TruncatedText text={name} />;
         },
         header: () => 'Name',
         minSize: 140,

diff --git a/...e_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScanResults.tsx b/...e_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScanResults.tsx
@@ -1767,9 +1767,9 @@ const CVETable = ({
   const columns = useMemo(() => {
     const columns = [
       getRowSelectionColumn(columnHelper, {
-        size: 35,
-        minSize: 35,
-        maxSize: 35,
+        size: 30,
+        minSize: 30,
+        maxSize: 30,
       }),
       columnHelper.display({
         id: 'actions',
@@ -1783,18 +1783,16 @@ const CVETable = ({
             nodeType={nodeType}
             isDockerImageNameEmpty={isDockerImageNameEmpty}
             trigger={
-              <button className="p-1">
-                <div className="h-[16px] w-[16px] text-text-text-and-icon rotate-90">
-                  <EllipsisIcon />
-                </div>
+              <button className="h-[16px] w-[16px] text-text-text-and-icon rotate-90">
+                <EllipsisIcon />
               </button>
             }
           />
         ),
         header: () => '',
-        size: 40,
-        minSize: 40,
-        maxSize: 40,
+        size: 30,
+        minSize: 30,
+        maxSize: 30,
         enableResizing: false,
       }),
       columnHelper.accessor('cve_id', {

diff --git a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx
@@ -432,9 +432,9 @@ const ScansTable = ({
   const columns = useMemo(() => {
     const columns = [
       getRowSelectionColumn(columnHelper, {
-        size: 45,
-        minSize: 45,
-        maxSize: 45,
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
       }),
       columnHelper.display({
         id: 'actions',
@@ -453,9 +453,9 @@ const ScansTable = ({
           />
         ),
         header: () => '',
-        size: 50,
-        minSize: 50,
-        maxSize: 60,
+        size: 35,
+        minSize: 35,
+        maxSize: 35,
         enableResizing: false,
       }),
       columnHelper.accessor('node_type', {