fix(connector,console): should reset email sent count for new connector (#4148)

packages/connectors/connector-logto-email/src/index.ts

@@ -97,7 +97,7 @@ const getUsage =
       },
       timeout: { request: defaultTimeout },
       searchParams: {
-        startFrom: startFrom?.toISOString(),
+        from: startFrom?.toISOString(),
       },
     });
 

packages/console/src/components/ConnectorTester/index.tsx

@@ -22,13 +22,20 @@ type Props = {
   connectorType: Exclude<ConnectorType, ConnectorType.Social>;
   className?: string;
   parse: () => unknown;
+  updateUsage?: () => void;
 };
 
 type FormData = {
   sendTo: string;
 };
 
-function ConnectorTester({ connectorFactoryId, connectorType, className, parse }: Props) {
+function ConnectorTester({
+  connectorFactoryId,
+  connectorType,
+  className,
+  parse,
+  updateUsage,
+}: Props) {
   const [showTooltip, setShowTooltip] = useState(false);
   const {
     handleSubmit,
@@ -67,6 +74,7 @@ function ConnectorTester({ connectorFactoryId, connectorType, className, parse }
       };
 
       await api.post(`api/connectors/${connectorFactoryId}/test`, { json: data }).json();
+      updateUsage?.();
       setShowTooltip(true);
     })
   );

packages/console/src/pages/ConnectorDetails/ConnectorContent/index.tsx

@@ -2,7 +2,7 @@ import { ServiceConnector } from '@logto/connector-kit';
 import { ConnectorType } from '@logto/schemas';
 import type { ConnectorResponse } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -26,7 +26,7 @@ import EmailServiceConnectorForm from './EmailServiceConnectorForm';
 type Props = {
   isDeleted: boolean;
   connectorData: ConnectorResponse;
-  onConnectorUpdated: (connector: ConnectorResponse) => void;
+  onConnectorUpdated: (connector?: ConnectorResponse) => void;
 };
 
 function ConnectorContent({ isDeleted, connectorData, onConnectorUpdated }: Props) {
@@ -112,6 +112,13 @@ function ConnectorContent({ isDeleted, connectorData, onConnectorUpdated }: Prop
     })
   );
 
+  const updateUsage = useCallback(() => {
+    if (connectorData.usage === undefined) {
+      return;
+    }
+    onConnectorUpdated({ ...connectorData, usage: connectorData.usage + 1 });
+  }, [connectorData, onConnectorUpdated]);
+
   return (
     <FormProvider {...methods}>
       <DetailsForm
@@ -153,6 +160,7 @@ function ConnectorContent({ isDeleted, connectorData, onConnectorUpdated }: Prop
               connectorFactoryId={connectorId}
               connectorType={connectorType}
               parse={() => configParser(watch(), formItems)}
+              updateUsage={updateUsage}
             />
           </FormCard>
         )}

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -50,6 +50,10 @@ function ConnectorDetails() {
   const [isReadMeOpen, setIsReadMeOpen] = useState(false);
   const [isSetupOpen, setIsSetupOpen] = useState(false);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  /**
+   * TODO: Can add `keepPreviousData` option to useSWR to avoid the flash on `Skeleton`
+   * component when manually trigger `mutate` function. This change is available in `swr@v2.0` or above.
+   */
   const { data, error, mutate } = useSWR<ConnectorResponse, RequestError>(
     connectorId && `api/connectors/${connectorId}`
   );