public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Explore: Rename RichHistoryCard for clarity and consistency (#78358)

Browse Source 
Rename for clarity and consistency
This commit is contained in:
Haris Rozajac
2023-11-20 07:16:08 -07:00
committed by GitHub
parent 3e5dfa2d02
commit 499915ff9a
4 changed files with 64 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
+19 -19
View File
@@ -106,7 +106,7 @@ interface MockQuery extends DataQuery {
const setup = (propOverrides?: Partial<Props<MockQuery>>) => {
const props: Props<MockQuery> = {
query: {
queryHistoryItem: {
id: '1',
createdAt: 1,
datasourceUid: 'loki',
@@ -170,7 +170,7 @@ describe('RichHistoryCard', () => {
it('should render "Data source does not exist anymore" if removed data source', async () => {
setup({
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'non-existent DS',
@@ -191,7 +191,7 @@ describe('RichHistoryCard', () => {
describe('copy queries to clipboard', () => {
it('should copy query model to clipboard when copying a query from a non existent datasource', async () => {
setup({
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'non-existent DS',
@@ -210,7 +210,7 @@ describe('RichHistoryCard', () => {
it('should copy query model to clipboard when copying a query from a datasource that does not implement getQueryDisplayText', async () => {
setup({
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'loki',
@@ -229,7 +229,7 @@ describe('RichHistoryCard', () => {
it('should copy query text to clipboard when copying a query from a datasource that implements getQueryDisplayText', async () => {
setup({
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'prometheus',
@@ -248,7 +248,7 @@ describe('RichHistoryCard', () => {
it('should use each datasource getQueryDisplayText when copying queries', async () => {
setup({
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'mixed',
@@ -280,7 +280,7 @@ describe('RichHistoryCard', () => {
setup({
setQueries,
changeDatasource,
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'mixed',
@@ -305,7 +305,7 @@ describe('RichHistoryCard', () => {
setup({
setQueries,
changeDatasource,
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'nonexistent-ds',
@@ -330,7 +330,7 @@ describe('RichHistoryCard', () => {
setup({
setQueries,
changeDatasource,
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'loki',
@@ -358,7 +358,7 @@ describe('RichHistoryCard', () => {
setup({
setQueries,
changeDatasource,
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'mixed',
@@ -381,13 +381,13 @@ describe('RichHistoryCard', () => {
describe('commenting', () => {
it('should render comment, if comment present', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const queryComment = await screen.findByLabelText('Query comment');
expect(queryComment).toBeInTheDocument();
expect(queryComment).toHaveTextContent('test comment');
});
it('should have title "Edit comment" at comment icon, if comment present', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
const addComment = screen.queryByTitle('Add comment');
expect(editComment).toBeInTheDocument();
@@ -401,14 +401,14 @@ describe('RichHistoryCard', () => {
expect(editComment).not.toBeInTheDocument();
});
it('should open update comment form when edit comment button clicked', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form');
expect(updateCommentForm).toBeInTheDocument();
});
it('should close update comment form when escape key pressed', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form');
@@ -420,7 +420,7 @@ describe('RichHistoryCard', () => {
expect(findCommentForm).not.toBeInTheDocument();
});
it('should close update comment form when enter and shift keys pressed', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form');
@@ -433,7 +433,7 @@ describe('RichHistoryCard', () => {
expect(findCommentForm).not.toBeInTheDocument();
});
it('should close update comment form when enter and ctrl keys pressed', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form');
@@ -446,7 +446,7 @@ describe('RichHistoryCard', () => {
expect(findCommentForm).not.toBeInTheDocument();
});
it('should not close update comment form when enter key pressed', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form');
@@ -469,7 +469,7 @@ describe('RichHistoryCard', () => {
expect(starRichHistoryMock).toBeCalledWith(starredQueryWithComment.id, true);
});
it('should have title "Unstar query", if not starred', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const unstarButton = await screen.findByLabelText('Unstar query');
expect(unstarButton).toBeInTheDocument();
await userEvent.click(unstarButton);
@@ -486,7 +486,7 @@ describe('RichHistoryCard', () => {
expect(deleteRichHistoryMock).toBeCalledWith(starredQueryWithComment.id);
});
it('should display modal before deleting if starred', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const deleteButton = await screen.findByLabelText('Delete query');
await userEvent.click(deleteButton);
expect(deleteRichHistoryMock).not.toBeCalled();
public/app/features/explore/RichHistory/RichHistoryCard.tsx
+43 -40
View File
@@ -41,7 +41,7 @@ const mapDispatchToProps = {
const connector = connect(mapStateToProps, mapDispatchToProps);
interface OwnProps<T extends DataQuery = DataQuery> {
query: RichHistoryQuery<T>;
queryHistoryItem: RichHistoryQuery<T>;
}
export type Props<T extends DataQuery = DataQuery> = ConnectedProps<typeof connector> & OwnProps<T>;
@@ -142,7 +142,7 @@ const getStyles = (theme: GrafanaTheme2) => {
export function RichHistoryCard(props: Props) {
const {
query,
queryHistoryItem,
commentHistoryItem,
starHistoryItem,
deleteHistoryItem,
@@ -151,25 +151,26 @@ export function RichHistoryCard(props: Props) {
datasourceInstance,
setQueries,
} = props;
const [activeUpdateComment, setActiveUpdateComment] = useState(false);
const [comment, setComment] = useState<string | undefined>(query.comment);
const { value, loading } = useAsync(async () => {
let dsInstance: DataSourceApi | undefined;
const [comment, setComment] = useState<string | undefined>(queryHistoryItem.comment);
const { value: historyCardData, loading } = useAsync(async () => {
let datasourceInstance: DataSourceApi | undefined;
try {
dsInstance = await getDataSourceSrv().get(query.datasourceUid);
datasourceInstance = await getDataSourceSrv().get(queryHistoryItem.datasourceUid);
} catch (e) {}
return {
dsInstance,
datasourceInstance,
queries: await Promise.all(
query.queries.map(async (query) => {
queryHistoryItem.queries.map(async (query) => {
let datasource;
if (dsInstance?.meta.mixed) {
if (datasourceInstance?.meta.mixed) {
try {
datasource = await getDataSourceSrv().get(query.datasource);
} catch (e) {}
} else {
datasource = dsInstance;
datasource = datasourceInstance;
}
return {
@@ -179,15 +180,15 @@ export function RichHistoryCard(props: Props) {
})
),
};
}, [query.datasourceUid, query.queries]);
}, [queryHistoryItem.datasourceUid, queryHistoryItem.queries]);
const styles = useStyles2(getStyles);
const onRunQuery = async () => {
const queriesToRun = query.queries;
const differentDataSource = query.datasourceUid !== datasourceInstance?.uid;
const queriesToRun = queryHistoryItem.queries;
const differentDataSource = queryHistoryItem.datasourceUid !== datasourceInstance?.uid;
if (differentDataSource) {
await changeDatasource(exploreId, query.datasourceUid);
await changeDatasource(exploreId, queryHistoryItem.datasourceUid);
}
setQueries(exploreId, queriesToRun);
@@ -198,19 +199,19 @@ export function RichHistoryCard(props: Props) {
};
const onCopyQuery = async () => {
const datasources = [...query.queries.map((q) => q.datasource?.type || 'unknown')];
const datasources = [...queryHistoryItem.queries.map((query) => query.datasource?.type || 'unknown')];
reportInteraction('grafana_explore_query_history_copy_query', {
datasources,
mixed: Boolean(value?.dsInstance?.meta.mixed),
mixed: Boolean(historyCardData?.datasourceInstance?.meta.mixed),
});
if (loading || !value) {
if (loading || !historyCardData) {
return;
}
const queriesText = value.queries
.map((q) => {
return createQueryText(q.query, q.datasource);
const queriesText = historyCardData.queries
.map((query) => {
return createQueryText(query.query, query.datasource);
})
.join('\n');
@@ -223,7 +224,7 @@ export function RichHistoryCard(props: Props) {
};
const onCreateShortLink = async () => {
const link = createUrlFromRichHistory(query);
const link = createUrlFromRichHistory(queryHistoryItem);
await createAndCopyShortLink(link);
};
@@ -239,7 +240,7 @@ export function RichHistoryCard(props: Props) {
};
// For starred queries, we want confirmation. For non-starred, we don't.
if (query.starred) {
if (queryHistoryItem.starred) {
getAppEvents().publish(
new ShowConfirmModalEvent({
title: t('explore.rich-history-card.delete-query-confirmation-title', 'Delete'),
@@ -249,26 +250,26 @@ export function RichHistoryCard(props: Props) {
),
yesText: t('explore.rich-history-card.confirm-delete', 'Delete'),
icon: 'trash-alt',
onConfirm: () => performDelete(query.id),
onConfirm: () => performDelete(queryHistoryItem.id),
})
);
} else {
performDelete(query.id);
performDelete(queryHistoryItem.id);
}
};
const onStarrQuery = () => {
starHistoryItem(query.id, !query.starred);
starHistoryItem(queryHistoryItem.id, !queryHistoryItem.starred);
reportInteraction('grafana_explore_query_history_starred', {
queryHistoryEnabled: config.queryHistoryEnabled,
newValue: !query.starred,
newValue: !queryHistoryItem.starred,
});
};
const toggleActiveUpdateComment = () => setActiveUpdateComment(!activeUpdateComment);
const onUpdateComment = () => {
commentHistoryItem(query.id, comment);
commentHistoryItem(queryHistoryItem.id, comment);
setActiveUpdateComment(false);
reportInteraction('grafana_explore_query_history_commented', {
queryHistoryEnabled: config.queryHistoryEnabled,
@@ -277,7 +278,7 @@ export function RichHistoryCard(props: Props) {
const onCancelUpdateComment = () => {
setActiveUpdateComment(false);
setComment(query.comment);
setComment(queryHistoryItem.comment);
};
const onKeyDown = (keyEvent: React.KeyboardEvent) => {
@@ -327,7 +328,7 @@ export function RichHistoryCard(props: Props) {
name="comment-alt"
onClick={toggleActiveUpdateComment}
tooltip={
query.comment?.length > 0
queryHistoryItem.comment?.length > 0
? t('explore.rich-history-card.edit-comment-tooltip', 'Edit comment')
: t('explore.rich-history-card.add-comment-tooltip', 'Add comment')
}
@@ -337,7 +338,7 @@ export function RichHistoryCard(props: Props) {
onClick={onCopyQuery}
tooltip={t('explore.rich-history-card.copy-query-tooltip', 'Copy query to clipboard')}
/>
{value?.dsInstance && (
{historyCardData?.datasourceInstance && (
<IconButton
name="share-alt"
onClick={onCreateShortLink}
@@ -355,11 +356,11 @@ export function RichHistoryCard(props: Props) {
onClick={onDeleteQuery}
/>
<IconButton
name={query.starred ? 'favorite' : 'star'}
iconType={query.starred ? 'mono' : 'default'}
name={queryHistoryItem.starred ? 'favorite' : 'star'}
iconType={queryHistoryItem.starred ? 'mono' : 'default'}
onClick={onStarrQuery}
tooltip={
query.starred
queryHistoryItem.starred
? t('explore.rich-history-card.unstar-query-tooltip', 'Unstar query')
: t('explore.rich-history-card.star-query-tooltip', 'Star query')
}
@@ -370,21 +371,21 @@ export function RichHistoryCard(props: Props) {
return (
<div className={styles.queryCard}>
<div className={styles.cardRow}>
<DatasourceInfo dsApi={value?.dsInstance} size="sm" />
<DatasourceInfo dsApi={historyCardData?.datasourceInstance} size="sm" />
{queryActionButtons}
</div>
<div className={cx(styles.cardRow)}>
<div className={styles.queryContainer}>
{value?.queries.map((q, i) => {
return <Query query={q} key={`${q}-${i}`} showDsInfo={value?.dsInstance?.meta.mixed} />;
{historyCardData?.queries.map((q, i) => {
return <Query query={q} key={`${q}-${i}`} showDsInfo={historyCardData?.datasourceInstance?.meta.mixed} />;
})}
{!activeUpdateComment && query.comment && (
{!activeUpdateComment && queryHistoryItem.comment && (
<div
aria-label={t('explore.rich-history-card.query-comment-label', 'Query comment')}
className={styles.comment}
>
{query.comment}
{queryHistoryItem.comment}
</div>
)}
{activeUpdateComment && updateComment}
@@ -394,9 +395,11 @@ export function RichHistoryCard(props: Props) {
<Button
variant="secondary"
onClick={onRunQuery}
disabled={!value?.dsInstance || value.queries.some((query) => !query.datasource)}
disabled={
!historyCardData?.datasourceInstance || historyCardData.queries.some((query) => !query.datasource)
}
>
{datasourceInstance?.uid === query.datasourceUid ? (
{datasourceInstance?.uid === queryHistoryItem.datasourceUid ? (
<Trans i18nKey="explore.rich-history-card.run-query-button">Run query</Trans>
) : (
<Trans i18nKey="explore.rich-history-card.switch-datasource-button">
public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
+1 -1
View File
@@ -262,7 +262,7 @@ export function RichHistoryQueriesTab(props: RichHistoryQueriesTabProps) {
</span>
</div>
{mappedQueriesToHeadings[heading].map((q) => {
return <RichHistoryCard query={q} key={q.id} exploreId={exploreId} />;
return <RichHistoryCard queryHistoryItem={q} key={q.id} exploreId={exploreId} />;
})}
</div>
);
public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
+1 -1
View File
@@ -166,7 +166,7 @@ export function RichHistoryStarredTab(props: RichHistoryStarredTabProps) {
)}
{!loading &&
queries.map((q) => {
return <RichHistoryCard query={q} key={q.id} exploreId={exploreId} />;
return <RichHistoryCard queryHistoryItem={q} key={q.id} exploreId={exploreId} />;
})}
{queries.length && queries.length !== totalQueries ? (
<div>