improvement(emcn): modal padding, api, chat, form

emir-karabeg · emir-karabeg · commit bb4c4703f92f · 2026-01-08T21:58:04.000-08:00
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx
@@ -123,7 +123,7 @@ export function CreateChunkModal({
           <ModalHeader>Create Chunk</ModalHeader>
 
           <form>
-            <ModalBody className='!pb-[16px]'>
+            <ModalBody>
               <div className='flex flex-col gap-[8px]'>
                 {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
 
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -399,7 +399,7 @@ export function DocumentTagsModal({
           </div>
         </ModalHeader>
 
-        <ModalBody className='!pb-[16px]'>
+        <ModalBody>
           <div className='min-h-0 flex-1 overflow-y-auto'>
             <div className='space-y-[8px]'>
               <Label>Tags</Label>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/edit-chunk-modal/edit-chunk-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/edit-chunk-modal/edit-chunk-modal.tsx
@@ -260,7 +260,7 @@ export function EditChunkModal({
           </ModalHeader>
 
           <form>
-            <ModalBody className='!pb-[16px]'>
+            <ModalBody>
               <div className='flex flex-col gap-[8px]'>
                 {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
 
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
@@ -224,7 +224,7 @@ export function AddDocumentsModal({
       <ModalContent>
         <ModalHeader>Add Documents</ModalHeader>
 
-        <ModalBody className='!pb-[16px]'>
+        <ModalBody>
           <div className='min-h-0 flex-1 overflow-y-auto'>
             <div className='space-y-[12px]'>
               {fileError && (
@@ -242,8 +242,8 @@ export function AddDocumentsModal({
                   onDragLeave={handleDragLeave}
                   onDrop={handleDrop}
                   className={cn(
-                    '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--c-575757)] border-dashed py-[10px]',
-                    isDragging && 'border-[var(--brand-primary-hex)]'
+                    '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
+                    isDragging && 'border-[var(--surface-7)]'
                   )}
                 >
                   <input
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -313,7 +313,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
             </div>
           </ModalHeader>
 
-          <ModalBody className='!pb-[16px]'>
+          <ModalBody>
             <div className='min-h-0 flex-1 overflow-y-auto'>
               <div className='space-y-[8px]'>
                 <Label>
@@ -458,7 +458,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
       <Modal open={deleteTagDialogOpen} onOpenChange={setDeleteTagDialogOpen}>
         <ModalContent size='sm'>
           <ModalHeader>Delete Tag</ModalHeader>
-          <ModalBody className='!pb-[16px]'>
+          <ModalBody>
             <div className='space-y-[8px]'>
               <p className='text-[12px] text-[var(--text-secondary)]'>
                 Are you sure you want to delete the "{selectedTag?.displayName}" tag? This will
@@ -497,7 +497,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
       <Modal open={viewDocumentsDialogOpen} onOpenChange={setViewDocumentsDialogOpen}>
         <ModalContent size='sm'>
           <ModalHeader>Documents using "{selectedTag?.displayName}"</ModalHeader>
-          <ModalBody className='!pb-[16px]'>
+          <ModalBody>
             <div className='space-y-[8px]'>
               <p className='text-[12px] text-[var(--text-tertiary)]'>
                 {selectedTagUsage?.documentCount || 0} document
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
@@ -336,7 +336,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
         <ModalHeader>Create Knowledge Base</ModalHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
-          <ModalBody className='!pb-[16px]'>
+          <ModalBody>
             <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
               <div className='space-y-[12px]'>
                 <div className='flex flex-col gap-[8px]'>
@@ -436,8 +436,8 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                     onDragLeave={handleDragLeave}
                     onDrop={handleDrop}
                     className={cn(
-                      '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--c-575757)] border-dashed py-[10px]',
-                      isDragging && 'border-[var(--brand-primary-hex)]'
+                      '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
+                      isDragging && 'border-[var(--surface-7)]'
                     )}
                   >
                     <input
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx
@@ -102,7 +102,7 @@ export function EditKnowledgeBaseModal({
         <ModalHeader>Edit Knowledge Base</ModalHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
-          <ModalBody className='!pb-[16px]'>
+          <ModalBody>
             <div className='space-y-[12px]'>
               <div className='flex flex-col gap-[8px]'>
                 <Label htmlFor='kb-name'>Name</Label>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -510,26 +510,40 @@ function IdentifierInput({
           error && 'border-[var(--text-error)]'
         )}
       >
-        <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] px-[8px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
+        <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-[6px] pl-[8px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
           {getDomainPrefix()}
         </div>
         <div className='relative flex-1'>
           <Input
             id='chat-url'
-            placeholder='company-name'
+            placeholder='my-chat'
             value={value}
             onChange={(e) => handleChange(e.target.value)}
             required
             disabled={disabled}
             className={cn(
               'rounded-none border-0 pl-0 shadow-none disabled:bg-transparent disabled:opacity-100',
-              isChecking && 'pr-[32px]'
+              (isChecking || (isValid && value)) && 'pr-[32px]'
             )}
           />
-          {isChecking && (
+          {isChecking ? (
             <div className='-translate-y-1/2 absolute top-1/2 right-2'>
               <Loader2 className='h-4 w-4 animate-spin text-[var(--text-tertiary)]' />
             </div>
+          ) : (
+            isValid &&
+            value && (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <div className='-translate-y-1/2 absolute top-1/2 right-2'>
+                    <Check className='h-4 w-4 text-[var(--brand-tertiary-2)]' />
+                  </div>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>Name is available</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )
           )}
         </div>
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/form.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/form.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ChevronDown, ChevronRight, Eye, EyeOff, Loader2 } from 'lucide-react'
+import { Check, ChevronDown, ChevronRight, Eye, EyeOff, Loader2 } from 'lucide-react'
 import {
   Badge,
   ButtonGroup,
@@ -12,6 +12,7 @@ import {
   TagInput,
   type TagItem,
   Textarea,
+  Tooltip,
 } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
 import { getEnv } from '@/lib/core/config/env'
@@ -412,11 +413,7 @@ export function FormDeploy({
   const displayUrl = fullUrl.replace(/^https?:\/\//, '')
 
   return (
-    <form
-      id='form-deploy-form'
-      onSubmit={handleSubmit}
-      className='-mx-1 space-y-4 overflow-y-auto px-1'
-    >
+    <form id='form-deploy-form' onSubmit={handleSubmit} className='-mx-1 space-y-4 px-1'>
       <div className='space-y-[12px]'>
         {/* URL Input - matching chat style */}
         <div>
@@ -429,7 +426,7 @@ export function FormDeploy({
               (identifierError || errors.identifier) && 'border-[var(--text-error)]'
             )}
           >
-            <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] px-[8px] font-medium text-[var(--text-secondary)] text-sm'>
+            <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-[6px] pl-[8px] font-medium text-[var(--text-secondary)] text-sm'>
               {getDomainPrefix()}
             </div>
             <div className='relative flex-1'>
@@ -442,13 +439,28 @@ export function FormDeploy({
                 placeholder='my-form'
                 className={cn(
                   'rounded-none border-0 pl-0 shadow-none',
-                  isCheckingIdentifier && 'pr-[32px]'
+                  (isCheckingIdentifier || (identifierValidationPassed && identifier)) &&
+                    'pr-[32px]'
                 )}
               />
-              {isCheckingIdentifier && (
+              {isCheckingIdentifier ? (
                 <div className='-translate-y-1/2 absolute top-1/2 right-2'>
                   <Loader2 className='h-4 w-4 animate-spin text-[var(--text-tertiary)]' />
                 </div>
+              ) : (
+                identifierValidationPassed &&
+                identifier && (
+                  <Tooltip.Root>
+                    <Tooltip.Trigger asChild>
+                      <div className='-translate-y-1/2 absolute top-1/2 right-2'>
+                        <Check className='h-4 w-4 text-[var(--brand-tertiary-2)]' />
+                      </div>
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>
+                      <span>Name is available</span>
+                    </Tooltip.Content>
+                  </Tooltip.Root>
+                )
               )}
             </div>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -443,7 +443,7 @@ export function McpDeploy({
   return (
     <form
       id='mcp-deploy-form'
-      className='-mx-1 space-y-[12px] overflow-y-auto px-1'
+      className='-mx-1 space-y-[12px] px-1'
       onSubmit={(e) => {
         e.preventDefault()
         handleSave()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
@@ -18,7 +18,11 @@ import {
 import { getEnv } from '@/lib/core/config/env'
 import { getInputFormatExample as getInputFormatExampleUtil } from '@/lib/workflows/operations/deployment-utils'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
+import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { CreateApiKeyModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components'
 import { startsWithUuid } from '@/executor/constants'
+import { useApiKeys } from '@/hooks/queries/api-keys'
+import { useWorkspaceSettings } from '@/hooks/queries/workspace'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
@@ -107,6 +111,22 @@ export function DeployModal({
   const [chatSuccess, setChatSuccess] = useState(false)
   const [formSuccess, setFormSuccess] = useState(false)
 
+  const [isCreateKeyModalOpen, setIsCreateKeyModalOpen] = useState(false)
+  const userPermissions = useUserPermissionsContext()
+  const canManageWorkspaceKeys = userPermissions.canAdmin
+  const { data: apiKeysData, isLoading: isLoadingKeys } = useApiKeys(workflowWorkspaceId || '')
+  const { data: workspaceSettingsData, isLoading: isLoadingSettings } = useWorkspaceSettings(
+    workflowWorkspaceId || ''
+  )
+  const apiKeyWorkspaceKeys = apiKeysData?.workspaceKeys || []
+  const apiKeyPersonalKeys = apiKeysData?.personalKeys || []
+  const allowPersonalApiKeys =
+    workspaceSettingsData?.settings?.workspace?.allowPersonalApiKeys ?? true
+  const defaultKeyType = allowPersonalApiKeys ? 'personal' : 'workspace'
+  const isApiKeysLoading = isLoadingKeys || isLoadingSettings
+  const createButtonDisabled =
+    isApiKeysLoading || (!allowPersonalApiKeys && !canManageWorkspaceKeys)
+
   const getApiKeyLabel = (value?: string | null) => {
     if (value && value.trim().length > 0) {
       return value
@@ -577,7 +597,7 @@ export function DeployModal({
     <>
       <Modal open={open} onOpenChange={handleCloseModal}>
         <ModalContent size='lg' className='h-[76vh]'>
-          <ModalHeader>Deploy Workflow</ModalHeader>
+          <ModalHeader>Workflow Deployment</ModalHeader>
 
           <ModalTabs
             value={activeTab}
@@ -650,7 +670,7 @@ export function DeployModal({
                 )}
               </ModalTabsContent>
 
-              <ModalTabsContent value='form' className='h-full'>
+              <ModalTabsContent value='form'>
                 {workflowId && (
                   <FormDeploy
                     workflowId={workflowId}
@@ -665,7 +685,7 @@ export function DeployModal({
                 )}
               </ModalTabsContent>
 
-              <ModalTabsContent value='mcp' className='h-full'>
+              <ModalTabsContent value='mcp'>
                 {workflowId && (
                   <McpDeploy
                     workflowId={workflowId}
@@ -691,6 +711,17 @@ export function DeployModal({
               onUndeploy={() => setShowUndeployConfirm(true)}
             />
           )}
+          {activeTab === 'api' && (
+            <ModalFooter className='items-center justify-end'>
+              <Button
+                variant='tertiary'
+                onClick={() => setIsCreateKeyModalOpen(true)}
+                disabled={createButtonDisabled}
+              >
+                Generate API Key
+              </Button>
+            </ModalFooter>
+          )}
           {activeTab === 'chat' && (
             <ModalFooter className='items-center'>
               <div className='flex gap-2'>
@@ -838,6 +869,16 @@ export function DeployModal({
           </ModalFooter>
         </ModalContent>
       </Modal>
+
+      <CreateApiKeyModal
+        open={isCreateKeyModalOpen}
+        onOpenChange={setIsCreateKeyModalOpen}
+        workspaceId={workflowWorkspaceId || ''}
+        existingKeyNames={[...apiKeyWorkspaceKeys, ...apiKeyPersonalKeys].map((k) => k.name)}
+        allowPersonalApiKeys={allowPersonalApiKeys}
+        canManageWorkspaceKeys={canManageWorkspaceKeys}
+        defaultKeyType={defaultKeyType}
+      />
     </>
   )
 }
@@ -911,7 +952,12 @@ function GeneralFooter({
     <ModalFooter className='items-center justify-between'>
       <StatusBadge isWarning={needsRedeployment} />
       <div className='flex items-center gap-2'>
-        <Button variant='default' onClick={onUndeploy} disabled={isUndeploying || isSubmitting}>
+        <Button
+          variant='default'
+          onClick={onUndeploy}
+          disabled={isUndeploying || isSubmitting}
+          className='px-[7px] py-[5px]'
+        >
           {isUndeploying ? 'Undeploying...' : 'Undeploy'}
         </Button>
         {needsRedeployment && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
@@ -422,7 +422,7 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
         <ModalHeader>Help &amp; Support</ModalHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
-          <ModalBody className='!pb-[16px]'>
+          <ModalBody>
             <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
               <div className='space-y-[12px]'>
                 <div className='flex flex-col gap-[8px]'>
@@ -472,9 +472,9 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
                     onDragLeave={handleDragLeave}
                     onDrop={handleDrop}
                     className={cn(
-                      '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--c-575757)] border-dashed py-[10px]',
+                      '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
                       {
-                        'border-[var(--brand-primary-hex)]': isDragging,
+                        'border-[var(--surface-7)]': isDragging,
                       }
                     )}
                   >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/index.ts
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/index.ts
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/credit-balance/credit-balance.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/credit-balance/credit-balance.tsx
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
