Enforce IDs on i18n messages with eslint (#10279)

opencollective · Apr 11, 2024 · cef8d77 · cef8d77
1 parent 58a7d99
commit cef8d77
Show file tree

Hide file tree

Showing 359 changed files with 2,509 additions and 1,399 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -102,6 +102,13 @@ const baseConfig = {
     'formatjs/no-camel-case': ['off'],
     'formatjs/no-emoji': ['off'],
     'formatjs/no-multiple-plurals': ['off'],
+    'formatjs/enforce-id': [
+      'error',
+      {
+        idInterpolationPattern: '[sha512:contenthash:base64:6]',
+        idWhitelist: ['^.{1,}$'],
+      },
+    ],
     // styled-components-a11y
     'jsx-a11y/no-autofocus': ['off'],
     'jsx-a11y/label-has-associated-control': ['off'],

diff --git a/components/AccountHoverCard.tsx b/components/AccountHoverCard.tsx
@@ -136,6 +136,7 @@ const getInfoItems = (account): InfoItemProps[] => {
       info: (
         <FormattedMessage
           defaultMessage="{childAccountType, select, EVENT {Event} PROJECT {Project} other {Account}} by {parentAccount}"
+          id="bZC/zt"
           values={{
             childAccountType: account.type,
             parentAccount: <Link href={getCollectivePageRoute(account.parent)}>@{account.parent.slug}</Link>,
@@ -150,6 +151,7 @@ const getInfoItems = (account): InfoItemProps[] => {
         info: (
           <FormattedMessage
             defaultMessage="Hosted by {host} since {approvedAt}"
+            id="PAGBSx"
             values={{
               childAccountType: account.type,
               host: <Link href={getCollectivePageRoute(account.host)}>@{account.host.slug}</Link>,
@@ -163,6 +165,7 @@ const getInfoItems = (account): InfoItemProps[] => {
       info: (
         <FormattedMessage
           defaultMessage="Has <AgreementsLink>{hostAgreementsCount} host agreements</AgreementsLink>"
+          id="Zh9ojg"
           values={{
             hostAgreementsCount: account.hostAgreements?.totalCount,
             AgreementsLink: chunks => (
@@ -197,6 +200,7 @@ const getInfoItems = (account): InfoItemProps[] => {
       info: (
         <FormattedMessage
           defaultMessage="Total expense payouts {currentYear}: {totalPaidExpenses}"
+          id="wNU66x"
           values={{
             totalPaidExpenses: (
               <span className="text-foreground">
@@ -223,6 +227,7 @@ const getInfoItemsFromMembershipData = (data: UserContextualMembershipsQuery): I
       info: (
         <FormattedMessage
           defaultMessage="Admin of {account} since {date}"
+          id="M0vlyv"
           values={{
             account: <Link href={`/${membership.account.slug}`}>@{membership.account.slug}</Link>,
             date: <FormattedDate dateStyle="medium" value={membership.since} />,
@@ -235,6 +240,7 @@ const getInfoItemsFromMembershipData = (data: UserContextualMembershipsQuery): I
       info: (
         <FormattedMessage
           defaultMessage="Admin of {account} since {date}"
+          id="M0vlyv"
           values={{
             account: <Link href={`/${membership.account.slug}`}>@{membership.account.slug}</Link>,
             date: <FormattedDate dateStyle="medium" value={membership.since} />,

diff --git a/components/AccountingCategorySelect.tsx b/components/AccountingCategorySelect.tsx
@@ -129,7 +129,7 @@ const getCategoryLabel = (
   // Get category label
   let categoryStr;
   if (category === null) {
-    categoryStr = intl.formatMessage({ defaultMessage: "I don't know" });
+    categoryStr = intl.formatMessage({ defaultMessage: "I don't know", id: 'AkIyKO' });
   } else if (category) {
     categoryStr =
       category.friendlyName ||
@@ -200,7 +200,7 @@ const getOptions = (
     categoriesById[VALUE_NONE] = {
       value: null,
       label,
-      searchText: intl.formatMessage({ defaultMessage: "I don't know" }).toLocaleLowerCase(),
+      searchText: intl.formatMessage({ defaultMessage: "I don't know", id: 'AkIyKO' }).toLocaleLowerCase(),
     };
   }
 
@@ -339,7 +339,7 @@ const AccountingCategorySelect = ({
                 })}
               >
                 {getCategoryLabel(intl, selectedCategory, false, valuesByRole) ||
-                  intl.formatMessage({ defaultMessage: 'Select category' })}
+                  intl.formatMessage({ defaultMessage: 'Select category', id: 'RUJYth' })}
               </span>
               <ChevronDown size="1em" />
             </button>
@@ -351,7 +351,7 @@ const AccountingCategorySelect = ({
 
             <CommandList>
               <CommandEmpty>
-                <FormattedMessage defaultMessage="No category found" />
+                <FormattedMessage defaultMessage="No category found" id="bn5V11" />
               </CommandEmpty>
               <CommandGroup>
                 {Object.entries(options).map(([categoryId, { label }]) => {
@@ -383,7 +383,7 @@ const AccountingCategorySelect = ({
                             {isPrediction && (
                               <span
                                 className="text-right text-xs text-gray-500"
-                                title={intl.formatMessage({ defaultMessage: 'Suggested' })}
+                                title={intl.formatMessage({ defaultMessage: 'Suggested', id: 'a0lFbM' })}
                               >
                                 <Sparkles size={16} className="mr-1 inline-block text-yellow-500" strokeWidth={1.5} />
                               </span>
@@ -406,6 +406,7 @@ const AccountingCategorySelect = ({
               <Sparkles size={16} className=" mr-1 inline-block text-yellow-500" strokeWidth={1.5} />
               <FormattedMessage
                 defaultMessage="Suggested: {suggestions}"
+                id="XItXfz"
                 values={{
                   suggestions: predictions.slice(0, 3).map((prediction, index) => (
                     <React.Fragment key={prediction.code}>
@@ -415,7 +416,10 @@ const AccountingCategorySelect = ({
                         onKeyDown={e => e.key === 'Enter' && triggerChange(prediction)}
                         onClick={() => triggerChange(prediction)}
                         className="cursor-pointer text-[--primary-color-600] underline hover:opacity-80"
-                        aria-label={intl.formatMessage({ defaultMessage: 'Select {name}' }, { name: prediction.name })}
+                        aria-label={intl.formatMessage(
+                          { defaultMessage: 'Select {name}', id: 'G65XME' },
+                          { name: prediction.name },
+                        )}
                       >
                         {prediction.name}
                       </span>

diff --git a/components/AmountWithExchangeRateInfo.js b/components/AmountWithExchangeRateInfo.js
@@ -32,6 +32,7 @@ export const formatFxRateInfo = (intl, exchangeRate, { approximateCustomMessage,
     <Flex flexDirection="column" data-cy="exchange-rate-info">
       <FormattedMessage
         defaultMessage="Exchange rate: 1 {fromCurrency} = {rate} {toCurrency}"
+        id="PyjGft"
         values={{
           rate: round(value, 7) || <FormattedMessage id="exchangeRate.noneSet" defaultMessage="Not defined yet" />,
           fromCurrency,
@@ -42,6 +43,7 @@ export const formatFxRateInfo = (intl, exchangeRate, { approximateCustomMessage,
         <div>
           <FormattedMessage
             defaultMessage="Source: {source}"
+            id="/gUYR+"
             values={{
               source: I18N_FX_RATE_SOURCE_LABEL[source]
                 ? intl.formatMessage(I18N_FX_RATE_SOURCE_LABEL[source])
@@ -55,6 +57,7 @@ export const formatFxRateInfo = (intl, exchangeRate, { approximateCustomMessage,
         <div>
           <FormattedMessage
             defaultMessage="Acquired on: {date}"
+            id="dT6mUk"
             values={{ date: <DateTime value={date} timeStyle="short" /> }}
           />
         </div>
@@ -67,7 +70,7 @@ export const formatFxRateInfo = (intl, exchangeRate, { approximateCustomMessage,
             ⚠️
           </span>
           &nbsp;
-          {approximateCustomMessage || <FormattedMessage defaultMessage="This value is an estimate" />}
+          {approximateCustomMessage || <FormattedMessage defaultMessage="This value is an estimate" id="lpal5V" />}
         </div>
       )}
     </Flex>

diff --git a/components/ApplyToHostModal.js b/components/ApplyToHostModal.js
@@ -170,7 +170,7 @@ const applyToHostMutation = gql`
 const GQL_CONTEXT = { context: API_V2_CONTEXT };
 const INITIAL_FORM_VALUES = { message: '', areTosChecked: false, collective: null, inviteMembers: [] };
 const STEPS = {
-  INFORMATION: { name: 'Information', label: <FormattedMessage defaultMessage="Information" /> },
+  INFORMATION: { name: 'Information', label: <FormattedMessage defaultMessage="Information" id="E80WrK" /> },
   APPLY: { name: 'Apply', label: <FormattedMessage id="Apply" defaultMessage="Apply" /> },
 };
 
@@ -467,7 +467,7 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
                               <React.Fragment>
                                 <Box>
                                   <P fontSize="13px" lineHeight="16px" fontWeight="600" color="black.700">
-                                    <FormattedMessage defaultMessage="Minimum Administrators Required" />
+                                    <FormattedMessage defaultMessage="Minimum Administrators Required" id="ceGKEG" />
                                   </P>
                                   <Flex mt={1} width="100%">
                                     <P
@@ -559,6 +559,7 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
                                     <MessageBox type="info" mt={3} fontSize="13px">
                                       <FormattedMessage
                                         defaultMessage="Your selected Fiscal Host requires you to add a minimum of {numberOfAdmins, plural, one {# admin} other {# admins} }. You can manage your admins from the Collective Settings."
+                                        id="GTK0Wf"
                                         values={host.policies.COLLECTIVE_MINIMUM_ADMINS}
                                       />
                                     </MessageBox>

diff --git a/components/AutoCollapse.tsx b/components/AutoCollapse.tsx
@@ -78,7 +78,7 @@ export const AutoCollapse = ({ children, maxCollapsedHeight }: AutoCollapseProps
             </React.Fragment>
           ) : (
             <React.Fragment>
-              <FormattedMessage defaultMessage="Collapse" />
+              <FormattedMessage defaultMessage="Collapse" id="W/V6+Y" />
               <CaretUp size="10px" />
             </React.Fragment>
           )}

diff --git a/components/CollectiveCard.js b/components/CollectiveCard.js
@@ -261,7 +261,7 @@ class CollectiveCard extends React.Component {
                     />
                   </ValueWrapper>
                   <LabelWrapper>
-                    <FormattedMessage id="collective.card.stats.yearlyBudget" defaultMessage={'yearly budget'} />
+                    <FormattedMessage id="collective.card.stats.yearlyBudget" defaultMessage="yearly budget" />
                   </LabelWrapper>
                 </div>
               </StatsWrapper>
@@ -338,7 +338,7 @@ class CollectiveCard extends React.Component {
                   >
                     <FormattedMessage
                       id="membership.since"
-                      defaultMessage={'since {date}'}
+                      defaultMessage="since {date}"
                       values={{
                         date: <FormattedDate value={oldestMembershipDate} month="long" year="numeric" />,
                       }}
@@ -358,7 +358,7 @@ class CollectiveCard extends React.Component {
                         currency={get(membership, 'collective.currency')}
                       />
                     </Container>
-                    <FormattedMessage id="membership.totalDonations.title" defaultMessage={'Amount contributed'} />
+                    <FormattedMessage id="membership.totalDonations.title" defaultMessage="Amount contributed" />
                   </MembershipWrapper>
                 ),
             )}

diff --git a/components/CollectiveContactForm.js b/components/CollectiveContactForm.js
@@ -111,7 +111,7 @@ const CollectiveContactForm = ({ collective, isModal = false, onClose, onChange
       </StyledInputField>
       {error && <MessageBoxGraphqlError error={error} mt={3} />}
       <p className="mt-2 text-sm">
-        <FormattedMessage defaultMessage="Message needs to be at least 10 characters long" />
+        <FormattedMessage defaultMessage="Message needs to be at least 10 characters long" id="322m9e" />
       </p>
       {isModal && <hr className="my-5" />}
       <Box textAlign={isModal ? 'right' : ''}>
@@ -144,7 +144,7 @@ const CollectiveContactForm = ({ collective, isModal = false, onClose, onChange
             }
           }}
         >
-          <FormattedMessage defaultMessage="Contact Collective" />
+          <FormattedMessage defaultMessage="Contact Collective" id="FAYdqn" />
         </StyledButton>
       </Box>
     </Box>

diff --git a/components/CollectivePickerAsync.js b/components/CollectivePickerAsync.js
@@ -85,6 +85,7 @@ const Messages = defineMessages({
   },
   searchForUsers: {
     defaultMessage: 'Search for Users by name or email',
+    id: 'xLF0/9',
   },
 });
 

diff --git a/components/CollectiveTagsInput.tsx b/components/CollectiveTagsInput.tsx
@@ -247,7 +247,7 @@ function CollectiveTagsInput({ defaultValue = [], onChange, suggestedTags = [] }
         <Flex mt={2} gap={'6px'} flexWrap="wrap" alignItems={'center'}>
           {suggestedTags && (
             <Span color="black.600" mr={1} fontSize="12px">
-              <FormattedMessage defaultMessage="Popular tags:" />
+              <FormattedMessage defaultMessage="Popular tags:" id="W4zXqr" />
             </Span>
           )}
 

diff --git a/components/CollectiveTypePicker.js b/components/CollectiveTypePicker.js
@@ -17,7 +17,7 @@ const getTypeCaption = type => {
   } else if (type === CollectiveType.COLLECTIVE) {
     return <FormattedMessage id="collective.create" defaultMessage="Create Collective" />;
   } else if (type === CollectiveType.VENDOR) {
-    return <FormattedMessage defaultMessage="Create Vendor" />;
+    return <FormattedMessage defaultMessage="Create Vendor" id="I5p2+k" />;
   } else {
     return null;
   }