API and Inspector UI text edits (#32459)

* Update ApiKeysAddedModal.tsx

* Update ApiKeysForm.tsx

* API text edits

* Update QueryInspector.tsx

public/app/features/api-keys/ApiKeysAddedModal.tsx

@@ -29,10 +29,10 @@ export const ApiKeysAddedModal = (props: Props) => {
         </div>
 
         <div className="grafana-info-box" style={{ border: 0 }}>
-          You will only be able to view this key here once! It is not stored in this form. So be sure to copy it now.
+          You will only be able to view this key here once! It is not stored in this form, so be sure to copy it now.
           <br />
           <br />
-          You can authenticate request using the Authorization HTTP header, example:
+          You can authenticate a request using the Authorization HTTP header, example:
           <br />
           <br />
           <pre className="small">

public/app/features/api-keys/ApiKeysForm.tsx

@@ -33,7 +33,7 @@ const timeRangeValidationEvents: ValidationEvents = {
 };
 
 const tooltipText =
-  'The api key life duration. For example 1d if your key is going to last for one day. All the supported units are: s,m,h,d,w,M,y';
+  'The API key life duration. For example, 1d if your key is going to last for one day. Supported units are: s,m,h,d,w,M,y';
 
 export const ApiKeysForm: FC<Props> = ({ show, onClose, onKeyAdded }) => {
   const [name, setName] = useState<string>('');

public/app/features/api-keys/ApiKeysPage.test.tsx

@@ -61,7 +61,7 @@ describe('ApiKeysPage', () => {
   describe('when there are no API keys', () => {
     it('then it should render CTA', () => {
       setup({ apiKeys: getMultipleMockKeys(0), apiKeysCount: 0, hasFetched: true });
-      expect(screen.getByLabelText(selectors.components.CallToActionCard.button('New API Key'))).toBeInTheDocument();
+      expect(screen.getByLabelText(selectors.components.CallToActionCard.button('New API key'))).toBeInTheDocument();
     });
   });
 
@@ -98,7 +98,7 @@ describe('ApiKeysPage', () => {
     });
   });
 
-  describe('when a user searches for an api key', () => {
+  describe('when a user searches for an API key', () => {
     it('then it should dispatch setSearchQuery with correct parameters', async () => {
       const apiKeys = getMultipleMockKeys(3);
       const { setSearchQueryMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
@@ -110,7 +110,7 @@ describe('ApiKeysPage', () => {
     });
   });
 
-  describe('when a user deletes an api key', () => {
+  describe('when a user deletes an API key', () => {
     it('then it should dispatch deleteApi with correct parameters', async () => {
       const apiKeys = [
         { id: 1, name: 'First', role: OrgRole.Admin, secondsToLive: 60, expiration: '2021-01-01' },
@@ -141,18 +141,18 @@ describe('ApiKeysPage', () => {
     });
   });
 
-  describe('when a user adds an api key from CTA', () => {
+  describe('when a user adds an API key from CTA', () => {
     it('then it should call addApiKey with correct parameters', async () => {
       const apiKeys: any[] = [];
       const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
 
       addApiKeyMock.mockClear();
-      userEvent.click(screen.getByLabelText(selectors.components.CallToActionCard.button('New API Key')));
+      userEvent.click(screen.getByLabelText(selectors.components.CallToActionCard.button('New API key')));
       await addAndVerifyApiKey(addApiKeyMock, false);
     });
   });
 
-  describe('when a user adds an api key from Add Api Key', () => {
+  describe('when a user adds an API key from Add API key', () => {
     it('then it should call addApiKey with correct parameters', async () => {
       const apiKeys = getMultipleMockKeys(1);
       const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });
@@ -169,7 +169,7 @@ describe('ApiKeysPage', () => {
     });
   });
 
-  describe('when a user adds an api key with an invalid expiration', () => {
+  describe('when a user adds an API key with an invalid expiration', () => {
     it('then it should display a message', async () => {
       const apiKeys = getMultipleMockKeys(1);
       const { addApiKeyMock } = setup({ apiKeys, apiKeysCount: apiKeys.length, hasFetched: true });

public/app/features/api-keys/ApiKeysPage.tsx

@@ -133,11 +133,11 @@ export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
                 <>
                   {showCTA ? (
                     <EmptyListCTA
-                      title="You haven't added any API Keys yet."
+                      title="You haven't added any API keys yet."
                       buttonIcon="key-skeleton-alt"
                       onClick={toggleIsAdding}
-                      buttonTitle="New API Key"
-                      proTip="Remember you can provide view-only API access to other applications."
+                      buttonTitle="New API key"
+                      proTip="Remember, you can provide view-only API access to other applications."
                     />
                   ) : null}
                   {showTable ? (
@@ -151,7 +151,7 @@ export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
                   <ApiKeysForm show={isAdding} onClose={toggleIsAdding} onKeyAdded={this.onAddApiKey} />
                   {showTable ? (
                     <>
-                      <h3 className="page-heading">Existing Keys</h3>
+                      <h3 className="page-heading">Existing API keys</h3>
                       <Switch label="Show expired" checked={includeExpired} onChange={this.onIncludeExpiredChange} />
                       <ApiKeysTable apiKeys={apiKeys} timeZone={timeZone} onDelete={this.onDeleteApiKey} />
                     </>

public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap

@@ -58,10 +58,10 @@ exports[`Render should render component 1`] = `
         }
       }
     >
-      You will only be able to view this key here once! It is not stored in this form. So be sure to copy it now.
+      You will only be able to view this key here once! It is not stored in this form, so be sure to copy it now.
       <br />
       <br />
-      You can authenticate request using the Authorization HTTP header, example:
+      You can authenticate a request using the Authorization HTTP header, example:
       <br />
       <br />
       <pre

public/app/features/inspector/QueryInspector.tsx

@@ -270,7 +270,7 @@ export class QueryInspector extends PureComponent<Props, State> {
           <h3 className="section-heading">Query inspector</h3>
           <p className="small muted">
             Query inspector allows you to view raw request and response. To collect this data Grafana needs to issue a
-            new query. Hit refresh button below to trigger a new query.
+            new query. Click refresh button below to trigger a new query.
           </p>
         </div>
         {this.renderExecutedQueries(executedQueries)}
@@ -313,7 +313,9 @@ export class QueryInspector extends PureComponent<Props, State> {
           {!isLoading && haveData && (
             <JSONFormatter json={response} open={openNodes} onDidRender={this.setFormattedJson} />
           )}
-          {!isLoading && !haveData && <p className="muted">No request & response collected yet. Hit refresh button</p>}
+          {!isLoading && !haveData && (
+            <p className="muted">No request and response collected yet. Hit refresh button</p>
+          )}
         </div>
       </>
     );