3.2.0 Some formatting (#125) (#127)

* Some formatting (#125)

* Upgrade dependencies

* Format source

Co-authored-by: Francisco Pérez Zamora <[email protected]>

* updated CHANGELOG.md
revert react to v16 because of react-diff-viewer
bump prism for npm audit
remove changelog-verify for npm audit

* cleanup

Co-authored-by: franpeza <[email protected]>
Co-authored-by: Francisco Pérez Zamora <[email protected]>

Author: tot-ra

.dockerignore

@@ -3,3 +3,4 @@
 */examples
 */test
 repository.json
+.deploy

.eslintrc

@@ -0,0 +1,52 @@
+{
+	"parser": "@babel/eslint-parser",
+	"extends": [
+		"eslint:recommended",
+		"pipedrive",
+		"plugin:prettier/recommended"
+	],
+	"env": {
+		"browser": true,
+		"jest": true
+	},
+	"overrides": [
+		{
+			"files": "**/*.{ts,tsx}",
+			"parser": "@typescript-eslint/parser",
+			"extends": [
+				"plugin:@typescript-eslint/recommended",
+				"plugin:react/recommended",
+				"plugin:react/jsx-runtime",
+				"pipedrive",
+				"plugin:prettier/recommended"
+			],
+			"env": {
+				"browser": true
+			},
+			"settings": {
+				"react": {
+					"version": "detect"
+				}
+			}
+		},
+		{
+			"files": "**/*.jsx",
+			"parser": "@babel/eslint-parser",
+			"extends": [
+				"eslint:recommended",
+				"plugin:react/recommended",
+				"plugin:react/jsx-runtime",
+				"pipedrive",
+				"plugin:prettier/recommended"
+			],
+			"settings": {
+				"react": {
+					"version": "detect"
+				}
+			},
+			"rules": {
+				"react/prop-types": "off"
+			}
+		}
+	]
+}

CHANGELOG.md

@@ -7,14 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.2.0] - 2022-05-05
+
+### Updated
+
+- `eslint` libraries were being listed as dependencies but not config was set. So an eslint config was added.
+- Same thing with `prettier`, it was listed as a dependency and executed on commit (not configured for ts files though) but some files were not formatted with it.
+- Some unused dependencies were removed from both `dependencies` and `devDependencies`.
+- Removed react-hot-loader because it was not proper configured. I have already a working version with [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) planned for a future PR.
+- Some libraries (mostly for the frontend part compilation) were upgrades in order to `improve` the generation of the bundle.
+- Some `general cleanup`: removed unused imports, unused declarations, etc.
+
 ## [3.1.0] - 2022-05-05
 
 ### Added
+
 - Added dependency to winston
 - Added an instance of logger in logger.ts and removed the logging functions
 - Replace every use of the previous logger functions with calls to the logger exposed from logger.ts
 
 ### Fixed
+
 - npm lock version 2
 - graphql & @apollo/federation version compatibility
 - mysql2 & knex version compatibility
@@ -232,7 +245,8 @@ DELETE /schema/:schemaId
 - Frontend app
 - Examples of gateway + 2 federated services
 
-[unreleased]: https://github.com/pipedrive/graphql-schema-registry/compare/v3.0.1...HEAD
+[unreleased]: https://github.com/pipedrive/graphql-schema-registry/compare/v3.2.0...HEAD
+[3.2.0]: https://github.com/pipedrive/graphql-schema-registry/compare/v3.1.0...v3.2.0
 [3.1.0]: https://github.com/pipedrive/graphql-schema-registry/compare/v3.0.1...v3.1.0
 [3.0.1]: https://github.com/pipedrive/graphql-schema-registry/compare/v3.0.0...v3.0.1
 [3.0.0]: https://github.com/pipedrive/graphql-schema-registry/compare/v2.2.4...v3.0.0

Dockerfile

@@ -8,7 +8,7 @@ WORKDIR /app
 USER nobody
 ADD package.json package-lock.json ./
 RUN npm install
-ADD webpack.config.cjs babel.config.cjs ./
+ADD webpack.config.js babel.config.js ./
 ADD client ./client
 RUN npm run build-frontend
 

Dockerfile.CI

@@ -7,7 +7,7 @@ WORKDIR /app
 USER nobody
 ADD git_src/package.json git_src/package-lock.json ./
 RUN npm install
-ADD git_src/webpack.config.cjs git_src/babel.config.cjs ./
+ADD git_src/webpack.config.js git_src/babel.config.js ./
 ADD git_src/client ./client
 RUN npm run build-frontend
 

README.md

@@ -26,7 +26,7 @@ Graphql schema storage as dockerized on-premise service for federated graphql ga
 (Pull requests are encouraged on these topics)
 
 - Usage tracking (to avoid breaking changes) - needs a separate docker sub-process in golang
-  - registered clients (based on headers, including apollo-* ones)
+  - registered clients (based on headers, including apollo-\* ones)
   - schema usage breakdown by multiple facets - property, day, query name, client name
   - fixed data retention
 - schema linting rules (camelCase, mandatory descriptions, too big objects, inconsistent pagination, dates not in DateTime...)

babel.config.cjs

@@ -0,0 +1,32 @@
+module.exports = (api) => {
+	// This caches the Babel config
+	api.cache.using(() => process.env.NODE_ENV);
+	return {
+		presets: [
+			[
+				'@babel/preset-env',
+				{
+					modules: 'auto',
+					useBuiltIns: 'usage',
+					corejs: '3',
+				},
+			],
+			[
+				'@babel/preset-react',
+				{ development: !api.env('production'), runtime: 'automatic' },
+			],
+		],
+		plugins: [
+			['babel-plugin-styled-components'],
+			['@babel/plugin-transform-runtime'],
+			[
+				'prismjs',
+				{
+					languages: ['graphql'],
+					theme: 'okaidia',
+					css: true,
+				},
+			],
+		],
+	};
+};

babel.config.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
 	ApolloClient,
 	InMemoryCache,

client/App.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Tabs, Box, Tab, Container, AppBar } from '@material-ui/core';
 import { HashRouter as Router, Route, Redirect } from 'react-router-dom';
-import { hot } from 'react-hot-loader';
 
 import TopMenu from './TopMenu';
 import TabPanel from './TabPanel';
@@ -54,4 +52,4 @@ const Main = () => {
 	);
 };
 
-export default hot(module)(Main);
+export default Main;

client/components/Main.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import usePrism from '../utils/usePrism';
 import { OverflowScroll } from './styled';
 

client/components/SourceCodeWithHighlight.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import CheckIcon from '@material-ui/icons/Check';
 import FilterNoneIcon from '@material-ui/icons/FilterNone';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

client/components/SourceCodeWithHighlightAndCopy.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 import { FlexCenter } from './styled';

client/components/SpinnerCenter.jsx

@@ -1,7 +1,4 @@
-import React from 'react';
-
 import PropTypes from 'prop-types';
-import { Box } from '@material-ui/core';
 
 function TabPanel(props) {
 	const { children, value, index, ...other } = props;

client/components/TabPanel.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Tabs from '@material-ui/core/Tabs';
 import { Link, useRouteMatch } from 'react-router-dom';
 

client/components/TopLevelTab.jsx

@@ -1,10 +1,9 @@
-import { AppBar, IconButton, Tab, Tabs, Toolbar } from '@material-ui/core';
-import React from 'react';
+import { AppBar, Tab, Tabs } from '@material-ui/core';
 import ReactLogo from './logo';
 import { useHistory } from 'react-router-dom';
 
-export default ({ UITabs, selectedTab, handleChange }) => {
-	let history = useHistory();
+export default function TopMenu({ UITabs, selectedTab, handleChange }) {
+	const history = useHistory();
 
 	return (
 		<AppBar
@@ -24,16 +23,16 @@ export default ({ UITabs, selectedTab, handleChange }) => {
 				onChange={handleChange}
 				aria-label="simple tabs example"
 			>
-				{/*<React.Fragment>*/}
+				{/* <React.Fragment>*/}
 				{UITabs.map((tab, i) => (
 					<Tab
 						key={i}
 						onClick={() => history.push(tab.href)}
 						label={tab.Title}
 					/>
 				))}
-				{/*</React.Fragment>*/}
+				{/* </React.Fragment>*/}
 			</Tabs>
 		</AppBar>
 	);
-};
+}

client/components/TopMenu.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function Logo() {
 	return (
 		<div>

client/components/logo.jsx

@@ -1,9 +1,6 @@
 // eslint-disable-next-line
 __webpack_public_path__ = '/assets/';
 
-import 'react-hot-loader';
-
-import React from 'react';
 import ReactDOM from 'react-dom';
 
 import App from './App';

client/entry-standalone.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { EntryPanel } from '../components/styled';
 import QueryName from './QueryName';

client/persisted-queries/PersistedQuery.jsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
 import { EntryName } from '../components/styled';
 
 import { DocumentQueryEntry } from './styled';
 
-const QueryName = ({ entry, revealed, onClick }) => {
+const QueryName = ({ entry, onClick }) => {
 	return (
 		<DocumentQueryEntry onClick={onClick}>
 			<div>

client/persisted-queries/QueryName.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useQuery } from '@apollo/client';
 import { PERSISTED_QUERIES_COUNT } from '../utils/queries';
 

client/persisted-queries/Tab.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useQuery } from '@apollo/client';
 
 import SpinnerCenter from '../components/SpinnerCenter';

client/persisted-queries/index.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { HashRouter as Router, Route } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 

client/schema/index.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
 
 const newStyles = {

client/schema/service-details/CodeDiff.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useMutation } from '@apollo/client';
 import { Button } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -8,19 +7,13 @@ import {
 	DEACTIVATE_SCHEMA_ENTRY,
 	ACTIVATE_SCHEMA_ENTRY,
 } from '../../utils/mutations';
-import { useParams } from 'react-router-dom';
 
 const DeactivateSchemaButton = ({ schema }) => {
-	const { serviceName } = useParams();
-	const [
-		deactivateSchema,
-		{ loading: deleting, error: deleteError },
-	] = useMutation(DEACTIVATE_SCHEMA_ENTRY);
+	const [deactivateSchema, { loading: deleting, error: deleteError }] =
+		useMutation(DEACTIVATE_SCHEMA_ENTRY);
 
-	const [
-		activateSchema,
-		{ loading: activating, error: activateError },
-	] = useMutation(ACTIVATE_SCHEMA_ENTRY);
+	const [activateSchema, { loading: activating, error: activateError }] =
+		useMutation(ACTIVATE_SCHEMA_ENTRY);
 
 	const deleteErrorMessage = deleteError ? deleteError.message : null;
 	const activateErrorMessage = activateError ? activateError.message : null;

client/schema/service-details/DeactivateSchemaButton.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Container, SelectServiceGuide } from '../styled';
 
 const Empty = () => {

client/schema/service-details/Empty.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useQuery } from '@apollo/client';
 
 import SpinnerCenter from '../../components/SpinnerCenter';

client/schema/service-details/ServiceSchemas.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
 	VersionChars,
 	VersionCharsPositive,

client/schema/service-details/VersionCharDelta.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Button, ButtonGroup, Tabs, Tab } from '@material-ui/core';
 import TabPanel from '../../components/TabPanel';
 
@@ -22,7 +22,7 @@ import CodeDiff from './CodeDiff';
 
 const VersionDetails = () => {
 	const [revealed, setRevealed] = useState(null);
-	const [value, setValue] = React.useState(0);
+	const [value, setValue] = useState(0);
 
 	const handleChange = (event, newValue) => {
 		setValue(newValue);

client/schema/service-details/VersionDetails.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { Link, useHistory, useParams } from 'react-router-dom';
-import { format, formatDistance } from 'date-fns';
+import { useHistory, useParams } from 'react-router-dom';
+import { formatDistance } from 'date-fns';
 
 import { EntryGrid } from '../../components/styled';
 import { FlexRow, VersionRow, VersionTag } from '../styled';
@@ -12,7 +11,7 @@ import VersionCharDelta from './VersionCharDelta';
 const VersionsList = ({ service }) => {
 	const { serviceName, schemaId } = useParams();
 	const selectedSchema = parseInt(schemaId, 10);
-	let history = useHistory();
+	const history = useHistory();
 
 	if (!service) {
 		return;