diff --git a/public/app/features/api-keys/ApiKeysAddedModal.tsx b/public/app/features/api-keys/ApiKeysAddedModal.tsx index 0cb207311cb..1545ad4ef5b 100644 --- a/public/app/features/api-keys/ApiKeysAddedModal.tsx +++ b/public/app/features/api-keys/ApiKeysAddedModal.tsx @@ -29,10 +29,10 @@ export const ApiKeysAddedModal = (props: Props) => {
- 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.

- You can authenticate request using the Authorization HTTP header, example: + You can authenticate a request using the Authorization HTTP header, example:

diff --git a/public/app/features/api-keys/ApiKeysForm.tsx b/public/app/features/api-keys/ApiKeysForm.tsx
index ae60d38d83e..fb197aee3ae 100644
--- a/public/app/features/api-keys/ApiKeysForm.tsx
+++ b/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 = ({ show, onClose, onKeyAdded }) => {
   const [name, setName] = useState('');
diff --git a/public/app/features/api-keys/ApiKeysPage.test.tsx b/public/app/features/api-keys/ApiKeysPage.test.tsx
index 9aa088f95d0..edf308e1fef 100644
--- a/public/app/features/api-keys/ApiKeysPage.test.tsx
+++ b/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 });
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index 38c554caaee..51212531602 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -133,11 +133,11 @@ export class ApiKeysPageUnconnected extends PureComponent {
                 <>
                   {showCTA ? (
                     
                   ) : null}
                   {showTable ? (
@@ -151,7 +151,7 @@ export class ApiKeysPageUnconnected extends PureComponent {
                   
                   {showTable ? (
                     <>
-                      

Existing Keys

+

Existing API keys

diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap index fb53f89cdfd..fb018b4663c 100644 --- a/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap +++ b/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.

- You can authenticate request using the Authorization HTTP header, example: + You can authenticate a request using the Authorization HTTP header, example:

 {
           

Query inspector

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.

{this.renderExecutedQueries(executedQueries)} @@ -313,7 +313,9 @@ export class QueryInspector extends PureComponent { {!isLoading && haveData && ( )} - {!isLoading && !haveData &&

No request & response collected yet. Hit refresh button

} + {!isLoading && !haveData && ( +

No request and response collected yet. Hit refresh button

+ )} );