Add missing key prop to components and elements used inside jt (#48825)

enterprise/frontend/src/metabase-enterprise/auth/components/SettingsSAMLForm/SettingsSAMLForm.jsx

@@ -94,7 +94,10 @@ const SettingsSAMLForm = ({ elements = [], settingValues = {}, onSubmit }) => {
           <h2 className={CS.mb2}>{t`Set up SAML-based SSO`}</h2>
           <SAMLFormCaption>
             {jt`Use the settings below to configure your SSO via SAML. If you have any questions, check out our ${(
-              <ExternalLink href={docsUrl}>{t`documentation`}</ExternalLink>
+              <ExternalLink
+                key="link"
+                href={docsUrl}
+              >{t`documentation`}</ExternalLink>
             )}.`}
           </SAMLFormCaption>
           <Stack spacing="0.75rem" m="2.5rem 0">

enterprise/frontend/src/metabase-enterprise/troubleshooting/components/QueryValidator.tsx

@@ -188,6 +188,7 @@ export const QueryValidator = () => {
       <Text fz="1rem" color="var(--mb-color-text-light)">
         {jt`Query Validation is currently disabled. ${(
           <Text
+            key="text"
             fz="inherit"
             color="var(--mb-color-brand)"
             component={Link}

frontend/src/metabase/admin/databases/components/DeleteDatabaseModel/DeleteDatabaseModal.tsx

@@ -111,6 +111,7 @@ const DeleteDatabaseModal = ({
               <Alert icon="info">
                 {jt`If you’re trying to migrate from a development DB to a production one, you don’t need to do this. You can just ${(
                   <Button
+                    key="button"
                     onlyText
                     onClick={handleEditConnectionDetailsClick}
                   >{t`edit your connection details.`}</Button>
@@ -146,7 +147,7 @@ const DeleteDatabaseModal = ({
           >
             <p>
               {jt`If you’re sure, please type ${(
-                <strong>{database.name}</strong>
+                <strong key="name">{database.name}</strong>
               )} in this box:`}
             </p>
             <DatabaseNameInputContainer>

frontend/src/metabase/admin/people/components/GroupsListing.jsx

@@ -87,6 +87,7 @@ function DeleteGroupModal({
           {hasApiKeys
             ? jt`All members of this group will lose any permissions settings they have based on this group, and its related API keys will be deleted. You can ${(
                 <Link
+                  key="link"
                   to="/admin/settings/authentication/api-keys"
                   variant="brand"
                 >{t`move the API keys to another group`}</Link>

frontend/src/metabase/admin/people/containers/UserSuccessModal.jsx

@@ -53,9 +53,10 @@ const EmailSuccess = ({ user, isSsoEnabled }) => {
   if (isSsoEnabled) {
     return (
       <div>{jt`We’ve sent an invite to ${(
-        <strong>{user.email}</strong>
+        <strong key="email">{user.email}</strong>
       )} with instructions to log in. If this user is unable to authenticate then you can ${(
         <Link
+          key="link"
           to={`/admin/people/${user.id}/reset`}
           className={CS.link}
         >{t`reset their password.`}</Link>
@@ -64,7 +65,7 @@ const EmailSuccess = ({ user, isSsoEnabled }) => {
   }
   return (
     <div>{jt`We’ve sent an invite to ${(
-      <strong>{user.email}</strong>
+      <strong key="email">{user.email}</strong>
     )} with instructions to set their password.`}</div>
   );
 };
@@ -73,7 +74,7 @@ const PasswordSuccess = ({ user, temporaryPassword }) => (
   <div>
     <PasswordSuccessMessage>
       {jt`We couldn’t send them an email invitation, so make sure to tell them to log in using ${(
-        <strong>{user.email}</strong>
+        <strong key="email">{user.email}</strong>
       )} and this password we’ve generated for them:`}
     </PasswordSuccessMessage>
 
@@ -83,7 +84,11 @@ const PasswordSuccess = ({ user, temporaryPassword }) => (
       className={cx(CS.pt4, CS.textCentered)}
     >
       {jt`If you want to be able to send email invites, just go to the ${(
-        <Link to="/admin/settings/email" className={cx(CS.link, CS.textBold)}>
+        <Link
+          key="link"
+          to="/admin/settings/email"
+          className={cx(CS.link, CS.textBold)}
+        >
           Email Settings
         </Link>
       )} page.`}

frontend/src/metabase/admin/permissions/components/ApplicationPermissionsHelp/ApplicationPermissionsHelp.tsx

@@ -17,24 +17,24 @@ export const ApplicationPermissionsHelp = () => {
         <Text>{t`Application settings are useful for granting groups access to some, but not all, of Metabase’s administrative features.`}</Text>
         <Text>
           {jt`${(
-            <strong>{t`Settings:`}</strong>
+            <strong key="label">{t`Settings:`}</strong>
           )} the group can access the Settings tab in the Admin panel.`}
         </Text>
         <Text>
           {jt`${(
-            <strong>{t`Monitoring:`}</strong>
+            <strong key="label">{t`Monitoring:`}</strong>
           )} monitoring access grants permissions to the Tools, Auditing, and Troubleshooting tabs in the Admin panel.`}
         </Text>
         <Text>
           {jt`${(
-            <strong>{t`Subscriptions and alerts:`}</strong>
+            <strong key="label">{t`Subscriptions and alerts:`}</strong>
           )} the group can create dashboard subscriptions and alerts.`}
         </Text>
       </Stack>
 
       <Text component="footer" align="center" py="1rem" weight={600}>
         {jt`${(
-          <ExternalLink href={url}>{t`Learn more`}</ExternalLink>
+          <ExternalLink key="link" href={url}>{t`Learn more`}</ExternalLink>
         )} about application permissions`}
       </Text>
     </Flex>

frontend/src/metabase/admin/permissions/components/CollectionPermissionsHelp/CollectionPermissionsHelp.tsx

@@ -40,7 +40,7 @@ export const CollectionPermissionsHelp = () => {
 
       <Text component="footer" align="center" py={24} weight={600}>
         {jt`${(
-          <ExternalLink href={url}>{t`Learn more`}</ExternalLink>
+          <ExternalLink key="link" href={url}>{t`Learn more`}</ExternalLink>
         )} about collection permissions`}
       </Text>
     </Flex>

frontend/src/metabase/admin/permissions/components/DataPermissionsHelp/DataPermissionsHelp.tsx

@@ -199,21 +199,21 @@ export const DataPermissionsHelp = () => {
             <Stack spacing="1rem" py="1rem">
               <Text>
                 {jt`${(
-                  <strong>{t`Download results (Pro):`}</strong>
+                  <strong key="permission">{t`Download results (Pro):`}</strong>
                 )} The group can download results, up to a maximum number of rows that you set.`}{" "}
                 {!isAdvancedPermissionsFeatureEnabled &&
                   getLimitedPermissionAvailabilityMessage()}
               </Text>
               <Text>
                 {jt`${(
-                  <strong>{t`Manage Data Model (Pro):`}</strong>
+                  <strong key="permission">{t`Manage Data Model (Pro):`}</strong>
                 )} The group can edit metadata via the “Table metadata” tab in the Admin settings.`}{" "}
                 {!isAdvancedPermissionsFeatureEnabled &&
                   getLimitedPermissionAvailabilityMessage()}
               </Text>
               <Text>
                 {jt`${(
-                  <strong>{t`Manage Database (Pro):`}</strong>
+                  <strong key="permission">{t`Manage Database (Pro):`}</strong>
                 )} The group can edit database settings for a given database in the “Database” tab of the Admin settings.`}{" "}
                 {!isAdvancedPermissionsFeatureEnabled &&
                   getLimitedPermissionAvailabilityMessage()}

frontend/src/metabase/admin/permissions/components/LegacyPermissionsModal/LegacyPermissionsModal.tsx

@@ -38,9 +38,19 @@ export const LegacyPermissionsModal = ({
         <Modal.Body p="2.5rem">
           <Text mb="1rem">
             {jt`In Metabase 50, we split our data permissions into two new settings: ${(
-              <Text span color="brand" fw="bold">{t`View data`}</Text>
+              <Text
+                key="view-data"
+                span
+                color="brand"
+                fw="bold"
+              >{t`View data`}</Text>
             )} and ${(
-              <Text span color="brand" fw="bold">{t`Create queries`}</Text>
+              <Text
+                key="create-queries"
+                span
+                color="brand"
+                fw="bold"
+              >{t`Create queries`}</Text>
             )}. Having separate settings for what people can view and what they can query makes data permissions more expressive and easier to reason about.`}
           </Text>
           <Text mb="1.5rem">

frontend/src/metabase/admin/permissions/components/PermissionsConfirm.jsx

@@ -73,27 +73,27 @@ const PermissionsConfirm = ({ diff }) => (
             <div>
               {database.native === DataPermissionValue.QUERY_BUILDER &&
                 jt`${(
-                  <GroupName group={group} />
+                  <GroupName key="group-name" group={group} />
                 )} will only be able to use the query
-                  builder for ${(<DatabaseName database={database} />)}.`}
+                  builder for ${(<DatabaseName key="database-name" database={database} />)}.`}
               {database.native ===
                 DataPermissionValue.QUERY_BUILDER_AND_NATIVE &&
                 jt`${(
-                  <GroupName group={group} />
+                  <GroupName key="group-name" group={group} />
                 )} will be able to use the query builder and write native queries for ${(
-                  <DatabaseName database={database} />
+                  <DatabaseName key="database-name" database={database} />
                 )}.`}
               {database.native === DataPermissionValue.NO &&
                 jt`${(
-                  <GroupName group={group} />
+                  <GroupName key="group-name" group={group} />
                 )} will not be able to use the query builder or write native queries for ${(
-                  <DatabaseName database={database} />
+                  <DatabaseName key="database-name" database={database} />
                 )}.`}
               {database.native === DataPermissionValue.CONTROLLED &&
                 jt`${(
-                  <GroupName group={group} />
+                  <GroupName key="group-name" group={group} />
                 )} will have granular query creation permissions for ${(
-                  <DatabaseName database={database} />
+                  <DatabaseName key="database-name" database={database} />
                 )}.`}
             </div>
           )}

frontend/src/metabase/admin/settings/notifications/WebhookForm.tsx

@@ -210,7 +210,7 @@ export const WebhookForm = ({
             radius="0.5rem"
           >
             <Text>{jt`You can send the payload of any Alert to this destination whenever the Alert is triggered. ${(
-              <ExternalLink href={docsUrl}>
+              <ExternalLink key="link" href={docsUrl}>
                 {t`Learn about Alerts`}
               </ExternalLink>
             )}`}</Text>

frontend/src/metabase/admin/settings/slack/components/SlackStatus/SlackStatus.tsx

@@ -55,7 +55,10 @@ const SlackStatus = ({
             {!isValid && (
               <StatusMessageText>
                 {jt`Need help? ${(
-                  <ExternalLink href={docsUrl}>{t`See our docs`}</ExternalLink>
+                  <ExternalLink
+                    key="link"
+                    href={docsUrl}
+                  >{t`See our docs`}</ExternalLink>
                 )}.`}
               </StatusMessageText>
             )}

frontend/src/metabase/admin/upsells/UpsellCacheConfig.tsx

@@ -22,7 +22,7 @@ export const UpsellCacheConfig = ({ source }: { source: string }) => {
         source={source}
       >
         {jt`Get granular caching controls for each database, dashboard, and query with ${(
-          <strong>{t`Metabase Pro.`}</strong>
+          <strong key="label">{t`Metabase Pro.`}</strong>
         )}`}
       </UpsellCard>
     </Box>

frontend/src/metabase/containers/Unsubscribe.tsx

@@ -99,7 +99,9 @@ function SuccessfulUnsubscribe({
   return (
     <SuccessfulRequestWrapper
       text={jt`You've unsubscribed ${(
-        <ExternalLink href={`mailto:${email}`}>{email}</ExternalLink>
+        <ExternalLink key="link" href={`mailto:${email}`}>
+          {email}
+        </ExternalLink>
       )} from the "${alertTitle}" alert.`}
       buttonText={t`Undo`}
       action={action}
@@ -115,7 +117,9 @@ function SuccessfulResubscribe({
   return (
     <SuccessfulRequestWrapper
       text={jt`Okay, ${(
-        <ExternalLink href={`mailto:${email}`}>{email}</ExternalLink>
+        <ExternalLink key="link" href={`mailto:${email}`}>
+          {email}
+        </ExternalLink>
       )} is subscribed to the "${alertTitle}" alert again.`}
       buttonText={t`Unsubscribe`}
       action={action}

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/ClickBehaviorSidebarHeader/ClickBehaviorSidebarHeader.tsx

@@ -16,7 +16,7 @@ import {
 function DefaultHeader({ children }: { children: React.ReactNode }) {
   return (
     <Heading>{jt`Click behavior for ${(
-      <ItemName>{children}</ItemName>
+      <ItemName key="name">{children}</ItemName>
     )}`}</Heading>
   );
 }

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/TableClickBehaviorView/Column.tsx

@@ -32,14 +32,14 @@ const getLinkTargetName = (clickBehavior: CustomDestinationClickBehavior) => {
   }
   if (clickBehavior.linkType === "question") {
     return (
-      <Quoted>
+      <Quoted key="link-question">
         <Questions.Name id={targetId} />
       </Quoted>
     );
   }
   if (clickBehavior.linkType === "dashboard") {
     return (
-      <Quoted>
+      <Quoted key="link-dashboard">
         <Dashboards.Name id={targetId} />
       </Quoted>
     );

frontend/src/metabase/dashboard/components/DashboardMoveModal.tsx

@@ -65,6 +65,7 @@ const DashboardMoveToast = ({
     {c("{0} is a location where the dashboard was moved to")
       .jt`Dashboard moved to ${(
       <Collection.Link
+        key="link"
         id={collectionId}
         style={{ marginInlineStart: ".25em" }}
         color={color("brand")}

frontend/src/metabase/databases/components/DatabaseAuthCodeDescription/DatabaseAuthCodeDescription.tsx

@@ -28,7 +28,10 @@ const DatabaseAuthCodeDescription = (): JSX.Element | null => {
   return (
     <span>
       {jt`${(
-        <ExternalLink href={authCodeUrl.href}>{t`Click here`}</ExternalLink>
+        <ExternalLink
+          key="link"
+          href={authCodeUrl.href}
+        >{t`Click here`}</ExternalLink>
       )} to get an auth code.`}
       {engine === "bigquery" && (
         <span>

frontend/src/metabase/databases/components/DatabaseClientIdDescription/DatabaseClientIdDescription.tsx

@@ -25,7 +25,7 @@ const DatabaseClientIdDescription = (): JSX.Element | null => {
   return (
     <span>
       {jt`${(
-        <ExternalLink className={CS.link} href={projectUrl.href}>
+        <ExternalLink key="link" className={CS.link} href={projectUrl.href}>
           {t`Click here`}
         </ExternalLink>
       )} to generate a Client ID and Client Secret for your project.`}{" "}

frontend/src/metabase/databases/components/DatabaseSslKeyDescription/DatabaseSslKeyDescription.tsx

@@ -22,7 +22,7 @@ const DatabaseSslKeyDescription = (): JSX.Element | null => {
   return (
     <>
       {jt`If you have a PEM SSL client key, you can convert that key to the PKCS-8/DER format using OpenSSL. ${(
-        <ExternalLink href={docsUrl}>{t`Learn more`}</ExternalLink>
+        <ExternalLink key="link" href={docsUrl}>{t`Learn more`}</ExternalLink>
       )}.`}
     </>
   );