Skip to content

Commit 679e301

Browse files
mvalancymvalancy
committed
Fix graph creation flow and disable template functionality
- Disable template graph type with gray styling and coming soon tooltip - Gray out all template selection buttons with disabled state - Fix creation flow: change 'Create Graph' to 'Continue' in type step - Ensure users reach details step to enter required graph name - Preserve template UI structure for future implementation
1 parent ba9e6a7 commit 679e301

1 file changed

Lines changed: 34 additions & 26 deletions

File tree

‎packages/web/src/components/CreateGraphModal.tsx‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,10 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
5656
type: 'TEMPLATE' as const,
5757
title: 'Template',
5858
description: 'A reusable template for creating similar graphs',
59-
icon: <FileText className="h-8 w-8 text-orange-400" />,
60-
color: 'border-orange-500/50 bg-orange-900/20 hover:bg-orange-900/30'
59+
icon: <FileText className="h-8 w-8 text-gray-500" />,
60+
color: 'border-gray-600/50 bg-gray-800/20 cursor-not-allowed opacity-60',
61+
disabled: true,
62+
comingSoon: true
6163
}
6264
];
6365

@@ -201,18 +203,27 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
201203
{graphTypes.map((type) => (
202204
<button
203205
key={type.type}
204-
onClick={() => setFormData(prev => ({ ...prev, type: type.type }))}
205-
className={`p-4 border-2 rounded-lg text-left transition-all ${
206+
onClick={() => type.disabled ? null : setFormData(prev => ({ ...prev, type: type.type }))}
207+
disabled={type.disabled}
208+
title={type.comingSoon ? "Template functionality coming soon!" : undefined}
209+
className={`p-4 border-2 rounded-lg text-left transition-all relative ${
206210
formData.type === type.type
207211
? `${type.color} border-current`
212+
: type.disabled
213+
? type.color
208214
: 'border-gray-600 bg-gray-700/50 hover:bg-gray-700 hover:border-gray-500'
209215
}`}
210216
>
217+
{type.comingSoon && (
218+
<div className="absolute top-2 right-2 bg-gray-700 text-xs text-gray-400 px-2 py-1 rounded">
219+
Coming Soon
220+
</div>
221+
)}
211222
<div className="flex items-center space-x-3 mb-3">
212223
{type.icon}
213-
<h4 className="font-semibold text-gray-200">{type.title}</h4>
224+
<h4 className={`font-semibold ${type.disabled ? 'text-gray-500' : 'text-gray-200'}`}>{type.title}</h4>
214225
</div>
215-
<p className="text-sm text-gray-400">{type.description}</p>
226+
<p className={`text-sm ${type.disabled ? 'text-gray-500' : 'text-gray-400'}`}>{type.description}</p>
216227
</button>
217228
))}
218229
</div>
@@ -274,21 +285,18 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
274285
</button>
275286

276287
<button
277-
onClick={() => {
278-
setShowTemplates(true);
279-
setFormData(prev => ({ ...prev, copyFromGraphId: undefined }));
280-
}}
281-
className={`p-4 border-2 rounded-xl text-center transition-all ${
282-
showTemplates
283-
? 'border-green-500 bg-green-900/20 text-white'
284-
: 'border-gray-600 bg-gray-700/30 text-gray-300 hover:border-gray-500 hover:bg-gray-700/50'
285-
}`}
288+
disabled
289+
title="Template functionality coming soon!"
290+
className="p-4 border-2 rounded-xl text-center transition-all border-gray-700 bg-gray-800/30 text-gray-500 cursor-not-allowed opacity-60 relative"
286291
>
287-
<div className="w-12 h-12 mx-auto mb-3 bg-blue-600/20 rounded-lg flex items-center justify-center">
288-
<FileText className="h-6 w-6 text-blue-400" />
292+
<div className="absolute top-2 right-2 bg-gray-700 text-xs text-gray-400 px-2 py-1 rounded">
293+
Coming Soon
294+
</div>
295+
<div className="w-12 h-12 mx-auto mb-3 bg-gray-700/50 rounded-lg flex items-center justify-center">
296+
<FileText className="h-6 w-6 text-gray-500" />
289297
</div>
290298
<h5 className="font-medium mb-1">Use Template</h5>
291-
<p className="text-xs text-gray-400">Start with a pre-built template</p>
299+
<p className="text-xs text-gray-500">Start with a pre-built template</p>
292300
</button>
293301

294302
{copyableGraphs.length > 0 && (
@@ -323,17 +331,17 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
323331
.map((template) => (
324332
<button
325333
key={template.id}
326-
onClick={() => setFormData(prev => ({ ...prev, templateId: template.id }))}
327-
className={`p-4 border rounded-lg text-left transition-all ${
328-
formData.templateId === template.id
329-
? 'border-green-500 bg-green-900/20'
330-
: 'border-gray-600 bg-gray-700/50 hover:bg-gray-700 hover:border-gray-500'
331-
}`}
334+
disabled
335+
title="Template functionality coming soon!"
336+
className="p-4 border rounded-lg text-left cursor-not-allowed opacity-60 relative border-gray-700 bg-gray-800/30"
332337
>
338+
<div className="absolute top-2 right-2 bg-gray-700 text-xs text-gray-400 px-2 py-1 rounded">
339+
Coming Soon
340+
</div>
333341
<div className="flex items-center justify-between">
334342
<div>
335-
<h5 className="font-medium text-gray-200">{template.name}</h5>
336-
<p className="text-sm text-gray-400 mt-1">{template.description}</p>
343+
<h5 className="font-medium text-gray-500">{template.name}</h5>
344+
<p className="text-sm text-gray-500 mt-1">{template.description}</p>
337345
</div>
338346
<div className="text-sm text-gray-500">
339347
{template.nodeCount} nodes

0 commit comments

Comments
 (0)