PMM-14630: Use correct casing in navigation menu and Help Center

ui/apps/pmm/src/components/footer/Footer.messages.ts

@@ -1,5 +1,5 @@
 export const Messages = {
   version: (version: string) => `PMM ${version}`,
   inProgress: 'Update in progress...',
-  checkedOn: (date: string) => `Checked on: ${date}`,
+  checkedOn: (date: string) => `Last checked: ${date}`,
 };

ui/apps/pmm/src/components/footer/Footer.test.tsx

@@ -17,7 +17,7 @@ describe('Footer', () => {
   it('shows  correct checked date', () => {
     render(wrapWithUpdatesProvider(<Footer />));
 
-    expect('Checked on: 2024/07/30');
+    expect('Last checked: 2024/07/30');
   });
 
   it('shows in progress message', () => {

ui/apps/pmm/src/components/footer/Footer.utils.ts

@@ -1,7 +1,14 @@
 /**
- * Formats date to YYYY/MM/DD
+ * Formats date to "Month Day, Year, HH:MM UTC"
  * @param date
  * @returns formatted date
  */
-export const formatCheckDate = (date: string) =>
-  new Date(date).toISOString().slice(0, 10).replace(/-/g, '/');
+export const formatCheckDate = (date: string) => {
+  const dateObj = new Date(date);
+  const month = dateObj.toLocaleDateString('en-US', { month: 'long' });
+  const day = dateObj.getUTCDate();
+  const year = dateObj.getUTCFullYear();
+  const hours = String(dateObj.getUTCHours()).padStart(2, '0');
+  const minutes = String(dateObj.getUTCMinutes()).padStart(2, '0');
+  return `${month} ${day}, ${year}, ${hours}:${minutes} UTC`;
+};

ui/apps/pmm/src/contexts/navigation/navigation.constants.ts

@@ -49,7 +49,7 @@ export const NAV_MYSQL: NavItem = {
     {
       id: 'mysql-high-availability',
       icon: 'high-availability',
-      text: 'High Availability',
+      text: 'High availability',
       url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-group-replicaset-summary`,
       children: [
         {
@@ -207,7 +207,7 @@ export const NAV_POSTGRESQL: NavItem = {
     },
     {
       id: 'postgresql-ha',
-      text: 'High Availability',
+      text: 'High availability',
       icon: 'high-availability',
       url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-replication-overview`,
       children: [
@@ -468,7 +468,7 @@ export const NAV_EXPLORE: NavItem = {
 //
 export const NAV_ALERTS_TEMPLATES: NavItem = {
   id: 'alerts-templates',
-  text: 'Percona Alert Templates',
+  text: 'Alert templates',
   url: `${PMM_NEW_NAV_GRAFANA_PATH}/alerting/alert-rule-templates`,
   matches: [`${PMM_NEW_NAV_GRAFANA_PATH}/alerting/new-from-template/*`],
 };
@@ -532,13 +532,13 @@ export const NAV_ALERTS: NavItem = {
 export const NAV_ADVISORS: NavItem = {
   id: 'advisors',
   icon: 'intelligence',
-  text: 'Percona Advisors',
+  text: 'Advisors',
   url: `${PMM_NEW_NAV_GRAFANA_PATH}/advisors`,
 };
 
 export const NAV_ADVISORS_INSIGHTS = {
   id: 'advisors-insights',
-  text: 'Advisor Insights',
+  text: 'Advisor insights',
   url: `${PMM_NEW_NAV_GRAFANA_PATH}/advisors/insights`,
 };
 
@@ -554,7 +554,7 @@ export const NAV_INVENTORY: NavItem = {
     {
       id: 'add-instance',
       url: `${PMM_NEW_NAV_GRAFANA_PATH}/add-instance`,
-      text: 'Add Service',
+      text: 'Add service',
       matches: [`${PMM_NEW_NAV_GRAFANA_PATH}/add-instance/:type`],
     },
     {
@@ -726,7 +726,7 @@ export const NAV_CHANGE_PASSWORD: NavItem = {
 
 export const NAV_THEME_TOGGLE: NavItem = {
   id: 'theme-toggle',
-  text: 'Change to Dark Theme',
+  text: 'Switch to dark mode',
 };
 
 export const NAV_SIGN_OUT: NavItem = {

ui/apps/pmm/src/contexts/navigation/navigation.utils.tsx

@@ -173,7 +173,7 @@ export const addAdvisors = (advisors: Advisor[]): NavItem => {
   for (const category of Object.keys(categories)) {
     children.push({
       id: `advisors-${category}`,
-      text: `${capitalize(category)} Advisors`,
+      text: `${capitalize(category)} advisors`,
       url: `${PMM_NEW_NAV_GRAFANA_PATH}/advisors/${category}`,
     });
   }
@@ -189,7 +189,7 @@ export const addAccount = (
 ): NavItem => {
   const name = (user.name || '').split(' ')[0];
   const children = [...(NAV_ACCOUNT.children || [])];
-  const targetTheme = colorMode === 'light' ? 'Dark' : 'Light';
+  const targetMode = colorMode === 'light' ? 'dark' : 'light';
 
   if (
     !(
@@ -203,7 +203,7 @@ export const addAccount = (
   children.push({
     ...NAV_THEME_TOGGLE,
     icon: colorMode === 'light' ? 'theme-dark' : 'theme-light',
-    text: `Change to ${targetTheme} Theme`,
+    text: `Switch to ${targetMode} mode`,
     onClick: toggleMode,
   });
 

ui/apps/pmm/src/contexts/tour/steps/alerting.messages.ts

@@ -1,32 +1,32 @@
 export const Messages = {
   firedAlerts: {
-    title: 'Fired Alerts',
+    title: 'Fired alerts',
     view: 'View all the alerts generated by your active alert rules.',
     check:
       'Check this tab regularly for an overview of current issues in your environment.',
   },
   alertRuleTemplates: {
-    title: 'Alert Templates',
+    title: 'Alert templates',
     effortlessly: 'Templates help you create complex alert rules effortlessly.',
     offers:
       'Percona offers a set of default templates for common events and expressions, but you can also create custom templates to fit your unique requirements.',
   },
   alertRules: {
-    title: 'Alert Rules',
+    title: 'Alert rules',
     rules: 'Alert rules specify the conditions for firing alerts.',
     start:
       'Start from your available templates to pre-fill some of these conditions, and create your rule by adding more conditions and changing the template values.',
     create:
       "If you need to create an alert rule from scratch, use Grafana's complex alerting configuration instead.",
   },
   contactPoints: {
-    title: 'Contact Points',
+    title: 'Contact points',
     define: 'Define how your contacts are notified when an alert fires.',
     grafana:
       'Grafana supports a multitude of ChatOps tools to ensure that your team is notified via the most relevant channel.',
   },
   notificationPolicies: {
-    title: 'Notification Policies',
+    title: 'Notification policies',
     routed: 'Set where, when, and how the alerts get routed.',
     policy:
       'A notification policy has a contact point assigned to it that consists of one or more notifiers.',
@@ -36,16 +36,16 @@ export const Messages = {
     create:
       'Create silences when you want to stop notifications from one or more alerting rules.',
     silences:
-      'Silences will prevent notifications from getting created, but they will not prevent alerting rules from being evaluated or recorded in the Fired Alerts tab. A silence only lasts for a specified window of time.',
+      'Silences will prevent notifications from getting created, but they will not prevent alerting rules from being evaluated or recorded in the Fired alerts tab. A silence only lasts for a specified window of time.',
   },
   alertGroups: {
-    title: 'Alert Groups',
-    alert: 'Alert Groups show grouped alerts.',
+    title: 'Alert groups',
+    alert: 'Alert groups show grouped alerts.',
     grouping:
       "Group common alerts into a single alert group to ensure that PMM doesn't fire duplicate alerts.",
   },
   settings: {
-    title: 'Alert Settings',
+    title: 'Alert settings',
     configure: 'Use this to configure Alertmanagers in raw JSON format.',
   },
 };

ui/apps/pmm/src/contexts/tour/steps/product.messages.ts

@@ -27,7 +27,7 @@ export const Messages = {
     readMore: 'Read more about our templates',
   },
   advisors: {
-    title: 'Percona Advisors',
+    title: 'Advisors',
     checks:
       'Advisor checks proactively monitor your databases for potential security threats, performance degradation, data integrity risks, compliance issues, and more.',
     readMore: 'Read more about Advisors',

ui/apps/pmm/src/pages/help-center/HelpCenter.constants.ts

@@ -23,7 +23,7 @@ export const getCardData = ({
 }): HelpCard[] => [
   {
     id: CARD_IDS.pmmDocs,
-    title: 'PMM Documentation',
+    title: 'PMM documentation',
     description:
       'From setup to troubleshooting, you’ll find step-by-step instructions, tips, and best practices to get the most out of PMM.',
     buttons: [
@@ -38,12 +38,12 @@ export const getCardData = ({
   },
   {
     id: CARD_IDS.support,
-    title: 'Get Percona Support',
+    title: 'Percona support',
     description:
       'From 24/7 technical support to fully managed services, Percona’s trusted experts are ready to help you optimize, troubleshoot, and scale.',
     buttons: [
       {
-        text: 'Contact Support',
+        text: 'Contact support',
         target: '_blank',
         url: 'https://www.percona.com/about/contact?utm_campaign=7075599-Product%20Documentation%20Contact%20Us%20Clicks&utm_source=PMM-Support',
       },
@@ -53,7 +53,7 @@ export const getCardData = ({
   },
   {
     id: CARD_IDS.forum,
-    title: 'Percona Forum',
+    title: 'Percona forum',
     description:
       'A friendly space to connect with other users, share insights, and get answers from the community and from the Percona experts.',
     buttons: [
@@ -68,7 +68,7 @@ export const getCardData = ({
   },
   {
     id: CARD_IDS.pmmDump,
-    title: 'PMM Dump',
+    title: 'PMM dump',
     description:
       'Generate datasets to securely share your data with Percona Support. This helps our experts quickly diagnose and replicate issues.',
     buttons: [
@@ -82,7 +82,7 @@ export const getCardData = ({
   },
   {
     id: CARD_IDS.pmmLogs,
-    title: 'PMM Logs',
+    title: 'PMM logs',
     description:
       'Download your PMM logs as a ZIP file for easy sharing and faster issue diagnosis.',
     buttons: [
@@ -97,7 +97,7 @@ export const getCardData = ({
   },
   {
     id: CARD_IDS.tips,
-    title: 'Useful Tips',
+    title: 'Useful tips',
     description:
       'Need a refresher? Start the onboarding tour again for useful tips.',
     adminOnly: false,
@@ -112,7 +112,7 @@ export const getCardData = ({
   },
   {
     id: CARD_IDS.nextChapter,
-    title: 'Help Shape PMM’s Next Chapter',
+    title: "Help shape PMM's next chapter",
     description:
       "We'd love your thoughts on PMM 3 to guide its future development. This is a short survey with 4 questions (Google Form) that will help us drive the next wave of improvements.",
     adminOnly: false,

ui/apps/pmm/src/pages/updates/update-card/UpdateCard.messages.ts

@@ -6,8 +6,8 @@ export const Messages = {
   runningVersion: 'Running version:',
   newVersion: 'New version:',
   lastChecked: 'Last checked:',
-  home: 'PMM Home',
-  checkNow: 'Check Updates Now',
+  home: 'PMM home',
+  checkNow: 'Check updates now',
   checking: 'Checking',
   updateNow: 'Update now',
   error: 'There was a problem during the update',

ui/apps/pmm/src/pages/updates/update-card/UpdateCard.tsx

@@ -10,7 +10,6 @@ import {
   Alert,
 } from '@mui/material';
 import { FC, useState } from 'react';
-import { formatTimestamp } from 'utils/datetime.utils';
 import { PMM_HOME_URL } from 'lib/constants';
 import { Messages } from './UpdateCard.messages';
 import { FetchingIcon } from 'components/fetching-icon';
@@ -118,14 +117,6 @@ export const UpdateCard: FC = () => {
               {data?.latest && formatVersion(data.latest)}
             </Typography>
           )}
-          {data.lastCheck && (
-            <Typography>
-              <Typography fontWeight="bold" component="strong">
-                {Messages.lastChecked}
-              </Typography>{' '}
-              {formatTimestamp(data?.lastCheck)}
-            </Typography>
-          )}
         </Stack>
         {data.updateAvailable && <UpdateInfo />}
       </CardContent>

ui/apps/pmm/src/pages/updates/update-in-progress-card/UpdateInProgressCard.messages.ts

@@ -1,6 +1,6 @@
 export const Messages = {
   title: (version: string) => `PMM ${version} update`,
-  home: 'PMM Home',
+  home: 'PMM home',
   next: 'Next: Update PMM Client',
   inProgress: 'In progress',
 };