mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-24 01:18:23 +00:00
Tooltips for homepage actions
This commit is contained in:
parent
cf8fa8fa47
commit
7dc6fadd2b
2 changed files with 29 additions and 7 deletions
|
|
@ -5,6 +5,8 @@ import { Pagination, Header } from '@/_components';
|
||||||
import { Folders } from './Folders';
|
import { Folders } from './Folders';
|
||||||
import { AppMenu } from './AppMenu';
|
import { AppMenu } from './AppMenu';
|
||||||
import { BlankPage } from './BlankPage';
|
import { BlankPage } from './BlankPage';
|
||||||
|
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
|
||||||
|
import { renderTooltip } from '@/_helpers/appUtils';
|
||||||
|
|
||||||
class HomePage extends React.Component {
|
class HomePage extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
|
@ -81,6 +83,7 @@ class HomePage extends React.Component {
|
||||||
} = this.state;
|
} = this.state;
|
||||||
return (
|
return (
|
||||||
<div className="wrapper home-page">
|
<div className="wrapper home-page">
|
||||||
|
|
||||||
<Header
|
<Header
|
||||||
|
|
||||||
/>
|
/>
|
||||||
|
|
@ -155,18 +158,29 @@ class HomePage extends React.Component {
|
||||||
<small className="pt-2">created {app.created_at} ago by {app.user.first_name} {app.user.last_name} </small>
|
<small className="pt-2">created {app.created_at} ago by {app.user.first_name} {app.user.last_name} </small>
|
||||||
</td>
|
</td>
|
||||||
<td class="text-muted col-auto pt-4">
|
<td class="text-muted col-auto pt-4">
|
||||||
|
<Link
|
||||||
|
to={`/apps/${app.id}`}
|
||||||
|
>
|
||||||
|
<OverlayTrigger
|
||||||
|
placement="top"
|
||||||
|
overlay={(props) => renderTooltip({props, text: 'Open in app builder'})}
|
||||||
|
>
|
||||||
|
<span class="badge bg-green-lt">
|
||||||
|
Edit
|
||||||
|
</span>
|
||||||
|
</OverlayTrigger>
|
||||||
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to={`/applications/${app.id}`}
|
to={`/applications/${app.id}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
<span class="badge bg-blue-lt mx-2">launch</span>
|
<OverlayTrigger
|
||||||
</Link>
|
placement="top"
|
||||||
|
overlay={(props) => renderTooltip({props, text: 'Open in app viewer'})}
|
||||||
<Link
|
>
|
||||||
to={`/apps/${app.id}`}
|
<span class="badge bg-blue-lt mx-2">launch</span>
|
||||||
>
|
|
||||||
<span class="badge bg-green-lt">Edit</span>
|
|
||||||
|
|
||||||
|
</OverlayTrigger>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<AppMenu
|
<AppMenu
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
|
import React from 'react';
|
||||||
import { toast } from 'react-toastify';
|
import { toast } from 'react-toastify';
|
||||||
import { getDynamicVariables, resolveReferences } from '@/_helpers/utils';
|
import { getDynamicVariables, resolveReferences } from '@/_helpers/utils';
|
||||||
import { dataqueryService } from '@/_services';
|
import { dataqueryService } from '@/_services';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import Tooltip from 'react-bootstrap/Tooltip';
|
||||||
|
|
||||||
function setStateAsync(_ref, state) {
|
function setStateAsync(_ref, state) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
|
|
@ -340,3 +342,9 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined) {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function renderTooltip({props, text}) {
|
||||||
|
return <Tooltip id="button-tooltip" {...props}>
|
||||||
|
{text}
|
||||||
|
</Tooltip>
|
||||||
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue