hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-12-15 01:12:56 +03:00
Code Issues Projects Releases Wiki Activity

console: add tailwindcss for styles

Browse Source 
https://github.com/hasura/graphql-engine-mono/pull/2032

GitOrigin-RevId: d6552e990823acc3bdac829487e91ae931ac4345
This commit is contained in:
Nicolas Beaussart 2021-08-10 15:45:48 +02:00 committed by hasura-bot
parent a4b01b2756
commit a226d514af
68 changed files with 1895 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1609
console/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
console/package.json
View File

@ -15,7 +15,7 @@
"keywords": [],
"scripts": {
"start-dev": "node -r dotenv/config ./bin/server.js",
"watch-client": "node -r dotenv/config webpack/webpack-dev-server.js",
"watch-client": "TAILWIND_MODE=watch node -r dotenv/config webpack/webpack-dev-server.js",
"dev": "concurrently --kill-others \"npm run watch-client\" \"npm run start-dev\"",
"start-prod": "cross-env NODE_PATH=./src PORT=8080 NODE_ENV=production node ./bin/server.js",
"build": "cross-env NODE_OPTIONS=--max-old-space-size=3072 webpack --progress -p --colors --display-error-details --config webpack/prod.config.js",
@ -118,6 +118,7 @@
"@babel/preset-typescript": "7.13.0",
"@babel/register": "7.9.0",
"@babel/runtime": "7.14.8",
"@tailwindcss/forms": "^0.3.3",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@types/clean-webpack-plugin": "0.1.3",
@ -171,7 +172,7 @@
"@types/youtube-player": "^5.5.3",
"@typescript-eslint/eslint-plugin": "4.19.0",
"@typescript-eslint/parser": "4.19.0",
"autoprefixer": "9.7.6",
"autoprefixer": "^9.7.6",
"babel-eslint": "10.1.0",
"babel-loader": "8.0.6",
"babel-plugin-istanbul": "5.2.0",
@ -218,6 +219,8 @@
"node-sass": "4.14.1",
"nyc": "15.0.1",
"optimize-css-assets-webpack-plugin": "5.0.3",
"postcss": "8.3.6",
"postcss-loader": "4.2.0",
"prettier": "2.2.1",
"react-hot-loader": "4.12.21",
"redux-devtools": "3.5.0",
@ -227,6 +230,7 @@
"sass-loader": "7.3.1",
"source-map-loader": "0.2.4",
"style-loader": "0.20.3",
"tailwindcss": "2.2.7",
"terser-webpack-plugin": "4.2.3",
"ts-jest": "26.5.4",
"typescript": "4.2.3",

6
console/postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

1
console/src/client.js
View File

@ -10,6 +10,7 @@ import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import { useBasename } from 'history';
import './theme/tailwind.css';
import getRoutes from './routes';

2
console/src/components/Common/Permissions/TableRow.js
View File

@ -54,7 +54,7 @@ const TableRow = ({
<td key={-1} className={styles.bulkSelectCell}>
<input
onChange={bulkSection.onChange}
className={styles.cursorPointer}
className={`${styles.cursorPointer} legacy-input-fix`}
checked={bulkSection.checked}
data-role={bulkSection.role}
disabled={bulkSection.disableCheckbox}

4
console/src/components/Login/Login.tsx
View File

@ -97,12 +97,12 @@ const Login: React.FC<ConnectInjectedProps> = ({ dispatch }) => {
</Button>
</div>
<div className={styles.add_pad_left}>
<label className={`${styles.cursorPointer}`}>
<label className={`${styles.cursorPointer} flex items-center`}>
<input
type="checkbox"
checked={shouldPersist}
onChange={toggleShouldPersist}
className={`${styles.add_mar_right_small} ${styles.remove_margin_top} ${styles.cursorPointer}`}
className={`${styles.add_mar_right_small} ${styles.remove_margin_top} ${styles.cursorPointer} legacy-input-fix`}
/>
Remember in this browser
</label>

12
console/src/components/Services/Actions/Add/Add.js
View File

@ -132,7 +132,7 @@ const AddAction = ({
label={actionDefinitionInfo.label}
tooltip={actionDefinitionInfo.tooltip}
/>
<hr />
<hr className="my-lg" />
<GraphQLEditor
value={typesDefinitionSdl}
error={typesDefinitionError}
@ -143,7 +143,7 @@ const AddAction = ({
tooltip={typeDefinitionInfo.tooltip}
allowEmpty
/>
<hr />
<hr className="my-lg" />
<div className={actionStyles.comment_container_styles}>
<h2
className={`${styles.subheading_text} ${styles.add_mar_bottom_small}`}
@ -159,7 +159,7 @@ const AddAction = ({
className={`form-control ${styles.inputWidthLarge}`}
/>
</div>
<hr />
<hr className="my-lg" />
<HandlerEditor
value={handler}
onChange={handlerOnChange}
@ -168,7 +168,7 @@ const AddAction = ({
service="create-action"
disabled={readOnlyMode}
/>
<hr />
<hr className="my-lg" />
{actionType === 'query' ? null : (
<React.Fragment>
<KindEditor
@ -177,7 +177,7 @@ const AddAction = ({
className={styles.add_mar_bottom_mid}
disabled={readOnlyMode}
/>
<hr />
<hr className="my-lg" />
</React.Fragment>
)}
<HeadersConfEditor
@ -187,7 +187,7 @@ const AddAction = ({
setHeaders={setHeaders}
disabled={readOnlyMode}
/>
<hr />
<hr className="my-lg" />
<Button
color="yellow"
size="sm"

2
console/src/components/Services/Actions/Codegen/Codegen.js
View File

@ -189,7 +189,7 @@ const Codegen = ({ dispatch, allActions, allTypes, currentAction }) => {
dispatch={dispatch}
/>
</div>
<hr />
<hr className="my-lg" />
{getDerivationInfo()}
</div>
);

2
console/src/components/Services/Actions/Codegen/DerivedFrom.js
View File

@ -23,7 +23,7 @@ const DerivedFrom = ({ shouldDerive, parentMutation, toggleDerivation }) => {
<input
type="checkbox"
checked={shouldDerive}
className={`${styles.cursorPointer} ${styles.add_mar_right_mid}`}
className={`${styles.cursorPointer} ${styles.add_mar_right_mid} legacy-input-fix`}
/>
Generate code with delegation to the derived mutation
</label>

2
console/src/components/Services/Actions/Common/components/HeaderConfEditor.js
View File

@ -33,7 +33,7 @@ const HeaderConfEditor = ({
type="checkbox"
checked={forwardClientHeaders}
onChange={toggleForwardClientHeaders}
className={`${styles.add_mar_right_small} ${styles.cursorPointer}`}
className={`${styles.add_mar_right_small} ${styles.cursorPointer} legacy-input-fix`}
disabled={disabled}
/>
Forward client headers to webhook

4
console/src/components/Services/Actions/Common/components/KindEditor.js
View File

@ -36,7 +36,7 @@ const KindEditor = ({ value, onChange, className, disabled = false }) => {
type="radio"
checked={value === 'synchronous'}
readOnly
className={styles.add_mar_right_small}
className={`${styles.add_mar_right_small} legacy-input-fix`}
disabled={disabled}
/>
Synchronous
@ -49,7 +49,7 @@ const KindEditor = ({ value, onChange, className, disabled = false }) => {
type="radio"
readOnly
checked={value === 'asynchronous'}
className={styles.add_mar_right_small}
className={`legacy-input-fix ${styles.add_mar_right_small}`}
disabled={disabled}
/>
Asynchronous

4
console/src/components/Services/Actions/Landing/Main.js
View File

@ -25,7 +25,7 @@ class Landing extends React.Component {
description="Actions are custom queries or mutations that are resolved via HTTP handlers. Actions can be used to carry out complex data validations, data enrichment from external sources or execute just about any custom business logic."
knowMoreHref="https://hasura.io/docs/latest/graphql/core/actions/index.html"
/>
<hr className={styles.clear_fix} />
<hr className={`${styles.clear_fix} my-lg`} />
</div>
);
};
@ -64,7 +64,7 @@ class Landing extends React.Component {
</h2>
{getAddBtn()}
</div>
<hr />
<hr className="my-lg" />
{getIntroSection()}
</div>

12
console/src/components/Services/Actions/Modify/ActionEditor.js
View File

@ -124,7 +124,7 @@ const ActionEditor = ({
label={actionDefinitionInfo.label}
tooltip={actionDefinitionInfo.tooltip}
/>
<hr />
<hr className="my-lg" />
<GraphQLEditor
value={typesDefinitionSdl}
error={typesDefinitionError}
@ -135,7 +135,7 @@ const ActionEditor = ({
tooltip={typeDefinitionInfo.tooltip}
allowEmpty
/>
<hr />
<hr className="my-lg" />
<div className={actionStyles.comment_container_styles}>
<h2
className={`${styles.subheading_text} ${styles.add_mar_bottom_small}`}
@ -149,7 +149,7 @@ const ActionEditor = ({
onChange={updateActionComment}
/>
</div>
<hr />
<hr className="my-lg" />
<HandlerEditor
value={handler}
disabled={readOnlyMode}
@ -158,7 +158,7 @@ const ActionEditor = ({
className={styles.add_mar_bottom_mid}
service="create-action"
/>
<hr />
<hr className="my-lg" />
{actionType === 'query' ? null : (
<React.Fragment>
<KindEditor
@ -167,7 +167,7 @@ const ActionEditor = ({
className={styles.add_mar_bottom_mid}
disabled={readOnlyMode}
/>
<hr />
<hr className="my-lg" />
</React.Fragment>
)}
<HeaderConfEditor
@ -177,7 +177,7 @@ const ActionEditor = ({
setHeaders={setHeaders}
disabled={readOnlyMode}
/>
<hr />
<hr className="my-lg" />
<div className={styles.display_flex}>
{!readOnlyMode && (
<React.Fragment>

2
console/src/components/Services/Actions/Relationships/Main.js
View File

@ -43,7 +43,7 @@ const Relationships = ({
readOnlyMode={readOnlyMode}
dataSources={dataSources}
/>
<hr />
<hr className="my-lg" />
</div>
</div>
<div className={`${styles.fixed} hidden`}>{alert}</div>

2
console/src/components/Services/Actions/Types/Manage/Main.js
View File

@ -63,7 +63,7 @@ const Manage = ({ allTypes, dispatch, readOnlyMode, ...manageProps }) => {
readOnlyMode={readOnlyMode}
allowEmpty
/>
<hr />
<hr className="my-lg" />
<Button
onClick={onSave}
disabled={!allowSave}

2
console/src/components/Services/ApiExplorer/ApiRequest/ApiRequest.js
View File

@ -368,7 +368,7 @@ class ApiRequest extends Component {
<input
type="checkbox"
name="sponsored"
className={styles.common_checkbox + ' common_checkbox'}
className={`${styles.common_checkbox} legacy-input-fix common_checkbox`}
id={i + 1}
checked={header.isActive}
data-header-id={i}

1
console/src/components/Services/ApiExplorer/Rest/Create/MethodsInput.tsx
View File

@ -77,6 +77,7 @@ const MethodsInput: React.FC<MethodsInputProps> = ({
type="checkbox"
checked={inp.checked}
onChange={onClickCheckBox}
className="legacy-input-fix"
value={inp.label}
id={`rest-method-${inp.label}`}
/>

4
console/src/components/Services/ApiExplorer/Rest/Details.tsx
View File

@ -70,7 +70,7 @@ const DetailsComponent: React.FC<DetailsComponentProps> = ({
</Button>
</div>
<div className={styles.add_mar_top}>{endpointState.comment}</div>
<hr />
<hr className="my-lg" />
<div className={styles.rest_details_layout}>
<div className={styles.rest_details_left_content}>
<div>
@ -104,7 +104,7 @@ const DetailsComponent: React.FC<DetailsComponentProps> = ({
</span>
))}
</div>
<hr />
<hr className="my-lg" />
<div className={styles.gql_header_details}>
<h4
className={`${styles.subheading_text} ${styles.display_inline}`}

4
console/src/components/Services/ApiExplorer/Rest/Landing.tsx
View File

@ -25,7 +25,7 @@ const Landing = () => (
Create endpoints from GraphQL queries using{' '}
<Link to="/api/api-explorer">GraphiQL</Link>.
</div>
<hr />
<hr className="my-lg" />
<TopicDescription
title="What are REST endpoints?"
imgElement={<LandingImage />}
@ -33,7 +33,7 @@ const Landing = () => (
description={landingDescription}
knowMoreHref="https://hasura.io/docs/latest/graphql/core/api-reference/restified.html"
/>
<hr className={styles.clear_fix} />
<hr className={`${styles.clear_fix} my-lg`} />
</div>
);

4
console/src/components/Services/ApiExplorer/Rest/List.tsx
View File

@ -69,7 +69,7 @@ const ListComponent: React.FC<Props> = ({
)
</div>
</div>
<hr />
<hr className="my-lg" />
{restEndpoints.map(endpoint => (
<>
<div
@ -140,7 +140,7 @@ const ListComponent: React.FC<Props> = ({
</div>
</div>
</div>
<hr />
<hr className="my-lg" />
</>
))}
</div>

1
console/src/components/Services/ApiExplorer/Rest/LivePreview/Headers.tsx
View File

@ -56,6 +56,7 @@ const Headers: React.FC<HeaderComponentProps> = ({
value={header.key}
onChange={toggleActiveState(header.index)}
checked={header.isActive}
className="legacy-input-fix"
/>
</td>
<td>

2
console/src/components/Services/ApiExplorer/Rest/LivePreview/index.tsx
View File

@ -298,7 +298,7 @@ const LivePreview: React.FC<LivePreviewProps> = ({
</CollapsibleToggle>
</div>
<div className={styles.rest_preview_req_var_layout}>
<hr />
<hr className="my-lg" />
<Button
size="sm"
onClick={runQuery}

2
console/src/components/Services/ApiExplorer/Security/Introspection/IntrospectionForm.tsx
View File

@ -70,6 +70,7 @@ const IntrospectionForm: React.FC<
<div className="radio_input">
<input
type="radio"
className="legacy-input-fix"
id="enable_introspection"
checked={!formState.instrospectionIsDisabled}
onChange={onRadioChange(false)}
@ -80,6 +81,7 @@ const IntrospectionForm: React.FC<
<div className="radio_input">
<input
type="radio"
className="legacy-input-fix"
id="disable_introspection"
checked={!!formState.instrospectionIsDisabled}
onChange={onRadioChange(true)}

6
console/src/components/Services/ApiExplorer/Security/LimitsForm.tsx
View File

@ -90,6 +90,7 @@ export const LimitsForm: React.FC<LimitFormProps> = ({
<input
type="radio"
id={`enable_${limit}`}
className="legacy-input-fix"
checked={state === RoleState.enabled}
onChange={onRadioChange(limit, RoleState.enabled)}
/>
@ -101,6 +102,7 @@ export const LimitsForm: React.FC<LimitFormProps> = ({
<div className="radio_input">
<input
type="radio"
className="legacy-input-fix"
id={`disable_${limit}`}
checked={state === RoleState.disabled}
onChange={onRadioChange(limit, RoleState.disabled)}
@ -112,6 +114,7 @@ export const LimitsForm: React.FC<LimitFormProps> = ({
<div className="radio_input">
<input
type="radio"
className="legacy-input-fix"
id={`global_${limit}`}
checked={state === RoleState.global}
onChange={onRadioChange(limit, RoleState.global)}
@ -138,6 +141,7 @@ export const LimitsForm: React.FC<LimitFormProps> = ({
<input
type="checkbox"
id="additional_unique_param"
className="legacy-input-fix"
checked={addUniqueParams}
disabled={isDisabled}
onChange={() => setAddUniqueParams(pre => !pre)}
@ -149,6 +153,7 @@ export const LimitsForm: React.FC<LimitFormProps> = ({
<div className="radio_input">
<input
type="radio"
className="legacy-input-fix"
id="ip_address"
checked={
isGlobal
@ -163,6 +168,7 @@ export const LimitsForm: React.FC<LimitFormProps> = ({
<div className="radio_input">
<input
type="radio"
className="legacy-input-fix"
id="session_variable"
checked={
isGlobal

2
console/src/components/Services/ApiExplorer/Security/LimitsTable.tsx
View File

@ -63,6 +63,7 @@ const LimitsTable: React.FC<Props> = ({
<input
type="radio"
id="enable"
className="legacy-input-fix"
checked={!apiLimitsDisabled}
disabled={loading}
onChange={() => updateGlobalAPISetting(false)}
@ -73,6 +74,7 @@ const LimitsTable: React.FC<Props> = ({
<input
type="radio"
id="disable"
className="legacy-input-fix"
disabled={loading}
checked={apiLimitsDisabled}
onChange={() => updateGlobalAPISetting(true)}

2
console/src/components/Services/Data/Add/AddExistingTableView.js
View File

@ -81,7 +81,7 @@ class AddExistingTableView extends Component {
}}
data-test="existing-table"
/>
<hr />
<hr className="my-lg" />
<input
value="Add"
type="submit"

14
console/src/components/Services/Data/Add/AddTable.js
View File

@ -520,7 +520,7 @@ class AddTable extends Component {
className={`${styles.addCol} col-xs-12 ${styles.padd_left_remove}`}
>
<TableName onChange={this.onTableNameChange.bind(this)} />
<hr />
<hr className="my-lg" />
<TableColumns
uniqueKeys={uniqueKeys}
dataTypes={dataTypes}
@ -543,7 +543,7 @@ class AddTable extends Component {
/>
) : null}
<hr />
<hr className="my-lg" />
<h4 className={styles.subheading_text}>
Primary Key &nbsp; &nbsp;
<ToolTip message={primaryKeyDescription} />
@ -554,7 +554,7 @@ class AddTable extends Component {
setPk={setPk}
dispatch={dispatch}
/>
<hr />
<hr className="my-lg" />
<h4 className={styles.subheading_text}>
Foreign Keys &nbsp; &nbsp;
<ToolTip message={foreignKeyDescription} />
@ -570,7 +570,7 @@ class AddTable extends Component {
fkToggled={fkToggled}
schemaList={schemaList}
/>
<hr />
<hr className="my-lg" />
<h4 className={styles.subheading_text}>
Unique Keys &nbsp; &nbsp;
<ToolTip message={uniqueKeyDescription} />
@ -584,7 +584,7 @@ class AddTable extends Component {
dispatch={dispatch}
setUniqueKeys={setUniqueKeys}
/>
<hr />
<hr className="my-lg" />
<h4 className={styles.subheading_text}>
Check Constraints &nbsp; &nbsp;
<ToolTip message={checkConstraintsDescription} />
@ -593,9 +593,9 @@ class AddTable extends Component {
constraints={checkConstraints}
dispatch={dispatch}
/>
<hr />
<hr className="my-lg" />
<TableComment onChange={this.onTableCommentChange} />
<hr />
<hr className="my-lg" />
<Button
type="submit"
onClick={this.validateAndSubmit}

8
console/src/components/Services/Data/Add/TableColumn.js
View File

@ -132,9 +132,9 @@ const TableColumn = props => {
colDefaultFunctions={defaultFunctions}
/>
</span>
<label>
<label className="flex items-center">
<input
className={styles.inputCheckbox}
className={`${styles.inputCheckbox} legacy-input-fix`}
checked={column.nullable}
type="checkbox"
onChange={onColNullableChange.bind(undefined, i)}
@ -142,9 +142,9 @@ const TableColumn = props => {
/>
Nullable
</label>
<label>
<label className="flex items-center">
<input
className={styles.inputCheckbox}
className={`${styles.inputCheckbox} legacy-input-fix`}
checked={isColumnUnique}
type="checkbox"
onChange={onColUniqueChange.bind(

2
console/src/components/Services/Data/Common/Components/ForeignKeySelector.js
View File

@ -293,7 +293,7 @@ const ForeignKeySelector = ({
checked={selected === va}
onChange={onCheck}
data-test={`foreign-key-${index}-${action}-${va}`}
className={styles.add_mar_right_small}
className={`legacy-input-fix ${styles.add_mar_right_small}`}
title={inputTitle}
disabled={disabled}
/>

3
console/src/components/Services/Data/Common/Components/TableRow.tsx
View File

@ -126,6 +126,7 @@ export const TableRow: React.FC<TableRowProps> = ({
<label className={`${styles.radioLabel} radio-inline`}>
<input
type="radio"
className="legacy-input-fix"
ref={node => {
setRef('insertRadioNode', node);
}}
@ -150,6 +151,7 @@ export const TableRow: React.FC<TableRowProps> = ({
<label className={`${styles.radioLabel} radio-inline`}>
<input
type="radio"
className="legacy-input-fix"
ref={node => {
setRef('nullNode', node);
}}
@ -163,6 +165,7 @@ export const TableRow: React.FC<TableRowProps> = ({
<label className={`${styles.radioLabel} radio-inline`}>
<input
type="radio"
className="legacy-input-fix"
ref={node => {
setRef('defaultNode', node);
}}

5
console/src/components/Services/Data/DataSources/ConnectDBForm.tsx
View File

@ -154,7 +154,7 @@ const ConnectDatabaseForm: React.FC<ConnectDatabaseFormProps> = ({
</>
) : null}
<p
className={`${styles.remove_pad_bottom} ${styles.connect_db_header}`}
className={`${styles.remove_pad_bottom} mb-md ${styles.connect_db_header}`}
>
{title ?? defaultTitle}
<Tooltip message="Environment variable recommended" />
@ -177,7 +177,7 @@ const ConnectDatabaseForm: React.FC<ConnectDatabaseFormProps> = ({
{connectionRadios.map(radioBtn => (
<label
key={`label-${radioBtn.title}`}
className={`${styles.connect_db_radio_label} ${
className={`${styles.connect_db_radio_label} inline-flex ${
!isDBSupported(connectionDBState.dbType, radioBtn.value)
? styles.label_disabled
: ''
@ -186,6 +186,7 @@ const ConnectDatabaseForm: React.FC<ConnectDatabaseFormProps> = ({
<input
type="radio"
value={radioBtn.value}
className="legacy-input-fix"
name={
!isreadreplica
? 'connection-type'

3
console/src/components/Services/Data/DataSources/ConnectionSettingsForm.tsx
View File

@ -204,10 +204,11 @@ const ConnectionSettingsForm: React.FC<ConnectionSettingsFormProps> = ({
<div
className={`${styles.add_mar_bottom_mid} ${styles.checkbox_margin_top}`}
>
<label>
<label className="inline-flex items-center">
<input
type="checkbox"
checked={connectionDBState.preparedStatements}
className="legacy-input-fix"
onChange={e => {
connectionDBStateDispatch({
type: 'UPDATE_PREPARED_STATEMENTS',

2
console/src/components/Services/Data/Function/Modify/SessionVarSection.tsx
View File

@ -46,7 +46,7 @@ const SessionVarSection: React.FC<SessionVarSectionProps> = ({
return (
<>
<hr />
<hr className="my-lg" />
<h4 className={styles.subheading_text}>
Session argument
<ToolTip message="the function argument into which hasura session variables will be passed" />

6
console/src/components/Services/Data/RawSQL/RawSQL.js
View File

@ -286,7 +286,7 @@ const RawSQL = ({
<label>
<input
checked={isCascadeChecked}
className={`${styles.add_mar_right_small} ${styles.cursorPointer}`}
className={`${styles.add_mar_right_small} ${styles.cursorPointer} legacy-input-fix`}
id="cascade-checkbox"
type="checkbox"
onChange={() => {
@ -321,7 +321,7 @@ const RawSQL = ({
<label>
<input
checked={isTableTrackChecked}
className={`${styles.add_mar_right_small} ${styles.cursorPointer}`}
className={`${styles.add_mar_right_small} ${styles.cursorPointer} legacy-input-fix`}
id="track-checkbox"
type="checkbox"
disabled={checkChangeLang()}
@ -363,7 +363,7 @@ const RawSQL = ({
<label>
<input
checked={isMigrationChecked}
className={styles.add_mar_right_small}
className={`${styles.add_mar_right_small} legacy-input-fix`}
id="migration-checkbox"
type="checkbox"
onChange={dispatchIsMigration}

4
console/src/components/Services/Data/Schema/ManageDatabase.tsx
View File

@ -286,7 +286,7 @@ const ManageDatabase: React.FC<ManageDatabaseProps> = ({
</div>
</div>
<div className={styles.manage_db_content}>
<hr />
<hr className="my-lg" />
<h3 className={styles.heading_text}>Connected Databases</h3>
<div className={styles.flexColumn}>
{dataSources.length ? (
@ -309,7 +309,7 @@ const ManageDatabase: React.FC<ManageDatabaseProps> = ({
</span>
)}
</div>
<hr />
<hr className="my-lg" />
</div>
</div>
</RightContainer>

6
console/src/components/Services/Data/Schema/Schema.js
View File

@ -671,9 +671,9 @@ class Schema extends Component {
</h2>
{getCreateBtn()}
</div>
<hr />
<hr className="my-lg" />
{getCurrentSchemaSection()}
<hr />
<hr className="my-lg" />
{getUntrackedTablesSection()}
{isFeatureSupported('tables.relationships.track') &&
getUntrackedRelationsSection()}
@ -682,7 +682,7 @@ class Schema extends Component {
)}
{isFeatureSupported('functions.nonTrackableFunctions.enabled') &&
getNonTrackableFunctionsSection()}
<hr />
<hr className="my-lg" />
</div>
</div>
</RightContainer>

4
console/src/components/Services/Data/Schema/TemplateGallery/TemplateGalleryTable.tsx
View File

@ -16,7 +16,7 @@ export const TemplateGalleryContentRow: React.VFC<{
return (
<tr key={template.key} className={styles.row_content}>
<td className={styles.td}>
<a onClick={openModal} className={styles.on_hover}>
<a onClick={openModal} className={`${styles.on_hover} text-secondary`}>
{template.title}
</a>
</td>
@ -61,7 +61,7 @@ export const TemplateGalleryBody: React.VFC<{ onModalOpen: modalOpenFn }> = ({
return (
<>
<h2
className={`${globalStyles.heading_text} ${styles.header_table_description}`}
className={`${globalStyles.heading_text} ${styles.header_table_description} mb-sm`}
>
Template Gallery
</h2>

8
console/src/components/Services/Data/SourceView.tsx
View File

@ -132,7 +132,7 @@ const SourceView: React.FC<Props> = props => {
]}
/>
</div>
<div className={styles.display_flex}>
<div className={`${styles.display_flex} mb-lg`}>
<h2
className={`${styles.headerText} ${styles.display_inline} ${styles.add_mar_right_mid}`}
>
@ -142,8 +142,8 @@ const SourceView: React.FC<Props> = props => {
</div>
</div>
<div>
<hr />
<div id="schema-list-view">
<hr className="my-lg" />
<div id="schema-list-view" className="space-y-sm my-lg ">
{schemaList.length ? (
schemaList.map((schema, key: number) => {
return (
@ -188,7 +188,7 @@ const SourceView: React.FC<Props> = props => {
<div>There are no schemas at the moment</div>
)}
</div>
<hr />
<hr className="my-lg" />
{isTemplateGalleryEnabled ? <TemplateGallery /> : null}
</div>
</div>

4
console/src/components/Services/Data/TableBrowseRows/ViewRows.js
View File

@ -150,7 +150,7 @@ const ViewRows = props => {
Header: (
<div className={styles.tableCenterContent}>
<input
className={`${styles.inputCheckbox} ${styles.headerInputCheckbox}`}
className={`${styles.inputCheckbox} ${styles.headerInputCheckbox} legacy-input-fix`}
checked={
curRows.length > 0 && selectedRows.length === curRows.length
}
@ -494,7 +494,7 @@ const ViewRows = props => {
newRow.tableRowSelectAction = (
<div className={styles.tableCenterContent}>
<input
className={styles.inputCheckbox}
className={`${styles.inputCheckbox} legacy-input-fix`}
type="checkbox"
disabled={_disableBulkSelect}
title={_disableBulkSelect ? NO_PRIMARY_KEY_MSG : ''}

2
console/src/components/Services/Data/TableInsertItem/MigrationCheckbox.tsx
View File

@ -22,7 +22,7 @@ const MigrationCheckbox = ({
checked={isChecked}
title="This is a migration"
onChange={onChange}
className={styles.migrationCheckbox}
className={`${styles.migrationCheckbox} legacy-input-fix`}
/>
This is a migration
<ToolTip

4
console/src/components/Services/Data/TableModify/ColumnCreator.js
View File

@ -209,7 +209,7 @@ const ColumnCreator = ({
<label className={styles.nullLabel}>
<input
type="checkbox"
className={`${styles.input} ${styles.nullable} input-sm form-control`}
className={`${styles.input} ${styles.nullable} input-sm form-control legacy-input-fix`}
data-test="nullable-checkbox"
{...colNull}
/>
@ -225,7 +225,7 @@ const ColumnCreator = ({
<label className={styles.nullLabel}>
<input
type="checkbox"
className={`${styles.input} ${styles.nullable} input-sm form-control`}
className={`${styles.input} ${styles.nullable} input-sm form-control legacy-input-fix`}
{...colUnique}
data-test="unique-checkbox"
/>

18
console/src/components/Services/Data/TableModify/ModifyTable.js
View File

@ -163,7 +163,7 @@ class ModifyTable extends React.Component {
toggleEnum={toggleEnum}
loading={tableEnum.loading}
/>
<hr />
<hr className="my-lg" />
</React.Fragment>
);
};
@ -240,14 +240,14 @@ class ModifyTable extends React.Component {
columnDefaultFunctions={columnDefaultFunctions}
postgresVersion={postgresVersion}
/>
<hr />
<hr className="my-lg" />
</>
)}
{isFeatureSupported('tables.modify.computedFields') && (
<>
<ConnectedComputedFields tableSchema={table} />
<hr />
<hr className="my-lg" />
</>
)}
@ -266,7 +266,7 @@ class ModifyTable extends React.Component {
dispatch={dispatch}
currentSchema={currentSchema}
/>
<hr />
<hr className="my-lg" />
</>
)}
@ -287,7 +287,7 @@ class ModifyTable extends React.Component {
!isFeatureSupported('tables.modify.foreignKeys.edit')
}
/>
<hr />
<hr className="my-lg" />
</>
)}
@ -308,7 +308,7 @@ class ModifyTable extends React.Component {
!isFeatureSupported('tables.modify.uniqueKeys.edit')
}
/>
<hr />
<hr className="my-lg" />
</>
)}
@ -319,7 +319,7 @@ class ModifyTable extends React.Component {
<NotSupportedNote unsupported={['mysql']} />
</div>
<TriggerEditorList tableSchema={table} dispatch={dispatch} />
<hr />
<hr className="my-lg" />
</>
)}
{isFeatureSupported('tables.modify.checkConstraints.view') && (
@ -339,7 +339,7 @@ class ModifyTable extends React.Component {
!isFeatureSupported('tables.modify.checkConstraints.edit')
}
/>
<hr />
<hr className="my-lg" />
</>
)}
{table.table_type === 'PARTITIONED TABLE' && (
@ -348,7 +348,7 @@ class ModifyTable extends React.Component {
{isFeatureSupported('tables.modify.customGqlRoot') && (
<>
<RootFields tableSchema={table} />
<hr />
<hr className="my-lg" />
</>
)}
{isFeatureSupported('tables.modify.setAsEnum') &&

8
console/src/components/Services/Data/TableModify/ModifyView.js
View File

@ -264,21 +264,21 @@ const ModifyView = props => {
sql={viewDefSql}
source={currentSource}
/>
<hr />
<hr className="my-lg" />
{getViewColumnsSection()}
<hr />
<hr className="my-lg" />
{isFeatureSupported('tables.modify.computedFields') && (
<>
<ComputedFields tableSchema={tableSchema} />
<hr />
<hr className="my-lg" />
</>
)}
{isFeatureSupported('tables.modify.customGqlRoot') && (
<>
<RootFields tableSchema={tableSchema} />
<hr />
<hr className="my-lg" />
</>
)}

2
console/src/components/Services/Data/TableModify/PartitionInfo.tsx
View File

@ -82,7 +82,7 @@ const PartitionInfo: React.FC<Props> = ({ table, dispatch }) => {
})}
</div>
))}
<hr />
<hr className="my-lg" />
</>
)}
</div>

8
console/src/components/Services/Data/TablePermissions/Permissions.js
View File

@ -671,7 +671,7 @@ class Permissions extends Component {
onClick={onClick}
disabled={disabled}
title={disabled ? noFilterPermissionMsg : ''}
className={styles.bottom5}
className={`legacy-input-fix ${styles.bottom5}`}
readOnly
/>
{label}
@ -868,7 +868,7 @@ class Permissions extends Component {
className={disabled ? styles.disabled : ''}
title={disabled ? noFilterPermissionMsg : ''}
>
<hr />
<hr className="my-lg" />
{addTooltip(
updateFilterTypeLabel[filterType],
getUpdateTooltip(filterType)
@ -951,6 +951,7 @@ class Permissions extends Component {
<label>
<input
type="checkbox"
className="legacy-input-fix"
checked={checked}
value={fieldName}
onChange={dispatchToggleField(fieldType)}
@ -1541,6 +1542,7 @@ class Permissions extends Component {
<input
type="checkbox"
checked={aggregationAllowed}
className="legacy-input-fix"
value="toggle_aggregation"
onChange={handleClick}
disabled={noPermissions}
@ -1687,7 +1689,7 @@ class Permissions extends Component {
clonePermissionsHtml = (
<div>
<hr />
<hr className="my-lg" />
<CollapsibleToggle
title={getSectionHeader('Clone permissions', cloneToolTip)}
useDefaultTitleStyle

2
console/src/components/Services/Data/TableRelationships/RemoteRelationships/components/ArgElement.tsx
View File

@ -35,7 +35,7 @@ const ArgElement: React.FC<Props> = ({
<input
checked={arg.isChecked}
type="checkbox"
className={`${styles.add_mar_right_small} ${styles.cursorPointer}`}
className={`${styles.add_mar_right_small} ${styles.cursorPointer} legacy-input-fix`}
/>
{arg.name}
</div>

2
console/src/components/Services/Data/TableRelationships/RemoteRelationships/components/FieldElement.tsx
View File

@ -37,7 +37,7 @@ const FieldElement: React.FC<Props> = ({ field, handleToggle }) => {
<input
checked={field.isChecked}
type="checkbox"
className={`${styles.add_mar_right_small} ${styles.cursorPointer}`}
className={`${styles.add_mar_right_small} ${styles.cursorPointer} legacy-input-fix`}
/>
{field.name}
</div>

2
console/src/components/Services/Events/AdhocEvents/Info/Info.tsx
View File

@ -41,7 +41,7 @@ const Info: React.FC = () => {
imgAlt={ADHOC_EVENTS_HEADING}
description={topicDescription}
/>
<hr className={styles.clear_fix} />
<hr className={`${styles.clear_fix} my-lg`} />
</div>
</div>
);

2
console/src/components/Services/Events/Common/Components/FormSection.tsx
View File

@ -24,7 +24,7 @@ const FormSection: React.FC<Props> = ({ children, id, tooltip, heading }) => {
)}
</h2>
{children}
<hr />
<hr className="my-lg" />
</div>
);
};

4
console/src/components/Services/Events/CronTriggers/Landing.tsx
View File

@ -46,7 +46,7 @@ const Landing: React.FC<Props> = props => {
Create
</Button>
</div>
<hr />
<hr className="my-lg" />
<div>
<TopicDescription
title="What are Cron Triggers?"
@ -54,7 +54,7 @@ const Landing: React.FC<Props> = props => {
imgAlt={CRON_TRIGGER}
description={topicDescription}
/>
<hr className={styles.clear_fix} />
<hr className={`${styles.clear_fix} my-lg`} />
</div>
</div>
</div>

18
console/src/components/Services/Events/EventTriggers/Add/Add.tsx
View File

@ -150,7 +150,7 @@ const Add: React.FC<Props> = props => {
type="checkbox"
checked={colEnabled}
onChange={handleToggleColumn}
className={styles.cursorPointer}
className={`${styles.cursorPointer} legacy-input-fix`}
/>
{colName}
{/* <small> ({colType})</small> TODO */}
@ -224,7 +224,7 @@ const Add: React.FC<Props> = props => {
onChange={handleTriggerNameChange}
maxLength={42}
/>
<hr />
<hr className="my-lg" />
<h4 className={styles.subheading_text}>
Database &nbsp; &nbsp;
<OverlayTrigger
@ -249,7 +249,7 @@ const Add: React.FC<Props> = props => {
</option>
))}
</select>
<hr />
<hr className="my-lg" />
<h4 className={styles.subheading_text}>
Schema/Table &nbsp; &nbsp;
<OverlayTrigger
@ -289,7 +289,7 @@ const Add: React.FC<Props> = props => {
);
})}
</select>
<hr />
<hr className="my-lg" />
<div
className={`${styles.add_mar_bottom} ${styles.selectOperations}`}
>
@ -312,7 +312,7 @@ const Add: React.FC<Props> = props => {
/>
</div>
</div>
<hr />
<hr className="my-lg" />
<div className={styles.add_mar_bottom}>
<h4 className={styles.subheading_text}>
Webhook URL &nbsp; &nbsp;
@ -354,7 +354,7 @@ const Add: React.FC<Props> = props => {
environments.
</small>
</div>
<hr />
<hr className="my-lg" />
<CollapsibleToggle
title={
<h4 className={styles.subheading_text}>Advanced Settings</h4>
@ -363,7 +363,7 @@ const Add: React.FC<Props> = props => {
>
<div>
{advancedColumnSection}
<hr />
<hr className="my-lg" />
<div className={styles.add_mar_top}>
<h4 className={styles.subheading_text}>Retry Logic</h4>
<RetryConfEditor
@ -371,14 +371,14 @@ const Add: React.FC<Props> = props => {
setRetryConf={setState.retryConf}
/>
</div>
<hr />
<hr className="my-lg" />
<div className={styles.add_mar_top}>
<h4 className={styles.subheading_text}>Headers</h4>
{headersList}
</div>
</div>
</CollapsibleToggle>
<hr />
<hr className="my-lg" />
{!readOnlyMode && (
<Button
type="submit"

2
console/src/components/Services/Events/EventTriggers/Common/Operations.tsx
View File

@ -60,7 +60,7 @@ const Operations = ({
<input
onChange={o.onChange}
data-test={o.testIdentifier}
className={`${styles.display_inline} ${styles.add_mar_right_small} ${styles.cursorPointer}`}
className={`${styles.display_inline} ${styles.add_mar_right_small} ${styles.cursorPointer} legacy-input-fix`}
type="checkbox"
name={o.name}
checked={o.isChecked}

4
console/src/components/Services/Events/EventTriggers/Landing/EventTrigger.tsx
View File

@ -38,7 +38,7 @@ insert_user(objects: [{name: "testuser"}] ){
description={`An ${EVENT_TRIGGER} atomically captures events (insert, update, delete) on a specified table and then reliably calls a HTTP webhook to run some custom business logic.`}
knowMoreHref="https://hasura.io/docs/latest/graphql/core/event-triggers/index.html"
/>
<hr className={styles.clear_fix} />
<hr className={`${styles.clear_fix} my-lg`} />
</div>
);
};
@ -84,7 +84,7 @@ insert_user(objects: [{name: "testuser"}] ){
</h2>
{getAddBtn()}
</div>
<hr />
<hr className="my-lg" />
{getIntroSection()}

2
console/src/components/Services/Events/EventTriggers/Modify/OperationEditor.tsx
View File

@ -93,7 +93,7 @@ const OperationEditor = (props: OperationEditorProps) => {
>
<input
type="checkbox"
className={`${styles.opsCheckboxDisabled} ${styles.cursorPointer}`}
className={`${styles.opsCheckboxDisabled} ${styles.cursorPointer} legacy-input-fix`}
checked={col.enabled}
disabled={readOnly}
readOnly

8
console/src/components/Services/RemoteSchema/Common/Common.js
View File

@ -143,7 +143,7 @@ class Common extends React.Component {
title="Special characters except '-' or '_' are not allowed"
/>
</label>
<hr />
<hr className="my-lg" />
<div className={styles.subheading_text}>
GraphQL server URL *
<OverlayTrigger placement="right" overlay={tooltips.graphqlurl}>
@ -192,7 +192,7 @@ class Common extends React.Component {
<label>
<input
onChange={this.toggleForwardHeaders.bind(this)}
className={styles.display_inline + ' ' + styles.add_mar_right}
className={`${styles.display_inline} ${styles.add_mar_right} legacy-input-fix`}
type="checkbox"
value="forwardHeaders"
data-test="forward-remote-schema-headers"
@ -229,9 +229,9 @@ class Common extends React.Component {
placeHolderText={this.getPlaceHolderText.bind(this)}
keyInputPlaceholder="header name"
/>
<hr />
<hr className="my-lg" />
{getTimeoutSection()}
<hr />
<hr className="my-lg" />
<div className={styles.subheading_text}>
Comment
<OverlayTrigger placement="right" overlay={tooltips.comment}>

2
console/src/components/Services/RemoteSchema/Edit/View.js
View File

@ -35,7 +35,7 @@ const RSHeadersDisplay = ({ data }) =>
: '<' + header.value + '>'}
</td>
</tr>,
index !== data.length - 1 ? <hr /> : null,
index !== data.length - 1 ? <hr className="my-lg" /> : null,
])}
</td>
</tr>

4
console/src/components/Services/RemoteSchema/Landing/RemoteSchema.js
View File

@ -50,7 +50,7 @@ class RemoteSchema extends React.Component {
</h2>
{getAddBtn()}
</div>
<hr />
<hr className="my-lg" />
<TopicDescription
title="What are Remote Schemas?"
@ -59,7 +59,7 @@ class RemoteSchema extends React.Component {
description="Remote schemas are external GraphQL services which can be merged with Hasura to provide a unified GraphQL API. Think of it like automated schema stitching. All you need to do is build a GraphQL service and then provide its HTTP endpoint to Hasura. Your GraphQL service can be written in any language or framework."
knowMoreHref="https://hasura.io/docs/latest/graphql/core/remote-schemas/index.html"
/>
<hr className={styles.clear_fix} />
<hr className={`${styles.clear_fix} my-lg`} />
<TryItOut
service="remoteSchema"

1
console/src/components/Services/RemoteSchema/Permissions/Tree.tsx
View File

@ -91,6 +91,7 @@ const Tree: React.FC<RSPTreeComponentProps> = ({
checked={i.checked}
data-test={`checkbox-${i.name}`}
onChange={onCheck(ix)}
className="legacy-input-fix"
/>
)}
{i.children && (

4
console/src/components/Services/Settings/AllowedQueries/AllowedQueries.tsx
View File

@ -26,9 +26,9 @@ const AllowedQueries: React.FC<Props> = props => {
<h2 className={styles.headerText}>Allow List</h2>
<div className={`${styles.add_mar_top} ${styles.wd60}`}>
<AllowedQueriesNotes />
<hr />
<hr className="my-lg" />
<AddAllowedQuery dispatch={dispatch} />
<hr />
<hr className="my-lg" />
<AllowedQueriesList
dispatch={dispatch}
allowedQueries={allowedQueries}

5
console/src/components/Services/Settings/InheritedRoles/InheritedRolesEditor.tsx
View File

@ -151,7 +151,7 @@ const InheritedRolesEditor: React.FC<EditorProps> = ({
)}
</div>
</div>
<hr />
<hr className="my-lg" />
<div className={styles.filterContainer}>
<TextInput
onChange={filterTextChange}
@ -180,6 +180,7 @@ const InheritedRolesEditor: React.FC<EditorProps> = ({
.map((option: Option, index) => (
<div key={index} className={styles.roleOption}>
<input
className="legacy-input-fix"
type="checkbox"
checked={option.isChecked}
onChange={checkboxValueChange}
@ -190,7 +191,7 @@ const InheritedRolesEditor: React.FC<EditorProps> = ({
</div>
))}
</div>
<hr />
<hr className="my-lg" />
<div>
<Button
color="yellow"

4
console/src/components/Services/Settings/MetadataOptions/ReloadMetadata.js
View File

@ -97,7 +97,7 @@ class ReloadMetadata extends Component {
onChange={this.toggleShouldReloadRemoteSchemas}
checked={shouldReloadRemoteSchemas}
readOnly
className={`${metaDataStyles.add_mar_right_small} ${metaDataStyles.cursorPointer}`}
className={`${metaDataStyles.add_mar_right_small} ${metaDataStyles.cursorPointer} legacy-input-fix`}
/>
Reload all remote schemas
</label>
@ -114,7 +114,7 @@ class ReloadMetadata extends Component {
onChange={this.toggleShouldReloadAllSources}
checked={shouldReloadAllSources}
readOnly
className={`${metaDataStyles.add_mar_right_small} ${metaDataStyles.cursorPointer}`}
className={`${metaDataStyles.add_mar_right_small} ${metaDataStyles.cursorPointer} legacy-input-fix`}
/>
Reload all databases
</label>

0
console/src/server.js Executable file → Normal file
View File

72
console/src/theme/tailwind.css Normal file
View File

@ -0,0 +1,72 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
* This is where we have **TEMPORARY** fixes while we migrate the codebase to tailwind
*/
/* Redefine bootstrap form control to take precedence over tailwind */
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0 0 0, 0.08);
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
/* reset some more bootstrap styles */
.radio-inline input[type="checkbox"],
.radio-inline input[type="radio"],
.form-group input[type="checkbox"],
.checkbox input[type="checkbox"],
.form-group input[type="radio"],
.radio input[type="radio"],
/* escape hatch if we need to add a reset on a input */
.legacy-input-fix,
/* .form-group select, */
/* Nullable + checkbox select in create table */
input[data-test^="nullable-"],
input[data-test^="unique-"],
/* Browse row checkbox */
input[type="checkbox"][data-test^="row-checkbox"],
input[type="checkbox"][data-test="select-all-rows"] {
appearance: revert;
height: unset;
width: unset;
}
select[data-test="qb-select"], select.form-control {
font-size: unset;
line-height: unset;
border-radius: 4px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
/* By default, tailwind reset everything to block, but this breaks most of our SVGs and images, so this fix it */
svg, img {
display: inline;
}
/* Add a blue color by default to all a without classes or with an empty class */
a:not([class]), a[class=""] {
color: #337ab7;
}
.dropdown button {
background-color: rgb(239, 239, 239);
}

50
console/tailwind.config.js Normal file
View File

@ -0,0 +1,50 @@
const colors = require('tailwindcss/colors');
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx,html}'],
darkMode: false, // or 'media' or 'class'
jit: true,
mode: 'jit',
theme: {
extend: {
colors: {
yellow: colors.amber,
primary: {
light: '#fad170',
DEFAULT: '#f9c548',
dark: '#d5ae52',
darker: '#ae8e3e',
},
cloud: {
DEFAULT: '#1eb4d4',
dark: '#197b98',
darker: '#074c4c',
},
secondary: {
light: '#eef4f7',
DEFAULT: '#297393',
dark: '#14394a',
},
legacybg: {
DEFAULT: '#f8fafb',
},
},
spacing: {
xs: '0.25rem',
sm: '0.5rem',
md: '1rem',
lg: '2rem',
input: '2.5rem',
btn: '2.5rem',
btnsm: '2rem',
},
fontSize: {
sm: ['0.875rem', { lineHeight: '1.25rem' }],
base: ['1rem', { lineHeight: '1.5rem' }],
lg: ['1.125rem', { lineHeight: '1.5rem' }],
xl: ['2.25rem', { lineHeight: '2.5rem' }],
},
},
},
plugins: [require('@tailwindcss/forms')],
};

62
console/webpack/bundle.config.js
View File

@ -6,10 +6,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const relativeAssetsPath = '../lib';
const assetsPath = path.join(__dirname, relativeAssetsPath);
const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(
require('./webpack-isomorphic-tools')
);
const commonConfig = require('./common.config');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
@ -79,18 +76,6 @@ module.exports = {
test: /\.flow$/,
loader: 'ignore-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
],
},
{
test: /\.scss$/,
use: [
@ -106,50 +91,7 @@ module.exports = {
'sass-loader?outputStyle=expanded&sourceMap=false&sourceMapContents=false',
],
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/font-woff' },
},
],
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/font-woff' },
},
],
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/octet-stream' },
},
],
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [{ loader: 'file-loader' }],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'image/svg+xml' },
},
],
},
{
test: webpackIsomorphicToolsPlugin.regular_expression('images'),
use: [{ loader: 'url-loader', options: { limit: 10240 } }],
},
...commonConfig.assetsRules,
],
},
resolve: {

68
console/webpack/common.config.js Normal file
View File

@ -0,0 +1,68 @@
module.exports = {
assetsRules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: true,
},
},
},
],
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/font-woff' },
},
],
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/font-woff' },
},
],
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/octet-stream' },
},
],
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [{ loader: 'file-loader' }],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'image/svg+xml' },
},
],
},
{
test: /\.(jpeg|jpg|png|gif)$/,
use: [{ loader: 'url-loader', options: { limit: 10240 } }],
},
],
};

66
console/webpack/dev.config.js
View File

@ -15,6 +15,7 @@ const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(
);
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const commonConfig = require('./common.config');
module.exports = {
mode: 'development',
@ -28,11 +29,7 @@ module.exports = {
},
entry: {
main: [
'webpack-hot-middleware/client?path=http://' +
host +
':' +
port +
'/__webpack_hmr',
`webpack-hot-middleware/client?path=http://${host}:${port}/__webpack_hmr`,
'bootstrap-loader?extractStyles',
'font-awesome-webpack!./src/theme/font-awesome.config.js',
'./src/client.js',
@ -42,7 +39,7 @@ module.exports = {
path: assetsPath,
filename: '[name]-[hash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + hasuraConfig.webpackPrefix,
publicPath: `http://${host}:${port}${hasuraConfig.webpackPrefix}`,
},
module: {
rules: [
@ -60,18 +57,6 @@ module.exports = {
test: /\.flow$/,
loader: 'ignore-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
],
},
{
test: /\.scss$/,
use: [
@ -88,50 +73,7 @@ module.exports = {
'sass-loader?outputStyle=expanded&sourceMap',
],
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/font-woff' },
},
],
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/font-woff' },
},
],
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/octet-stream' },
},
],
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [{ loader: 'file-loader' }],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'image/svg+xml' },
},
],
},
{
test: webpackIsomorphicToolsPlugin.regular_expression('images'),
use: [{ loader: 'url-loader', options: { limit: 10240 } }],
},
...commonConfig.assetsRules,
],
},
resolve: {

63
console/webpack/prod.config.js
View File

@ -8,14 +8,10 @@ const hasuraConfig = require('../hasuraconfig');
const relativeAssetsPath = '../static/dist';
const assetsPath = path.join(__dirname, relativeAssetsPath);
const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(
require('./webpack-isomorphic-tools')
);
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const commonConfig = require('./common.config');
const cleanOptions = {
root: process.cwd(),
@ -57,18 +53,6 @@ module.exports = {
test: /\.flow$/,
loader: 'ignore-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
],
},
{
test: /\.scss$/,
use: [
@ -84,50 +68,7 @@ module.exports = {
'sass-loader?outputStyle=expanded&sourceMap=false&sourceMapContents=false',
],
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/font-woff' },
},
],
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/font-woff' },
},
],
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'application/octet-stream' },
},
],
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [{ loader: 'file-loader' }],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: { limit: 10000, mimetype: 'image/svg+xml' },
},
],
},
{
test: webpackIsomorphicToolsPlugin.regular_expression('images'),
use: [{ loader: 'url-loader', options: { limit: 10240 } }],
},
...commonConfig.assetsRules,
],
},
resolve: {