added tables to permission groups, updated subblock types

Author: waleedlatif1

apps/sim/app/api/permission-groups/[id]/route.ts

@@ -19,6 +19,7 @@ const configSchema = z.object({
   allowedModelProviders: z.array(z.string()).nullable().optional(),
   hideTraceSpans: z.boolean().optional(),
   hideKnowledgeBaseTab: z.boolean().optional(),
+  hideTablesTab: z.boolean().optional(),
   hideCopilot: z.boolean().optional(),
   hideApiKeysTab: z.boolean().optional(),
   hideEnvironmentTab: z.boolean().optional(),

apps/sim/app/api/permission-groups/route.ts

@@ -20,6 +20,7 @@ const configSchema = z.object({
   allowedModelProviders: z.array(z.string()).nullable().optional(),
   hideTraceSpans: z.boolean().optional(),
   hideKnowledgeBaseTab: z.boolean().optional(),
+  hideTablesTab: z.boolean().optional(),
   hideCopilot: z.boolean().optional(),
   hideApiKeysTab: z.boolean().optional(),
   hideEnvironmentTab: z.boolean().optional(),

apps/sim/app/workspace/[workspaceId]/tables/page.tsx

@@ -1,6 +1,7 @@
 import { redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
+import { getUserPermissionConfig } from '@/ee/access-control/utils/permission-check'
 import { TablesView } from './components'
 
 interface TablesPageProps {
@@ -22,5 +23,10 @@ export default async function TablesPage({ params }: TablesPageProps) {
     redirect('/')
   }
 
+  const permissionConfig = await getUserPermissionConfig(session.user.id)
+  if (permissionConfig?.hideTablesTab) {
+    redirect(`/workspace/${workspaceId}`)
+  }
+
   return <TablesView />
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/empty-state.tsx

@@ -1,9 +1,19 @@
-import { X } from 'lucide-react'
-import { Button, Combobox, type ComboboxOption, Input } from '@/components/emcn'
+import { useRef } from 'react'
+import { Plus } from 'lucide-react'
+import {
+  Badge,
+  Button,
+  Combobox,
+  type ComboboxOption,
+  Input,
+  Label,
+  Trash,
+} from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import type { FilterRule } from '@/lib/table/query-builder/constants'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
-import { SubBlockInputController } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sub-block-input-controller'
+import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
+import type { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 
 interface FilterRuleRowProps {
@@ -17,121 +27,196 @@ interface FilterRuleRowProps {
   isReadOnly: boolean
   isPreview: boolean
   disabled: boolean
+  onAdd: () => void
   onRemove: (id: string) => void
   onUpdate: (id: string, field: keyof FilterRule, value: string) => void
+  onToggleCollapse: (id: string) => void
+  inputController: ReturnType<typeof useSubBlockInput>
 }
 
 export function FilterRuleRow({
   blockId,
-  subBlockId,
   rule,
   index,
   columns,
   comparisonOptions,
   logicalOptions,
   isReadOnly,
-  isPreview,
-  disabled,
+  onAdd,
   onRemove,
   onUpdate,
+  onToggleCollapse,
+  inputController,
 }: FilterRuleRowProps) {
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
+  const valueInputRef = useRef<HTMLInputElement>(null)
+  const overlayRef = useRef<HTMLDivElement>(null)
 
-  return (
-    <div className='flex items-center gap-[6px]'>
-      <Button
-        variant='ghost'
-        size='sm'
-        onClick={() => onRemove(rule.id)}
+  const syncOverlayScroll = (scrollLeft: number) => {
+    if (overlayRef.current) overlayRef.current.scrollLeft = scrollLeft
+  }
+
+  const cellKey = `filter-${rule.id}-value`
+  const fieldState = inputController.fieldHelpers.getFieldState(cellKey)
+  const handlers = inputController.fieldHelpers.createFieldHandlers(
+    cellKey,
+    rule.value,
+    (newValue) => onUpdate(rule.id, 'value', newValue)
+  )
+  const tagSelectHandler = inputController.fieldHelpers.createTagSelectHandler(
+    cellKey,
+    rule.value,
+    (newValue) => onUpdate(rule.id, 'value', newValue)
+  )
+
+  const getOperatorLabel = (value: string) => {
+    const option = comparisonOptions.find((op) => op.value === value)
+    return option?.label || value
+  }
+
+  const getColumnLabel = (value: string) => {
+    const option = columns.find((col) => col.value === value)
+    return option?.label || value
+  }
+
+  const renderHeader = () => (
+    <div
+      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      onClick={() => onToggleCollapse(rule.id)}
+    >
+      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+          {rule.collapsed && rule.column ? getColumnLabel(rule.column) : `Condition ${index + 1}`}
+        </span>
+        {rule.collapsed && rule.column && (
+          <Badge variant='type' size='sm'>
+            {getOperatorLabel(rule.operator)}
+          </Badge>
+        )}
+      </div>
+      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+        <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
+          <Plus className='h-[14px] w-[14px]' />
+          <span className='sr-only'>Add Condition</span>
+        </Button>
+        <Button
+          variant='ghost'
+          onClick={() => onRemove(rule.id)}
+          disabled={isReadOnly}
+          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+        >
+          <Trash className='h-[14px] w-[14px]' />
+          <span className='sr-only'>Delete Condition</span>
+        </Button>
+      </div>
+    </div>
+  )
+
+  const renderValueInput = () => (
+    <div className='relative'>
+      <Input
+        ref={valueInputRef}
+        value={rule.value}
+        onChange={handlers.onChange}
+        onKeyDown={handlers.onKeyDown}
+        onDrop={handlers.onDrop}
+        onDragOver={handlers.onDragOver}
+        onFocus={handlers.onFocus}
+        onScroll={(e) => syncOverlayScroll(e.currentTarget.scrollLeft)}
+        onPaste={() =>
+          setTimeout(() => {
+            if (valueInputRef.current) {
+              syncOverlayScroll(valueInputRef.current.scrollLeft)
+            }
+          }, 0)
+        }
         disabled={isReadOnly}
-        className='h-[24px] w-[24px] shrink-0 p-0 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
+        autoComplete='off'
+        placeholder='Enter value'
+        className='allow-scroll w-full overflow-auto text-transparent caret-foreground'
+      />
+      <div
+        ref={overlayRef}
+        className={cn(
+          'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+          !isReadOnly && 'pointer-events-none'
+        )}
       >
-        <X className='h-[12px] w-[12px]' />
-      </Button>
+        <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
+          {formatDisplayText(
+            rule.value,
+            accessiblePrefixes ? { accessiblePrefixes } : { highlightAll: true }
+          )}
+        </div>
+      </div>
+      {fieldState.showTags && (
+        <TagDropdown
+          visible={fieldState.showTags}
+          onSelect={tagSelectHandler}
+          blockId={blockId}
+          activeSourceBlockId={fieldState.activeSourceBlockId}
+          inputValue={rule.value}
+          cursorPosition={fieldState.cursorPosition}
+          onClose={() => inputController.fieldHelpers.hideFieldDropdowns(cellKey)}
+          inputRef={valueInputRef.current ? { current: valueInputRef.current } : undefined}
+        />
+      )}
+    </div>
+  )
 
-      <div className='w-[80px] shrink-0'>
-        {index === 0 ? (
-          <Combobox
-            size='sm'
-            options={[{ value: 'where', label: 'where' }]}
-            value='where'
-            disabled
-          />
-        ) : (
+  const renderContent = () => (
+    <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+      {index > 0 && (
+        <div className='flex flex-col gap-[6px]'>
+          <Label className='text-[13px]'>Logic</Label>
           <Combobox
-            size='sm'
             options={logicalOptions}
             value={rule.logicalOperator}
             onChange={(v) => onUpdate(rule.id, 'logicalOperator', v as 'and' | 'or')}
             disabled={isReadOnly}
           />
-        )}
-      </div>
+        </div>
+      )}
 
-      <div className='w-[100px] shrink-0'>
+      <div className='flex flex-col gap-[6px]'>
+        <Label className='text-[13px]'>Column</Label>
         <Combobox
-          size='sm'
           options={columns}
           value={rule.column}
           onChange={(v) => onUpdate(rule.id, 'column', v)}
-          placeholder='Column'
           disabled={isReadOnly}
+          placeholder='Select column'
         />
       </div>
 
-      <div className='w-[110px] shrink-0'>
+      <div className='flex flex-col gap-[6px]'>
+        <Label className='text-[13px]'>Operator</Label>
         <Combobox
-          size='sm'
           options={comparisonOptions}
           value={rule.operator}
           onChange={(v) => onUpdate(rule.id, 'operator', v)}
           disabled={isReadOnly}
+          placeholder='Select operator'
         />
       </div>
 
-      <div className='relative min-w-[80px] flex-1'>
-        <SubBlockInputController
-          blockId={blockId}
-          subBlockId={`${subBlockId}_filter_${rule.id}`}
-          config={{ id: `filter_value_${rule.id}`, type: 'short-input' }}
-          value={rule.value}
-          onChange={(newValue) => onUpdate(rule.id, 'value', newValue)}
-          isPreview={isPreview}
-          disabled={disabled}
-        >
-          {({ ref, value: ctrlValue, onChange, onKeyDown, onDrop, onDragOver }) => {
-            const formattedText = formatDisplayText(ctrlValue, {
-              accessiblePrefixes,
-              highlightAll: !accessiblePrefixes,
-            })
-
-            return (
-              <div className='relative'>
-                <Input
-                  ref={ref as React.RefObject<HTMLInputElement>}
-                  className='h-[28px] w-full overflow-auto text-[12px] text-transparent caret-foreground [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground/50 [&::-webkit-scrollbar]:hidden'
-                  value={ctrlValue}
-                  onChange={onChange as (e: React.ChangeEvent<HTMLInputElement>) => void}
-                  onKeyDown={onKeyDown as (e: React.KeyboardEvent<HTMLInputElement>) => void}
-                  onDrop={onDrop as (e: React.DragEvent<HTMLInputElement>) => void}
-                  onDragOver={onDragOver as (e: React.DragEvent<HTMLInputElement>) => void}
-                  placeholder='Value'
-                  disabled={isReadOnly}
-                  autoComplete='off'
-                />
-                <div
-                  className={cn(
-                    'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-[12px] text-foreground [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-                    (isPreview || disabled) && 'opacity-50'
-                  )}
-                >
-                  <div className='min-w-fit whitespace-pre'>{formattedText}</div>
-                </div>
-              </div>
-            )
-          }}
-        </SubBlockInputController>
+      <div className='flex flex-col gap-[6px]'>
+        <Label className='text-[13px]'>Value</Label>
+        {renderValueInput()}
       </div>
     </div>
   )
+
+  return (
+    <div
+      data-filter-id={rule.id}
+      className={cn(
+        'rounded-[4px] border border-[var(--border-1)]',
+        rule.collapsed ? 'overflow-hidden' : 'overflow-visible'
+      )}
+    >
+      {renderHeader()}
+      {!rule.collapsed && renderContent()}
+    </div>
+  )
 }