UI text edits (#32524)

* Update TeamSettings.tsx

* Update navModel.ts

* Update ChangePasswordForm.tsx

* Update UserProfileEditForm.tsx

* Update DashboardImportPage.tsx

* Update uploadDashboardDirective.ts

* Update ImportDashboardForm.tsx

* Update ImportDashboardOverview.tsx

* Update validation.ts

* Update PlaylistEditPage.tsx

* ui text edits

* text edits

* Update buildCategories.ts

* text edits

* text edits

* Fix formatting

* Update test snapshots

Co-authored-by: dsotirakis <sotirakis.dim@gmail.com>

public/app/features/datasources/DataSourcesListPage.tsx

@@ -37,7 +37,7 @@ export interface Props {
 }
 
 const emptyListModel = {
-  title: 'There are no data sources defined yet',
+  title: 'No data sources defined',
   buttonIcon: 'database' as IconName,
   buttonLink: 'datasources/new',
   buttonTitle: 'Add data source',

public/app/features/datasources/NewDataSourcePage.tsx

@@ -103,8 +103,8 @@ class NewDataSourcePage extends PureComponent<Props> {
               <>
                 <br />
                 <p>
-                  Note that <strong>unsigned front-end datasource plugins</strong> are still usable, but this is subject
+                  Note that unsigned front-end data source plugins are still usable, but this is subject to change in
-                  to change in the upcoming releases of Grafana
+                  the upcoming releases of Grafana.
                 </p>
               </>
             </PluginsErrorsInfo>

public/app/features/datasources/settings/BasicSettings.tsx

@@ -18,7 +18,7 @@ const BasicSettings: FC<Props> = ({ dataSourceName, isDefault, onDefaultChange,
         <div className="gf-form max-width-30" style={{ marginRight: '3px' }}>
           <InlineFormLabel
             tooltip={
-              'The name is used when you select the data source in panels. The Default data source is ' +
+              'The name is used when you select the data source in panels. The default data source is ' +
               'preselected in new panels.'
             }
           >

public/app/features/datasources/settings/ButtonRow.tsx

@@ -21,7 +21,7 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
           onClick={(event) => onSubmit(event)}
           aria-label={selectors.pages.DataSource.saveAndTest}
         >
-          Save &amp; Test
+          Save &amp; test
         </button>
       )}
       {isReadOnly && (

public/app/features/datasources/settings/CloudInfoBox.tsx

@@ -56,7 +56,7 @@ export const CloudInfoBox: FC<Props> = ({ dataSource }) => {
             }}
           >
             <div className={styles.text}>
-              Or skip the effort and get {mainDS} (and {extraDS}) as fully managed, scalable and hosted data sources
+              Or skip the effort and get {mainDS} (and {extraDS}) as fully-managed, scalable, and hosted data sources
               from Grafana Labs with the{' '}
               <a
                 className="external-link"

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -128,8 +128,8 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
   renderIsReadOnlyMessage() {
     return (
       <InfoBox severity="info">
-        This datasource was added by config and cannot be modified using the UI. Please contact your server admin to
+        This data source was added by config and cannot be modified using the UI. Please contact your server admin to
-        update this datasource.
+        update this data source.
       </InfoBox>
     );
   }
@@ -197,7 +197,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
       }
     }
 
-    return <div>Page Not Found: {page}</div>;
+    return <div>Page not found: {page}</div>;
   }
 
   renderSettings() {

public/app/features/datasources/settings/PluginSettings.tsx

@@ -46,7 +46,7 @@ export class PluginSettings extends PureComponent<Props> {
 
     if (!plugin.components.ConfigEditor) {
       // React editor is not specified, let's render angular editor
-      // How to apprach this better? Introduce ReactDataSourcePlugin interface and typeguard it here?
+      // How to approach this better? Introduce ReactDataSourcePlugin interface and typeguard it here?
       const loader = getAngularLoader();
       const template = '<plugin-component type="datasource-config-ctrl" />';
 

public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`Render should render component 1`] = `
       }
     >
       <FormLabel
-        tooltip="The name is used when you select the data source in panels. The Default data source is preselected in new panels."
+        tooltip="The name is used when you select the data source in panels. The default data source is preselected in new panels."
       >
         Name
       </FormLabel>

public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap

@@ -40,7 +40,7 @@ exports[`Render should render with buttons enabled 1`] = `
     onClick={[Function]}
     type="submit"
   >
-    Save & Test
+    Save & test
   </button>
   <button
     aria-label="Data source settings page Delete button"

public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap

@@ -302,7 +302,7 @@ exports[`Render should render is ready only message 1`] = `
         <InfoBox
           severity="info"
         >
-          This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+          This data source was added by config and cannot be modified using the UI. Please contact your server admin to update this data source.
         </InfoBox>
         <CloudInfoBox
           dataSource={

public/app/features/datasources/state/actions.ts

@@ -98,7 +98,7 @@ export const testDataSource = (
         let message = '';
 
         if (err.statusText) {
-          message = 'HTTP Error ' + err.statusText;
+          message = 'HTTP error ' + err.statusText;
         } else {
           message = err.message;
         }

public/app/features/datasources/state/buildCategories.ts

@@ -99,60 +99,60 @@ function getEnterprisePhantomPlugins(): DataSourcePluginMeta[] {
     getPhantomPlugin({
       id: 'grafana-splunk-datasource',
       name: 'Splunk',
-      description: 'Visualize & explore Splunk logs',
+      description: 'Visualize and explore Splunk logs',
       imgUrl: 'public/img/plugins/splunk_logo_128.png',
     }),
     getPhantomPlugin({
       id: 'grafana-oracle-datasource',
       name: 'Oracle',
-      description: 'Visualize & explore Oracle SQL',
+      description: 'Visualize and explore Oracle SQL',
       imgUrl: 'public/img/plugins/oracle.png',
     }),
     getPhantomPlugin({
       id: 'grafana-dynatrace-datasource',
       name: 'Dynatrace',
-      description: 'Visualize & explore Dynatrace data',
+      description: 'Visualize and explore Dynatrace data',
       imgUrl: 'public/img/plugins/dynatrace.png',
     }),
     getPhantomPlugin({
       id: 'grafana-servicenow-datasource',
-      description: 'ServiceNow integration & data source',
+      description: 'ServiceNow integration and data source',
       name: 'ServiceNow',
       imgUrl: 'public/img/plugins/servicenow.svg',
     }),
     getPhantomPlugin({
       id: 'grafana-datadog-datasource',
-      description: 'DataDog integration & data source',
+      description: 'DataDog integration and data source',
       name: 'DataDog',
       imgUrl: 'public/img/plugins/datadog.png',
     }),
     getPhantomPlugin({
       id: 'grafana-newrelic-datasource',
-      description: 'New Relic integration & data source',
+      description: 'New Relic integration and data source',
       name: 'New Relic',
       imgUrl: 'public/img/plugins/newrelic.svg',
     }),
     getPhantomPlugin({
       id: 'grafana-mongodb-datasource',
-      description: 'MongoDB integration & data source',
+      description: 'MongoDB integration and data source',
       name: 'MongoDB',
       imgUrl: 'public/img/plugins/mongodb.svg',
     }),
     getPhantomPlugin({
       id: 'grafana-snowflake-datasource',
-      description: 'Snowflake integration & data source',
+      description: 'Snowflake integration and data source',
       name: 'Snowflake',
       imgUrl: 'public/img/plugins/snowflake.svg',
     }),
     getPhantomPlugin({
       id: 'grafana-wavefront-datasource',
-      description: 'Wavefront integration & data source',
+      description: 'Wavefront integration and data source',
       name: 'Wavefront',
       imgUrl: 'public/img/plugins/wavefront.svg',
     }),
     getPhantomPlugin({
       id: 'dlopes7-appdynamics-datasource',
-      description: 'AppDynamics integration & data source',
+      description: 'AppDynamics integration and data source',
       name: 'AppDynamics',
       imgUrl: 'public/img/plugins/appdynamics.svg',
     }),
@@ -167,7 +167,7 @@ function getGrafanaCloudPhantomPlugin(): DataSourcePluginMeta {
     module: 'phantom',
     baseUrl: '',
     info: {
-      description: 'Hosted Graphite, Prometheus and Loki',
+      description: 'Hosted Graphite, Prometheus, and Loki',
       logos: { small: 'public/img/grafana_icon.svg', large: 'asd' },
       author: { name: 'Grafana Labs' },
       links: [

public/app/features/datasources/utils/passwordHandlers.ts

@@ -11,7 +11,7 @@ export enum PasswordFieldEnum {
 }
 
 /**
- * Basic shape for settings controllers in at the moment mostly angular datasource plugins.
+ * Basic shape for settings controllers in at the moment mostly angular data source plugins.
  */
 export type Ctrl = {
   current: {

public/app/features/folders/FolderSettingsPage.tsx

@@ -85,7 +85,7 @@ export class FolderSettingsPage extends PureComponent<Props, State> {
     return (
       <Page navModel={navModel}>
         <Page.Contents isLoading={this.state.isLoading}>
-          <h3 className="page-sub-heading">Folder Settings</h3>
+          <h3 className="page-sub-heading">Folder settings</h3>
 
           <div className="section gf-form-group">
             <form name="folderSettingsForm" onSubmit={this.onSave}>

public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Render should enable save button 1`] = `
     <h3
       className="page-sub-heading"
     >
-      Folder Settings
+      Folder settings
     </h3>
     <div
       className="section gf-form-group"
@@ -68,7 +68,7 @@ exports[`Render should render component 1`] = `
     <h3
       className="page-sub-heading"
     >
-      Folder Settings
+      Folder settings
     </h3>
     <div
       className="section gf-form-group"

public/app/features/folders/state/navModel.ts

@@ -5,7 +5,7 @@ export function buildNavModel(folder: FolderDTO): NavModelItem {
   const model = {
     icon: 'folder',
     id: 'manage-folder',
-    subTitle: 'Manage folder dashboards & permissions',
+    subTitle: 'Manage folder dashboards and permissions',
     url: '',
     text: folder.title,
     breadcrumbs: [{ title: 'Dashboards', url: 'dashboards' }],

public/app/features/manage-dashboards/DashboardImportPage.tsx

@@ -88,10 +88,10 @@ class DashboardImportUnConnected extends PureComponent<Props> {
               <Field invalid={!!errors.gcomDashboard} error={errors.gcomDashboard && errors.gcomDashboard.message}>
                 <Input
                   name="gcomDashboard"
-                  placeholder="Grafana.com dashboard url or id"
+                  placeholder="Grafana.com dashboard URL or ID"
                   type="text"
                   ref={register({
-                    required: 'A Grafana dashboard url or id is required',
+                    required: 'A Grafana dashboard URL or ID is required',
                     validate: validateGcomDashboard,
                   })}
                   addonAfter={<Button type="submit">Load</Button>}
@@ -109,7 +109,7 @@ class DashboardImportUnConnected extends PureComponent<Props> {
                   <TextArea
                     name="dashboardJson"
                     ref={register({
-                      required: 'Need a dashboard json model',
+                      required: 'Need a dashboard JSON model',
                       validate: validateDashboardJson,
                     })}
                     rows={10}

public/app/features/manage-dashboards/components/ImportDashboardForm.tsx

@@ -74,9 +74,9 @@ export const ImportDashboardForm: FC<Props> = ({
         />
       </Field>
       <Field
-        label="Unique identifier (uid)"
+        label="Unique identifier (UID)"
-        description="The unique identifier (uid) of a dashboard can be used for uniquely identify a dashboard between multiple Grafana installs.
+        description="The unique identifier (UID) of a dashboard can be used for uniquely identify a dashboard between multiple Grafana installs.
-                The uid allows having consistent URL’s for accessing dashboards so changing the title of a dashboard will not break any
+                The UID allows having consistent URLs for accessing dashboards so changing the title of a dashboard will not break any
                 bookmarked links to that dashboard."
         invalid={!!errors.uid}
         error={errors.uid && errors.uid.message}

public/app/features/manage-dashboards/components/ImportDashboardOverview.tsx

@@ -56,7 +56,7 @@ class ImportDashboardOverviewUnConnected extends PureComponent<Props, State> {
           <div style={{ marginBottom: '24px' }}>
             <div>
               <Legend>
-                Importing Dashboard from{' '}
+                Importing dashboard from{' '}
                 <a
                   href={`https://grafana.com/dashboards/${dashboard.gnetId}`}
                   className="external-link"

public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts

@@ -33,7 +33,7 @@ export function uploadDashboardDirective() {
               console.error(err);
               appEvents.emit(AppEvents.alertError, [
                 'Import failed',
-                'JSON -> JS Serialization failed: ' + err.message,
+                'JSON -> JS serialization failed: ' + err.message,
               ]);
               return;
             }
@@ -62,7 +62,7 @@ export function uploadDashboardDirective() {
         // Something
         elem[0].addEventListener('change', file_selected, false);
       } else {
-        appEvents.emit(AppEvents.alertError, ['Oops', 'The HTML5 File APIs are not fully supported in this browser']);
+        appEvents.emit(AppEvents.alertError, ['Oops', 'The HTML5 file APIs are not fully supported in this browser']);
       }
     },
   };

public/app/features/manage-dashboards/utils/validation.ts

@@ -14,7 +14,7 @@ export const validateGcomDashboard = (gcomDashboard: string) => {
   // From DashboardImportCtrl
   const match = /(^\d+$)|dashboards\/(\d+)/.exec(gcomDashboard);
 
-  return match && (match[1] || match[2]) ? true : 'Could not find a valid Grafana.com id';
+  return match && (match[1] || match[2]) ? true : 'Could not find a valid Grafana.com ID';
 };
 
 export const validateTitle = (newTitle: string, folderId: number) => {
@@ -34,7 +34,7 @@ export const validateUid = (value: string) => {
   return getBackendSrv()
     .get(`/api/dashboards/uid/${value}`)
     .then((existingDashboard) => {
-      return `Dashboard named '${existingDashboard?.dashboard.title}' in folder '${existingDashboard?.meta.folderTitle}' has the same uid`;
+      return `Dashboard named '${existingDashboard?.dashboard.title}' in folder '${existingDashboard?.meta.folderTitle}' has the same UID`;
     })
     .catch((error) => {
       error.isHandled = true;

public/app/features/playlist/PlaylistEditPage.tsx

@@ -35,10 +35,10 @@ export const PlaylistEditPage: FC<Props> = ({ navModel, match }) => {
   return (
     <Page navModel={navModel}>
       <Page.Contents isLoading={loading}>
-        <h3 className={styles.subHeading}>Edit Playlist</h3>
+        <h3 className={styles.subHeading}>Edit playlist</h3>
 
         <p className={styles.description}>
-          A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build
+          A playlist rotates through a pre-selected list of dashboards. A playlist can be a great way to build
           situational awareness, or just show off your metrics to your team or visitors.
         </p>
 

public/app/features/playlist/PlaylistNewPage.tsx

@@ -34,7 +34,7 @@ export const PlaylistNewPage: FC<Props> = ({ navModel }) => {
         <h3 className={styles.subHeading}>New Playlist</h3>
 
         <p className={styles.description}>
-          A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build
+          A playlist rotates through a pre-selected list of dashboards. A playlist can be a great way to build
           situational awareness, or just show off your metrics to your team or visitors.
         </p>
 

public/app/features/playlist/PlaylistTableRows.tsx

@@ -15,7 +15,7 @@ export const PlaylistTableRows: FC<PlaylistTableRowsProps> = ({ items, onMoveUp,
     return (
       <tr>
         <td>
-          <em>Playlist is empty, add dashboards below.</em>
+          <em>Playlist is empty. Add dashboards below.</em>
         </td>
       </tr>
     );

public/app/features/profile/ChangePasswordForm.tsx

@@ -16,10 +16,10 @@ export const ChangePasswordForm: FC<Props> = ({ user, onChangePassword, isSaving
   const authSource = user.authLabels?.length && user.authLabels[0];
 
   if (ldapEnabled || authProxyEnabled) {
-    return <p>You cannot change password when ldap or auth proxy authentication is enabled.</p>;
+    return <p>You cannot change password when LDAP or auth proxy authentication is enabled.</p>;
   }
   if (authSource && disableLoginForm) {
-    return <p>Password cannot be changed here!</p>;
+    return <p>Password cannot be changed here.</p>;
   }
 
   return (

public/app/features/profile/UserProfileEditForm.tsx

@@ -21,7 +21,7 @@ export const UserProfileEditForm: FC<Props> = ({ user, isSavingUser, updateProfi
     <Form onSubmit={onSubmitProfileUpdate} validateOn="onBlur">
       {({ register, errors }) => {
         return (
-          <FieldSet label="Edit Profile">
+          <FieldSet label="Edit profile">
             <Field label="Name" invalid={!!errors.name} error="Name is required" disabled={disableLoginForm}>
               <Input
                 name="name"
@@ -65,7 +65,7 @@ export default UserProfileEditForm;
 
 const InputSuffix: FC = () => {
   return disableLoginForm ? (
-    <Tooltip content="Login Details Locked - managed in another system.">
+    <Tooltip content="Login details locked because they are managed in another system.">
       <Icon name="lock" />
     </Tooltip>
   ) : null;

public/app/features/query/components/QueryGroupOptions.tsx

@@ -250,7 +250,7 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
               width={9}
               tooltip={
                 <>
-                  The evaluated Interval that is sent to data source and is used in <code>$__interval</code> and{' '}
+                  The evaluated interval that is sent to data source and is used in <code>$__interval</code> and{' '}
                   <code>$__interval_ms</code>
                 </>
               }

public/app/features/query/state/PanelQueryRunner.ts

@@ -79,7 +79,7 @@ export class PanelQueryRunner {
         let processedData = data;
 
         if (withFieldConfig) {
-          // Apply field defaults & overrides
+          // Apply field defaults and overrides
           const fieldConfig = this.dataConfigSource.getFieldOverrideOptions();
           const timeZone = data.request?.timezone ?? 'browser';
 
@@ -162,7 +162,7 @@ export class PanelQueryRunner {
     try {
       const ds = await getDataSource(datasource, request.scopedVars);
 
-      // Attach the datasource name to each query
+      // Attach the data source name to each query
       request.targets = request.targets.map((query) => {
         if (!query.datasource) {
           query.datasource = ds.name;

public/app/features/teams/TeamSettings.tsx

@@ -14,7 +14,7 @@ export interface Props {
 export const TeamSettings: FC<Props> = ({ team, updateTeam }) => {
   return (
     <VerticalGroup>
-      <FieldSet label="Team Settings">
+      <FieldSet label="Team settings">
         <Form
           defaultValues={{ ...team }}
           onSubmit={(formTeam: Team) => {
@@ -29,7 +29,7 @@ export const TeamSettings: FC<Props> = ({ team, updateTeam }) => {
 
               <Field
                 label="Email"
-                description="This is optional and is primarily used to set the team profile avatar (via gravatar service)"
+                description="This is optional and is primarily used to set the team profile avatar (via gravatar service)."
               >
                 <Input placeholder="team@email.com" type="email" name="email" ref={register} />
               </Field>

public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Render should render component 1`] = `
 <VerticalGroup>
   <FieldSet
-    label="Team Settings"
+    label="Team settings"
   >
     <Form
       defaultValues={

public/app/features/teams/state/navModel.ts

@@ -6,7 +6,7 @@ export function buildNavModel(team: Team): NavModelItem {
   const navModel = {
     img: team.avatarUrl,
     id: 'team-' + team.id,
-    subTitle: 'Manage members & settings',
+    subTitle: 'Manage members and settings',
     url: '',
     text: team.name,
     breadcrumbs: [{ title: 'Teams', url: 'org/teams' }],