clean tts cache for account (#264)

src/api/index.ts

@@ -582,6 +582,10 @@ export const deleteTtsCache = () => {
   return deleteFetch<EmptyResponse>(API_TTS_CACHE);
 };
 
+export const deleteAccountTtsCache = (sid: string) => {
+  return deleteFetch<EmptyResponse>(`${API_BASE_URL}/Accounts/${sid}/TtsCache`);
+};
+
 /** Named wrappers for `getFetch` */
 
 export const getUser = (sid: string) => {

src/containers/internal/views/accounts/edit.tsx

@@ -7,7 +7,7 @@ import { useApiData } from "src/api";
 import { toastError, useSelectState } from "src/store";
 import { AccountForm } from "./form";
 
-import type { Account, Application, Limit } from "src/api/types";
+import type { Account, Application, Limit, TtsCache } from "src/api/types";
 import {
   ROUTE_INTERNAL_ACCOUNTS,
   ROUTE_INTERNAL_APPLICATIONS,
@@ -25,6 +25,9 @@ export const EditAccount = () => {
     `Accounts/${params.account_sid}/Limits`
   );
   const [apps] = useApiData<Application[]>("Applications");
+  const [ttsCache, ttsCacheFetcher] = useApiData<TtsCache>(
+    `Accounts/${params.account_sid}/TtsCache`
+  );
 
   useScopedRedirect(
     Scope.account,
@@ -50,6 +53,7 @@ export const EditAccount = () => {
         apps={apps}
         account={{ data, refetch, error }}
         limits={{ data: limitsData, refetch: refetchLimits }}
+        ttsCache={{ data: ttsCache, refetch: ttsCacheFetcher }}
       />
       <ApiKeys
         path={`Accounts/${params.account_sid}/ApiKeys`}

src/containers/internal/views/accounts/form.tsx

@@ -10,6 +10,7 @@ import {
   useApiData,
   postAccountLimit,
   deleteAccountLimit,
+  deleteAccountTtsCache,
 } from "src/api";
 import { ClipBoard, Icons, Modal, Section, Tooltip } from "src/components";
 import {
@@ -35,6 +36,7 @@ import type {
   WebhookMethod,
   UseApiDataMap,
   Limit,
+  TtsCache,
 } from "src/api/types";
 import { hasLength } from "src/utils";
 
@@ -42,9 +44,15 @@ type AccountFormProps = {
   apps?: Application[];
   limits?: UseApiDataMap<Limit[]>;
   account?: UseApiDataMap<Account>;
+  ttsCache?: UseApiDataMap<TtsCache>;
 };
 
-export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {
+export const AccountForm = ({
+  apps,
+  limits,
+  account,
+  ttsCache,
+}: AccountFormProps) => {
   const navigate = useNavigate();
   const user = useSelectState("user");
   const currentServiceProvider = useSelectState("currentServiceProvider");
@@ -60,6 +68,7 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {
   const [initialRegHook, setInitialRegHook] = useState(false);
   const [initialQueueHook, setInitialQueueHook] = useState(false);
   const [localLimits, setLocalLimits] = useState<Limit[]>([]);
+  const [clearTtsCacheFlag, setClearTtsCacheFlag] = useState(false);
 
   /** This lets us map and render the same UI for each... */
   const webhooks = [
@@ -139,6 +148,20 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {
     }
   };
 
+  const handleClearCache = () => {
+    deleteAccountTtsCache(account?.data?.account_sid || "")
+      .then(() => {
+        if (ttsCache) {
+          ttsCache.refetch();
+        }
+        setClearTtsCacheFlag(false);
+        toastSuccess("Tts Cache successfully cleaned");
+      })
+      .catch((error) => {
+        toastError(error.msg);
+      });
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -446,6 +469,25 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {
               </fieldset>
             );
           })}
+          {ttsCache && (
+            <fieldset>
+              <ButtonGroup left>
+                <Button
+                  onClick={(e: React.FormEvent) => {
+                    e.preventDefault();
+                    setClearTtsCacheFlag(true);
+                  }}
+                  small
+                  disabled={ttsCache.data?.size === 0}
+                >
+                  Clear TTS Cache
+                </Button>
+              </ButtonGroup>
+              <MS>{`There are ${
+                ttsCache.data ? ttsCache.data.size : 0
+              } cached TTS prompts`}</MS>
+            </fieldset>
+          )}
           {message && (
             <fieldset>
               <Message message={message} />
@@ -476,6 +518,14 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {
           </P>
         </Modal>
       )}
+      {clearTtsCacheFlag && (
+        <Modal
+          handleSubmit={handleClearCache}
+          handleCancel={() => setClearTtsCacheFlag(false)}
+        >
+          <P>Are you sure you want to clean TTS cache for this account?</P>
+        </Modal>
+      )}
     </>
   );
 };