feat: Add ESLint rule to enforce sentence case in button text (#34434)

Co-authored-by: Claude <[email protected]>

Author: sadpandajoe

superset-frontend/.eslintrc.js

@@ -403,6 +403,7 @@ module.exports = {
     'theme-colors/no-literal-colors': 'error',
     'icons/no-fa-icons-usage': 'error',
     'i18n-strings/no-template-vars': ['error', true],
+    'i18n-strings/sentence-case-buttons': 'error',
     camelcase: [
       'error',
       {

superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts

@@ -22,7 +22,6 @@ import {
   dataTestChartName,
 } from 'cypress/support/directories';
 
-import { waitForChartLoad } from 'cypress/utils';
 import {
   addParentFilterWithValue,
   applyNativeFilterValueWithIndex,
@@ -344,7 +343,7 @@ describe('Native filters', () => {
     it('User can delete a native filter', () => {
       enterNativeFilterEditModal(false);
       cy.get(nativeFilters.filtersList.removeIcon).first().click();
-      cy.contains('Restore Filter').should('not.exist', { timeout: 10000 });
+      cy.contains('Restore filter').should('not.exist', { timeout: 10000 });
     });
 
     it('User can cancel creating a new filter', () => {

superset-frontend/eslint-rules/eslint-plugin-i18n-strings/index.js

@@ -41,7 +41,7 @@ module.exports = {
               context.report({
                 node,
                 message:
-                  "Don't use variables in translation string templates. Flask-babel is a static translation service, so it can’t handle strings that include variables",
+                  "Don't use variables in translation string templates. Flask-babel is a static translation service, so it can't handle strings that include variables",
               });
             }
           }
@@ -52,5 +52,67 @@ module.exports = {
         };
       },
     },
+    'sentence-case-buttons': {
+      create(context) {
+        function isTitleCase(str) {
+          // Match "Delete Dataset", "Create Chart", etc. (2+ title-cased words)
+          return /^[A-Z][a-z]+(\s+[A-Z][a-z]*)+$/.test(str);
+        }
+
+        function isButtonContext(node) {
+          const { parent } = node;
+          if (!parent) return false;
+
+          // Check for button-specific props
+          if (parent.type === 'Property') {
+            const key = parent.key.name;
+            return [
+              'primaryButtonName',
+              'secondaryButtonName',
+              'confirmButtonText',
+              'cancelButtonText',
+            ].includes(key);
+          }
+
+          // Check for Button components
+          if (parent.type === 'JSXExpressionContainer') {
+            const jsx = parent.parent;
+            if (jsx?.type === 'JSXElement') {
+              const elementName = jsx.openingElement.name.name;
+              return elementName === 'Button';
+            }
+          }
+
+          return false;
+        }
+
+        function handler(node) {
+          if (node.arguments.length) {
+            const firstArg = node.arguments[0];
+            if (
+              firstArg.type === 'Literal' &&
+              typeof firstArg.value === 'string'
+            ) {
+              const text = firstArg.value;
+
+              if (isButtonContext(node) && isTitleCase(text)) {
+                const sentenceCase = text
+                  .toLowerCase()
+                  .replace(/^\w/, c => c.toUpperCase());
+                context.report({
+                  node: firstArg,
+                  message: `Button text should use sentence case: "${text}" should be "${sentenceCase}"`,
+                });
+              }
+            }
+          }
+        }
+
+        return {
+          "CallExpression[callee.name='t']": handler,
+          "CallExpression[callee.name='tn']": handler,
+        };
+      },
+    },
   },
 };

superset-frontend/src/SqlLab/components/ExploreResultsButton/ExploreResultsButton.test.tsx

@@ -36,17 +36,17 @@ describe('ExploreResultsButton', () => {
     const { queryByText } = setup(jest.fn(), {
       database: { allows_subquery: true },
     });
-    expect(queryByText('Create Chart')).toBeInTheDocument();
+    expect(queryByText('Create chart')).toBeInTheDocument();
     // Updated line to match the actual button name that includes the icon
-    expect(screen.getByRole('button', { name: /Create Chart/i })).toBeEnabled();
+    expect(screen.getByRole('button', { name: /Create chart/i })).toBeEnabled();
   });
 
   it('renders disabled if subquery not allowed', async () => {
     const { queryByText } = setup(jest.fn());
-    expect(queryByText('Create Chart')).toBeInTheDocument();
+    expect(queryByText('Create chart')).toBeInTheDocument();
     // Updated line to match the actual button name that includes the icon
     expect(
-      screen.getByRole('button', { name: /Create Chart/i }),
+      screen.getByRole('button', { name: /Create chart/i }),
     ).toBeDisabled();
   });
 });

superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx

@@ -46,7 +46,7 @@ const ExploreResultsButton = ({
       tooltip={t('Explore the result set in the data exploration view')}
       data-test="explore-results-button"
     >
-      {t('Create Chart')}
+      {t('Create chart')}
     </Button>
   );
 };

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx

@@ -43,7 +43,7 @@ const RemovedFilter: FC<RemovedFilterProps> = ({ onClick }) => (
         buttonStyle="primary"
         onClick={onClick}
       >
-        {t('Restore Filter')}
+        {t('Restore filter')}
       </Button>
     </div>
   </RemovedContent>

superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx

@@ -849,7 +849,7 @@ class AnnotationLayer extends PureComponent {
               buttonSize="xsmall"
               onClick={() => this.setState({ color: AUTOMATIC_COLOR })}
             >
-              {t('Automatic Color')}
+              {t('Automatic color')}
             </Button>
           </div>
         </div>

superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx

@@ -220,7 +220,7 @@ test('keeps apply disabled when missing required fields', async () => {
   expect(await screen.findByText('Chart A')).toBeInTheDocument();
   userEvent.click(screen.getByText('Chart A'));
   await screen.findByText(/title column/i);
-  userEvent.click(screen.getByRole('button', { name: 'Automatic Color' }));
+  userEvent.click(screen.getByRole('button', { name: 'Automatic color' }));
   userEvent.click(
     screen.getByRole('combobox', { name: 'Annotation layer title column' }),
   );

superset/translations/ar/LC_MESSAGES/messages.po

@@ -816,11 +816,11 @@ msgid "Add Dashboard"
 msgstr "إضافة لوحة معلومات"
 
 #, fuzzy
-msgid "Add Divider"
+msgid "Add divider"
 msgstr "مقسم"
 
 #, fuzzy
-msgid "Add Filter"
+msgid "Add filter"
 msgstr "إضافة فلتر"
 
 #, fuzzy
@@ -1804,7 +1804,7 @@ msgstr "فلاتر الإكمال التلقائي"
 msgid "Autocomplete query predicate"
 msgstr "استعلام الإكمال التلقائي المسند"
 
-msgid "Automatic Color"
+msgid "Automatic color"
 msgstr "اللون التلقائي"
 
 #, fuzzy
@@ -3253,7 +3253,7 @@ msgstr "خريطة البلد"
 msgid "Create"
 msgstr "خلق"
 
-msgid "Create Chart"
+msgid "Create chart"
 msgstr "إنشاء مخطط"
 
 msgid "Create a dataset"
@@ -8839,7 +8839,7 @@ msgstr "يحتوي المورد بالفعل على تقرير مرفق."
 msgid "Resource was not found."
 msgstr "لم يتم العثور على المورد."
 
-msgid "Restore Filter"
+msgid "Restore filter"
 msgstr "عامل تصفية الاستعادة"
 
 msgid "Results"

superset/translations/ca/LC_MESSAGES/messages.po

@@ -843,10 +843,10 @@ msgstr "Afegir plantilla CSS"
 msgid "Add Dashboard"
 msgstr "Afegir Dashboard"
 
-msgid "Add Divider"
+msgid "Add divider"
 msgstr "Afegir Divisor"
 
-msgid "Add Filter"
+msgid "Add filter"
 msgstr "Afegir Filtre"
 
 msgid "Add Layer"
@@ -1822,7 +1822,7 @@ msgstr "Filtres d'autocompletat"
 msgid "Autocomplete query predicate"
 msgstr "Predicat de consulta d'autocompletat"
 
-msgid "Automatic Color"
+msgid "Automatic color"
 msgstr "Color Automàtic"
 
 msgid "Autosize Column"
@@ -3234,7 +3234,7 @@ msgstr "Mapa de País"
 msgid "Create"
 msgstr "Crear"
 
-msgid "Create Chart"
+msgid "Create chart"
 msgstr "Crear Gràfic"
 
 msgid "Create a dataset"
@@ -8642,7 +8642,7 @@ msgstr "El recurs ja té un informe adjunt."
 msgid "Resource was not found."
 msgstr "No s'ha trobat el recurs."
 
-msgid "Restore Filter"
+msgid "Restore filter"
 msgstr "Restaurar Filtre"
 
 msgid "Results"