Merge pull request #136 from debdevops/fix/fab-topic-entity-type

fix: FAB Send/Generate targeted a queue named after the topic on topi…

Author: debdevops

apps/web/src/__tests__/components/fab/MessageFAB.test.tsx

@@ -22,15 +22,27 @@ vi.mock('react-hot-toast', () => ({
   }),
 }));
 
-// Mock child modals — keep them lightweight
+// Mock child modals — keep them lightweight, expose the entity defaults they receive
 vi.mock('@/components/fab/SendMessageModal', () => ({
-  SendMessageModal: ({ isOpen }: { isOpen: boolean }) =>
-    isOpen ? <div data-testid="send-modal">SendMessageModal</div> : null,
+  SendMessageModal: ({ isOpen, defaultEntityType, defaultEntityName }: { isOpen: boolean; defaultEntityType?: string; defaultEntityName?: string | null }) =>
+    isOpen ? (
+      <div data-testid="send-modal">
+        SendMessageModal
+        <span data-testid="send-modal-entity-type">{defaultEntityType ?? 'unset'}</span>
+        <span data-testid="send-modal-entity-name">{defaultEntityName ?? 'unset'}</span>
+      </div>
+    ) : null,
 }));
 
 vi.mock('@/components/fab/MessageGeneratorModal', () => ({
-  MessageGeneratorModal: ({ isOpen }: { isOpen: boolean }) =>
-    isOpen ? <div data-testid="generator-modal">MessageGeneratorModal</div> : null,
+  MessageGeneratorModal: ({ isOpen, defaultTargetType, defaultEntityName }: { isOpen: boolean; defaultTargetType?: string; defaultEntityName?: string | null }) =>
+    isOpen ? (
+      <div data-testid="generator-modal">
+        MessageGeneratorModal
+        <span data-testid="generator-modal-target-type">{defaultTargetType ?? 'unset'}</span>
+        <span data-testid="generator-modal-entity-name">{defaultEntityName ?? 'unset'}</span>
+      </div>
+    ) : null,
 }));
 
 vi.mock('@/lib/api/messages', () => ({
@@ -161,4 +173,71 @@ describe('MessageFAB', () => {
     const dlqButtons = document.querySelectorAll('button[disabled]');
     expect(dlqButtons.length).toBeGreaterThan(0);
   });
+
+  // ── Entity-type forwarding to modals ─────────────────────────────────────────
+  // Regression: modals used to default to 'queue' even on topic pages, so Send/
+  // Generate posted to a queue named after the topic (404 for every message).
+
+  it('forwards queue entity type and queue name to SendMessageModal', async () => {
+    renderFAB({ entityType: 'queue', queueName: 'orders' });
+    await userEvent.click(screen.getByTitle('Open message menu'));
+    await userEvent.click(screen.getByText('Send Message'));
+    expect(screen.getByTestId('send-modal-entity-type')).toHaveTextContent('queue');
+    expect(screen.getByTestId('send-modal-entity-name')).toHaveTextContent('orders');
+  });
+
+  it('forwards topic entity type and topic name to SendMessageModal on topic pages', async () => {
+    renderFAB({ entityType: 'topic', queueName: null, topicName: 'orders-topic', subscriptionName: 'sub-1' });
+    await userEvent.click(screen.getByTitle('Open message menu'));
+    await userEvent.click(screen.getByText('Send Message'));
+    expect(screen.getByTestId('send-modal-entity-type')).toHaveTextContent('topic');
+    expect(screen.getByTestId('send-modal-entity-name')).toHaveTextContent('orders-topic');
+  });
+
+  it('forwards topic target type and topic name to MessageGeneratorModal on topic pages', async () => {
+    renderFAB({ entityType: 'topic', queueName: null, topicName: 'orders-topic', subscriptionName: 'sub-1' });
+    await userEvent.click(screen.getByTitle('Open message menu'));
+    await userEvent.click(screen.getByText('Generate Messages'));
+    expect(screen.getByTestId('generator-modal-target-type')).toHaveTextContent('topic');
+    expect(screen.getByTestId('generator-modal-entity-name')).toHaveTextContent('orders-topic');
+  });
+
+  // ── Provider gating ───────────────────────────────────────────────────────────
+  // Test actions are enabled for all providers: Azure (native), AWS (SQS send /
+  // SNS publish / manual DLQ via redrive target), GCP (publish / manual DLQ by
+  // republishing to the subscription's dead-letter topic).
+
+  it.each(['aws', 'gcp'] as const)('enables Send, Generate, and Test DLQ for %s namespaces', async (provider) => {
+    renderFAB({ cloudProvider: provider });
+    await userEvent.click(screen.getByTitle('Open message menu'));
+    expect(screen.getByText('Send Message').closest('button')).not.toBeDisabled();
+    expect(screen.getByText('Generate Messages').closest('button')).not.toBeDisabled();
+    expect(screen.getByText('Test DLQ').closest('button')).not.toBeDisabled();
+  });
+
+  it.each(['aws', 'gcp'] as const)('opens SendMessageModal for %s namespaces', async (provider) => {
+    renderFAB({ cloudProvider: provider });
+    await userEvent.click(screen.getByTitle('Open message menu'));
+    await userEvent.click(screen.getByText('Send Message'));
+    expect(screen.getByTestId('send-modal')).toBeInTheDocument();
+  });
+
+  it.each(['aws', 'gcp'] as const)('dead-letters messages for %s namespaces when Test DLQ is clicked', async (provider) => {
+    const { messagesApi } = await import('@/lib/api/messages');
+    renderFAB({ cloudProvider: provider });
+    await userEvent.click(screen.getByTitle('Open message menu'));
+    await userEvent.click(screen.getByText('Test DLQ'));
+    expect(messagesApi.deadLetter).toHaveBeenCalledWith(
+      'ns-1', 'orders', 3, 'TestingDLQ', expect.any(String), 'queue'
+    );
+  });
+
+  it.each(['azure', 'aws', 'gcp'] as const)('keeps destructive actions disabled in production for %s', async (provider) => {
+    renderFAB({ cloudProvider: provider, environment: 'prod' });
+    await userEvent.click(screen.getByTitle('Open message menu'));
+    expect(screen.getByText('Send Message').closest('button')).toBeDisabled();
+    expect(screen.getByText('Generate Messages').closest('button')).toBeDisabled();
+    expect(screen.getByText('Test DLQ').closest('button')).toBeDisabled();
+    expect(screen.getByText(/Production — destructive actions disabled/)).toBeInTheDocument();
+  });
 });

apps/web/src/components/fab/MessageFAB.tsx

@@ -9,7 +9,10 @@ import type { CloudProviderType } from '@/lib/api/types';
 
 // ============================================================================
 // MessageFAB - Enhanced Floating Action Button with multiple actions
-// Master control for all Service Bus testing operations
+// Master control for messaging test operations across all providers:
+// Azure Service Bus, AWS SQS/SNS, and GCP Pub/Sub. Rendered only for DEV
+// namespaces with Manage permission (gated in MainLayout); production
+// namespaces additionally disable all destructive actions here.
 // Handles both Queues and Topic Subscriptions
 // ============================================================================
 
@@ -39,8 +42,11 @@ export function MessageFAB({
   onMessagesGenerated,
 }: MessageFABProps) {
   const isProd = environment?.toLowerCase() === 'prod';
-  const isNonAzure = cloudProvider === 'aws' || cloudProvider === 'gcp';
-  const providerLabel = cloudProvider === 'aws' ? 'AWS SQS' : cloudProvider === 'gcp' ? 'GCP Pub/Sub' : 'Azure Service Bus';
+  // Test actions are supported for all providers: Azure (native), AWS (SQS send /
+  // SNS publish / manual DLQ via the queue's redrive target), and GCP (publish /
+  // manual DLQ by republishing to the subscription's dead-letter topic). AWS and
+  // GCP require a DLQ/dead-letter policy on the entity — a clear error explains
+  // this when it is missing.
   const fabBgColor = cloudProvider === 'aws'
     ? 'bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 ring-orange-200'
     : cloudProvider === 'gcp'
@@ -229,12 +235,6 @@ export function MessageFAB({
             </div>
           </button>
 
-          {isNonAzure && (
-            <div className="px-3 py-1.5 text-[11px] font-medium text-purple-700 bg-purple-50 border border-purple-200 rounded-lg mb-2 flex items-center gap-1.5">
-              <span>⚡</span> {providerLabel} — write operations in Phase 2
-            </div>
-          )}
-
           {isProd && (
             <div className="px-3 py-1.5 text-[11px] font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded-lg mb-2 flex items-center gap-1.5">
               <span>⚠</span> Production — destructive actions disabled
@@ -244,29 +244,29 @@ export function MessageFAB({
           {/* Dead-Letter Messages Option */}
           <button
             onClick={isProd ? undefined : handleDeadLetter}
-            disabled={!hasValidEntity || isDeadLettering || isProd || isNonAzure}
+            disabled={!hasValidEntity || isDeadLettering || isProd}
             className={`
               flex items-center gap-3
               px-4 py-3
               border rounded-xl shadow-lg
               transition-all duration-150
               group
-              ${!hasValidEntity || isProd || isNonAzure
+              ${!hasValidEntity || isProd
                 ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50'
                 : 'bg-white hover:bg-red-50 border-gray-200 hover:border-red-300 hover:shadow-xl'
               }
             `}
-            title={isProd ? 'Quick Actions are disabled for Production namespaces' : isNonAzure ? `Write operations for ${providerLabel} coming in Phase 2` : 'For testing: moves up to 3 messages from the active queue to the dead-letter queue'}
+            title={isProd ? 'Quick Actions are disabled for Production namespaces' : 'For testing: moves up to 3 messages from the active queue to the dead-letter queue'}
           >
             <div className={`p-2 rounded-lg transition-colors ${
-              !hasValidEntity || isProd || isNonAzure
+              !hasValidEntity || isProd
                 ? 'bg-gray-200' 
                 : 'bg-red-100 group-hover:bg-red-200'
             }`}>
-              <Skull className={`w-5 h-5 ${!hasValidEntity || isProd || isNonAzure ? 'text-gray-400' : 'text-red-600'}`} />
+              <Skull className={`w-5 h-5 ${!hasValidEntity || isProd ? 'text-gray-400' : 'text-red-600'}`} />
             </div>
             <div className="text-left">
-              <div className={`text-sm font-semibold ${!hasValidEntity || isProd || isNonAzure ? 'text-gray-400' : 'text-gray-800'}`}>
+              <div className={`text-sm font-semibold ${!hasValidEntity || isProd ? 'text-gray-400' : 'text-gray-800'}`}>
                 {isDeadLettering ? 'Moving...' : 'Test DLQ'}
               </div>
               <div className="text-xs text-gray-500 max-w-[180px]">
@@ -278,19 +278,19 @@ export function MessageFAB({
           {/* Generate Messages Option */}
           <button
             onClick={handleOpenGenerate}
-            disabled={isProd || isNonAzure}
+            disabled={isProd}
             className={`
               flex items-center gap-3
               px-4 py-3
               border rounded-xl shadow-lg
               transition-all duration-150
               group
-              ${isProd || isNonAzure
+              ${isProd
                 ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50'
                 : 'bg-white hover:bg-amber-50 border-gray-200 hover:border-amber-300 hover:shadow-xl'
               }
             `}
-            title={isProd ? 'Quick Actions are disabled for Production namespaces' : isNonAzure ? `Write operations for ${providerLabel} coming in Phase 2` : undefined}
+            title={isProd ? 'Quick Actions are disabled for Production namespaces' : undefined}
           >
             <div className="p-2 bg-amber-100 rounded-lg group-hover:bg-amber-200 transition-colors">
               <Wand2 className="w-5 h-5 text-amber-600" />
@@ -304,19 +304,19 @@ export function MessageFAB({
           {/* Send Message Option */}
           <button
             onClick={handleOpenSend}
-            disabled={isProd || isNonAzure}
+            disabled={isProd}
             className={`
               flex items-center gap-3
               px-4 py-3
               border rounded-xl shadow-lg
               transition-all duration-150
               group
-              ${isProd || isNonAzure
+              ${isProd
                 ? 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50'
                 : 'bg-white hover:bg-sky-50 border-gray-200 hover:border-sky-300 hover:shadow-xl'
               }
             `}
-            title={isProd ? 'Quick Actions are disabled for Production namespaces' : isNonAzure ? `Write operations for ${providerLabel} coming in Phase 2` : undefined}
+            title={isProd ? 'Quick Actions are disabled for Production namespaces' : undefined}
           >
             <div className="p-2 bg-sky-100 rounded-lg group-hover:bg-sky-200 transition-colors">
               <Send className="w-5 h-5 text-sky-600" />
@@ -357,7 +357,8 @@ export function MessageFAB({
         onClose={() => setActiveModal(null)}
         onSend={handleSend}
         defaultNamespaceId={namespaceId}
-        defaultQueueName={queueName}
+        defaultEntityName={entityType === 'topic' ? topicName : queueName}
+        defaultEntityType={entityType}
       />
 
       {/* Message Generator Modal */}
@@ -366,6 +367,7 @@ export function MessageFAB({
         onClose={() => setActiveModal(null)}
         defaultNamespaceId={namespaceId}
         defaultEntityName={entityType === 'topic' ? topicName : queueName}
+        defaultTargetType={entityType}
         onGenerated={handleGenerated}
       />
     </>

apps/web/src/components/fab/MessageGeneratorModal.tsx

@@ -40,6 +40,7 @@ interface MessageGeneratorModalProps {
   onClose: () => void;
   defaultNamespaceId?: string | null;
   defaultEntityName?: string | null;
+  defaultTargetType?: 'queue' | 'topic';
   onGenerated?: () => void;
 }
 
@@ -91,6 +92,7 @@ export function MessageGeneratorModal({
   onClose,
   defaultNamespaceId,
   defaultEntityName,
+  defaultTargetType,
   onGenerated,
 }: MessageGeneratorModalProps) {
   // Data fetching
@@ -101,7 +103,7 @@ export function MessageGeneratorModal({
   const { data: topics } = useTopics(selectedNamespace);
 
   // Form state
-  const [targetType, setTargetType] = useState<TargetType>('queue');
+  const [targetType, setTargetType] = useState<TargetType>(defaultTargetType || 'queue');
   const [selectedEntity, setSelectedEntity] = useState(defaultEntityName || '');
   const [volume, setVolume] = useState<VolumePreset>(50);
   const [selectedScenarios, setSelectedScenarios] = useState<MessageScenario[]>(getDefaultScenarios());
@@ -113,7 +115,8 @@ export function MessageGeneratorModal({
   useEffect(() => {
     if (defaultNamespaceId) setSelectedNamespace(defaultNamespaceId);
     if (defaultEntityName) setSelectedEntity(defaultEntityName);
-  }, [defaultNamespaceId, defaultEntityName]);
+    if (defaultTargetType) setTargetType(defaultTargetType);
+  }, [defaultNamespaceId, defaultEntityName, defaultTargetType]);
 
   // Reset entity when namespace changes
   useEffect(() => {

apps/web/src/components/fab/MessageSendFAB.tsx

@@ -67,7 +67,7 @@ export function MessageSendFAB({ namespaceId, queueName, onMessageSent }: Messag
         onClose={() => setIsModalOpen(false)}
         onSend={handleSend}
         defaultNamespaceId={namespaceId}
-        defaultQueueName={queueName}
+        defaultEntityName={queueName}
       />
     </>
   );

apps/web/src/components/fab/SendMessageModal.tsx

@@ -15,7 +15,8 @@ interface SendMessageModalProps {
   onClose: () => void;
   onSend: (data: MessagePayload) => void;
   defaultNamespaceId?: string | null;
-  defaultQueueName?: string | null;
+  defaultEntityName?: string | null;
+  defaultEntityType?: 'queue' | 'topic';
 }
 
 interface MessageProperty {
@@ -41,16 +42,17 @@ export function SendMessageModal({
   onClose, 
   onSend,
   defaultNamespaceId,
-  defaultQueueName 
+  defaultEntityName,
+  defaultEntityType
 }: SendMessageModalProps) {
   const { data: namespaces } = useNamespaces();
   const [selectedNamespace, setSelectedNamespace] = useState(defaultNamespaceId || '');
   const { data: queues } = useQueues(selectedNamespace);
   const { data: topics } = useTopics(selectedNamespace);
   const sendMessage = useSendMessage();
 
-  const [entityType, setEntityType] = useState<'queue' | 'topic'>('queue');
-  const [entity, setEntity] = useState(defaultQueueName || '');
+  const [entityType, setEntityType] = useState<'queue' | 'topic'>(defaultEntityType || 'queue');
+  const [entity, setEntity] = useState(defaultEntityName || '');
   const [body, setBody] = useState('{\n  "orderId": "ORD-2026-12345",\n  "amount": 99.99,\n  "currency": "USD"\n}');
   const [contentType, setContentType] = useState('application/json');
   const [properties, setProperties] = useState<MessageProperty[]>([
@@ -65,11 +67,12 @@ export function SendMessageModal({
   const [sendMultiple, setSendMultiple] = useState(false);
   const [messageCount, setMessageCount] = useState(1);
 
-  // Update selected namespace and queue when defaults change
+  // Update selected namespace, entity, and entity type when defaults change
   useEffect(() => {
     if (defaultNamespaceId) setSelectedNamespace(defaultNamespaceId);
-    if (defaultQueueName) setEntity(defaultQueueName);
-  }, [defaultNamespaceId, defaultQueueName]);
+    if (defaultEntityName) setEntity(defaultEntityName);
+    if (defaultEntityType) setEntityType(defaultEntityType);
+  }, [defaultNamespaceId, defaultEntityName, defaultEntityType]);
 
   // Handle Escape key to close modal
   useEffect(() => {

apps/web/src/components/layout/MainLayout.tsx

@@ -86,9 +86,8 @@ export function MainLayout() {
   // FAB: only in DEV environment with Manage (write) permission — never in UAT/Prod or read-only connections
   const canUseFab = currentNamespace?.environment === 'dev' && currentNamespace?.hasManagePermission === true;
 
-  // Determine entity type and names for FAB
+  // Determine entity type for FAB
   const entityType: 'queue' | 'topic' = topicName ? 'topic' : 'queue';
-  const entityName = queueName || topicName || '';
 
   const handleMessagesGenerated = () => {
     // Mark stale without triggering an immediate burst refetch — the next
@@ -130,9 +129,9 @@ export function MainLayout() {
 
       {/* FAB - Show on messages page in DEV with Manage permission, never in Demo mode */}
       {isMessagesPage && canUseFab && !isDemoMode && (
-        <MessageFAB 
+        <MessageFAB
           namespaceId={namespaceId}
-          queueName={entityName}
+          queueName={queueName}
           entityType={entityType}
           topicName={topicName}
           subscriptionName={subscriptionName}

apps/web/src/pages/CrossCloudTracePage.tsx

@@ -65,7 +65,7 @@ function FlowDiagram({ clouds, hops, summaries }: FlowDiagramProps) {
               {hopsPerCloud(cloud)} hop{hopsPerCloud(cloud) !== 1 ? 's' : ''}
             </span>
             {!wasSearched(cloud) && (
-              <span className="text-xs text-amber-600 font-medium">Phase 2</span>
+              <span className="text-xs text-amber-600 font-medium">Not searched</span>
             )}
           </div>
           {/* Connector arrow (not after last node) */}
@@ -169,7 +169,7 @@ function NamespaceSummaryRow({ summary }: { summary: CrossCloudNamespaceSummary
       ) : (
         <span className="flex items-center gap-1 text-amber-600 text-xs font-medium" title={summary.skipReason ?? ''}>
           <Clock className="w-3.5 h-3.5" />
-          {summary.skipReason?.startsWith('AWS') || summary.skipReason?.startsWith('GCP') ? 'Phase 2' : 'Skipped'}
+          {summary.skipReason?.includes('not enabled') ? 'Not enabled' : 'Skipped'}
         </span>
       )}
     </div>
@@ -368,7 +368,8 @@ export function CrossCloudTracePage() {
               {result.namespaceSummaries.some(s => !s.wasSearched && (s.cloudProvider === 'aws' || s.cloudProvider === 'gcp')) && (
                 <p className="mt-2 text-xs text-gray-400 flex items-center gap-1">
                   <Info className="w-3.5 h-3.5" />
-                  AWS and GCP namespace search will be available in Phase 2.
+                  AWS/GCP namespaces are searched when their provider is enabled on the
+                  server (CloudProviders:Aws/Gcp:Enabled) — skipped ones show the reason above.
                 </p>
               )}
             </div>