Add tune navigation to command palette
This commit is contained in:
parent
c458c24c91
commit
35be27e7ba
|
@ -144,7 +144,7 @@ const App = ({ ui, navigation }: { ui: UIState, navigation: NavigationState }) =
|
||||||
<Tune />
|
<Tune />
|
||||||
</ContentFor>
|
</ContentFor>
|
||||||
</Route>
|
</Route>
|
||||||
<Route path={Routes.TUNE_LOG} exact>
|
<Route path={Routes.TUNE_LOGS} exact>
|
||||||
<ContentFor marginLeft={margin}>
|
<ContentFor marginLeft={margin}>
|
||||||
<Log />
|
<Log />
|
||||||
</ContentFor>
|
</ContentFor>
|
||||||
|
|
|
@ -27,8 +27,14 @@ import {
|
||||||
LoginOutlined,
|
LoginOutlined,
|
||||||
UserAddOutlined,
|
UserAddOutlined,
|
||||||
LogoutOutlined,
|
LogoutOutlined,
|
||||||
|
InfoCircleOutlined,
|
||||||
|
FundOutlined,
|
||||||
|
SettingOutlined,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import { useHistory } from 'react-router';
|
import {
|
||||||
|
useHistory,
|
||||||
|
generatePath,
|
||||||
|
} from 'react-router';
|
||||||
import {
|
import {
|
||||||
Config as ConfigType,
|
Config as ConfigType,
|
||||||
Tune as TuneType,
|
Tune as TuneType,
|
||||||
|
@ -56,6 +62,23 @@ import Icon from './SideBar/Icon';
|
||||||
enum Sections {
|
enum Sections {
|
||||||
NAVIGATION = 'Navigation',
|
NAVIGATION = 'Navigation',
|
||||||
AUTH = 'Authentication',
|
AUTH = 'Authentication',
|
||||||
|
TUNE = 'Tune',
|
||||||
|
LOG = 'Log',
|
||||||
|
DIAGNOSE = 'Diagnose',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapStateToProps = (state: AppState) => ({
|
||||||
|
config: state.config,
|
||||||
|
tune: state.tune,
|
||||||
|
ui: state.ui,
|
||||||
|
navigation: state.navigation,
|
||||||
|
});
|
||||||
|
|
||||||
|
interface CommandPaletteProps {
|
||||||
|
config: ConfigType;
|
||||||
|
tune: TuneType;
|
||||||
|
navigation: NavigationState;
|
||||||
|
children?: ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
const searchStyle = {
|
const searchStyle = {
|
||||||
|
@ -202,19 +225,7 @@ const RenderResults = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapStateToProps = (state: AppState) => ({
|
const buildTuneUrl = (tuneId: string, route: string) => generatePath(route, { tuneId });
|
||||||
config: state.config,
|
|
||||||
tune: state.tune,
|
|
||||||
ui: state.ui,
|
|
||||||
navigation: state.navigation,
|
|
||||||
});
|
|
||||||
|
|
||||||
interface CommandPaletteProps {
|
|
||||||
config: ConfigType;
|
|
||||||
tune: TuneType;
|
|
||||||
navigation: NavigationState;
|
|
||||||
children?: ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ActionsProvider = (props: CommandPaletteProps) => {
|
const ActionsProvider = (props: CommandPaletteProps) => {
|
||||||
const { config, tune, navigation } = props;
|
const { config, tune, navigation } = props;
|
||||||
|
@ -222,7 +233,32 @@ const ActionsProvider = (props: CommandPaletteProps) => {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
|
|
||||||
const generateActions = useCallback((types: MenusType) => {
|
const generateActions = useCallback((types: MenusType) => {
|
||||||
const newActions: Action[] = [];
|
const newActions: Action[] = [
|
||||||
|
{
|
||||||
|
id: 'InfoAction',
|
||||||
|
section: Sections.TUNE,
|
||||||
|
name: 'Info',
|
||||||
|
subtitle: 'Basic information about this tune.',
|
||||||
|
icon: <InfoCircleOutlined />,
|
||||||
|
perform: () => history.push(buildTuneUrl(navigation.tuneId!, Routes.TUNE_ROOT)),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'LogsAction',
|
||||||
|
section: Sections.LOG,
|
||||||
|
name: 'Logs',
|
||||||
|
subtitle: 'Log viewer.',
|
||||||
|
icon: <FundOutlined />,
|
||||||
|
perform: () => history.push(buildTuneUrl(navigation.tuneId!, Routes.TUNE_LOGS)),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'DiagnoseAction',
|
||||||
|
section: Sections.DIAGNOSE,
|
||||||
|
name: 'Diagnose',
|
||||||
|
subtitle: 'Tooth and composite logs viewer.',
|
||||||
|
icon: <SettingOutlined />,
|
||||||
|
perform: () => history.push(buildTuneUrl(navigation.tuneId!, Routes.TUNE_DIAGNOSE)),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
Object.keys(types).forEach((menuName: string) => {
|
Object.keys(types).forEach((menuName: string) => {
|
||||||
if (SKIP_MENUS.includes(menuName)) {
|
if (SKIP_MENUS.includes(menuName)) {
|
||||||
|
|
|
@ -131,10 +131,10 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
|
||||||
{sm && 'Tune'}
|
{sm && 'Tune'}
|
||||||
</Space>
|
</Space>
|
||||||
</Radio.Button>
|
</Radio.Button>
|
||||||
<Radio.Button value={buildTuneUrl(Routes.TUNE_LOG)}>
|
<Radio.Button value={buildTuneUrl(Routes.TUNE_LOGS)}>
|
||||||
<Space>
|
<Space>
|
||||||
<FundOutlined />
|
<FundOutlined />
|
||||||
{sm && 'Log'}
|
{sm && 'Logs'}
|
||||||
</Space>
|
</Space>
|
||||||
</Radio.Button>
|
</Radio.Button>
|
||||||
<Radio.Button value={buildTuneUrl(Routes.TUNE_DIAGNOSE)}>
|
<Radio.Button value={buildTuneUrl(Routes.TUNE_DIAGNOSE)}>
|
||||||
|
|
|
@ -6,7 +6,7 @@ export enum Routes {
|
||||||
TUNE_TAB = '/t/:tuneId/:tab',
|
TUNE_TAB = '/t/:tuneId/:tab',
|
||||||
TUNE_TUNE = '/t/:tuneId/tune',
|
TUNE_TUNE = '/t/:tuneId/tune',
|
||||||
TUNE_DIALOG = '/t/:tuneId/tune/:category/:dialog',
|
TUNE_DIALOG = '/t/:tuneId/tune/:category/:dialog',
|
||||||
TUNE_LOG = '/t/:tuneId/log',
|
TUNE_LOGS = '/t/:tuneId/logs',
|
||||||
TUNE_DIAGNOSE = '/t/:tuneId/diagnose',
|
TUNE_DIAGNOSE = '/t/:tuneId/diagnose',
|
||||||
|
|
||||||
LOGIN = '/auth/login',
|
LOGIN = '/auth/login',
|
||||||
|
|
Loading…
Reference in New Issue