root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 31 Packages Projects Releases Wiki Activity

API and Inspector UI text edits (#32459) 

* Update ApiKeysAddedModal.tsx

* Update ApiKeysForm.tsx

* API text edits

* Update QueryInspector.tsx
This commit is contained in:
Diana Payton 2021-04-14 00:11:55 -07:00 committed by GitHub
parent e533e5fe2a
commit f97c056965
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/api-keys/ApiKeysAddedModal.tsx
View File

@ -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">

2
public/app/features/api-keys/ApiKeysForm.tsx
View File

@ -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>('');

14
public/app/features/api-keys/ApiKeysPage.test.tsx
View File

@ -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 });

8
public/app/features/api-keys/ApiKeysPage.tsx
View File

@ -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} />
</>

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

@ -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

6
public/app/features/inspector/QueryInspector.tsx
View File

@ -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>
</>
);