Misc fixes

synzen · Feb 17, 2025 · b29c433 · b29c433
1 parent 4daaa20
commit b29c433
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 60 deletions.
diff --git a/services/backend-api/client/.eslintrc.js b/services/backend-api/client/.eslintrc.js
@@ -71,6 +71,5 @@ module.exports = {
       },
     ],
     "react/jsx-props-no-spreading": "off",
-    "react-hooks/exhaustive-deps": "warn",
   },
 };
diff --git a/services/backend-api/client/src/components/SaveUnsavedChangesPopupBar/index.tsx b/services/backend-api/client/src/components/SaveUnsavedChangesPopupBar/index.tsx
@@ -42,12 +42,12 @@ export const SavedUnsavedChangesPopupBar = ({ useDirtyFormCheck }: Props) => {
           animate={{ opacity: 1, bottom: "0px" }}
           exit={{ opacity: 0, bottom: "-100px" }}
         >
-          <HStack justifyContent="space-between" width="100%">
+          <HStack justifyContent="space-between" width="100%" flexWrap="wrap" gap={4}>
             <Text>You have unsaved changes on this page!</Text>
-            <HStack>
+            <HStack flexWrap="wrap">
               <Button
                 onClick={() => reset(defaultValues)}
-                variant="ghost"
+                variant="outline"
                 isDisabled={!isDirty || isSubmitting}
               >
                 <span>Discard all changes</span>

diff --git a/...ices/backend-api/client/src/features/feedConnections/components/FiltersForm/Condition.tsx b/...ices/backend-api/client/src/features/feedConnections/components/FiltersForm/Condition.tsx
@@ -25,7 +25,6 @@ import { getNestedField } from "../../../../utils/getNestedField";
 import { useUserFeedConnectionContext } from "../../../../contexts/UserFeedConnectionContext";
 import { useNavigableTreeItemContext } from "../../../../contexts/NavigableTreeItemContext";
 import getChakraColor from "../../../../utils/getChakraColor";
-import { useEffect, useRef } from "react";
 import { getReadableLabelForRelationalOp } from "./utils/getReadableLabelForRelationalOp";
 
 const { Equals, Contains, Matches } = RelationalExpressionOperator;
@@ -74,7 +73,7 @@ export const Condition = ({ onDelete, prefix = "", deletable, containerProps }:
               id={`${prefix}-property-label`}
               htmlFor={`${prefix}-property-select`}
             >
-              Article Property
+              Article Property to Filter On
             </chakra.label>
             <ArticlePropertySelect
               customPlaceholders={articleFormatOptions.customPlaceholders || []}
@@ -105,7 +104,7 @@ export const Condition = ({ onDelete, prefix = "", deletable, containerProps }:
       width="100%"
       alignItems="flex-start"
       {...containerProps}
-      borderRadius={"md"}
+      borderRadius="md"
       outline={isFocused ? `2px solid ${getChakraColor("whiteAlpha.600")}` : undefined}
       bg={isFocused ? "blackAlpha.500" : undefined}
       _hover={{

diff --git a/services/backend-api/client/src/features/feedConnections/components/FiltersForm/index.tsx b/services/backend-api/client/src/features/feedConnections/components/FiltersForm/index.tsx
@@ -1,4 +1,4 @@
-import { Box, BoxProps, Button, HStack, Stack, TableHeadProps } from "@chakra-ui/react";
+import { BoxProps, Button, HStack, Stack, TableHeadProps } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import React from "react";

diff --git a/...c/features/feedConnections/components/FiltersForm/utils/getAriaLabelForExpressionGroup.ts b/...c/features/feedConnections/components/FiltersForm/utils/getAriaLabelForExpressionGroup.ts
@@ -3,5 +3,5 @@ import { LogicalExpressionOperator } from "../../../types";
 export const getAriaLabelForExpressionGroup = (op: LogicalExpressionOperator) => {
   return `Condition group where ${
     op === LogicalExpressionOperator.And ? "all" : "any"
-  } of the conditions must match`;
+  } of the conditions must match.`;
 };
diff --git a/...nt/src/features/feedConnections/components/FiltersForm/utils/getAriaLableForExpression.ts b/...nt/src/features/feedConnections/components/FiltersForm/utils/getAriaLableForExpression.ts
@@ -1,16 +1,16 @@
-import { RelationalExpressionOperator, RelationalFilterExpression } from "../../../types";
+import { RelationalFilterExpression } from "../../../types";
 import { getReadableLabelForRelationalOp } from "./getReadableLabelForRelationalOp";
 
 export const getAriaLabelForExpression = ({ left, op, right, not }: RelationalFilterExpression) => {
   const isIncomplete = !left.value || !right.value || !op;
 
   if (isIncomplete) {
-    return "Condition expression with incomplete form fields";
+    return "Condition expression with incomplete form fields. Press tab to edit condition fields.";
   }
 
-  let opLabel = getReadableLabelForRelationalOp(op);
+  const opLabel = getReadableLabelForRelationalOp(op);
 
   return `Condition expression where ${left.value} ${not ? "does not" : "does"} ${opLabel} ${
     right.value
-  }`;
+  }. Press tab to edit condition fields.`;
 };
diff --git a/services/backend-api/client/src/pages/ConnectionDiscordChannelSettings.tsx b/services/backend-api/client/src/pages/ConnectionDiscordChannelSettings.tsx
@@ -144,7 +144,7 @@ export const ConnectionDiscordChannelSettings: React.FC = () => {
         <UserFeedConnectionProvider feedId={feedId} connectionId={connectionId}>
           <Tabs isLazy isFitted defaultIndex={tabIndex ?? 0} index={tabIndex ?? undefined}>
             <BoxConstrained.Wrapper paddingTop={10} background="gray.700">
-              <BoxConstrained.Container spacing={12}>
+              <BoxConstrained.Container spacing={12} px={4}>
                 <Stack spacing={6}>
                   <Stack spacing={4}>
                     <Stack>

diff --git a/services/backend-api/client/src/pages/UserFeeds.tsx b/services/backend-api/client/src/pages/UserFeeds.tsx
@@ -110,6 +110,7 @@ export const UserFeeds: React.FC = () => {
                   <AlertDescription>
                     Article delivery may be fully or partially paused.{" "}
                     <ChakraLink
+                      textAlign="left"
                       as="button"
                       color="blue.300"
                       onClick={onApplyRequiresAttentionFilters}
@@ -132,21 +133,31 @@ export const UserFeeds: React.FC = () => {
             )}
           {managementInvitesCount?.total && (
             <Alert>
-              <AlertIcon />
-              <AlertTitle flex={1}>
-                You have {managementInvitesCount.total} pending feed management invites
-              </AlertTitle>
-              <AlertDescription>
-                <Flex justifyContent="flex-end" flex={1}>
-                  <FeedManagementInvitesDialog
-                    trigger={
-                      <Button variant="outline">
-                        <span>View pending management invites</span>
-                      </Button>
-                    }
-                  />
+              <HStack
+                justifyContent="space-between"
+                alignItems="center"
+                flexWrap="wrap"
+                gap={4}
+                w="100%"
+              >
+                <Flex>
+                  <AlertIcon />
+                  <AlertTitle flex={1}>
+                    You have {managementInvitesCount.total} pending feed management invites
+                  </AlertTitle>
                 </Flex>
-              </AlertDescription>
+                <AlertDescription>
+                  <Flex>
+                    <FeedManagementInvitesDialog
+                      trigger={
+                        <Button variant="outline">
+                          <span>View pending management invites</span>
+                        </Button>
+                      }
+                    />
+                  </Flex>
+                </AlertDescription>
+              </HStack>
             </Alert>
           )}
           <Flex justifyContent="space-between" alignItems="center" gap="4" flexWrap="wrap">
@@ -156,42 +167,45 @@ export const UserFeeds: React.FC = () => {
               </Heading>
             </Flex>
             <Flex alignItems="center" as="aside">
-              {discordUserMe?.maxUserFeeds !== undefined && userFeedsResults?.total !== undefined && (
-                <Box>
-                  <Text fontSize="sm" srOnly>
-                    Feed Limit
-                  </Text>
-                  <HStack>
-                    <Text fontSize="xl" fontWeight={600}>
-                      {userFeedsResults.total}
-                    </Text>
-                    <Text fontSize="xl" fontWeight={600}>
-                      /
+              {discordUserMe?.maxUserFeeds !== undefined &&
+                userFeedsResults?.total !== undefined && (
+                  <Box>
+                    <Text fontSize="sm" srOnly>
+                      Feed Limit
                     </Text>
-                    {discordUserMe.maxUserFeedsComposition.legacy ? (
-                      <Tooltip
-                        label={
-                          <Box>
-                            <Text>+{discordUserMe.maxUserFeedsComposition.base}: Base Amount</Text>
-                            <Text>
-                              +{discordUserMe.maxUserFeedsComposition.legacy}: Legacy feed
-                              conversions
-                            </Text>
-                          </Box>
-                        }
-                      >
+                    <HStack>
+                      <Text fontSize="xl" fontWeight={600}>
+                        {userFeedsResults.total}
+                      </Text>
+                      <Text fontSize="xl" fontWeight={600}>
+                        /
+                      </Text>
+                      {discordUserMe.maxUserFeedsComposition.legacy ? (
+                        <Tooltip
+                          label={
+                            <Box>
+                              <Text>
+                                +{discordUserMe.maxUserFeedsComposition.base}: Base Amount
+                              </Text>
+                              <Text>
+                                +{discordUserMe.maxUserFeedsComposition.legacy}: Legacy feed
+                                conversions
+                              </Text>
+                            </Box>
+                          }
+                        >
+                          <Text fontSize="xl" fontWeight={600}>
+                            {discordUserMe.maxUserFeeds}
+                          </Text>
+                        </Tooltip>
+                      ) : (
                         <Text fontSize="xl" fontWeight={600}>
                           {discordUserMe.maxUserFeeds}
                         </Text>
-                      </Tooltip>
-                    ) : (
-                      <Text fontSize="xl" fontWeight={600}>
-                        {discordUserMe.maxUserFeeds}
-                      </Text>
-                    )}
-                  </HStack>
-                </Box>
-              )}
+                      )}
+                    </HStack>
+                  </Box>
+                )}
               {!userMeData?.result.enableBilling && (
                 <IconButton
                   as="a"
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,6 +71,5 @@ module.exports = { @@
           },
         ],
         "react/jsx-props-no-spreading": "off",
-        "react-hooks/exhaustive-deps": "warn",
       },
     };