fix(listview): hide actions column if no actions are allowed (#11337)

superset-frontend/src/SqlLab/components/QuerySearch.jsx

@@ -47,6 +47,10 @@ const TableWrapper = styled.div`
 `;
 
 const TableStyles = styled.div`
+  table {
+    background-color: ${({ theme }) => theme.colors.grayscale.light4};
+  }
+
   .table > thead > tr > th {
     border-bottom: ${({ theme }) => theme.gridUnit / 2}px solid
       ${({ theme }) => theme.colors.grayscale.light2};

superset-frontend/src/components/dataViewCommon/TableCollection.tsx

@@ -34,6 +34,7 @@ interface TableCollectionProps {
 }
 
 export const Table = styled.table`
+  background-color: ${({ theme }) => theme.colors.grayscale.light5};
   border-collapse: separate;
   border-radius: ${({ theme }) => theme.borderRadius}px;
 

superset-frontend/src/views/CRUD/chart/ChartList.tsx

@@ -268,9 +268,6 @@ function ChartList(props: ChartListProps) {
         Cell: ({ row: { original } }: any) => {
           const handleDelete = () => handleChartDelete(original);
           const openEditModal = () => openChartEditModal(original);
-          if (!canEdit && !canDelete) {
-            return null;
-          }
 
           return (
             <span className="actions">
@@ -325,6 +322,7 @@ function ChartList(props: ChartListProps) {
         Header: t('Actions'),
         id: 'actions',
         disableSortBy: true,
+        hidden: !canEdit && !canDelete,
       },
     ],
     [canEdit, canDelete],

superset-frontend/src/views/CRUD/csstemplates/CssTemplatesList.tsx

@@ -152,15 +152,12 @@ function CssTemplatesList({
               : null,
           ].filter(item => !!item);
 
-          if (!canEdit && !canDelete) {
-            return null;
-          }
-
           return <ActionsBar actions={actions as ActionProps[]} />;
         },
         Header: t('Actions'),
         id: 'actions',
         disableSortBy: true,
+        hidden: !canEdit && !canDelete,
         size: 'xl',
       },
     ],

superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx

@@ -258,9 +258,7 @@ function DashboardList(props: DashboardListProps) {
           const handleDelete = () => handleDashboardDelete(original);
           const handleEdit = () => openDashboardEditModal(original);
           const handleExport = () => handleBulkDashboardExport([original]);
-          if (!canEdit && !canDelete && !canExport) {
-            return null;
-          }
+
           return (
             <span className="actions">
               {canDelete && (
@@ -332,6 +330,7 @@ function DashboardList(props: DashboardListProps) {
         },
         Header: t('Actions'),
         id: 'actions',
+        hidden: !canEdit && !canDelete && !canExport,
         disableSortBy: true,
       },
     ],

superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx

@@ -238,9 +238,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
         Cell: ({ row: { original } }: any) => {
           const handleEdit = () => handleDatabaseEdit(original);
           const handleDelete = () => openDatabaseDeleteModal(original);
-          if (!canEdit && !canDelete) {
-            return null;
-          }
+
           return (
             <span className="actions">
               {canEdit && (
@@ -281,6 +279,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
         },
         Header: t('Actions'),
         id: 'actions',
+        hidden: !canEdit && !canDelete,
         disableSortBy: true,
       },
     ],

superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx

@@ -250,9 +250,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         Cell: ({ row: { original } }: any) => {
           const handleEdit = () => openDatasetEditModal(original);
           const handleDelete = () => openDatasetDeleteModal(original);
-          if (!canEdit && !canDelete) {
-            return null;
-          }
+
           return (
             <span className="actions">
               {canDelete && (
@@ -293,6 +291,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         },
         Header: t('Actions'),
         id: 'actions',
+        hidden: !canEdit && !canDelete,
         disableSortBy: true,
       },
     ],