Various fixes to message builder

Author: synzen

services/backend-api/client/src/components/NavigableTree/index.tsx

@@ -51,6 +51,7 @@ interface TreeItemProps extends PropsWithChildren {
   onActivate?: () => void;
   onEscape?: () => void;
   ariaLabel?: string;
+  withoutProvider?: boolean;
 }
 
 export const NavigableTreeItem = ({
@@ -60,6 +61,7 @@ export const NavigableTreeItem = ({
   onActivate,
   onEscape,
   ariaLabel,
+  withoutProvider,
 }: TreeItemProps) => {
   const { currentSelectedId } = useNavigableTreeContext();
   const treeItemRef = useRef<HTMLDivElement>(null);
@@ -85,56 +87,64 @@ export const NavigableTreeItem = ({
     setHasGroup(!!thisHasGroup);
   }, [treeItemRef.current]);
 
+  const content = (
+    <NavigableTreeItemContext.Consumer>
+      {({ isExpanded, onFocused, onKeyDown, onBlurred }) => {
+        return (
+          <div
+            aria-label={ariaLabel}
+            ref={treeItemRef}
+            role="treeitem"
+            data-id={id}
+            onFocus={(e) => {
+              // const focusedElem = document.activeElement as HTMLElement;
+              // if (focusedElem !== treeItemRef.current) {
+              //   return;
+              // }
+              e.stopPropagation();
+              onFocused();
+            }}
+            tabIndex={tabIndex}
+            onBlur={(e) => {
+              e.stopPropagation();
+              onBlurred();
+            }}
+            onKeyDown={(e) => {
+              // if current div is not focused, do nothing
+              // const focusedElem = document.activeElement as HTMLElement;
+              // if (focusedElem !== treeItemRef.current) {
+              //   return;
+              // }
+
+              // if enter or space
+              if (e.key === "Enter" || e.key === " ") {
+                onActivate?.();
+              } else if (e.key === "Escape") {
+                onEscape?.();
+              } else {
+                onKeyDown(e);
+              }
+            }}
+            aria-selected={currentSelectedId === id}
+            aria-expanded={hasGroup ? isExpanded : undefined}
+            style={{
+              outline: "none",
+            }}
+          >
+            {children}
+          </div>
+        );
+      }}
+    </NavigableTreeItemContext.Consumer>
+  );
+
+  if (withoutProvider) {
+    return content;
+  }
+
   return (
     <NavigableTreeItemProvider id={id} isExpanded={isRootItem}>
-      <NavigableTreeItemContext.Consumer>
-        {({ isExpanded, onFocused, onKeyDown, onBlurred }) => {
-          return (
-            <div
-              aria-label={ariaLabel}
-              ref={treeItemRef}
-              role="treeitem"
-              data-id={id}
-              onFocus={(e) => {
-                // const focusedElem = document.activeElement as HTMLElement;
-                // if (focusedElem !== treeItemRef.current) {
-                //   return;
-                // }
-                e.stopPropagation();
-                onFocused();
-              }}
-              tabIndex={tabIndex}
-              onBlur={(e) => {
-                e.stopPropagation();
-                onBlurred();
-              }}
-              onKeyDown={(e) => {
-                // if current div is not focused, do nothing
-                // const focusedElem = document.activeElement as HTMLElement;
-                // if (focusedElem !== treeItemRef.current) {
-                //   return;
-                // }
-
-                // if enter or space
-                if (e.key === "Enter" || e.key === " ") {
-                  onActivate?.();
-                } else if (e.key === "Escape") {
-                  onEscape?.();
-                } else {
-                  onKeyDown(e);
-                }
-              }}
-              aria-selected={currentSelectedId === id}
-              aria-expanded={hasGroup ? isExpanded : undefined}
-              style={{
-                outline: "none",
-              }}
-            >
-              {children}
-            </div>
-          );
-        }}
-      </NavigableTreeItemContext.Consumer>
+      {content}
     </NavigableTreeItemProvider>
   );
 };

services/backend-api/client/src/components/PreviewerTour/index.tsx

@@ -43,12 +43,21 @@ export const MESSAGE_BUILDER_TOUR_STEPS: TourStep[] = [
     placement: "right",
     offset: { x: 20, y: 0 },
   },
+  {
+    id: "selected-component",
+    target: "[data-tour-target='selected-component']",
+    title: "Selected Component",
+    content:
+      "This is your currently-selected component. You can select different components by clicking on them in the tree.\n\nThe selected component determines what you can edit in the properties panel and what add sub-component button options are available.",
+    placement: "right",
+    offset: { x: 20, y: 0 },
+  },
   {
     id: "add-component-button",
     target: "[data-tour-target='add-component-button']",
     title: "Add New Components",
     content:
-      "After you've selected a component, you may click here to add new components under the selected component. You can add text blocks, embeds, buttons, and more to customize how your feed messages appear.",
+      "If the currently-selected component supports sub-components, you may click the add button next to the currently-selected component to add components under it.\n\nExamples may include text blocks, embeds, buttons, and more to customize how your feed messages appear.",
     placement: "bottom",
     offset: { x: 0, y: 20 },
   },
@@ -57,9 +66,9 @@ export const MESSAGE_BUILDER_TOUR_STEPS: TourStep[] = [
     target: "[data-tour-target='properties-panel']",
     title: "Component Properties",
     content:
-      "When you select a component, its properties will appear here. This is where you can customize the content, styling, and behavior of each component.",
-    placement: "left",
-    offset: { x: -20, y: 0 },
+      "The configurable properties of the currently-selected component will be visible in this Component Properties panel.",
+    placement: "right",
+    offset: { x: 20, y: 0 },
   },
   {
     id: "discord-preview",
@@ -297,7 +306,7 @@ const TourTooltip: React.FC<TourTooltipProps> = ({
           borderRadius="lg"
           border="4px solid"
           borderColor="blue.400"
-          bg="rgba(59, 130, 246, 0.1)"
+          bg="rgba(59, 130, 246, 0.05)"
           position="relative"
         >
           <motion.div
@@ -335,7 +344,7 @@ const TourTooltip: React.FC<TourTooltipProps> = ({
         }}
       >
         <Box
-          bg="gray.800"
+          bg="gray.700"
           color="white"
           p={4}
           borderRadius="md"

services/backend-api/client/src/contexts/PageAlertContext.tsx

@@ -76,7 +76,7 @@ export const PageAlertProvider = ({ children }: { children: ReactNode }) => {
       alerts,
       removeAlert,
     };
-  }, [createErrorAlert, createSuccessAlert, createInfoAlert, alerts]);
+  }, [createErrorAlert, createSuccessAlert, createInfoAlert, removeAlert, alerts]);
 
   return <PageAlertContext.Provider value={contextValue}>{children}</PageAlertContext.Provider>;
 };
@@ -93,30 +93,28 @@ interface PageAlertContextOutletProps {
 
 export const PageAlertContextOutlet = ({ containerProps }: PageAlertContextOutletProps) => {
   const { alerts, removeAlert } = usePageAlertContext();
-  const [closedCount, setClosedCount] = useState(0);
 
   const onRemoved = useCallback(
     (id: string) => {
-      setClosedCount((prev) => prev + 1);
       removeAlert(id);
     },
     [removeAlert]
   );
 
   return (
     <Stack
-      hidden={closedCount === alerts.length}
+      hidden={alerts.length === 0}
       spacing={2}
       position="sticky"
       top={0}
       zIndex={containerProps?.zIndex ?? 1}
       w="100%"
       {...containerProps}
     >
-      {alerts.map((alert, index) => {
+      {alerts.map((alert) => {
         return (
           <DismissableAlert
-            key={alert.title + index.toString()}
+            key={alert.id}
             status={alert.status}
             description={alert.description}
             title={alert.title}

services/backend-api/client/src/contexts/SendTestArticleContext.tsx

@@ -167,6 +167,7 @@ export const SendTestArticleProvider = ({ children }: PropsWithChildren<{}>) =>
                 <Heading size="md">
                   {t("features.feedConnections.components.sendTestArticleButton.apiPayload")}
                 </Heading>
+                <Text>The configured message that was sent to Discord.</Text>
                 <pre
                   style={{
                     backgroundColor: getChakraColor("gray.800"),
@@ -183,6 +184,10 @@ export const SendTestArticleProvider = ({ children }: PropsWithChildren<{}>) =>
                 <Heading size="md">
                   {t("features.feedConnections.components.sendTestArticleButton.apiResponse")}
                 </Heading>
+                <Text>
+                  The response Discord gave. This should include details on the issues that Discord
+                  is reporting with the configured message.
+                </Text>
                 <pre
                   style={{
                     backgroundColor: getChakraColor("gray.800"),

services/backend-api/client/src/pages/Previewer.tsx

@@ -443,7 +443,27 @@ const PreviewerContent: React.FC = () => {
                     </VStack>
                   </Box>
                 </Box>
-                {/* Center Panel - Discord Preview and Problems */}
+                {/* Middle Panel - Properties */}
+                <Box
+                  minWidth={SIDE_PANEL_WIDTH}
+                  maxWidth={SIDE_PANEL_WIDTH}
+                  display={{ base: "none", lg: "block" }}
+                >
+                  <Box
+                    bg="gray.800"
+                    borderRight="1px"
+                    borderColor="gray.600"
+                    height="100%"
+                    width="100%"
+                    overflowY="auto"
+                    data-tour-target="properties-panel"
+                  >
+                    {currentSelectedId && (
+                      <ComponentPropertiesPanel selectedComponentId={currentSelectedId} />
+                    )}
+                  </Box>
+                </Box>
+                {/* Right Panel - Discord Preview and Problems */}
                 <Flex flex={1} direction="column" bg="gray.800" maxW={CENTER_PANEL_WIDTH}>
                   {/* Discord Preview Section */}
                   <Box p={4} borderBottom="1px" borderColor="gray.600" srOnly>
@@ -530,26 +550,6 @@ const PreviewerContent: React.FC = () => {
                     </Tabs>
                   </Box>
                 </Flex>
-                {/* Right Panel - Properties */}
-                <Box
-                  minWidth={SIDE_PANEL_WIDTH}
-                  maxWidth={SIDE_PANEL_WIDTH}
-                  display={{ base: "none", lg: "block" }}
-                >
-                  <Box
-                    bg="gray.800"
-                    borderLeft="1px"
-                    borderColor="gray.600"
-                    height="100%"
-                    width="100%"
-                    overflowY="auto"
-                    data-tour-target="properties-panel"
-                  >
-                    {currentSelectedId && (
-                      <ComponentPropertiesPanel selectedComponentId={currentSelectedId} />
-                    )}
-                  </Box>
-                </Box>
               </Flex>
             </Flex>
             {/* Discard Confirmation Modal */}