Fix api key empty state (#39302)

frontend/src/metabase/admin/settings/components/ApiKeys/ManageApiKeys.tsx

 import { useEffect, useState } from "react";
 import { useAsyncFn } from "react-use";
-import { jt, t } from "ttag";
+import { t } from "ttag";
 
 const { fontFamilyMonospace } = getThemeOverrides();
 
@@ -24,18 +24,12 @@ function EmptyTableWarning({ onCreate }: { onCreate: () => void }) {
   return (
     <Stack mt="xl" align="center" justify="center" spacing="sm">
       <Title>{t`No API keys here yet`}</Title>
-      <Text color="text-medium">{t`You can create an API key to make API calls programatically.`}</Text>
-      <Text color="text.1">{jt`You can ${(
-        <Button
-          key="create-key-button"
-          variant="subtle"
-          onClick={onCreate}
-          p="0"
-          m="0"
-        >
-          {t`create an api key`}
-        </Button>
-      )} to make API calls programatically.`}</Text>
+      <Text color="text.1" mb="md">
+        {t`You can create an API key to make API calls programatically.`}
+      </Text>
+      <Button key="create-key-button" variant="filled" onClick={onCreate}>
+        {t`Create API Key`}
+      </Button>
     </Stack>
   );
 }

frontend/src/metabase/admin/settings/components/ApiKeys/ManageApiKeys.unit.spec.tsx

@@ -7,6 +7,7 @@ import {
 } from "__support__/server-mocks";
 import { renderWithProviders, screen, waitFor, within } from "__support__/ui";
 import { ManageApiKeys } from "metabase/admin/settings/components/ApiKeys/ManageApiKeys";
+import type { ApiKey } from "metabase-types/api";
 import { createMockGroup } from "metabase-types/api/mocks";
 
 const GROUPS = [
@@ -17,42 +18,46 @@ const GROUPS = [
   createMockGroup({ id: 5, name: "flamingos" }),
 ];
 
-async function setup() {
-  setupGroupsEndpoint(GROUPS);
-  setupApiKeyEndpoints([
-    {
-      name: "Development API Key",
+const testApiKeys: ApiKey[] = [
+  {
+    name: "Development API Key",
+    id: 1,
+    group: {
       id: 1,
-      group: {
-        id: 1,
-        name: "All Users",
-      },
-      creator_id: 1,
-      masked_key: "asdfasdfa",
-      created_at: "2010-08-10",
-      updated_at: "2010-08-10",
-      updated_by: {
-        common_name: "John Doe",
-        id: 10,
-      },
+      name: "All Users",
+    },
+    creator_id: 1,
+    masked_key: "asdfasdfa",
+    created_at: "2010-08-10",
+    updated_at: "2010-08-10",
+    updated_by: {
+      common_name: "John Doe",
+      id: 10,
     },
-    {
-      name: "Production API Key",
+  },
+  {
+    name: "Production API Key",
+    id: 2,
+    group: {
       id: 2,
-      group: {
-        id: 2,
-        name: "Administrators",
-      },
-      creator_id: 1,
-      masked_key: "asdfasdfa",
-      created_at: "2010-08-10",
-      updated_at: "2010-08-10",
-      updated_by: {
-        common_name: "Jane Doe",
-        id: 10,
-      },
+      name: "Administrators",
+    },
+    creator_id: 1,
+    masked_key: "asdfasdfa",
+    created_at: "2010-08-10",
+    updated_at: "2010-08-10",
+    updated_by: {
+      common_name: "Jane Doe",
+      id: 10,
     },
-  ]);
+  },
+];
+
+async function setup(
+  { apiKeys }: { apiKeys?: ApiKey[] } = { apiKeys: undefined },
+) {
+  setupGroupsEndpoint(GROUPS);
+  setupApiKeyEndpoints(apiKeys ?? testApiKeys);
   renderWithProviders(<ManageApiKeys />);
   await waitFor(() => {
     expect(
@@ -65,6 +70,17 @@ describe("ManageApiKeys", () => {
     await setup();
     expect(screen.getByText("Manage API Keys")).toBeInTheDocument();
   });
+  it("should render component empty state", async () => {
+    await setup({ apiKeys: [] });
+    expect(screen.getByText("Manage API Keys")).toBeInTheDocument();
+    expect(screen.getByText("No API keys here yet")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "You can create an API key to make API calls programatically.",
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getAllByText("Create API Key")).toHaveLength(2);
+  });
   it("should load API keys from api", async () => {
     await setup();
     expect(await screen.findByText("Development API Key")).toBeInTheDocument();