Merge pull request #17393 from supabase/chore/add-enabled-column-in-db-triggers-list

Add enabled column in DB triggers list

studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx

@@ -2,7 +2,16 @@ import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { includes } from 'lodash'
 import { observer } from 'mobx-react-lite'
-import { Badge, Button, Dropdown, IconEdit3, IconMoreVertical, IconTrash } from 'ui'
+import {
+  Badge,
+  Button,
+  Dropdown,
+  IconCheck,
+  IconEdit3,
+  IconMoreVertical,
+  IconTrash,
+  IconX,
+} from 'ui'
 
 import Table from 'components/to-be-cleaned/Table'
 import { useCheckPermissions, useStore } from 'hooks'
@@ -34,7 +43,7 @@ const TriggerList = ({
   if (_triggers.length === 0 && filterString.length === 0) {
     return (
       <Table.tr key={schema}>
-        <Table.td colSpan={5}>
+        <Table.td colSpan={6}>
           <p className="text-sm text-scale-1200">No triggers created yet</p>
           <p className="text-sm text-light">There are no triggers found in the schema "{schema}"</p>
         </Table.td>
@@ -64,12 +73,19 @@ const TriggerList = ({
               {x.name}
             </p>
           </Table.td>
+
           <Table.td className="hidden lg:table-cell break-all">
-            <p title={x.table}>{x.table}</p>
+            <p title={x.table} className="truncate">
+              {x.table}
+            </p>
           </Table.td>
+
           <Table.td className="hidden space-x-2 xl:table-cell">
-            <p title={x.function_name}>{x.function_name}</p>
+            <p title={x.function_name} className="truncate">
+              {x.function_name}
+            </p>
           </Table.td>
+
           <Table.td className="hidden xl:table-cell">
             <div className="flex space-x-2">
               {x.events.map((event: string) => (
@@ -77,6 +93,17 @@ const TriggerList = ({
               ))}
             </div>
           </Table.td>
+
+          <Table.td className="hidden xl:table-cell">
+            <div className="flex items-center justify-center">
+              {x.enabled_mode !== 'DISABLED' ? (
+                <IconCheck strokeWidth={2} className="text-brand" />
+              ) : (
+                <IconX strokeWidth={2} />
+              )}
+            </div>
+          </Table.td>
+
           <Table.td className="text-right">
             {!isLocked && (
               <div className="flex items-center justify-end">

studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx

@@ -156,18 +156,21 @@ const TriggersList = ({
             className="table-fixed"
             head={
               <>
-                <Table.th key="name" className="w-[25%] space-x-4">
+                <Table.th key="name" className="space-x-4">
                   Name
                 </Table.th>
-                <Table.th key="table" className="hidden w-[13%] lg:table-cell">
+                <Table.th key="table" className="hidden lg:table-cell">
                   Table
                 </Table.th>
                 <Table.th key="function" className="hidden xl:table-cell">
                   Function
                 </Table.th>
-                <Table.th key="rows" className="hidden xl:table-cell xl:w-1/3">
+                <Table.th key="events" className="hidden xl:table-cell">
                   Events
                 </Table.th>
+                <Table.th key="enabled" className="hidden w-20 xl:table-cell">
+                  Enabled
+                </Table.th>
                 <Table.th key="buttons" className="w-1/12"></Table.th>
               </>
             }