Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

App Header React migration #4245

Merged
merged 36 commits into from
Oct 19, 2019
Merged

App Header React migration #4245

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
f2f8db8
AppHeader React Migration
ranbena Oct 15, 2019
4bd3461
Fixed tests
ranbena Oct 15, 2019
91b3ab9
Fixed test
ranbena Oct 15, 2019
e55125f
Responsive layout
ranbena Oct 15, 2019
a3aa95b
Better url templating code
ranbena Oct 15, 2019
8b5ea0c
Merge branch 'master' into app-header
ranbena Oct 15, 2019
ad2f19c
Fixed header height
ranbena Oct 15, 2019
962c631
Fixed header height
ranbena Oct 15, 2019
b0c2894
Mobile version
ranbena Oct 15, 2019
536d0da
Removed remaining old files
ranbena Oct 15, 2019
9115e9a
Changed menu item hover bg color
ranbena Oct 15, 2019
2d25cd3
Fixed button click area
ranbena Oct 15, 2019
fc5a9f5
Caret rotate animation
ranbena Oct 15, 2019
66fc55a
Fixed comments from Gabriel
ranbena Oct 15, 2019
7b3fbf7
Fixed test
ranbena Oct 15, 2019
4508544
Darkened text color
ranbena Oct 15, 2019
a64dfe9
Style change for favorite dropdown
ranbena Oct 15, 2019
1c2904a
Alignment adjustments
ranbena Oct 16, 2019
426e0c1
Fixed hover colors
ranbena Oct 16, 2019
bedfa07
Merge branch 'master' into app-header
ranbena Oct 16, 2019
a50af02
Changed onClick to onMouseUp for “New Dashboard”
ranbena Oct 16, 2019
8f6d290
Removed navbar.less (bye bye ANGULAR_REMOVE_ME!)
ranbena Oct 16, 2019
35e1f5d
Added remaining permission conditions
ranbena Oct 16, 2019
2f749d2
Fixed .headless
ranbena Oct 16, 2019
853eca3
Touch up for “no faves” state
ranbena Oct 16, 2019
97bb08e
Last fixes before publish
ranbena Oct 16, 2019
c76a2c9
Renamed DropdownFavorites
ranbena Oct 16, 2019
ef77bef
Less jumpy item rendering
ranbena Oct 16, 2019
275c660
Swapped navigateTo for href
ranbena Oct 16, 2019
eec5e3e
Merge remote-tracking branch 'origin/master' into app-header
ranbena Oct 17, 2019
dca65c7
Improved layout responsiveness
ranbena Oct 17, 2019
fdd2f05
Update client/app/components/app-header/components/FavoritesDropdown.jsx
ranbena Oct 18, 2019
acce095
Update client/app/components/app-header/AppHeader.jsx
ranbena Oct 18, 2019
bf2306e
react2angular removed from HelpTrigger
ranbena Oct 18, 2019
82834b7
Renamed Desktop/Mobile, fixed substring syntax
ranbena Oct 18, 2019
816da58
Added cache bust to fetchItems
ranbena Oct 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions client/app/components/HelpTrigger.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@ export const TYPES = {
'/user-guide/alerts/custom-alert-notifications',
'Guide: Custom Alerts Notifications',
],
FAVORITES: [
'/user-guide/querying/favorites-tagging/#Favorites',
'Guide: Favorites',
],
};

export class HelpTrigger extends React.Component {
Expand Down
252 changes: 252 additions & 0 deletions client/app/components/app-header/AppHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
/* eslint-disable no-template-curly-in-string */

import React, { useRef } from 'react';
import { react2angular } from 'react2angular';

import Dropdown from 'antd/lib/dropdown';
import Button from 'antd/lib/button';
import Icon from 'antd/lib/icon';
import Menu from 'antd/lib/menu';
import Input from 'antd/lib/input';
import Tooltip from 'antd/lib/tooltip';

import DropdownFavorites from './components/FavoritesDropdown';
ranbena marked this conversation as resolved.
Show resolved Hide resolved
import { HelpTrigger } from '@/components/HelpTrigger';
import CreateDashboardDialog from '@/components/dashboards/CreateDashboardDialog';

import { currentUser, Auth, clientConfig } from '@/services/auth';
import { $location, $route } from '@/services/ng';
import navigateTo from '@/services/navigateTo';
import { Dashboard } from '@/services/dashboard';
import { Query } from '@/services/query';
import frontendVersion from '@/version.json';
import logoUrl from '@/assets/images/redash_icon_small.png';

import './AppHeader.less';

function onSearch(q) {
$location.path('/queries').search({ q });
$route.reload();
}

function Desktop() {
Copy link
Member

@gabrieldutra gabrieldutra Oct 16, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although implicit (and it's not a blocker for this) I would prefer naming those DesktopHeader and MobileHeader (or Navbar 🙂).

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 for this 🙂

return (
<div className="app-header" data-platform="desktop">
<div>
<Menu mode="horizontal" selectable={false}>
<Menu.Item key="dashboards" className="dropdown-menu-item">
<Button onClick={() => navigateTo('dashboards')}>
Dashboards
</Button>
<DropdownFavorites fetch={Dashboard.favorites} urlTemplate="dashboard/${slug}" />
</Menu.Item>
<Menu.Item key="queries" className="dropdown-menu-item">
<Button onClick={() => navigateTo('queries')}>
Queries
</Button>
<DropdownFavorites fetch={Query.favorites} urlTemplate="queries/${id}" />
</Menu.Item>
<Menu.Item key="alerts">
<Button onClick={() => navigateTo('alerts')}>
Alerts
</Button>
</Menu.Item>
</Menu>
<Dropdown
trigger={['click']}
overlay={(
<Menu>
{currentUser.hasPermission('create_query') && (
<Menu.Item key="new-query">
<a href="queries/new">New Query</a>
</Menu.Item>
)}
{currentUser.hasPermission('create_dashboard') && (
<Menu.Item key="new-dashboard">
<a className="clickable" onClick={CreateDashboardDialog.showModal}>New Dashboard</a>
</Menu.Item>
)}
<Menu.Item key="new-alert">
<a href="alerts/new">New Alert</a>
</Menu.Item>
</Menu>
)}
>
<Button type="primary" data-test="CreateButton">
Create <Icon type="down" />
</Button>
</Dropdown>
</div>
<div className="header-logo">
<a href={clientConfig.basePath}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<a href={clientConfig.basePath}>
<a href="./">

It annoys me that this depends on a backend config and it doesn't fit our Redash-preview case, for example... I wonder if the above works for Multi-org 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That actually works for multi-org!
Learned sth new today :)

<img src={logoUrl} alt="Redash" />
</a>
</div>
<div>
<Input.Search
className="searchbar"
placeholder="Search queries..."
data-test="AppHeaderSearch"
onSearch={onSearch}
/>
<Menu mode="horizontal" selectable={false}>
<Menu.Item key="help">
<HelpTrigger type="HOME" className="menu-item-button" />
</Menu.Item>
{currentUser.isAdmin && (
<Menu.Item key="settings">
<a href="data_sources" className="menu-item-button">
<i className="fa fa-sliders" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Considering the Help Trigger has a Tooltip on its own, wdyt about adding a Tooltip here as well? So will be a "standard" Icon Button behavior

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Also converted it to <Button> so it has the cool click animation.

</a>
</Menu.Item>
)}
<Menu.Item key="profile">
<Dropdown
overlayStyle={{ minWidth: 200 }}
placement="bottomRight"
trigger={['click']}
overlay={(
<Menu>
<Menu.Item key="profile">
<a href="users/me">Edit Profile</a>
</Menu.Item>
{currentUser.hasPermission('super_admin') && (
<Menu.Divider />
)}
{currentUser.isAdmin && (
<Menu.Item key="datasources">
<a href="data_sources">Data Sources</a>
</Menu.Item>
)}
{currentUser.hasPermission('list_users') && (
<Menu.Item key="groups">
<a href="groups">Groups</a>
</Menu.Item>
)}
{currentUser.hasPermission('list_users') && (
<Menu.Item key="users">
<a href="users">Users</a>
</Menu.Item>
)}
<Menu.Item key="snippets">
<a href="query_snippets">Query Snippets</a>
</Menu.Item>
{currentUser.hasPermission('list_users') && (
<Menu.Item key="destinations">
<a href="destinations">Alert Destinations</a>
</Menu.Item>
)}
{currentUser.hasPermission('super_admin') && (
<Menu.Divider />
)}
{currentUser.hasPermission('super_admin') && (
<Menu.Item key="status">
<a href="admin/status">System Status</a>
</Menu.Item>
)}
<Menu.Divider />
<Menu.Item key="logout" onClick={() => Auth.logout()}>Log out</Menu.Item>
<Menu.Divider />
<Menu.Item key="version" disabled>
Version: {clientConfig.version}
{frontendVersion !== clientConfig.version && (
<>{' '}({frontendVersion.substring(0, 8)})</>
ranbena marked this conversation as resolved.
Show resolved Hide resolved
)}
{clientConfig.newVersionAvailable && currentUser.hasPermission('super_admin') && (
<Tooltip title="Update Available" placement="rightTop">
{' '}
{/* eslint-disable-next-line react/jsx-no-target-blank */}
<a href="https://version.redash.io/" className="update-available" target="_blank" rel="noopener">
<i className="fa fa-arrow-circle-down" />
</a>
</Tooltip>
)}
</Menu.Item>
</Menu>
)}
>
<Button data-test="ProfileDropdown" className="profile-dropdown">
<img src={currentUser.profile_image_url} alt={currentUser.name} />
<span>{currentUser.name}</span>
<Icon type="down" />
</Button>
</Dropdown>
</Menu.Item>
</Menu>
</div>
</div>
);
}

function Mobile() {
const ref = useRef();

return (
<div className="app-header" data-platform="mobile" ref={ref}>
<div className="header-logo">
<a href={clientConfig.basePath}>
<img src={logoUrl} alt="Redash" />
</a>
</div>
<div>
<Dropdown
overlayStyle={{ minWidth: 200 }}
trigger={['click']}
getPopupContainer={() => ref.current}
overlay={(
<Menu mode="vertical" selectable={false}>
<Menu.Item key="dashboards">
<a href="dashboards">Dashboards</a>
</Menu.Item>
<Menu.Item key="queries">
<a href="queries">Queries</a>
</Menu.Item>
<Menu.Item key="alerts">
<a href="alerts">Alerts</a>
</Menu.Item>
<Menu.Item key="profile">
<a href="users/me">Edit Profile</a>
</Menu.Item>
<Menu.Divider />
{currentUser.isAdmin && (
<Menu.Item key="settings">
<a href="data_sources">Settings</a>
</Menu.Item>
)}
{currentUser.hasPermission('super_admin') && (
<Menu.Item key="status">
<a href="admin/status">System Status</a>
</Menu.Item>
)}
{currentUser.hasPermission('super_admin') && (
<Menu.Divider />
)}
<Menu.Item key="help">
{/* eslint-disable-next-line react/jsx-no-target-blank */}
<a href="https://redash.io/help" target="_blank" rel="noopener">Help</a>
</Menu.Item>
<Menu.Item key="logout" onClick={() => Auth.logout()}>Log out</Menu.Item>
</Menu>
)}
>
<Button><Icon type="menu" /></Button>
</Dropdown>
</div>
</div>
);
}

export function AppHeader() {
return (
<nav>
<Desktop />
<Mobile />
</nav>
);
}

export default function init(ngModule) {
ngModule.component('appHeader', react2angular(AppHeader));
}

init.init = true;
Loading