hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-09-11 10:46:25 +03:00
Code Issues Projects Releases Wiki Activity

CON-158-Swap to react icons in the common folder of oss codebase

Browse Source 
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:
Varun Choudhary 2022-05-06 16:07:21 +05:30 committed by hasura-bot
parent 2e81212c12
commit dcb8f7a4c9
29 changed files with 134 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
console/src/components/Common/CollapsibleToggle/CollapsibleToggle.tsx
View File

@ -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>

3
console/src/components/Common/ConfigureTransformation/PayloadOptionsTransforms.tsx
View File

@ -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.

35
console/src/components/Common/CustomInputTypes/JsonInput.js
View File

@ -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">

38
console/src/components/Common/CustomInputTypes/TextInput.js
View File

@ -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">

3
console/src/components/Common/EditableHeading/EditableHeading.js
View File

@ -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>
);

7
console/src/components/Common/FilterQuery/Sorts.tsx
View File

@ -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>

4
console/src/components/Common/FilterQuery/Where.tsx
View File

@ -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}`}
/>

5
console/src/components/Common/Headers/Headers.tsx
View File

@ -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}

5
console/src/components/Common/Icons/Check.tsx
View File

@ -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}
/>

5
console/src/components/Common/Icons/Clock.tsx
View File

@ -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}
/>

3
console/src/components/Common/Icons/Copy.tsx
View File

@ -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;

6
console/src/components/Common/Icons/Cross.tsx
View File

@ -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}
/>

5
console/src/components/Common/Icons/Invalid.tsx
View File

@ -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}
/>

3
console/src/components/Common/Icons/Reload.tsx
View File

@ -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;

17
console/src/components/Common/Icons/Remove.tsx
View File

@ -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;

7
console/src/components/Common/Layout/BreadCrumb/BreadCrumb.tsx
View File

@ -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}>
&nbsp;
<i
key={`${b.title}-arrow`}
className="fa fa-angle-right"
aria-hidden="true"
/>
<FaAngleRight key={`${b.title}-arrow`} aria-hidden="true" />
&nbsp;
</React.Fragment>
);

11
console/src/components/Common/Layout/LeftSubSidebar/LeftSidebarSection.tsx
View File

@ -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>

8
console/src/components/Common/Layout/LeftSubSidebar/LeftSubSidebar.scss
View File

@ -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;
}

3
console/src/components/Common/Layout/LeftSubSidebar/LeftSubSidebar.tsx
View File

@ -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>
)}

11
console/src/components/Common/Layout/LeftSubSidebar/TreeView.tsx
View File

@ -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,

5
console/src/components/Common/Layout/ReusableHeader/Header.js
View File

@ -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}
/>

3
console/src/components/Common/Layout/ReusableTabs/ReusableTabs.tsx
View File

@ -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>

11
console/src/components/Common/Onboarding/index.tsx
View File

@ -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 = [

25
console/src/components/Common/Permissions/PermissionSymbols.tsx
View File

@ -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"
/>
),

11
console/src/components/Common/TableCommon/foldableTable/index.jsx
View File

@ -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 }) => {

5
console/src/components/Common/TextAreaWithCopy/TextAreaWithCopy.js
View File

@ -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)}
/>

5
console/src/components/Common/Tooltip/Tooltip.tsx
View File

@ -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"
/>
)}

6
console/src/components/Common/WarningSymbol/WarningSymbol.tsx
View File

@ -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"
/>
);

11
console/src/components/Services/Events/Sidebar.tsx
View File

@ -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} />;
}
};