frontend: make styling consistent and remove dead code

frontend/package.json

@@ -8,8 +8,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "node_modules/.bin/eslint --ext js src",
-    "lint-fix": "node_modules/.bin/eslint --fix --ext js src"
+    "lint": "npx eslint --ext js src",
+    "lint-fix": "npx eslint --fix --ext js src"
   },
   "dependencies": {
     "@apollo/client": "^3.3.19",
@@ -64,13 +64,25 @@
   },
   "devDependencies": {
     "env-cmd": "^10.1.0",
-    "prettier": "^2.6.1"
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "2.8.7"
   },
   "eslintConfig": {
+    "plugins": [
+      "prettier"
+    ],
     "extends": [
       "react-app",
-      "react-app/jest"
-    ]
+      "react-app/jest",
+      "plugin:prettier/recommended"
+    ],
+    "rules": {
+      "no-unused-vars": "error",
+      "no-const-assign": "error",
+      "eqeqeq": "error",
+      "no-console": "warn"
+    }
   },
   "browserslist": {
     "production": [

frontend/src/api/DataPipeline/createDataPipelineEnvironment.js

@@ -5,7 +5,9 @@ const createDataPipelineEnvironment = ({ input }) => ({
     input
   },
   mutation: gql`
-    mutation createDataPipelineEnvironment($input: NewDataPipelineEnvironmentInput) {
+    mutation createDataPipelineEnvironment(
+      $input: NewDataPipelineEnvironmentInput
+    ) {
       createDataPipelineEnvironment(input: $input) {
         envPipelineUri
         environmentUri

frontend/src/api/DataPipeline/deleteDataPipelineEnvironment.js

@@ -5,12 +5,8 @@ const deleteDataPipelineEnvironment = ({ envPipelineUri }) => ({
     envPipelineUri
   },
   mutation: gql`
-    mutation deleteDataPipelineEnvironment(
-      $envPipelineUri: String!
-    ) {
-      deleteDataPipelineEnvironment(
-        envPipelineUri: $envPipelineUri
-      )
+    mutation deleteDataPipelineEnvironment($envPipelineUri: String!) {
+      deleteDataPipelineEnvironment(envPipelineUri: $envPipelineUri)
     }
   `
 });

frontend/src/api/DataPipeline/getDataPipelineEnvironment.js

@@ -7,7 +7,7 @@ const getDataPipelineEnvironment = (envPipelineUri) => ({
   query: gql`
     query getDataPipelineEnvironment($envPipelineUri: String!) {
       getDataPipelineEnvironment(envPipelineUri: $envPipelineUri) {
-        envPipelineUri       
+        envPipelineUri
         environmentUri
         environmentLabel
         pipelineUri

frontend/src/api/DataPipeline/updateDataPipelineEnvironment.js

@@ -5,7 +5,9 @@ const updateDataPipelineEnvironment = ({ input }) => ({
     input
   },
   mutation: gql`
-    mutation updateDataPipelineEnvironment($input: NewDataPipelineEnvironmentInput) {
+    mutation updateDataPipelineEnvironment(
+      $input: NewDataPipelineEnvironmentInput
+    ) {
       updateDataPipelineEnvironment(input: $input) {
         envPipelineUri
         environmentUri

frontend/src/api/Dataset/createDataset.js

@@ -1,7 +1,6 @@
 import { gql } from 'apollo-boost';
 
 const createDataset = (input) => {
-  console.log('rcv', input);
   return {
     variables: {
       input

frontend/src/api/Dataset/updateDataset.js

@@ -1,7 +1,6 @@
 import { gql } from 'apollo-boost';
 
 const updateDataset = ({ datasetUri, input }) => {
-  console.log('rcv', datasetUri, input);
   return {
     variables: {
       datasetUri,

frontend/src/api/DatasetTable/getSharedDatasetTables.js

@@ -7,10 +7,10 @@ const getSharedDatasetTables = ({ datasetUri, envUri }) => ({
   },
   query: gql`
     query GetSharedDatasetTables($datasetUri: String!, $envUri: String!) {
-        getSharedDatasetTables(datasetUri: $datasetUri, envUri: $envUri) {
-          tableUri
-          GlueTableName
-        }
+      getSharedDatasetTables(datasetUri: $datasetUri, envUri: $envUri) {
+        tableUri
+        GlueTableName
+      }
     }
   `
 });

frontend/src/api/Environment/addConsumptionRoleToEnvironment.js

@@ -5,7 +5,9 @@ const addConsumptionRoleToEnvironment = (input) => ({
     input
   },
   mutation: gql`
-    mutation addConsumptionRoleToEnvironment($input: AddConsumptionRoleToEnvironmentInput!) {
+    mutation addConsumptionRoleToEnvironment(
+      $input: AddConsumptionRoleToEnvironmentInput!
+    ) {
       addConsumptionRoleToEnvironment(input: $input) {
         consumptionRoleUri
         consumptionRoleName

frontend/src/api/Environment/listDataItemsSharedWithEnvGroup.js

@@ -1,6 +1,10 @@
 import { gql } from 'apollo-boost';
 
-const listDataItemsSharedWithEnvGroup = ({ filter, environmentUri, groupUri }) => ({
+const listDataItemsSharedWithEnvGroup = ({
+  filter,
+  environmentUri,
+  groupUri
+}) => ({
   variables: {
     environmentUri,
     groupUri,

frontend/src/api/Environment/removeConsumptionRole.js

@@ -1,6 +1,9 @@
 import { gql } from 'apollo-boost';
 
-const removeConsumptionRoleFromEnvironment = ({ environmentUri, consumptionRoleUri }) => ({
+const removeConsumptionRoleFromEnvironment = ({
+  environmentUri,
+  consumptionRoleUri
+}) => ({
   variables: {
     environmentUri,
     consumptionRoleUri

frontend/src/api/Groups/listCognitoGroups.js

@@ -5,12 +5,8 @@ const listCognitoGroups = ({ filter }) => ({
     filter
   },
   query: gql`
-    query listCognitoGroups (
-      $filter: CognitoGroupFilter
-    ) {
-      listCognitoGroups (
-        filter: $filter
-      ){
+    query listCognitoGroups($filter: CognitoGroupFilter) {
+      listCognitoGroups(filter: $filter) {
         groupName
       }
     }

frontend/src/api/Organization/listOrganizationUsers.js

@@ -1,7 +1,6 @@
 import { gql } from 'apollo-boost';
 
 const listOrganizationUsers = ({ filter, organizationUri }) => {
-  console.log('listOrganizationUsers');
   return {
     variables: {
       organizationUri,

frontend/src/api/ShareObject/addSharedItem.js

@@ -1,7 +1,6 @@
 import { gql } from 'apollo-boost';
 
 const addSharedItem = ({ shareUri, input }) => {
-  console.log('rcv', input);
   return {
     variables: {
       shareUri,

frontend/src/api/ShareObject/createShareObject.js

@@ -1,7 +1,6 @@
 import { gql } from 'apollo-boost';
 
 const createShareObject = ({ datasetUri, itemUri, itemType, input }) => {
-  console.log('rcv', input);
   return {
     variables: {
       datasetUri,

frontend/src/api/Tenant/createQuicksightDataSourceSet.js

@@ -1,11 +1,11 @@
 import { gql } from 'apollo-boost';
 
-const createQuicksightDataSourceSet = ({vpcConnectionId}) => ({
+const createQuicksightDataSourceSet = ({ vpcConnectionId }) => ({
   variables: {
     vpcConnectionId
   },
   mutation: gql`
-    mutation createQuicksightDataSourceSet ($vpcConnectionId: String!) {
+    mutation createQuicksightDataSourceSet($vpcConnectionId: String!) {
       createQuicksightDataSourceSet(vpcConnectionId: $vpcConnectionId)
     }
   `

frontend/src/api/Tenant/getPlatformAuthorSession.js

@@ -6,9 +6,7 @@ const getPlatformAuthorSession = (awsAccount) => ({
   },
   query: gql`
     query getPlatformAuthorSession($awsAccount: String) {
-      getPlatformAuthorSession(
-         awsAccount: $awsAccount
-      )
+      getPlatformAuthorSession(awsAccount: $awsAccount)
     }
   `
 });

frontend/src/api/Tenant/updateSSMParameter.js

@@ -1,12 +1,12 @@
 import { gql } from 'apollo-boost';
 
-const updateSSMParameter = ({name,value}) => ({
+const updateSSMParameter = ({ name, value }) => ({
   variables: {
     name,
     value
   },
   mutation: gql`
-    mutation updateSSMParameter ($name: String!, $value: String!) {
+    mutation updateSSMParameter($name: String!, $value: String!) {
       updateSSMParameter(name: $name, value: $value)
     }
   `

frontend/src/api/Worksheet/runAthenaSqlQuery.js

@@ -7,8 +7,16 @@ const runAthenaSqlQuery = ({ sqlQuery, environmentUri, worksheetUri }) => ({
     worksheetUri
   },
   query: gql`
-    query runAthenaSqlQuery($environmentUri: String!, $worksheetUri: String!, $sqlQuery: String!) {
-      runAthenaSqlQuery(environmentUri: $environmentUri, worksheetUri: $worksheetUri, sqlQuery: $sqlQuery) {
+    query runAthenaSqlQuery(
+      $environmentUri: String!
+      $worksheetUri: String!
+      $sqlQuery: String!
+    ) {
+      runAthenaSqlQuery(
+        environmentUri: $environmentUri
+        worksheetUri: $worksheetUri
+        sqlQuery: $sqlQuery
+      ) {
         rows {
           cells {
             columnName

frontend/src/components/ShareStatus.js

@@ -4,8 +4,25 @@ import Label from './Label';
 const ShareStatus = (props) => {
   const { status } = props;
   const setTagColor = () => {
-    if (['Approved', 'Share_Approved', 'Revoke_Approved', 'Share_Succeeded', 'Revoke_Succeeded'].includes(status)) return 'success';
-    if (['Rejected', 'Revoked', 'Share_Rejected', 'Share_Failed', 'Revoke_Failed'].includes(status))
+    if (
+      [
+        'Approved',
+        'Share_Approved',
+        'Revoke_Approved',
+        'Share_Succeeded',
+        'Revoke_Succeeded'
+      ].includes(status)
+    )
+      return 'success';
+    if (
+      [
+        'Rejected',
+        'Revoked',
+        'Share_Rejected',
+        'Share_Failed',
+        'Revoke_Failed'
+      ].includes(status)
+    )
       return 'error';
     if (['PendingApproval', 'Submitted'].includes(status)) return 'warning';
     return 'info';

frontend/src/components/popovers/NotificationsPopover.js

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useRef, useState} from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Avatar,
   Badge,
@@ -21,7 +21,6 @@ import markNotificationAsRead from '../../api/Notification/markAsRead';
 import BellIcon from '../../icons/Bell';
 import useClient from '../../hooks/useClient';
 import * as Defaults from '../defaults';
-import { PagedResponseDefault } from '../defaults';
 
 const NotificationsPopover = () => {
   const anchorRef = useRef(null);
@@ -47,50 +46,55 @@ const NotificationsPopover = () => {
       fetchItems({ unread: true });
     }
     setLoading(false);
-  },[client]);
-
-  const fetchItems = useCallback(async (notificationFilter) => {
-    setLoading(true);
-    let filter = Object.assign({}, Defaults.SelectListFilter, notificationFilter)
-    const response = await client.query(
-      listNotifications(filter)
-    );
-    if (!response.errors) {
-      setNotifications(response.data.listNotifications.nodes);
-    }
-    setLoading(false);
-  },[client]);
+  }, [client]);
 
+  const fetchItems = useCallback(
+    async (notificationFilter) => {
+      setLoading(true);
+      let filter = Object.assign(
+        {},
+        Defaults.SelectListFilter,
+        notificationFilter
+      );
+      const response = await client.query(listNotifications(filter));
+      if (!response.errors) {
+        setNotifications(response.data.listNotifications.nodes);
+      }
+      setLoading(false);
+    },
+    [client]
+  );
 
-  const markAsRead = useCallback(async (notificationUri) => {
-    const response = await client.mutate(
-      markNotificationAsRead(notificationUri)
-    );
-  },[client]);
+  const markAsRead = useCallback(
+    async (notificationUri) => {
+      await client.mutate(markNotificationAsRead(notificationUri));
+    },
+    [client]
+  );
 
   const handleRemoveNotification = (idx) => {
-    let notificiationUri = notifications[idx].notificationUri
+    let notificiationUri = notifications[idx].notificationUri;
     setNotifications((prevstate) => {
       const rows = [...prevstate];
       rows.splice(idx, 1);
       return rows;
     });
-    setCountInbox(countInbox - 1)
-    markAsRead(notificiationUri)
+    setCountInbox(countInbox - 1);
+    markAsRead(notificiationUri);
   };
 
   const clearNotifications = (idx) => {
-    let readNotifications = notifications
-    setNotifications([])
-    setCountInbox(0)
-    readNotifications.forEach(note => {
-      markAsRead(note.notificationUri)
+    let readNotifications = notifications;
+    setNotifications([]);
+    setCountInbox(0);
+    readNotifications.forEach((note) => {
+      markAsRead(note.notificationUri);
     });
   };
 
   useEffect(() => {
     if (client) {
-      getCountInbox()
+      getCountInbox();
     }
   }, [client]);
 
@@ -162,13 +166,13 @@ const NotificationsPopover = () => {
                         </Link>
                       }
                     />
-                  <IconButton
-                    onClick={() => {
-                      handleRemoveNotification(idx);
-                    }}
-                  >
-                    <DeleteOutlined fontSize="small" />
-                  </IconButton>
+                    <IconButton
+                      onClick={() => {
+                        handleRemoveNotification(idx);
+                      }}
+                    >
+                      <DeleteOutlined fontSize="small" />
+                    </IconButton>
                   </ListItem>
                 ))}
             </List>