mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-09-11 10:46:25 +03:00
CON-158-Swap to react icons in the common folder of oss codebase
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/4434 Co-authored-by: Nicolas Beaussart <7281023+beaussan@users.noreply.github.com> GitOrigin-RevId: 1b7b7beb30b6ee7f6a4960801a011c5deea620cc
This commit is contained in:
parent
2e81212c12
commit
dcb8f7a4c9
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { FaChevronRight } from 'react-icons/fa';
|
||||
/**
|
||||
* Accepts following props
|
||||
* `title, string || react-element `: Title of the collapsible toggle
|
||||
@ -79,7 +80,7 @@ class CollapsibleToggle extends React.Component<
|
||||
data-test={testId}
|
||||
>
|
||||
<span className="inline-block text-xs mr-sm">
|
||||
<i className={`fa fa-chevron-right ${isOpen && 'rotate-90'}`} />
|
||||
<FaChevronRight className={`${isOpen && 'rotate-90'}`} />
|
||||
</span>
|
||||
|
||||
<span className="inline-block">{getTitle()}</span>
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { FaExclamationCircle } from 'react-icons/fa';
|
||||
import TemplateEditor from './CustomEditors/TemplateEditor';
|
||||
import JsonEditor from './CustomEditors/JsonEditor';
|
||||
import AceEditor from '../AceEditor/BaseEditor';
|
||||
@ -110,7 +111,7 @@ const PayloadOptionsTransforms: React.FC<PayloadOptionsTransformsProps> = ({
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center text-gray-600 bg-gray-200 border border-gray-400 text-sm rounded p-sm">
|
||||
<i className="fa fa-exclamation-circle mr-sm" />
|
||||
<FaExclamationCircle className="mr-sm" />
|
||||
The request body is disabled. No request body will be sent with this
|
||||
action. Enable the request body to modify your request
|
||||
transformation.
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import AceEditor from 'react-ace';
|
||||
import { FaCompressAlt, FaExpandAlt } from 'react-icons/fa';
|
||||
|
||||
import 'brace/mode/markdown';
|
||||
import 'brace/theme/github';
|
||||
@ -122,20 +123,26 @@ const JsonInput = props => {
|
||||
|
||||
const editor = editorType === JSONKEY ? getJsonEditor() : getNormalEditor();
|
||||
|
||||
const toggleIcon = (
|
||||
<i
|
||||
key="icon_json_editor"
|
||||
className={
|
||||
'fa ' +
|
||||
styles.modeToggleButton +
|
||||
(editorType === JSONKEY ? ' fa-compress' : ' fa-expand')
|
||||
}
|
||||
onClick={() => updateState(toggleEditorType)}
|
||||
title={
|
||||
(editorType === JSONKEY ? 'Collapse' : 'Expand') + ' (Ctrl + Space)'
|
||||
}
|
||||
/>
|
||||
);
|
||||
const toggleIcon =
|
||||
editorType === JSONKEY ? (
|
||||
<FaCompressAlt
|
||||
key="icon_json_editor"
|
||||
className={styles.modeToggleButton}
|
||||
onClick={() => updateState(toggleEditorType)}
|
||||
title={
|
||||
(editorType === JSONKEY ? 'Collapse' : 'Expand') + ' (Ctrl + Space)'
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<FaExpandAlt
|
||||
key="icon_json_editor"
|
||||
className={styles.modeToggleButton}
|
||||
onClick={() => updateState(toggleEditorType)}
|
||||
title={
|
||||
(editorType === JSONKEY ? 'Collapse' : 'Expand') + ' (Ctrl + Space)'
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<span className="json_input_editor">
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import AceEditor from 'react-ace';
|
||||
import { FaCompressAlt, FaExpandAlt } from 'react-icons/fa';
|
||||
|
||||
import 'brace/mode/html';
|
||||
import 'brace/mode/markdown';
|
||||
@ -163,21 +164,28 @@ const TextInput = props => {
|
||||
// </span>
|
||||
// );
|
||||
|
||||
const cycleIcon = (
|
||||
<i
|
||||
key="icon_text_editor"
|
||||
className={
|
||||
'fa ' +
|
||||
styles.modeToggleButton +
|
||||
(editorType === MULTILINE_KEY ? ' fa-compress' : ' fa-expand')
|
||||
}
|
||||
onClick={() => updateState(cycleEditorType)}
|
||||
title={
|
||||
(editorType === MULTILINE_KEY ? 'Collapse' : 'Expand') +
|
||||
' (Ctrl + Space)'
|
||||
}
|
||||
/>
|
||||
);
|
||||
const cycleIcon =
|
||||
editorType === MULTILINE_KEY ? (
|
||||
<FaCompressAlt
|
||||
key="icon_text_editor"
|
||||
className={styles.modeToggleButton}
|
||||
onClick={() => updateState(cycleEditorType)}
|
||||
title={
|
||||
(editorType === MULTILINE_KEY ? 'Collapse' : 'Expand') +
|
||||
' (Ctrl + Space)'
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<FaExpandAlt
|
||||
key="icon_text_editor"
|
||||
className={styles.modeToggleButton}
|
||||
onClick={() => updateState(cycleEditorType)}
|
||||
title={
|
||||
(editorType === MULTILINE_KEY ? 'Collapse' : 'Expand') +
|
||||
' (Ctrl + Space)'
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<span className="text_input_editor">
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { FaEdit } from 'react-icons/fa';
|
||||
import styles from '../Common.scss';
|
||||
|
||||
class Heading extends React.Component {
|
||||
@ -52,7 +53,7 @@ class Heading extends React.Component {
|
||||
className={styles.editable_heading_action}
|
||||
data-test={`heading-edit-${property}`}
|
||||
>
|
||||
<i className="fa fa-edit" />
|
||||
<FaEdit />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
import { OrderBy } from '../utils/v1QueryUtils';
|
||||
|
||||
import styles from './FilterQuery.scss';
|
||||
@ -79,11 +80,7 @@ const Sorts: React.FC<Props> = props => {
|
||||
</div>
|
||||
<div className="text-center col-xs-1">
|
||||
{sorts.length === i + 1 ? null : (
|
||||
<i
|
||||
className="fa fa-times"
|
||||
onClick={removeSort}
|
||||
data-test={`clear-filter-${i}`}
|
||||
/>
|
||||
<FaTimes onClick={removeSort} data-test={`clear-filter-${i}`} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
import { ValueFilter, Operator } from './types';
|
||||
import { allOperators } from './utils';
|
||||
|
||||
@ -104,8 +105,7 @@ const Where: React.FC<Props> = props => {
|
||||
</div>
|
||||
<div className="text-center col-xs-1">
|
||||
{filters.length === i + 1 ? null : (
|
||||
<i
|
||||
className="fa fa-times"
|
||||
<FaTimes
|
||||
onClick={removeFilter}
|
||||
data-test={`clear-filter-${i}`}
|
||||
/>
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
import styles from './Headers.scss';
|
||||
import DropdownButton from '../DropdownButton/DropdownButton';
|
||||
import { addPlaceholderHeader } from './utils';
|
||||
@ -87,8 +88,8 @@ const Headers: React.FC<HeadersListProps> = ({
|
||||
/>
|
||||
</div>
|
||||
{i < headers.length - 1 ? (
|
||||
<i
|
||||
className={`${styles.fontAwosomeClose} fa-lg fa fa-times`}
|
||||
<FaTimes
|
||||
className={`${styles.fontAwosomeClose} fa-lg`}
|
||||
onClick={removeHeader}
|
||||
/>
|
||||
) : null}
|
||||
|
@ -1,10 +1,11 @@
|
||||
import React from 'react';
|
||||
import { FaCheck } from 'react-icons/fa';
|
||||
import styles from '../Common.scss';
|
||||
|
||||
const Check = ({ className = '', title = '' }) => {
|
||||
return (
|
||||
<i
|
||||
className={`fa fa-check ${styles.iconCheck} ${className}`}
|
||||
<FaCheck
|
||||
className={`${styles.iconCheck} ${className}`}
|
||||
aria-hidden="true"
|
||||
title={title}
|
||||
/>
|
||||
|
@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import { FaClock } from 'react-icons/fa';
|
||||
|
||||
const Clock = ({ className = '', title = '' }) => {
|
||||
return (
|
||||
<i
|
||||
className={`fa fa-clock-o ${className || ''}`}
|
||||
<FaClock
|
||||
className={`${className || ''}`}
|
||||
aria-hidden="true"
|
||||
title={title}
|
||||
/>
|
||||
|
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import { FaCopy } from 'react-icons/fa';
|
||||
|
||||
const Copy = ({ className = '' }) => {
|
||||
return <i className={`fa fa-copy ${className || ''}`} aria-hidden="true" />;
|
||||
return <FaCopy className={`${className || ''}`} aria-hidden="true" />;
|
||||
};
|
||||
|
||||
export default Copy;
|
||||
|
@ -1,10 +1,12 @@
|
||||
import React from 'react';
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
|
||||
import styles from '../Common.scss';
|
||||
|
||||
const Cross = ({ className = '', title = '' }) => {
|
||||
return (
|
||||
<i
|
||||
className={`fa fa-times ${styles.iconCross} ${className}`}
|
||||
<FaTimes
|
||||
className={` ${styles.iconCross} ${className}`}
|
||||
aria-hidden="true"
|
||||
title={title}
|
||||
/>
|
||||
|
@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import { FaExclamation } from 'react-icons/fa';
|
||||
|
||||
const Invalid = ({ className = '', title = '' }) => {
|
||||
return (
|
||||
<i
|
||||
className={`fa fa-exclamation ${className || ''}`}
|
||||
<FaExclamation
|
||||
className={`${className || ''}`}
|
||||
aria-hidden="true"
|
||||
title={title}
|
||||
/>
|
||||
|
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import { FaRedoAlt } from 'react-icons/fa';
|
||||
|
||||
const Reload = ({ className = '' }) => {
|
||||
return <i className={`fa fa-repeat ${className || ''}`} aria-hidden="true" />;
|
||||
return <FaRedoAlt className={` ${className || ''}`} aria-hidden="true" />;
|
||||
};
|
||||
|
||||
export default Reload;
|
||||
|
@ -1,17 +0,0 @@
|
||||
import React, { ComponentProps } from 'react';
|
||||
import styles from '../Common.scss';
|
||||
|
||||
interface RemoveIconProps extends ComponentProps<'i'> {}
|
||||
const RemoveIcon: React.FC<RemoveIconProps> = ({
|
||||
className = '',
|
||||
...props
|
||||
}) => (
|
||||
<i
|
||||
className={`${styles.fontAwosomeClose} fa-lg fa fa-times ${
|
||||
className || ''
|
||||
}`}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
export default RemoveIcon;
|
@ -1,4 +1,5 @@
|
||||
import React, { ReactElement } from 'react';
|
||||
import { FaAngleRight } from 'react-icons/fa';
|
||||
import { Link } from 'react-router';
|
||||
import styles from '../../TableCommon/Table.scss';
|
||||
|
||||
@ -22,11 +23,7 @@ const BreadCrumb: React.FC<Props> = ({ breadCrumbs }) => {
|
||||
const addArrow = () => (
|
||||
<React.Fragment key={i}>
|
||||
|
||||
<i
|
||||
key={`${b.title}-arrow`}
|
||||
className="fa fa-angle-right"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<FaAngleRight key={`${b.title}-arrow`} aria-hidden="true" />
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { ReactElement } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import styles from './LeftSubSidebar.scss';
|
||||
|
||||
@ -11,7 +11,7 @@ interface LeftSidebarSectionProps extends React.ComponentProps<'div'> {
|
||||
currentItem?: LeftSidebarItem;
|
||||
getServiceEntityLink: (s: string) => string;
|
||||
service: string;
|
||||
sidebarIcon?: string;
|
||||
sidebarIcon?: ReactElement;
|
||||
}
|
||||
|
||||
const LeftSidebarSection = ({
|
||||
@ -76,12 +76,7 @@ const LeftSidebarSection = ({
|
||||
data-test={`action-sidebar-links-${a.name}`}
|
||||
>
|
||||
<Link to={getServiceEntityLink(a.name)} data-test={a.name}>
|
||||
<i
|
||||
className={`${styles.tableIcon} fa ${
|
||||
sidebarIcon || 'fa-wrench'
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{sidebarIcon}
|
||||
{a.name}
|
||||
</Link>
|
||||
</li>
|
||||
|
@ -89,11 +89,11 @@
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
svg {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
padding-left: 8px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin: 10px 10px 10px 8px;
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { FaSearch } from 'react-icons/fa';
|
||||
|
||||
import Button from '../../Button/Button';
|
||||
import styles from './LeftSubSidebar.scss';
|
||||
@ -53,7 +54,7 @@ const LeftSubSidebar: React.FC<Props> = props => {
|
||||
<div
|
||||
className={`${styles.sidebarSearch} form-group col-xs-12 ${styles.padd_remove}`}
|
||||
>
|
||||
<i className="fa fa-search" aria-hidden="true" />
|
||||
<FaSearch aria-hidden="true" />
|
||||
{searchInput}
|
||||
</div>
|
||||
)}
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import React, { ReactElement, useMemo, useState } from 'react';
|
||||
|
||||
import { Link } from 'react-router';
|
||||
import { FaDatabase } from 'react-icons/fa';
|
||||
|
||||
import styles from './LeftSubSidebar.scss';
|
||||
|
||||
@ -9,7 +10,7 @@ type CollapsibleItemsProps = {
|
||||
currentItem?: { name: string; source: string };
|
||||
getServiceEntityLink: (v: string) => string;
|
||||
items: { name: string; source: string }[];
|
||||
icon: string;
|
||||
icon: ReactElement;
|
||||
};
|
||||
const CollapsibleItems: React.FC<CollapsibleItemsProps> = ({
|
||||
currentItem,
|
||||
@ -29,7 +30,7 @@ const CollapsibleItems: React.FC<CollapsibleItemsProps> = ({
|
||||
className={styles.padd_bottom_small}
|
||||
>
|
||||
<span className={`${styles.title} ${isOpen ? '' : styles.titleClosed}`}>
|
||||
<i className="fa fa-database" /> {source}
|
||||
<FaDatabase /> {source}
|
||||
</span>
|
||||
</div>
|
||||
{isOpen
|
||||
@ -44,7 +45,7 @@ const CollapsibleItems: React.FC<CollapsibleItemsProps> = ({
|
||||
data-test={`action-sidebar-links-${name}`}
|
||||
>
|
||||
<Link to={getServiceEntityLink(name)} data-test={name}>
|
||||
<i className={`fa ${icon || 'fa-wrench'}`} aria-hidden="true" />
|
||||
{icon}
|
||||
{name}
|
||||
</Link>
|
||||
</li>
|
||||
@ -59,7 +60,7 @@ type TreeViewProps = {
|
||||
items: { name: string; source: string }[];
|
||||
currentItem?: { name: string; source: string };
|
||||
getServiceEntityLink: (name: string) => string;
|
||||
icon: string;
|
||||
icon: ReactElement;
|
||||
};
|
||||
export const TreeView: React.FC<TreeViewProps> = ({
|
||||
items,
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
|
||||
import { generateHeaderSyms } from './HeaderReducer';
|
||||
import DropdownButton from '../../DropdownButton/DropdownButton';
|
||||
@ -187,8 +188,8 @@ class Header extends React.Component {
|
||||
/>
|
||||
*/}
|
||||
{i !== this.props.headers.length - 1 && !isDisabled ? (
|
||||
<i
|
||||
className={styles.fontAwosomeClose + ' fa-lg fa fa-times'}
|
||||
<FaTimes
|
||||
className={styles.fontAwosomeClose + ' h-lg w-lg'}
|
||||
onClick={this.deleteHeader.bind(this)}
|
||||
data-index-id={i}
|
||||
/>
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { FaSpinner } from 'react-icons/fa';
|
||||
import styles from './ReusableTabs.scss';
|
||||
|
||||
export type Tabs = Record<
|
||||
@ -50,7 +51,7 @@ const Tabs: React.FC<Props> = ({
|
||||
{tabName === t ? showCount : null}
|
||||
{tabName === t && showLoader ? (
|
||||
<span className={styles.loader_ml}>
|
||||
<i className="fa fa-spinner fa-spin" />
|
||||
<FaSpinner className="animate-spin" />
|
||||
</span>
|
||||
) : null}
|
||||
</Link>
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { FaExternalLinkAlt, FaDatabase } from 'react-icons/fa';
|
||||
|
||||
import YouTube from 'react-youtube';
|
||||
|
||||
@ -20,7 +21,6 @@ type PopupLinkProps = {
|
||||
oss: string;
|
||||
};
|
||||
internalLink?: string;
|
||||
icon?: string;
|
||||
videoId?: string;
|
||||
};
|
||||
|
||||
@ -30,7 +30,6 @@ const PopupLink = ({
|
||||
videoId,
|
||||
title,
|
||||
internalLink,
|
||||
icon,
|
||||
}: PopupLinkProps) => {
|
||||
if (videoId) {
|
||||
return (
|
||||
@ -62,7 +61,7 @@ const PopupLink = ({
|
||||
className={`${styles.link_container} ${styles.link}`}
|
||||
>
|
||||
<div className={styles.helper_circle}>
|
||||
<i className={`fa ${icon}`} />
|
||||
<FaDatabase />
|
||||
</div>
|
||||
{title}
|
||||
</Link>
|
||||
@ -76,8 +75,9 @@ const PopupLink = ({
|
||||
<span className={styles.link_num}>{index}</span>
|
||||
{title}
|
||||
<div className={styles.spacer} />
|
||||
<i
|
||||
className={`fa fa-external-link ${styles.link_icon} ${styles.muted}`}
|
||||
|
||||
<FaExternalLinkAlt
|
||||
className={`${styles.link_icon} ${styles.muted}`}
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
@ -88,7 +88,6 @@ const PopupLink = ({
|
||||
const connectDatabaseHelper = {
|
||||
title: ' Connect Your First Database',
|
||||
internalLink: '/data/manage',
|
||||
icon: 'fa-database',
|
||||
};
|
||||
|
||||
const onboardingList = [
|
||||
|
@ -1,28 +1,25 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
FaCheck,
|
||||
FaTimes,
|
||||
FaFilter,
|
||||
FaExclamationTriangle,
|
||||
} from 'react-icons/fa';
|
||||
import styles from './PermissionStyles.scss';
|
||||
|
||||
export const permissionsSymbols = {
|
||||
fullAccess: (
|
||||
<i
|
||||
className={`fa fa-check ${styles.permissionSymbolFA}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<FaCheck className={`${styles.permissionSymbolFA}`} aria-hidden="true" />
|
||||
),
|
||||
noAccess: (
|
||||
<i
|
||||
className={`fa fa-times ${styles.permissionSymbolNA}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<FaTimes className={`${styles.permissionSymbolNA}`} aria-hidden="true" />
|
||||
),
|
||||
partialAccess: (
|
||||
<i
|
||||
className={`fa fa-filter ${styles.permissionSymbolPA}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<FaFilter className={`${styles.permissionSymbolPA}`} aria-hidden="true" />
|
||||
),
|
||||
partialAccessWarning: (
|
||||
<i
|
||||
className={`fa fa-exclamation-triangle ${styles.permissionSymbolPAW}`}
|
||||
<FaExclamationTriangle
|
||||
className={`${styles.permissionSymbolPAW}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
),
|
||||
|
@ -1,18 +1,15 @@
|
||||
import React from 'react';
|
||||
import { FaCaretRight, FaCaretLeft } from 'react-icons/fa';
|
||||
|
||||
const defaultFoldIconComponent = ({ collapsed, name }) => {
|
||||
let icon;
|
||||
let title;
|
||||
|
||||
if (collapsed) {
|
||||
icon = 'fa-caret-right';
|
||||
title = name ? `Expand column "${name}"` : 'Expand column';
|
||||
} else {
|
||||
icon = 'fa-caret-left';
|
||||
title = 'Collapse column';
|
||||
return <FaCaretRight title={title} />;
|
||||
}
|
||||
|
||||
return <i className={'fa ' + icon} title={title} />;
|
||||
title = 'Collapse column';
|
||||
return <FaCaretLeft title={title} />;
|
||||
};
|
||||
|
||||
const defaultFoldButtonComponent = ({ header, collapsed, icon, onClick }) => {
|
||||
|
@ -1,4 +1,6 @@
|
||||
import React from 'react';
|
||||
import { FaCopy } from 'react-icons/fa';
|
||||
|
||||
import sqlFormatter from 'sql-formatter';
|
||||
import hljs from 'highlight.js';
|
||||
import PropTypes from 'prop-types';
|
||||
@ -131,8 +133,7 @@ class TextAreaWithCopy extends React.Component {
|
||||
>
|
||||
Copy
|
||||
</span>
|
||||
<i
|
||||
className={'fa fa-copy'}
|
||||
<FaCopy
|
||||
onClick={this.copyToClip.bind(this, id)}
|
||||
onMouseLeave={this.resetCopy.bind(this, id)}
|
||||
/>
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { FaInfoCircle } from 'react-icons/fa';
|
||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
||||
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
||||
import styles from './Tooltip.scss';
|
||||
@ -21,8 +22,8 @@ const ToolTip: React.FC<TooltipProps> = ({
|
||||
}) => (
|
||||
<OverlayTrigger placement={placement} overlay={tooltipGen(message)}>
|
||||
{children || (
|
||||
<i
|
||||
className={`fa fa-info-circle cursor-pointer ${styles.tooltipIcon} ${tooltipStyle}`}
|
||||
<FaInfoCircle
|
||||
className={`cursor-pointer ${styles.tooltipIcon} ${tooltipStyle}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
|
@ -1,5 +1,7 @@
|
||||
import React from 'react';
|
||||
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
||||
import { FaExclamationTriangle } from 'react-icons/fa';
|
||||
|
||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
||||
|
||||
import styles from './WarningSymbol.scss';
|
||||
@ -36,8 +38,8 @@ export const WarningIcon: React.FC<WarningIconProps> = ({
|
||||
customStyle = '',
|
||||
}) => {
|
||||
return (
|
||||
<i
|
||||
className={`fa fa-exclamation-triangle ${styles.warningSymbol} ${customStyle}`}
|
||||
<FaExclamationTriangle
|
||||
className={`${styles.warningSymbol} ${customStyle}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { FaCalendarAlt, FaTable, FaWrench } from 'react-icons/fa';
|
||||
import LeftSubSidebar from '../../Common/Layout/LeftSubSidebar/LeftSubSidebar';
|
||||
import getLeftSidebarSection from '../../Common/Layout/LeftSubSidebar/LeftSidebarSection';
|
||||
import { ScheduledTrigger, EventTrigger, EventKind } from './types';
|
||||
@ -11,6 +12,8 @@ import {
|
||||
} from '../../Common/utils/routesUtils';
|
||||
import { TreeView } from '../../Common/Layout/LeftSubSidebar/TreeView';
|
||||
|
||||
import styles from '../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss';
|
||||
|
||||
interface Props {
|
||||
triggers: ScheduledTrigger[] | EventTrigger[];
|
||||
currentTrigger?: ScheduledTrigger | EventTrigger;
|
||||
@ -23,11 +26,13 @@ const LeftSidebar: React.FC<Props> = props => {
|
||||
const getSidebarIcon = () => {
|
||||
switch (service) {
|
||||
case 'cron':
|
||||
return 'fa-calendar';
|
||||
return (
|
||||
<FaCalendarAlt aria-hidden="true" className={styles.tableIcon} />
|
||||
);
|
||||
case 'data':
|
||||
return 'fa-table';
|
||||
return <FaTable aria-hidden="true" className={styles.tableIcon} />;
|
||||
default:
|
||||
return 'fa-wrench';
|
||||
return <FaWrench aria-hidden="true" className={styles.tableIcon} />;
|
||||
}
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user