diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 00000000..e8dd0702 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,15 @@ +name: Run Unit Tests and Lint Files +on: push + +jobs: + unit_test-lint: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@master + with: + node-version: 18.19 + - run: | + yarn + yarn run build + yarn run lint diff --git a/orval.config.js b/orval.config.js index 4826d2a2..a5898287 100644 --- a/orval.config.js +++ b/orval.config.js @@ -1,6 +1,6 @@ import { mockOntologies } from "./mock/data/mockOntologies"; import { mockOrganization, mockOrganizations } from "./mock/data/mockOrganizations"; -import { mockTerms, mockTerm } from "./mock/data/mockTerms"; +import { mockTerms } from "./mock/data/mockTerms"; import { mockSearch } from "./mock/data/mockSearch"; import { mockVariants, mockVariant } from "./mock/data/mockVariants"; import { mockVersions } from "./mock/data/mockVersions"; @@ -10,7 +10,7 @@ import { mockForks } from "./mock/data/mockForks"; import { mockPatchBulkTermsResponse, mockPatchTermResponse } from "./mock/data/mockPatchTermResponse"; import { mockDiscussions, mockPostMessage } from "./mock/data/mockDiscussions"; -module.exports = { +export default { uri: { input: { target: "https://uri.olympiangods.org/docs/swagger.json", diff --git a/src/App.jsx b/src/App.jsx index e0fca193..a274b1be 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,21 +7,22 @@ import { useLocation, } from "react-router-dom"; import theme from "./theme"; +import PropTypes from 'prop-types'; import Header from "./components/Header"; -import SearchResults from "./components/SearchResults"; -import SingleTermView from "./components/SingleTermView"; -import HomePage from "./components/HomePage"; import Footer from "./components/Footer"; -import Organizations from "./components/organizations"; -import CurieEditor from "./components/CurieEditor"; -import TermActivity from "./components/term_activity/TermActivity"; -import { GlobalDataProvider } from "./contexts/DataContext"; -import Dashboard from "./components/Dashboard"; import Login from "./components/Auth/Login"; +import HomePage from "./components/HomePage"; +import Dashboard from "./components/Dashboard"; import Register from "./components/Auth/Register"; -import ForgotPassword from "./components/Auth/ForgotPassword"; +import CurieEditor from "./components/CurieEditor"; +import SearchResults from "./components/SearchResults"; +import Organizations from "./components/organizations"; +import SingleTermView from "./components/SingleTermView"; +import { GlobalDataProvider } from "./contexts/DataContext"; import ResetPassword from "./components/Auth/ResetPassword"; +import ForgotPassword from "./components/Auth/ForgotPassword"; import SingleOrganization from "./components/SingleOrganization"; +import TermActivity from "./components/term_activity/TermActivity"; import OrganizationsCurieEditor from "./components/CurieEditor/OrganizationCurieEditor"; const PageContainer = ({ children }) => { @@ -31,6 +32,7 @@ const PageContainer = ({ children }) => { ); }; + function MainContent() { return ( ( width="46" height="46" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ( y2="104" gradientUnits="userSpaceOnUse" > - - + + @@ -975,9 +975,9 @@ export const StatusWarningBackgroundPattern = () => ( width="46" height="46" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ( y2="104" gradientUnits="userSpaceOnUse" > - - + + diff --git a/src/components/About/index.jsx b/src/components/About/index.jsx index 3bd6c539..a5dfb5ee 100644 --- a/src/components/About/index.jsx +++ b/src/components/About/index.jsx @@ -1,10 +1,23 @@ -import { Box, Container, Grid, List, ListItem, ListItemButton, ListItemText, Typography } from "@mui/material"; -import { vars } from "../../theme/variables"; -import { ForwardIcon } from "../../Icons"; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; import React from "react"; +import PropTypes from 'prop-types'; +import { + Box, + Container, + Grid, + List, + ListItem, + ListItemButton, + ListItemText, + Tab, + Tabs, + Typography +} from "@mui/material"; + + +import { ForwardIcon } from "../../Icons"; +import { vars } from "../../theme/variables"; import TabsData from "../../static/AboutTabs.json"; + const { gray50, gray700, gray500, brand700 } = vars; const style = { @@ -123,8 +136,8 @@ const About = () => { TabsData.tabs.map((tab, index) => ( )) - } - + } + { @@ -183,4 +196,10 @@ const About = () => { ) } -export default About; \ No newline at end of file +TabPanel.propTypes = { + children: PropTypes.node, + value: PropTypes.any.isRequired, + index: PropTypes.any.isRequired, +}; + +export default About; diff --git a/src/components/Auth/Login.jsx b/src/components/Auth/Login.jsx index 427560e9..5aeed8b9 100644 --- a/src/components/Auth/Login.jsx +++ b/src/components/Auth/Login.jsx @@ -40,7 +40,6 @@ const Login = () => { }; const handleOrcidSignIn = () => { - const originUrl = window.location.href; const orcidSignInUrl = `https://uri.olympiangods.org/u/ops/orcid-login`; window.location.href = orcidSignInUrl; }; diff --git a/src/components/Auth/ResetPassword.jsx b/src/components/Auth/ResetPassword.jsx index 5d04122d..5c3ffd4d 100644 --- a/src/components/Auth/ResetPassword.jsx +++ b/src/components/Auth/ResetPassword.jsx @@ -1,9 +1,8 @@ import * as React from "react"; -import { Box, Button, FormControl, Grid, Paper, Typography } from "@mui/material"; -import { ArrowBack } from "@mui/icons-material"; -import PasswordField from "./UI/PasswordField"; import { Link } from "react-router-dom"; -import { handleForgotPassword } from "../../api/endpoints/index"; +import PasswordField from "./UI/PasswordField"; +import { ArrowBack } from "@mui/icons-material"; +import { Box, Button, FormControl, Grid, Paper, Typography } from "@mui/material"; const ResetPassword = () => { const [password, setPassword] = React.useState(""); @@ -16,7 +15,8 @@ const ResetPassword = () => { } try { - await handleResetPassword(password); + // Call the reset password API + // await handleResetPassword(password); console.log("Password reset successful"); } catch (error) { console.error("Error:", error); @@ -61,4 +61,4 @@ const ResetPassword = () => { ); }; -export default ResetPassword; \ No newline at end of file +export default ResetPassword; diff --git a/src/components/Auth/UI/Formfield.jsx b/src/components/Auth/UI/Formfield.jsx index 71ed9f52..c729c06b 100644 --- a/src/components/Auth/UI/Formfield.jsx +++ b/src/components/Auth/UI/Formfield.jsx @@ -1,4 +1,3 @@ -import * as React from "react"; import PropTypes from "prop-types"; import { Grid, FormControl, Box, FormHelperText, OutlinedInput } from "@mui/material"; diff --git a/src/components/Auth/UI/PasswordField.jsx b/src/components/Auth/UI/PasswordField.jsx index 23d5e950..d6d02545 100644 --- a/src/components/Auth/UI/PasswordField.jsx +++ b/src/components/Auth/UI/PasswordField.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import { useState } from "react"; import PropTypes from "prop-types"; import { FormControl, diff --git a/src/components/CurieEditor/CurieEditorDialog.jsx b/src/components/CurieEditor/CurieEditorDialog.jsx index 0e67865c..ec857e2e 100644 --- a/src/components/CurieEditor/CurieEditorDialog.jsx +++ b/src/components/CurieEditor/CurieEditorDialog.jsx @@ -1,10 +1,10 @@ import * as React from "react"; +import PropTypes from 'prop-types'; +import { EditNoteIcon } from "../../Icons"; import { Box, Button } from "@mui/material"; +import StatusDialog from "../common/StatusDialog"; import CustomizedDialog from "../common/CustomizedDialog"; -import { EditNoteIcon } from "../../Icons"; import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; -import StatusDialog from "../common/StatusDialog"; - const HeaderRightSideContent = ({ handleClose, onSaveCuries }) => { return ( @@ -18,6 +18,7 @@ const HeaderRightSideContent = ({ handleClose, onSaveCuries }) => { ) } + const CurieEditorDialog = ({ open, handleClose, onSubmit, children, isFromOrganization }) => { const [openStatusDialog, setOpenStatusDialog] = React.useState(false); @@ -62,4 +63,17 @@ const CurieEditorDialog = ({ open, handleClose, onSubmit, children, isFromOrgani ) } -export default CurieEditorDialog; \ No newline at end of file +HeaderRightSideContent.propTypes = { + handleClose: PropTypes.func.isRequired, + onSaveCuries: PropTypes.func.isRequired, +}; + +CurieEditorDialog.propTypes = { + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + children: PropTypes.node.isRequired, + isFromOrganization: PropTypes.bool, +}; + +export default CurieEditorDialog; diff --git a/src/components/CurieEditor/CuriesTabPanel.jsx b/src/components/CurieEditor/CuriesTabPanel.jsx index 0dbebb87..77a20909 100644 --- a/src/components/CurieEditor/CuriesTabPanel.jsx +++ b/src/components/CurieEditor/CuriesTabPanel.jsx @@ -1,11 +1,12 @@ import * as React from "react"; -import { Box, TableRow, TableCell, IconButton, TextField, ClickAwayListener, CircularProgress } from "@mui/material"; +import PropTypes from 'prop-types'; import CustomTable from "../common/CustomTable"; import { getComparator, stableSort } from "../../utils"; -import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; import AddOutlinedIcon from '@mui/icons-material/AddOutlined'; -import { vars } from "../../theme/variables"; +import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; +import { Box, TableRow, TableCell, IconButton, TextField, ClickAwayListener, CircularProgress } from "@mui/material"; +import { vars } from "../../theme/variables"; const { gray600, brand500, gray100, gray300, gray700 } = vars; const headCells = [ @@ -65,7 +66,7 @@ const CuriesTabPanel = (props) => { React.useEffect(() => { onCurieAmountChange?.(rows.length) - }, [rows]) + }, [rows, onCurieAmountChange]); const handleExit = () => { setRowIndex(-1); @@ -167,4 +168,17 @@ const CuriesTabPanel = (props) => { ) } -export default CuriesTabPanel; \ No newline at end of file +CuriesTabPanel.propTypes = { + curieValue: PropTypes.string.isRequired, + error: PropTypes.bool, + loading: PropTypes.bool, + rows: PropTypes.array, + editMode: PropTypes.bool, + numberOfVisibleCuries: PropTypes.number, + onCurieAmountChange: PropTypes.func, + onAddRow: PropTypes.func, + onDeleteRow: PropTypes.func, + onChangeRow: PropTypes.func +} + +export default CuriesTabPanel; diff --git a/src/components/CurieEditor/OntologyTabPanel.jsx b/src/components/CurieEditor/OntologyTabPanel.jsx index bc5eb82d..cb265741 100644 --- a/src/components/CurieEditor/OntologyTabPanel.jsx +++ b/src/components/CurieEditor/OntologyTabPanel.jsx @@ -1,8 +1,7 @@ -import React from "react" import { Grid, Stack } from "@mui/material"; import CustomAutocompleteBox from "../common/CustomAutocompleteBox"; import FolderSharedOutlinedIcon from '@mui/icons-material/FolderSharedOutlined'; -import { getOrganizationOntologies } from "../../api/endpoints"; +// import { getOrganizationOntologies } from "../../api/endpoints"; const OntologyTabPanel = () => { @@ -24,4 +23,4 @@ const OntologyTabPanel = () => { ) } -export default OntologyTabPanel; \ No newline at end of file +export default OntologyTabPanel; diff --git a/src/components/CurieEditor/OrganizationCurieEditor.jsx b/src/components/CurieEditor/OrganizationCurieEditor.jsx index 5d7cf554..759c6f8d 100644 --- a/src/components/CurieEditor/OrganizationCurieEditor.jsx +++ b/src/components/CurieEditor/OrganizationCurieEditor.jsx @@ -1,16 +1,21 @@ -import React, { useState, useEffect, useMemo, useCallback } from "react"; -import { Box, Typography, Divider, Grid, Stack } from "@mui/material"; -import CustomButton from "../common/CustomButton"; +import { + useState, + useEffect, + useMemo, + useCallback +} from "react"; +import debounce from 'lodash/debounce'; +import { EditNoteIcon } from "../../Icons"; import BasicTabs from "../common/CustomTabs"; -import CurieEditorDialog from "./CurieEditorDialog"; import CuriesTabPanel from "./CuriesTabPanel"; -import { EditNoteIcon } from "../../Icons"; -import { vars } from "../../theme/variables"; -import CustomSingleSelect from "../common/CustomSingleSelect"; +import CustomButton from "../common/CustomButton"; import OntologyTabPanel from "./OntologyTabPanel"; +import CurieEditorDialog from "./CurieEditorDialog"; import { getOrganizationCuries } from "../../api/endpoints"; -import debounce from 'lodash/debounce'; +import CustomSingleSelect from "../common/CustomSingleSelect"; +import { Box, Typography, Divider, Grid, Stack } from "@mui/material"; +import { vars } from "../../theme/variables"; const { gray200, gray600, gray700 } = vars; const generatePageOptions = (curieAmount) => { @@ -20,11 +25,11 @@ const generatePageOptions = (curieAmount) => { }; const newRowObj = { prefix: '', namespace: '' }; - const curiesTabs = ["Organization", "Ontologies"]; const OrganizationsCurieEditor = () => { const [loading, setLoading] = useState(true); + // eslint-disable-next-line no-unused-vars const [error, setError] = useState(null); const [curies, setCuries] = useState([]); const [tabValue, setTabValue] = useState(0); @@ -42,8 +47,9 @@ const OrganizationsCurieEditor = () => { }).catch((error) => { console.log("Error ", error) }); - }, [getOrganizationCuries]); + }, [setCuries, setCurieAmount, setLoading]); + // eslint-disable-next-line no-unused-vars const handleAddNewCurieRow = (curieValue) => { setCuries(prev => [ ...prev, newRowObj @@ -62,6 +68,7 @@ const OrganizationsCurieEditor = () => { [] ); + // eslint-disable-next-line no-unused-vars const handleInputChangeCurieRow = (e, rowIndex, columnName, curieValue) => { console.log("UPDATE: here connect to update method") const updatedRows = curies.map((row, index) => index === rowIndex ? { ...row, [columnName]: e.target.value } : row); diff --git a/src/components/Dashboard/EditBulkTerms/DropDownConditions.jsx b/src/components/Dashboard/EditBulkTerms/DropDownConditions.jsx index cce5d55e..f0a1094d 100644 --- a/src/components/Dashboard/EditBulkTerms/DropDownConditions.jsx +++ b/src/components/Dashboard/EditBulkTerms/DropDownConditions.jsx @@ -1,29 +1,32 @@ -import { Box, ToggleButton, ToggleButtonGroup } from "@mui/material"; +import PropTypes from 'prop-types'; import { useState, useEffect } from "react"; -import { vars } from "../../../theme/variables"; import { FiberSmartIcon, JoinInnerIcon } from "../../../Icons"; -import SearchTermsData from "../../../static/SearchTermsData.json" import CustomSingleSelect from "../../common/CustomSingleSelect"; +import SearchTermsData from "../../../static/SearchTermsData.json" +import { Box, ToggleButton, ToggleButtonGroup } from "@mui/material"; + +import { vars } from "../../../theme/variables"; const { gray300 } = vars; + const DropDownConditions = ({ value, onChange, index, handleTermChange }) => { const [toggleButtonValue, setToggleButtonValue] = useState('object'); const [dropdownOptions, setDropdownOptions] = useState(SearchTermsData.objectOptions); - + useEffect(() => { setDropdownOptions(toggleButtonValue === 'object' ? SearchTermsData.objectOptions : SearchTermsData.annotationOptions); handleTermChange(index, 'relation', toggleButtonValue === 'object' ? SearchTermsData.objectOptions[0].value : SearchTermsData.annotationOptions[0].value); - }, [toggleButtonValue]); - + }, [toggleButtonValue, handleTermChange, index]); + const onConditionValueChange = (v) => { onChange(v); } - + const onToggleButtonChange = (event, newValue) => { if (newValue) { setToggleButtonValue(newValue); } }; - + return ( { ); }; +DropDownConditions.propTypes = { + value: PropTypes.string, + onChange: PropTypes.func, + index: PropTypes.number, + handleTermChange: PropTypes.func +}; + export default DropDownConditions; diff --git a/src/components/Dashboard/EditBulkTerms/EditBulkAttributesForm.jsx b/src/components/Dashboard/EditBulkTerms/EditBulkAttributesForm.jsx index d449dd8a..3cc81625 100644 --- a/src/components/Dashboard/EditBulkTerms/EditBulkAttributesForm.jsx +++ b/src/components/Dashboard/EditBulkTerms/EditBulkAttributesForm.jsx @@ -4,12 +4,13 @@ import { Typography, Box } from "@mui/material"; -import { vars } from "../../../theme/variables"; +import PropTypes from "prop-types"; import CustomizedInput from "../../common/CustomizedInput"; -import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; import CustomSingleSelect from "../../common/CustomSingleSelect"; +import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; +import { vars } from "../../../theme/variables"; const { gray800 } = vars; const EditBulkAttributesForm = ({columns, attributes, setAttributes, initialAttributesValue}) => { @@ -18,25 +19,25 @@ const EditBulkAttributesForm = ({columns, attributes, setAttributes, initialAttr newAttributes[index][field] = value; setAttributes(newAttributes); }; - + const handleDeletePredicate = (index) => { const newAttributes = attributes.filter((_, i) => i !== index); setAttributes(newAttributes); }; - + const handleAddPredicate = () => { setAttributes([...attributes, initialAttributesValue]); }; - + const handleClearAllPredicate = () => { setAttributes([initialAttributesValue]); }; - + const updatedColumnsArray = columns.map(item => ({ ...item, value: item.id })); - + return ( - ); } +EditBulkAttributesForm.propTypes = { + columns: PropTypes.array.isRequired, + attributes: PropTypes.array.isRequired, + setAttributes: PropTypes.func.isRequired, + initialAttributesValue: PropTypes.object.isRequired +}; + export default EditBulkAttributesForm; diff --git a/src/components/Dashboard/EditBulkTerms/EditBulkTermsDialog.jsx b/src/components/Dashboard/EditBulkTerms/EditBulkTermsDialog.jsx index 0b37d86c..47eeeb14 100644 --- a/src/components/Dashboard/EditBulkTerms/EditBulkTermsDialog.jsx +++ b/src/components/Dashboard/EditBulkTerms/EditBulkTermsDialog.jsx @@ -1,16 +1,16 @@ -import { Box, Button, Divider } from "@mui/material"; -import CustomizedDialog from "../../common/CustomizedDialog"; -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; -import MobileStepper from '@mui/material/MobileStepper'; -import SearchTerms from "./SearchTerms"; +import { useState } from "react"; +import PropTypes from "prop-types"; import EditTerms from "./EditTerms"; +import SearchTerms from "./SearchTerms"; import { ArrowBack } from "@mui/icons-material"; -import PropTypes from "prop-types"; -import { useState } from "react"; -import SearchTermsData from "../../../static/SearchTermsData.json"; import StatusStep from "../../common/StatusStep"; +import { Box, Button, Divider } from "@mui/material"; +import MobileStepper from '@mui/material/MobileStepper'; import { getStatusProps } from "./editBulkTermStatusProps"; +import CustomizedDialog from "../../common/CustomizedDialog"; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; +import SearchTermsData from "../../../static/SearchTermsData.json"; const initialSearchConditions = { attribute: '', value: '', condition: 'where', relation: SearchTermsData.objectOptions[0].value } @@ -103,6 +103,15 @@ const EditBulkTermsDialog = ({ open, handleClose, activeStep, setActiveStep }) = ); }; +HeaderRightSideContent.propTypes = { + handleClose: PropTypes.func.isRequired, + activeStep: PropTypes.number.isRequired, + handleNext: PropTypes.func.isRequired, + handleBack: PropTypes.func.isRequired, + setActiveStep: PropTypes.func.isRequired, + isAllFieldsFilled: PropTypes.func.isRequired, +}; + EditBulkTermsDialog.propTypes = { open: PropTypes.bool.isRequired, handleClose: PropTypes.func.isRequired, diff --git a/src/components/Dashboard/EditBulkTerms/EditTerms.jsx b/src/components/Dashboard/EditBulkTerms/EditTerms.jsx index 37d1be96..e2a71133 100644 --- a/src/components/Dashboard/EditBulkTerms/EditTerms.jsx +++ b/src/components/Dashboard/EditBulkTerms/EditTerms.jsx @@ -1,11 +1,14 @@ -import {Box, IconButton, Tooltip, Typography} from "@mui/material"; -import { vars } from "../../../theme/variables"; -import TermsTable from "./TermsTable"; +import PropTypes from "prop-types"; import React, {useState} from "react"; -import {EditNoteOutlined, StartOutlined} from "@mui/icons-material"; +import TermsTable from "./TermsTable"; import EditBulkAttributesForm from "./EditBulkAttributesForm"; +import {Box, IconButton, Tooltip, Typography} from "@mui/material"; import SearchTermsData from "../../../static/SearchTermsData.json"; +import {EditNoteOutlined, StartOutlined} from "@mui/icons-material"; + +import { vars } from "../../../theme/variables"; const { gray200, gray800,gray700 } = vars; + const EditTerms = ({searchConditions}) => { const initialAttributesValue = { attribute: '', condition: 'add', value: '' } const [open, setOpen] = React.useState(false); @@ -24,7 +27,6 @@ const EditTerms = ({searchConditions}) => { attributes={attributes} searchConditions={searchConditions} /> - { ); }; +EditTerms.propTypes = { + searchConditions: PropTypes.array.isRequired +}; + export default EditTerms; diff --git a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx index 85cbb95d..d63e13af 100644 --- a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx +++ b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx @@ -1,13 +1,13 @@ -import {Button, Grid, Typography, Box, ToggleButton, ToggleButtonGroup} from "@mui/material"; -import { useState } from "react"; -import { vars } from "../../../theme/variables"; +import PropTypes from "prop-types"; +import DropDownConditions from "./DropDownConditions"; import CustomizedInput from "../../common/CustomizedInput"; -import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; -import DropDownConditions from "./DropDownConditions"; -import SearchTermsData from "../../../static/SearchTermsData.json" import CustomSingleSelect from "../../common/CustomSingleSelect"; +import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; +import SearchTermsData from "../../../static/SearchTermsData.json"; +import {Button, Grid, Typography, Box, ToggleButton, ToggleButtonGroup} from "@mui/material"; +import { vars } from "../../../theme/variables"; const { gray800 } = vars; const SearchTerms = ({searchConditions, setSearchConditions, initialSearchConditions}) => { @@ -16,27 +16,27 @@ const SearchTerms = ({searchConditions, setSearchConditions, initialSearchCondit newTerms[index][field] = value; setSearchConditions(newTerms); }; - + const handleDeleteTerm = (index) => { const newTerms = searchConditions.filter((_, i) => i !== index); setSearchConditions(newTerms); }; - + const handleAddTerm = () => { setSearchConditions([...searchConditions, { attribute: '', value: '', condition: 'and', relation: SearchTermsData.objectOptions[0].value }]); }; - + const handleConditionChange = (event, newValue, index) => { const value = newValue; const newTerms = [...searchConditions]; newTerms[index].condition = value; setSearchConditions(newTerms); }; - + const handleClearAllConditions = () => { setSearchConditions([initialSearchConditions]); }; - + const updatedColumnsArray = SearchTermsData.termsColumns.map(item => ({ ...item, value: item.id @@ -138,4 +138,10 @@ const SearchTerms = ({searchConditions, setSearchConditions, initialSearchCondit ); } +SearchTerms.propTypes = { + searchConditions: PropTypes.array.isRequired, + setSearchConditions: PropTypes.func.isRequired, + initialSearchConditions: PropTypes.object.isRequired, +}; + export default SearchTerms; diff --git a/src/components/Dashboard/EditBulkTerms/TermsTable.jsx b/src/components/Dashboard/EditBulkTerms/TermsTable.jsx index ef41d4d7..13e6cfe3 100644 --- a/src/components/Dashboard/EditBulkTerms/TermsTable.jsx +++ b/src/components/Dashboard/EditBulkTerms/TermsTable.jsx @@ -16,15 +16,16 @@ import { Stack, CircularProgress, Typography, } from "@mui/material"; -import { vars } from "../../../theme/variables"; import { useState } from "react"; -import CustomTableHead from "../../SingleTermView/Variants/CustomTableHead"; +import PropTypes from 'prop-types'; +import { getMatchTerms } from "../../../api/endpoints"; import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined'; -import { getComparator, getSearchTermsFilter, stableSort } from "../../../helpers"; import OpenInNewOutlinedIcon from "@mui/icons-material/OpenInNewOutlined"; -import { getMatchTerms } from "../../../api/endpoints"; +import CustomTableHead from "../../SingleTermView/Variants/CustomTableHead"; +import { getComparator, getSearchTermsFilter, stableSort } from "../../../helpers"; +import { vars } from "../../../theme/variables"; const { gray200, gray50, gray700, brand600, gray800 } = vars; const columns = [ @@ -95,7 +96,7 @@ const TermsTable = ({ setOpenEditAttributes, setAttributes, attributes, searchCo console.log(err) setLoading(false); }); - }, []); + }, [filters]); if (loading) { return @@ -132,7 +133,7 @@ const TermsTable = ({ setOpenEditAttributes, setAttributes, attributes, searchCo open={Boolean(anchorEl)} onClose={handleClose} > - {columns.map((column) => ( + {columns.map((column, index) => ( { - const onRequestClick = (e, entry) => { - console.log('Opening change request + ', entry) - } - return - {entries.map((entry, index) => ( - - - - ))} + +const ListTerms = ({ entries }) => { + const onRequestClick = (e, entry) => { + console.log("Opening change request + ", entry); + }; + return ( + + {entries.map((entry, index) => ( + + + + ))} + ); +}; + +ListTerms.propTypes = { + entries: PropTypes.array, }; export default ListTerms; diff --git a/src/components/Dashboard/TermsChange/ListItem.jsx b/src/components/Dashboard/TermsChange/ListItem.jsx index 9e63f768..7144a304 100644 --- a/src/components/Dashboard/TermsChange/ListItem.jsx +++ b/src/components/Dashboard/TermsChange/ListItem.jsx @@ -7,16 +7,17 @@ import { Avatar, Typography, Chip } from "@mui/material"; -import CustomButton from "../../common/CustomButton"; -import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'; -import { vars } from "../../../theme/variables"; import { ApproveHistoryIcon, MergeHistoryIcon, RejectHistoryIcon } from "../../../Icons"; +import PropTypes from "prop-types"; import {formatDate} from "../../../helpers"; +import CustomButton from "../../common/CustomButton"; +import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'; +import { vars } from "../../../theme/variables"; const { gray600, gray700, brand600 } = vars; const visibilityHidden = { @@ -52,7 +53,6 @@ const getVariantsIcon = (action) => { const ListTermItem = ({ entry, onRequestClick }) => { const handleForkClick = (url) => { const formattedUrl = url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`; - window.open(formattedUrl, '_blank'); } return ( @@ -101,7 +101,6 @@ const ListTermItem = ({ entry, onRequestClick }) => { entry.action === 'reject' && has been rejected } - } secondary={ @@ -119,4 +118,9 @@ const ListTermItem = ({ entry, onRequestClick }) => { ) }; -export default ListTermItem; \ No newline at end of file +ListTermItem.propTypes = { + entry: PropTypes.object.isRequired, + onRequestClick: PropTypes.func.isRequired +}; + +export default ListTermItem; diff --git a/src/components/Dashboard/TermsChange/index.jsx b/src/components/Dashboard/TermsChange/index.jsx index 2a48522a..e5cca0c9 100644 --- a/src/components/Dashboard/TermsChange/index.jsx +++ b/src/components/Dashboard/TermsChange/index.jsx @@ -1,15 +1,17 @@ +import List from "./List"; +import { debounce } from 'lodash'; +import PropTypes from "prop-types"; import { Box } from "@mui/material"; -import {useState, useEffect, useCallback} from "react"; -import { vars } from "../../../theme/variables"; import BasicTabs from "../../common/CustomTabs"; +import {useState, useEffect, useCallback} from "react"; import CustomPagination from "../../common/CustomPagination"; -import List from "./List"; import {getUserForks} from "../../../api/endpoints/swaggerMockMissingEndpoints"; -import { debounce } from 'lodash'; +import { vars } from "../../../theme/variables"; const { gray25 } = vars; const TermsChange = () => { + // eslint-disable-next-line no-unused-vars const [numberOfVisiblePages, setNumberOfVisiblePages] = useState(8); const [page, setPage] = useState(1); const [tabValue, setTabValue] = useState(0); @@ -17,7 +19,7 @@ const TermsChange = () => { const handlePageChange = (event, value) => { setPage(value); }; - + const handleChangeTabs = (event, newValue) => { setTabValue(newValue); }; @@ -37,6 +39,7 @@ const TermsChange = () => { const filteredEntries = getFilteredEntries(); + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchForks = useCallback( debounce(async () => { getUserForks("123").then(data => { @@ -66,4 +69,8 @@ const TermsChange = () => { ); }; +TermsChange.propTypes = { + entries: PropTypes.array +}; + export default TermsChange; diff --git a/src/components/Dashboard/Variants/VariantCard.jsx b/src/components/Dashboard/Variants/VariantCard.jsx index ed5bb135..e59027aa 100644 --- a/src/components/Dashboard/Variants/VariantCard.jsx +++ b/src/components/Dashboard/Variants/VariantCard.jsx @@ -1,7 +1,9 @@ +import PropTypes from 'prop-types'; import {Box, Chip, Grid, Stack, Typography} from "@mui/material"; -import { vars } from "../../../theme/variables"; +import { vars } from "../../../theme/variables"; const {gray500, gray700, gray200, brand600, brand200, brand50 } = vars; + const VariantCard = ({term}) => { return ( { width: '2px', background: brand600 }, - '& .label': { color: brand600 }, - '& .greenChip': { border: `1px solid ${brand200}`, background: brand50 }, - '& .MuiIconButton-root': { opacity: 1, visibility: 'visible' } } }}> @@ -56,4 +55,8 @@ const VariantCard = ({term}) => { ); }; +VariantCard.propTypes = { + term: PropTypes.object.isRequired +}; + export default VariantCard; diff --git a/src/components/Dashboard/Variants/index.jsx b/src/components/Dashboard/Variants/index.jsx index fc2f1382..aeca40a5 100644 --- a/src/components/Dashboard/Variants/index.jsx +++ b/src/components/Dashboard/Variants/index.jsx @@ -1,17 +1,19 @@ +import { debounce } from 'lodash'; +import PropTypes from "prop-types"; +import VariantCard from "./VariantCard"; +import termParser from "../../../parsers/termParser"; import { useCallback, useEffect, useState } from "react"; -import {Box, Button, ButtonGroup, CircularProgress, Divider, Grid, Stack, Typography} from "@mui/material"; -import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined"; -import { vars } from "../../../theme/variables"; -import CustomSingleSelect from "../../common/CustomSingleSelect"; import { ListIcon, TableChartIcon } from "../../../Icons"; import CustomPagination from "../../common/CustomPagination"; -import termParser from "../../../parsers/termParser"; -import { debounce } from 'lodash'; -import * as mockApi from "../../../api/endpoints/swaggerMockMissingEndpoints"; -import VariantCard from "./VariantCard"; import CustomViewButton from "../../common/CustomViewButton"; +import CustomSingleSelect from "../../common/CustomSingleSelect"; +import * as mockApi from "../../../api/endpoints/swaggerMockMissingEndpoints"; +import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined"; +import {Box, Button, ButtonGroup, CircularProgress, Divider, Grid, Stack, Typography} from "@mui/material"; +import { vars } from "../../../theme/variables"; const { gray600, gray200 } = vars; + const useMockApi = () => mockApi; const Variants = ({handleOpenEditBulkTerms}) => { const [loading, setLoading] = useState(false); @@ -26,7 +28,8 @@ const Variants = ({handleOpenEditBulkTerms}) => { setNumberOfVisiblePages(v); setPage(1); }; - + + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchTerms = useCallback( debounce(async (searchTerm) => { getUserTerms("base", searchTerm).then(data => { @@ -41,18 +44,18 @@ const Variants = ({handleOpenEditBulkTerms}) => { }, 500), [getUserTerms] ); - + useEffect(() => { setLoading(true) fetchTerms('a'); }, [fetchTerms]); - + useEffect(() => { const start = (page - 1) * numberOfVisiblePages; const end = start + numberOfVisiblePages; setSlicedTerms(terms.slice(start, end)); }, [terms, page, numberOfVisiblePages]); - + const handlePageChange = (event, value) => { setPage(value); }; @@ -111,4 +114,8 @@ const Variants = ({handleOpenEditBulkTerms}) => { ); }; +Variants.propTypes = { + handleOpenEditBulkTerms: PropTypes.func.isRequired +}; + export default Variants; diff --git a/src/components/GraphViewer/Graph.jsx b/src/components/GraphViewer/Graph.jsx index de21fa2f..2457a02f 100644 --- a/src/components/GraphViewer/Graph.jsx +++ b/src/components/GraphViewer/Graph.jsx @@ -1,7 +1,8 @@ -import { useMemo, useEffect, useState } from "react"; -import { getGraphStructure , OBJECT, SUBJECT, PREDICATE, ROOT} from "./GraphStructure"; import * as d3 from "d3"; +import PropTypes from "prop-types"; import { Box } from "@mui/material"; +import { useMemo, useEffect } from "react"; +import { getGraphStructure , OBJECT, SUBJECT, PREDICATE, ROOT} from "./GraphStructure"; const MARGIN = { top: 60, right: 60, bottom: 60, left: 60 }; @@ -10,19 +11,23 @@ const Graph = ({ width, height, predicate }) => { const boundsHeight = height - MARGIN.top - MARGIN.bottom; // Three function that change the tooltip when user hover / move / leave a cell + // eslint-disable-next-line no-unused-vars const mouseover = (d) => { d3.select("#tooltip") + // eslint-disable-next-line no-unused-vars .html((c) => { return d.currentTarget.id }).style("opacity", 1).style("left", (d.pageX) + "px").style("top", (d.pageY) + "px") } + // eslint-disable-next-line no-unused-vars const mousemove = (event, d) => { d3.select("#tooltip") + // eslint-disable-next-line no-unused-vars .html((c) => { return event.currentTarget.id }).style("opacity", 1).style("left", (event.pageX) + "px").style("top", (event.pageY) + "px") - } + // eslint-disable-next-line no-unused-vars const mouseleave = (d) => { d3.select("#tooltip").style("opacity", 0) } @@ -43,6 +48,7 @@ const Graph = ({ width, height, predicate }) => { const dendrogram = useMemo(() => { const dendrogramGenerator = d3.cluster().size([boundsHeight, boundsWidth]); return dendrogramGenerator(hierarchy); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [hierarchy, width, height]); const allNodes = dendrogram.descendants().map((node) => { @@ -56,7 +62,6 @@ const Graph = ({ width, height, predicate }) => { } return ( - {( { m: '1rem 8rem auto', }}> - ); }; -export default Graph; \ No newline at end of file +Graph.propTypes = { + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + predicate: PropTypes.string.isRequired, +}; + +export default Graph; diff --git a/src/components/GraphViewer/GraphStructure.jsx b/src/components/GraphViewer/GraphStructure.jsx index 65427c24..01d5a8b4 100644 --- a/src/components/GraphViewer/GraphStructure.jsx +++ b/src/components/GraphViewer/GraphStructure.jsx @@ -17,7 +17,6 @@ const getName = (nodeName) => { export const getGraphStructure = (pred) => { let data = { - type : "node", name : pred.title, id : pred.title, type : ROOT, @@ -28,7 +27,7 @@ export const getGraphStructure = (pred) => { let uniqueObjects = []; pred?.tableData?.forEach( child => { - let newChild = { type : "leaf", name : getName(child.subject), id : child.subject, type : SUBJECT}; + let newChild = { name : getName(child.subject), id : child.subject, type : SUBJECT}; let getExistingObject = uniqueObjects?.find( c => c.id === child.object ); if ( getExistingObject ) { @@ -38,15 +37,13 @@ export const getGraphStructure = (pred) => { } } else { let newPredicate = { - type : "node", name : getName(child.predicate), id : child.predicate, type : PREDICATE, - children : [newChild] + children : [newChild] } let newObject = { - type : "node", name : getName(child.object), id : child.object, type : OBJECT, @@ -64,5 +61,5 @@ export const getGraphStructure = (pred) => { data.type = ROOT; } - return data; -} \ No newline at end of file + return data; +} diff --git a/src/components/Header/Search.jsx b/src/components/Header/Search.jsx index 86823666..a56373b3 100644 --- a/src/components/Header/Search.jsx +++ b/src/components/Header/Search.jsx @@ -11,18 +11,19 @@ import { List, ListItem, } from "@mui/material"; -import { vars } from "../../theme/variables"; +import { debounce } from 'lodash'; +import PropTypes from 'prop-types'; +import { useQuery } from "../../helpers"; +import BasicTabs from "../common/CustomTabs"; +import { useNavigate } from "react-router-dom"; import { SEARCH_TYPES } from "../../constants/types"; -import { useEffect, useState, useCallback, forwardRef } from 'react'; import { searchAll, elasticSearch } from "../../api/endpoints"; -import { CloseIcon, ForwardIcon, SearchIcon, TermsIcon } from '../../Icons'; import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined'; +import { useEffect, useState, useCallback, forwardRef } from 'react'; +import { CloseIcon, ForwardIcon, SearchIcon, TermsIcon } from '../../Icons'; import CorporateFareOutlinedIcon from '@mui/icons-material/CorporateFareOutlined'; -import BasicTabs from "../common/CustomTabs"; -import { useNavigate } from "react-router-dom"; -import { debounce } from 'lodash'; -import { useQuery } from "../../helpers"; +import { vars } from "../../theme/variables"; const { gray200, gray100, gray600, gray800, gray500, gray700 } = vars; const styles = { @@ -132,6 +133,7 @@ const Search = () => { return () => document.removeEventListener('keydown', handleKeyDown); }, [handleKeyDown]); + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchTerms = useCallback(debounce(async (searchTerm) => { const data = await elasticSearch(searchTerm); const dataTerms = data?.results.filter(result => result.type === SEARCH_TYPES.TERM); @@ -152,8 +154,10 @@ const Search = () => { if (storedSearchTerm !== searchTerm) { setSearchTerm(storedSearchTerm); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [storedSearchTerm]); + // eslint-disable-next-line no-unused-vars const ListboxComponent = forwardRef(function ListboxComponent(props, ref) { return ( <> @@ -356,4 +360,15 @@ const Search = () => { ); }; -export default Search; \ No newline at end of file + + +Search.propTypes = { + open: PropTypes.bool, + handleClose: PropTypes.func, + onUndoDelete: PropTypes.func, + data: PropTypes.object, + children: PropTypes.node, + key: PropTypes.string +}; + +export default Search; diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 78da8ccf..20adcfbf 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -1,22 +1,41 @@ import PropTypes from 'prop-types'; -import { Avatar, Badge, Box, Button, Divider, IconButton, ListItemAvatar, Popover } from "@mui/material"; -import { vars } from "../../theme/variables"; -import { AddIcon, DocumentationIcon, LogoutIcon, NavIcon, OrganizationsIcon, ReleaseNotesIcon, TermActivityIcon, UserIcon, SortIcon } from '../../Icons'; -import Logo from '../../Icons/svg/interlex_logo.svg' +import { + AddIcon, + DocumentationIcon, + LogoutIcon, + NavIcon, + OrganizationsIcon, + ReleaseNotesIcon, + TermActivityIcon, + UserIcon, + SortIcon +} from '../../Icons'; +import { + Avatar, + Badge, + Box, + Button, + Divider, + IconButton, + ListItemAvatar, + Popover +} from "@mui/material"; import React from "react"; +import Search from './Search'; +import { useContext } from "react"; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import Search from './Search'; -import EditBulkTermsDialog from "../Dashboard/EditBulkTerms/EditBulkTermsDialog"; import { useNavigate } from "react-router-dom"; -import { useContext } from "react"; -import { GlobalDataContext } from "../../contexts/DataContext"; import TermDialog from '../TermEditor/TermDialog'; +import Logo from '../../Icons/svg/interlex_logo.svg' +import ListItemText from '@mui/material/ListItemText'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemButton from '@mui/material/ListItemButton'; +import { GlobalDataContext } from "../../contexts/DataContext"; +import EditBulkTermsDialog from "../Dashboard/EditBulkTerms/EditBulkTermsDialog"; import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined"; +import { vars } from "../../theme/variables"; const { gray200, white, gray100, gray600 } = vars; const styles = { @@ -136,6 +155,7 @@ const Header = ({ isLoggedIn = true }) => { setOpenNewTermDialog(true); } + // eslint-disable-next-line no-unused-vars const handleSetUserData = (user, organization) => { setUserData(user, organization); }; @@ -205,6 +225,7 @@ const Header = ({ isLoggedIn = true }) => { return () => { document.removeEventListener('keydown', handleKeyDown); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); React.useEffect(() => { @@ -395,4 +416,4 @@ Header.propTypes = { isLoggedIn: PropTypes.bool, }; -export default Header \ No newline at end of file +export default Header diff --git a/src/components/SearchResults/ListView.jsx b/src/components/SearchResults/ListView.jsx index 88c6cffc..2b0faefc 100644 --- a/src/components/SearchResults/ListView.jsx +++ b/src/components/SearchResults/ListView.jsx @@ -1,11 +1,11 @@ -import { Box, Typography, Grid, Stack, Chip, CircularProgress } from '@mui/material'; +import PropTypes from "prop-types"; +import { useNavigate } from "react-router-dom"; import CustomButton from '../common/CustomButton'; -import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined'; import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'; -import { vars } from '../../theme/variables'; -import { useLocation, useNavigate } from "react-router-dom"; -import React from "react"; +import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined'; +import { Box, Typography, Grid, Stack, Chip, CircularProgress } from '@mui/material'; +import { vars } from '../../theme/variables'; const { gray200, gray500, gray700, brand50, brand200, brand600, brand700, error50, error300, error700 } = vars; @@ -156,4 +156,21 @@ const ListView = ({ searchResults, loading }) => { ); }; -export default ListView; \ No newline at end of file +Description.propTypes = { + description: PropTypes.string +}; + +TitleSection.propTypes = { + searchResult: PropTypes.object +}; + +InfoSection.propTypes = { + searchResult: PropTypes.object +}; + +ListView.propTypes = { + searchResults: PropTypes.array, + loading: PropTypes.bool +}; + +export default ListView; diff --git a/src/components/SearchResults/SearchResultsBox.jsx b/src/components/SearchResults/SearchResultsBox.jsx index 66326bc8..b3b6e7d2 100644 --- a/src/components/SearchResults/SearchResultsBox.jsx +++ b/src/components/SearchResults/SearchResultsBox.jsx @@ -1,11 +1,12 @@ import React from 'react'; -import { Box, Typography, Grid, ButtonGroup, Button, Stack, Divider } from '@mui/material'; -import { TableChartIcon, ListIcon } from '../../Icons'; import ListView from './ListView'; +import PropTypes from 'prop-types'; +import { TableChartIcon, ListIcon } from '../../Icons'; import OntologySearch from '../SingleTermView/OntologySearch'; -import { vars } from '../../theme/variables'; import CustomSingleSelect from "../common/CustomSingleSelect"; +import { Box, Typography, Grid, ButtonGroup, Button, Stack, Divider } from '@mui/material'; +import { vars } from '../../theme/variables'; const { gray50, gray200, gray300, gray600 } = vars; const CustomViewButton = ({ view, listView, onClick, icon }) => ( @@ -80,4 +81,17 @@ const SearchResultsBox = ({ terms, searchTerm, loading }) => { ); }; -export default SearchResultsBox; \ No newline at end of file +CustomViewButton.propTypes = { + view: PropTypes.string, + listView: PropTypes.string, + onClick: PropTypes.func, + icon: PropTypes.node +}; + +SearchResultsBox.propTypes = { + terms: PropTypes.object, + searchTerm: PropTypes.string, + loading: PropTypes.bool +}; + +export default SearchResultsBox; diff --git a/src/components/SearchResults/index.jsx b/src/components/SearchResults/index.jsx index 539fa6b9..bfd734a0 100644 --- a/src/components/SearchResults/index.jsx +++ b/src/components/SearchResults/index.jsx @@ -1,10 +1,11 @@ -import React, { useEffect, useRef, useState } from 'react'; -import FiltersSidebar from '../Sidebar/FiltersSidebar'; +import { debounce } from 'lodash'; +import PropTypes from 'prop-types'; +import { useQuery } from '../../helpers'; +import termParser from '../../parsers/termParser'; import SearchResultsBox from './SearchResultsBox'; +import { useEffect, useRef, useState } from 'react'; +import FiltersSidebar from '../Sidebar/FiltersSidebar'; import * as mockApi from '../../api/endpoints/swaggerMockMissingEndpoints'; -import termParser from '../../parsers/termParser'; -import { useQuery } from '../../helpers'; -import { debounce } from 'lodash'; const useMockApi = () => mockApi; @@ -40,6 +41,7 @@ const SearchResults = () => { }) .catch((error) => { setLoading(false); + console.error(error); }); }, 500) ).current; @@ -77,4 +79,10 @@ const SearchResults = () => { ); }; +SearchResults.propTypes = { + terms: PropTypes.object, + searchTerm: PropTypes.string, + loading: PropTypes.bool +}; + export default SearchResults; diff --git a/src/components/Sidebar/FiltersSidebar.jsx b/src/components/Sidebar/FiltersSidebar.jsx index 22665eed..81bee16c 100644 --- a/src/components/Sidebar/FiltersSidebar.jsx +++ b/src/components/Sidebar/FiltersSidebar.jsx @@ -1,9 +1,10 @@ import React from 'react'; -import { Box, Typography, IconButton, Tooltip, FormGroup, FormLabel, FormControl, Button } from '@mui/material'; +import PropTypes from 'prop-types'; import Checkbox from '../common/CustomCheckbox'; import { CollapseIcon, HelpOutlinedIcon, ExpandIcon } from '../../Icons'; -import { vars } from '../../theme/variables'; +import { Box, Typography, IconButton, Tooltip, FormGroup, FormLabel, FormControl, Button } from '@mui/material'; +import { vars } from '../../theme/variables'; const { gray200, gray600, gray800, brand700, brand800 } = vars; export default function FiltersSidebar({ filters, checkedLabels, handleCheckboxChange }) { @@ -18,8 +19,6 @@ export default function FiltersSidebar({ filters, checkedLabels, handleCheckboxC }; const nonEmptyFilters = Object.keys(filters).filter(category => Object.keys(filters[category]).length > 0); - - return ( - {displayedValues.map(([subCategory, details]) => { + {// eslint-disable-next-line no-unused-vars + displayedValues.map(([subCategory, details]) => { return ( ); -} \ No newline at end of file +} + +FiltersSidebar.propTypes = { + filters: PropTypes.object.isRequired, + checkedLabels: PropTypes.object.isRequired, + handleCheckboxChange: PropTypes.func.isRequired, +}; diff --git a/src/components/SingleOrganization/AddNewOntologyDialog.jsx b/src/components/SingleOrganization/AddNewOntologyDialog.jsx index e78c1c06..19ed7f7f 100644 --- a/src/components/SingleOrganization/AddNewOntologyDialog.jsx +++ b/src/components/SingleOrganization/AddNewOntologyDialog.jsx @@ -1,10 +1,11 @@ import * as React from "react"; +import PropTypes from "prop-types"; +import AddIcon from '@mui/icons-material/Add'; +import Checkbox from "../common/CustomCheckbox"; +import StatusDialog from "../common/StatusDialog"; +import CustomInputBox from "../common/CustomInputBox"; import { Stack, Button, Grid, Box } from "@mui/material"; import CustomizedDialog from "../common/CustomizedDialog"; -import CustomInputBox from "../common/CustomInputBox"; -import StatusDialog from "../common/StatusDialog"; -import Checkbox from "../common/CustomCheckbox"; -import AddIcon from '@mui/icons-material/Add'; const HeaderRightSideContent = ({ handleClose, onAddNewOntology }) => { return ( @@ -18,6 +19,11 @@ const HeaderRightSideContent = ({ handleClose, onAddNewOntology }) => { ) } +HeaderRightSideContent.propTypes = { + handleClose: PropTypes.func, + onAddNewOntology: PropTypes.func +} + const AddNewOntologyDialog = ({ open, handleClose }) => { const [openStatusDialog, setOpenStatusDialog] = React.useState(false); const [newOntology, setNewOntology] = React.useState({ @@ -109,4 +115,10 @@ const AddNewOntologyDialog = ({ open, handleClose }) => { ) } -export default AddNewOntologyDialog; \ No newline at end of file + +AddNewOntologyDialog.propTypes = { + open: PropTypes.bool, + handleClose: PropTypes.func +} + +export default AddNewOntologyDialog; diff --git a/src/components/SingleOrganization/CreateForkDialog.jsx b/src/components/SingleOrganization/CreateForkDialog.jsx index f735d32d..503a4542 100644 --- a/src/components/SingleOrganization/CreateForkDialog.jsx +++ b/src/components/SingleOrganization/CreateForkDialog.jsx @@ -1,17 +1,18 @@ import * as React from "react"; -import { useState, useEffect, useCallback } from "react"; -import { Stack, Button, Grid, Box, Typography } from "@mui/material"; -import CustomizedDialog from "../common/CustomizedDialog"; +import { debounce } from 'lodash'; +import PropTypes from "prop-types"; +import termParser from "../../parsers/termParser"; import CustomInputBox from "../common/CustomInputBox"; +import { getOrganizations } from "../../api/endpoints"; import CustomSelectBox from "../common/CustomSelectBox"; +import { useState, useEffect, useCallback } from "react"; +import CustomizedDialog from "../common/CustomizedDialog"; import ForkRightIcon from '@mui/icons-material/ForkRight'; import CustomAutocompleteBox from "../common/CustomAutocompleteBox"; +import { Stack, Button, Grid, Box, Typography } from "@mui/material"; import * as mockApi from "../../api/endpoints/swaggerMockMissingEndpoints"; -import termParser from "../../parsers/termParser"; -import { getOrganizations } from "../../api/endpoints"; -import { debounce } from 'lodash'; -import { vars } from "../../theme/variables"; +import { vars } from "../../theme/variables"; const { gray800, gray500, gray600 } = vars; const useMockApi = () => mockApi; @@ -29,8 +30,14 @@ const HeaderRightSideContent = ({ handleClose, onCreateFork }) => { ) } +HeaderRightSideContent.propTypes = { + handleClose: PropTypes.func.isRequired, + onCreateFork: PropTypes.func.isRequired +}; + const CreateForkDialog = ({ open, handleClose, onSubmit }) => { const { getMatchTerms } = useMockApi(); + // eslint-disable-next-line no-unused-vars const [loading, setLoading] = useState(true); const [termResults, setTermResults] = useState([]); const [organizations, setOrganizations] = useState([]); @@ -40,6 +47,7 @@ const CreateForkDialog = ({ open, handleClose, onSubmit }) => { name: "" }); + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchTerms = useCallback( debounce((term) => { setLoading(true); @@ -147,4 +155,11 @@ const CreateForkDialog = ({ open, handleClose, onSubmit }) => { ) } + +CreateForkDialog.propTypes = { + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired +}; + export default CreateForkDialog; diff --git a/src/components/SingleOrganization/LeaveModal.jsx b/src/components/SingleOrganization/LeaveModal.jsx index 8fd82d00..f0059f00 100644 --- a/src/components/SingleOrganization/LeaveModal.jsx +++ b/src/components/SingleOrganization/LeaveModal.jsx @@ -1,12 +1,12 @@ -import * as React from 'react'; +import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; import Modal from '@mui/material/Modal'; +import Button from '@mui/material/Button'; import { IconButton } from '@mui/material'; +import Typography from '@mui/material/Typography'; import CloseIcon from '@mui/icons-material/Close'; -import { vars } from '../../theme/variables'; +import { vars } from '../../theme/variables'; const { white, gray200, gray600, gray300, gray700, gray50, error600, error700 } = vars; const commonBtnStyles = { @@ -65,8 +65,8 @@ const styles = { } } -const LeaveModal = ({ open, handleClose }) => { +const LeaveModal = ({ open, handleClose }) => { const handleLeaveClickButton = () => { console.log("Leave button clicked!") } @@ -107,4 +107,9 @@ const LeaveModal = ({ open, handleClose }) => { ); } +LeaveModal.propTypes = { + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired +} + export default LeaveModal; diff --git a/src/components/SingleOrganization/OrganizationCard.jsx b/src/components/SingleOrganization/OrganizationCard.jsx index 0c3bcbee..5e4a7ca1 100644 --- a/src/components/SingleOrganization/OrganizationCard.jsx +++ b/src/components/SingleOrganization/OrganizationCard.jsx @@ -1,13 +1,19 @@ -import { Box, Chip, Grid, Stack, Typography } from "@mui/material"; +import PropTypes from "prop-types"; import CustomButton from "../common/CustomButton"; -import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined'; +import { Box, Chip, Grid, Stack, Typography } from "@mui/material"; import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined'; import FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined'; -import { vars } from "../../theme/variables"; +import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined'; +import { vars } from "../../theme/variables"; const { gray50, gray500, gray700, gray200, brand600, brand200, brand50 } = vars; const TermTitleSection = ({ term }) => { + const handleClick = (e, label) => { + e.stopPropagation(); + console.log('Add term to active ontology', label); + } + return ( @@ -20,7 +26,7 @@ const TermTitleSection = ({ term }) => { visibility: 'hidden', transition: 'opacity 0.3s ease-in-out' }} - onClick={(e) => handleClick(e, searchResult.label)} + onClick={(e) => handleClick(e, term?.label)} > Add term to active ontology @@ -29,7 +35,15 @@ const TermTitleSection = ({ term }) => { ) } +TermTitleSection.propTypes = { + term: PropTypes.object.isRequired +} + const OntologyTitleSection = ({ ontology }) => { + const handleClick = (e, label) => { + e.stopPropagation(); + console.log('Download ontology', label); + } return ( @@ -42,7 +56,7 @@ const OntologyTitleSection = ({ ontology }) => { visibility: 'hidden', transition: 'opacity 0.3s ease-in-out' }} - onClick={(e) => handleClick(e, searchResult.label)} + onClick={(e) => handleClick(e, ontology?.label)} > Download ontology @@ -51,6 +65,10 @@ const OntologyTitleSection = ({ ontology }) => { ) } +OntologyTitleSection.propTypes = { + ontology: PropTypes.object.isRequired +} + const OrganizationCard = ({ data, isOntology }) => { return ( { ); }; +OrganizationCard.propTypes = { + data: PropTypes.object.isRequired, + isOntology: PropTypes.bool +} + export default OrganizationCard; diff --git a/src/components/SingleOrganization/index.jsx b/src/components/SingleOrganization/index.jsx index f7b8ca23..fa38eb55 100644 --- a/src/components/SingleOrganization/index.jsx +++ b/src/components/SingleOrganization/index.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; import { Box, Button, @@ -9,28 +9,28 @@ import { Typography, CircularProgress, } from "@mui/material"; +import { + CreateNewFolderOutlined, +} from "@mui/icons-material"; +import LeaveModal from "./LeaveModal"; +import AddIcon from '@mui/icons-material/Add'; import { useNavigate } from "react-router-dom"; -import CustomSingleSelect from "../common/CustomSingleSelect"; -import CustomPagination from "../common/CustomPagination"; -import CustomViewButton from "../common/CustomViewButton"; import CustomButton from "../common/CustomButton"; import OrganizationCard from "./OrganizationCard"; -import EditBulkTermsDialog from "../Dashboard/EditBulkTerms/EditBulkTermsDialog"; -import AddNewOntologyDialog from "./AddNewOntologyDialog"; import CreateForkDialog from "./CreateForkDialog"; -import LeaveModal from "./LeaveModal"; -import { - CreateNewFolderOutlined, -} from "@mui/icons-material"; -import { ListIcon, TableChartIcon, EditNoteIcon } from "../../Icons"; import ForkRightIcon from '@mui/icons-material/ForkRight'; -import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined'; +import CustomPagination from "../common/CustomPagination"; +import CustomViewButton from "../common/CustomViewButton"; +import AddNewOntologyDialog from "./AddNewOntologyDialog"; import ExitToAppIcon from '@mui/icons-material/ExitToApp'; +import CustomSingleSelect from "../common/CustomSingleSelect"; +import EditBulkTermsDialog from "../Dashboard/EditBulkTerms/EditBulkTermsDialog"; +import { ListIcon, TableChartIcon, EditNoteIcon } from "../../Icons"; import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'; -import AddIcon from '@mui/icons-material/Add'; +import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined'; import { getOrganization, getOrganizationCuries, getOrganizationTerms, getOrganizationOntologies } from "../../api/endpoints"; -import { vars } from "../../theme/variables"; +import { vars } from "../../theme/variables"; const { gray25, gray200, gray500, gray600 } = vars; const generatePageOptions = (totalItems) => { @@ -125,7 +125,6 @@ const SingleOrganization = () => { const handleTermsPageChange = (event, value) => setTermsPage(value); const handleOntologiesPageChange = (event, value) => setOntologiesPage(value); - const handleViewOrganizationsClick = () => navigate(`/organizations/${organization?.name}/curie-editor`); const handleOpenEditBulkTerms = () => setOpenEditBulkTerms(true); const handleCloseEditBulkTerms = () => { @@ -135,14 +134,10 @@ const SingleOrganization = () => { const handleOpenOntologyDialog = () => setOpenAddOntology(true); const handleCloseOntologyDialog = () => setOpenAddOntology(false); - const handleOpenForkDialog = () => setOpenFork(true); const handleCloseForkDialog = () => setOpenFork(false); - const handleOpenLeaveModal = () => setOpenLeaveModal(true); const handleCloseLeaveModal = () => setOpenLeaveModal(false); - - return ( <> diff --git a/src/components/SingleTermView/CreateForkDialog.jsx b/src/components/SingleTermView/CreateForkDialog.jsx index 8f0ad855..dd8725f4 100644 --- a/src/components/SingleTermView/CreateForkDialog.jsx +++ b/src/components/SingleTermView/CreateForkDialog.jsx @@ -1,12 +1,13 @@ import { useState } from "react"; -import { vars } from "../../theme/variables"; +import PropTypes from "prop-types"; +import StatusDialog from "../common/StatusDialog"; import CustomizedDialog from "../common/CustomizedDialog"; import { Box, Button, Grid, Typography } from "@mui/material"; -import StatusDialog from "../common/StatusDialog"; -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; -import SearchTermsData from "../../static/SearchTermsData.json" import CustomSingleSelect from "../common/CustomSingleSelect"; +import SearchTermsData from "../../static/SearchTermsData.json" +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import { vars } from "../../theme/variables"; const { gray800, gray600, gray500, gray700 } = vars; const HeaderRightSideContent = ({ handleClose, onSaveFork }) => { @@ -21,6 +22,12 @@ const HeaderRightSideContent = ({ handleClose, onSaveFork }) => { ) } +HeaderRightSideContent.propTypes = { + handleClose: PropTypes.func, + onSaveFork: PropTypes.func +} + +// eslint-disable-next-line no-unused-vars const CreateForkDialog = ({ formState, open, handleClose, onInputChange }) => { const [openStatusDialog, setOpenStatusDialog] = useState(false); const [newTerm, setNewTerm] = useState('label') @@ -36,11 +43,9 @@ const CreateForkDialog = ({ formState, open, handleClose, onInputChange }) => { ...item, value: item.id })); - const handleCloseStatusDialog = () => { setOpenStatusDialog(false) } - const handleStatusDialogActionButtonClick = () => { setOpenStatusDialog(false); } @@ -73,7 +78,6 @@ const CreateForkDialog = ({ formState, open, handleClose, onInputChange }) => { }}> Owner - Required { ); }; +CreateForkDialog.propTypes = { + formState: PropTypes.object, + open: PropTypes.bool, + handleClose: PropTypes.func, + onInputChange: PropTypes.func +} + export default CreateForkDialog; diff --git a/src/components/SingleTermView/CustomMenu.jsx b/src/components/SingleTermView/CustomMenu.jsx index a9a56d19..a05e3559 100644 --- a/src/components/SingleTermView/CustomMenu.jsx +++ b/src/components/SingleTermView/CustomMenu.jsx @@ -1,13 +1,13 @@ -import * as React from 'react'; +import PropTypes from 'prop-types'; import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; import Divider from '@mui/material/Divider'; -import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined'; +import MenuItem from '@mui/material/MenuItem'; import ForkRightOutlinedIcon from '@mui/icons-material/ForkRightOutlined'; -import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; import FolderCopyOutlinedIcon from '@mui/icons-material/FolderCopyOutlined'; -import { vars } from '../../theme/variables'; +import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; +import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined'; +import { vars } from '../../theme/variables'; const { gray100, gray200, gray600, error700 } = vars; const menuStyles = { @@ -122,4 +122,10 @@ const CustomMenu = ({ open, anchorRef, setOpen }) => { ); }; +CustomMenu.propTypes = { + open: PropTypes.bool.isRequired, + anchorRef: PropTypes.object.isRequired, + setOpen: PropTypes.func.isRequired, +}; + export default CustomMenu; diff --git a/src/components/SingleTermView/Discussion/CommentEditor.jsx b/src/components/SingleTermView/Discussion/CommentEditor.jsx index ab5fa85e..0ef689ae 100644 --- a/src/components/SingleTermView/Discussion/CommentEditor.jsx +++ b/src/components/SingleTermView/Discussion/CommentEditor.jsx @@ -1,21 +1,22 @@ import { useState } from 'react'; -import { Button, Box } from '@mui/material'; +import PropTypes from 'prop-types'; import RichTextEditor from 'react-rte'; import {SendComment} from "../../../Icons"; +import { Button, Box } from '@mui/material'; const CommentEditor = ({ onAddComment }) => { const [editorState, setEditorState] = useState(RichTextEditor.createEmptyValue()); - + const handleEditorChange = (value) => { setEditorState(value); }; - + const handleAddComment = () => { const htmlContent = editorState.toString('html'); onAddComment(htmlContent); setEditorState(RichTextEditor.createEmptyValue()); }; - + return ( { ); }; +CommentEditor.propTypes = { + onAddComment: PropTypes.func.isRequired, +}; + export default CommentEditor; diff --git a/src/components/SingleTermView/Discussion/List.jsx b/src/components/SingleTermView/Discussion/List.jsx index fcf2408c..5485476b 100644 --- a/src/components/SingleTermView/Discussion/List.jsx +++ b/src/components/SingleTermView/Discussion/List.jsx @@ -1,10 +1,9 @@ -import * as React from 'react'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemText from '@mui/material/ListItemText'; -import { vars } from "../../../theme/variables"; import { Box, Chip, Typography } from "@mui/material"; +import { vars } from "../../../theme/variables"; const { gray200, brand600, gray50, gray700, gray500 } = vars; const DiscussionList = () => { @@ -19,7 +18,6 @@ const DiscussionList = () => { '& .MuiListItem-root': { padding: '1.375rem 2.75rem 1.375rem 5rem', borderBottom: `1px solid ${gray200}`, - '&:hover': { borderBottom: `2px solid ${brand600}`, background: gray50 diff --git a/src/components/SingleTermView/Discussion/TimeLine.jsx b/src/components/SingleTermView/Discussion/TimeLine.jsx index 37cb6722..1966ea87 100644 --- a/src/components/SingleTermView/Discussion/TimeLine.jsx +++ b/src/components/SingleTermView/Discussion/TimeLine.jsx @@ -1,13 +1,14 @@ +import PropTypes from 'prop-types'; import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; import TimelineDot from '@mui/lab/TimelineDot'; import { timelineItemClasses } from "@mui/lab"; import { Box, Typography } from "@mui/material"; -import { vars } from "../../../theme/variables"; +import TimelineItem from '@mui/lab/TimelineItem'; +import TimelineContent from '@mui/lab/TimelineContent'; +import TimelineSeparator from '@mui/lab/TimelineSeparator'; +import TimelineConnector from '@mui/lab/TimelineConnector'; +import { vars } from "../../../theme/variables"; const { gray100, gray600, gray700, gray200, gray50 } = vars; const TimeLine = ({ comment, hideConnector }) => { @@ -78,4 +79,9 @@ const TimeLine = ({ comment, hideConnector }) => { ); }; +TimeLine.propTypes = { + comment: PropTypes.object.isRequired, + hideConnector: PropTypes.bool +}; + export default TimeLine; diff --git a/src/components/SingleTermView/Discussion/index.jsx b/src/components/SingleTermView/Discussion/index.jsx index 73cfdfa8..228c7126 100644 --- a/src/components/SingleTermView/Discussion/index.jsx +++ b/src/components/SingleTermView/Discussion/index.jsx @@ -20,6 +20,7 @@ const Discussion = (term) => { useEffect(() => { getDiscussions() + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/src/components/SingleTermView/History/HistoryItem.jsx b/src/components/SingleTermView/History/HistoryItem.jsx index e98f0083..8e4d0c89 100644 --- a/src/components/SingleTermView/History/HistoryItem.jsx +++ b/src/components/SingleTermView/History/HistoryItem.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import PropTypes from "prop-types"; import { Box, ListItem, @@ -108,4 +108,8 @@ const HistoryItem = ({ entry }) => ( ); -export default HistoryItem; \ No newline at end of file +HistoryItem.propTypes = { + entry: PropTypes.object.isRequired +}; + +export default HistoryItem; diff --git a/src/components/SingleTermView/History/HistoryPanel.jsx b/src/components/SingleTermView/History/HistoryPanel.jsx index ed59b5e4..036ded4c 100644 --- a/src/components/SingleTermView/History/HistoryPanel.jsx +++ b/src/components/SingleTermView/History/HistoryPanel.jsx @@ -1,9 +1,9 @@ import React from "react"; -import { Box, List } from "@mui/material"; import HistoryItem from "./HistoryItem"; -import { vars } from "../../../theme/variables"; +import { Box, List } from "@mui/material"; import { getVersions } from './../../../api/endpoints'; +import { vars } from "../../../theme/variables"; const { gray50 } = vars; const historyEntries = [ @@ -13,9 +13,10 @@ const historyEntries = [ { author: "Phoenix Baker", action: "request", date: "Friday 2:05pm" }, ]; -const HistoryPanel = () => { +const HistoryPanel = () => { + // eslint-disable-next-line no-unused-vars const [versions, setVersions] = React.useState([]); - + React.useEffect(() => { getVersions("base", "ILX_....").then( data => { setVersions(data); @@ -24,7 +25,7 @@ const HistoryPanel = () => { return + }}> {historyEntries.map((entry, index) => ( { @@ -34,6 +35,7 @@ const OntologySearch = () => { setOpenList(true); }; + // eslint-disable-next-line no-unused-vars const handleInputChange = (event, value) => { setSearchTerm(event.target.value); }; @@ -219,4 +221,8 @@ const OntologySearch = () => { ); }; +OntologySearch.propTypes = { + key: PropTypes.string, +}; + export default OntologySearch; diff --git a/src/components/SingleTermView/OverView/AddPredicateDialog.jsx b/src/components/SingleTermView/OverView/AddPredicateDialog.jsx index ac6de97f..8cac7c80 100644 --- a/src/components/SingleTermView/OverView/AddPredicateDialog.jsx +++ b/src/components/SingleTermView/OverView/AddPredicateDialog.jsx @@ -1,16 +1,18 @@ -import CustomizedDialog from "../../common/CustomizedDialog"; +import { useState } from "react"; +import {useQuery} from "../../../helpers"; import {Box, Grid, Button} from "@mui/material"; import Typography from "@mui/material/Typography"; -import PlaylistAddOutlinedIcon from "@mui/icons-material/PlaylistAddOutlined"; +import PredicateGroupInput from "./PredicateGroupInput"; +import CustomizedInput from "../../common/CustomizedInput"; +import CustomizedDialog from "../../common/CustomizedDialog"; import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; +import CustomSingleSelect from "../../common/CustomSingleSelect"; import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; -import {vars} from "../../../theme/variables"; import AddPredicateStatusDialog from "./AddPredicateStatusDialog"; -import { useState} from "react"; -import CustomizedInput from "../../common/CustomizedInput"; -import PredicateGroupInput from "./PredicateGroupInput"; -import {useQuery} from "../../../helpers"; -import CustomSingleSelect from "../../common/CustomSingleSelect"; +import PlaylistAddOutlinedIcon from "@mui/icons-material/PlaylistAddOutlined"; +import PropTypes from "prop-types"; + +import {vars} from "../../../theme/variables"; const {gray800} = vars; const HeaderRightSideContent = ({handleClose, handleOpenAddPredicateStatusDialog, isAllFieldsFilled}) => { @@ -32,6 +34,12 @@ const HeaderRightSideContent = ({handleClose, handleOpenAddPredicateStatusDialog ); }; +HeaderRightSideContent.propTypes = { + handleClose: PropTypes.func.isRequired, + handleOpenAddPredicateStatusDialog: PropTypes.func.isRequired, + isAllFieldsFilled: PropTypes.bool.isRequired +}; + const AddPredicateDialog = ({ open, handleClose, image, predicates: fetchedPredicated }) => { const [openAddPredicateStatusDialog, setOpenAddPredicateStatusDialog] = useState(false); const query = useQuery(); @@ -152,4 +160,11 @@ const AddPredicateDialog = ({ open, handleClose, image, predicates: fetchedPredi ); }; +AddPredicateDialog.propTypes = { + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired, + image: PropTypes.string, + predicates: PropTypes.array.isRequired +}; + export default AddPredicateDialog; diff --git a/src/components/SingleTermView/OverView/AddPredicateStatusDialog.jsx b/src/components/SingleTermView/OverView/AddPredicateStatusDialog.jsx index 334bd864..7140ffa8 100644 --- a/src/components/SingleTermView/OverView/AddPredicateStatusDialog.jsx +++ b/src/components/SingleTermView/OverView/AddPredicateStatusDialog.jsx @@ -1,11 +1,12 @@ -import CustomizedDialog from "../../common/CustomizedDialog"; +import PropTypes from "prop-types"; import { Box } from "@mui/material"; -import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; -import { vars } from "../../../theme/variables"; -import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; import {BackgroundPattern} from "../../../Icons"; +import Typography from "@mui/material/Typography"; +import CustomizedDialog from "../../common/CustomizedDialog"; +import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; +import { vars } from "../../../theme/variables"; const { gray600, gray900 } = vars; const HeaderRightSideContent = ({ handleClose, handleCloseAddpredicate }) => { @@ -21,6 +22,11 @@ const HeaderRightSideContent = ({ handleClose, handleCloseAddpredicate }) => { ); }; +HeaderRightSideContent.propTypes = { + handleClose: PropTypes.func, + handleCloseAddpredicate: PropTypes.func +}; + const AddPredicateStatusDialog = ({ open, handleClose, handleCloseAddpredicate, storedSearchTerm }) => { return ( { ) } -export default CustomSnackbar; \ No newline at end of file +CustomSnackbar.propTypes = { + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired, + onUndoDelete: PropTypes.func.isRequired, + data: PropTypes.object.isRequired +} + +export default CustomSnackbar; diff --git a/src/components/SingleTermView/OverView/CustomizedTable.jsx b/src/components/SingleTermView/OverView/CustomizedTable.jsx index 497e1f62..ce1f6040 100644 --- a/src/components/SingleTermView/OverView/CustomizedTable.jsx +++ b/src/components/SingleTermView/OverView/CustomizedTable.jsx @@ -1,15 +1,16 @@ -import { Box, IconButton, Typography } from "@mui/material"; -import { useCallback, useEffect, useRef, useState } from "react"; +import { debounce } from 'lodash'; import TableRow from "./TableRow"; -import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; -import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; -import AddOutlinedIcon from '@mui/icons-material/AddOutlined'; -import { vars } from "../../../theme/variables"; -import _, { debounce } from 'lodash'; -import { getMatchTerms } from "../../../api/endpoints"; +import PropTypes from 'prop-types'; import CustomSnackbar from "./CustomSnackbar"; import TermDialog from "../../TermEditor/TermDialog"; +import { getMatchTerms } from "../../../api/endpoints"; +import { Box, IconButton, Typography } from "@mui/material"; +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; +import AddOutlinedIcon from '@mui/icons-material/AddOutlined'; +import { useCallback, useEffect, useRef, useState } from "react"; +import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; +import { vars } from "../../../theme/variables"; const { gray100, gray50, gray600, gray500, brand600, brand50, brand700, gray700 } = vars; const tableStyles = { @@ -151,9 +152,12 @@ const CustomizedTable = ({ data, term, isAddButtonVisible }) => { { key: 'object', label: 'Objects', allowSort: true, direction: 'desc' } ]); + // eslint-disable-next-line no-unused-vars const [terms, setTerms] = useState([]); + // eslint-disable-next-line no-unused-vars const [objectSearchTerm, setObjectSearchTerm] = useState(''); const [snackbarOpen, setSnackbarOpen] = useState(false); + // eslint-disable-next-line no-unused-vars const [deletedObj, setDeletedObj] = useState({}); const [editTermDialogOpen, setEditTermDialogOpen] = useState(false); @@ -243,6 +247,7 @@ const CustomizedTable = ({ data, term, isAddButtonVisible }) => { setSnackbarOpen(false); }; + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchTerms = useCallback(debounce(async (searchTerm) => { const data = await getMatchTerms(searchTerm); setTerms(data?.results[0]); @@ -309,4 +314,10 @@ const CustomizedTable = ({ data, term, isAddButtonVisible }) => { ); }; -export default CustomizedTable; \ No newline at end of file +CustomizedTable.propTypes = { + data: PropTypes.object, + term: PropTypes.string, + isAddButtonVisible: PropTypes.bool +}; + +export default CustomizedTable; diff --git a/src/components/SingleTermView/OverView/Details.jsx b/src/components/SingleTermView/OverView/Details.jsx index 02dca044..b594f61d 100644 --- a/src/components/SingleTermView/OverView/Details.jsx +++ b/src/components/SingleTermView/OverView/Details.jsx @@ -5,22 +5,23 @@ import { Stack, Typography } from "@mui/material"; -import { vars } from "../../../theme/variables"; +import PropTypes from "prop-types"; import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined'; + +import { vars } from "../../../theme/variables"; const { gray800, gray500 } = vars; const Details = ({loading, data }) => { - const handleChipClick = (url) => { window.open(url, '_blank'); }; - + if (loading) { return } - + if (!data) { return
No data available
; } @@ -149,4 +150,9 @@ const Details = ({loading, data }) => { ); } +Details.propTypes = { + loading: PropTypes.bool.isRequired, + data: PropTypes.object +}; + export default Details; diff --git a/src/components/SingleTermView/OverView/OverView.jsx b/src/components/SingleTermView/OverView/OverView.jsx index ef173468..ee1397ec 100644 --- a/src/components/SingleTermView/OverView/OverView.jsx +++ b/src/components/SingleTermView/OverView/OverView.jsx @@ -3,14 +3,15 @@ import { Divider, Grid, } from "@mui/material"; +import Details from "./Details"; +import { debounce } from 'lodash'; +import PropTypes from 'prop-types'; import Hierarchy from "./Hierarchy"; import Predicates from "./Predicates"; -import Details from "./Details"; -import RawDataViewer from "./RawDataViewer"; import {useQuery} from "../../../helpers"; +import RawDataViewer from "./RawDataViewer"; import {useCallback, useEffect, useMemo, useState} from "react"; import { getMatchTerms } from "../../../api/endpoints"; -import { debounce } from 'lodash'; const OverView = ({ isCodeViewVisible, selectedDataFormat }) => { const query = useQuery(); @@ -18,6 +19,7 @@ const OverView = ({ isCodeViewVisible, selectedDataFormat }) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchTerms = useCallback( debounce((searchTerm) => { if (searchTerm) { @@ -64,4 +66,9 @@ const OverView = ({ isCodeViewVisible, selectedDataFormat }) => { ) } -export default OverView \ No newline at end of file +OverView.propTypes = { + isCodeViewVisible: PropTypes.bool, + selectedDataFormat: PropTypes.string +} + +export default OverView; diff --git a/src/components/SingleTermView/OverView/PredicateGroupInput.jsx b/src/components/SingleTermView/OverView/PredicateGroupInput.jsx index 5909f29c..0e2caa49 100644 --- a/src/components/SingleTermView/OverView/PredicateGroupInput.jsx +++ b/src/components/SingleTermView/OverView/PredicateGroupInput.jsx @@ -1,15 +1,15 @@ -import {Box, MenuItem, Select, Typography, ToggleButton, ToggleButtonGroup} from "@mui/material"; +import { debounce } from 'lodash'; +import PropTypes from 'prop-types'; +import SingleSearch from "../SingleSearch"; import FormControl from "@mui/material/FormControl"; -import {vars} from "../../../theme/variables"; +import {getMatchTerms} from "../../../api/endpoints"; import {useCallback, useEffect, useState} from "react"; import TextFieldsIcon from '@mui/icons-material/TextFields'; +import predicatesData from "../../../static/predicates.json"; import LinkOutlinedIcon from '@mui/icons-material/LinkOutlined'; -import SingleSearch from "../SingleSearch"; -import { debounce } from 'lodash'; -import predicatesData from "../../../static/predicates.json" -import {getMatchTerms} from "../../../api/endpoints"; -import * as mockApi from '../../../api/endpoints/swaggerMockMissingEndpoints'; +import {Box, MenuItem, Select, Typography, ToggleButton, ToggleButtonGroup} from "@mui/material"; +import {vars} from "../../../theme/variables"; const {gray700, gray300, gray800, gray600} = vars const PredicateGroupInput = ({ predicate, onChange }) => { @@ -17,14 +17,14 @@ const PredicateGroupInput = ({ predicate, onChange }) => { const [objectSearchTerm, setObjectSearchTerm] = useState(''); const [terms, setTerms] = useState([]); const [selectedType, setSelectedType] = useState(predicate.object.type); - + const onToggleButtonChange = (event, newValue) => { if (newValue) { setToggleButtonValue(newValue); onChange({ ...predicate.object, isLink: newValue === 'link' }); } }; - + const handleSelectChange = (e) => { const newType = e.target.value; setSelectedType(newType); @@ -37,6 +37,7 @@ const PredicateGroupInput = ({ predicate, onChange }) => { setTerms([]); } + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchTerms = useCallback(debounce(async (searchTerm) => { const data = await getMatchTerms(searchTerm); setTerms(data?.results); @@ -128,4 +129,9 @@ const PredicateGroupInput = ({ predicate, onChange }) => { ); }; -export default PredicateGroupInput; \ No newline at end of file +PredicateGroupInput.propTypes = { + predicate: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired +}; + +export default PredicateGroupInput; diff --git a/src/components/SingleTermView/OverView/Predicates.jsx b/src/components/SingleTermView/OverView/Predicates.jsx index ee17b208..c26e4764 100644 --- a/src/components/SingleTermView/OverView/Predicates.jsx +++ b/src/components/SingleTermView/OverView/Predicates.jsx @@ -1,23 +1,23 @@ import React from "react"; -import {Box, Typography, ToggleButton, ToggleButtonGroup} from "@mui/material"; -import { vars } from "../../../theme/variables"; +import PropTypes from 'prop-types'; import ExpandIcon from '@mui/icons-material/Expand'; import RemoveIcon from '@mui/icons-material/Remove'; import PredicatesAccordion from "./PredicatesAccordion"; +import {Box, Typography, ToggleButton, ToggleButtonGroup} from "@mui/material"; - +import { vars } from "../../../theme/variables"; const { gray800 } = vars; const Predicates = ({ data, isGraphVisible }) => { const [predicates, setPredicates] = React.useState([]); const [toggleButtonValue, setToggleButtonValue] = React.useState('compress') - + const onToggleButtonChange = (event, newValue) => { if (newValue) { setToggleButtonValue(newValue) } } - + React.useEffect(() => { data?.predicates && setPredicates(data?.predicates) }, [data]); @@ -32,7 +32,6 @@ const Predicates = ({ data, isGraphVisible }) => { onChange={onToggleButtonChange} sx={{ gap: '.75rem', - '& .MuiButtonBase-root': { borderRadius: '.5rem !important' } @@ -49,7 +48,11 @@ const Predicates = ({ data, isGraphVisible }) => { +} +Predicates.propTypes = { + data: PropTypes.object, + isGraphVisible: PropTypes.bool } -export default Predicates \ No newline at end of file +export default Predicates; diff --git a/src/components/SingleTermView/OverView/PredicatesAccordion.jsx b/src/components/SingleTermView/OverView/PredicatesAccordion.jsx index 59b26543..c6dcb548 100644 --- a/src/components/SingleTermView/OverView/PredicatesAccordion.jsx +++ b/src/components/SingleTermView/OverView/PredicatesAccordion.jsx @@ -10,16 +10,17 @@ import { ToggleButtonGroup, ToggleButton } from "@mui/material"; -import CustomizedTable from "./CustomizedTable"; -import ViewDiagramDialog from "./ViewDiagramDialog"; +import PropTypes from "prop-types"; import { useQuery } from "../../../helpers"; import Graph from "../../GraphViewer/Graph"; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import CustomizedTable from "./CustomizedTable"; +import ViewDiagramDialog from "./ViewDiagramDialog"; import CallMadeIcon from '@mui/icons-material/CallMade'; import { FullscreenOutlined } from "@mui/icons-material"; import { TableChartIcon, GraphIcon } from "../../../Icons"; -import { vars } from "../../../theme/variables"; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { vars } from "../../../theme/variables"; const { gray600 } = vars; const PredicatesAccordion = ({ data, expandAllPredicates, isGraphVisible }) => { @@ -153,4 +154,10 @@ const PredicatesAccordion = ({ data, expandAllPredicates, isGraphVisible }) => { ); }; +PredicatesAccordion.propTypes = { + data: PropTypes.array.isRequired, + expandAllPredicates: PropTypes.bool, + isGraphVisible: PropTypes.bool +}; + export default PredicatesAccordion; diff --git a/src/components/SingleTermView/OverView/RawDataViewer.jsx b/src/components/SingleTermView/OverView/RawDataViewer.jsx index 0c7e3db5..7053417a 100644 --- a/src/components/SingleTermView/OverView/RawDataViewer.jsx +++ b/src/components/SingleTermView/OverView/RawDataViewer.jsx @@ -1,13 +1,14 @@ -import React, { useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; +import { useState, useEffect } from 'react'; import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; import { a11yLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'; -import axios from 'axios'; -import { vars } from '../../../theme/variables'; import * as mockApi from './../../../api/endpoints/interLexURIStructureAPI'; -const useMockApi = () => mockApi; +import { vars } from '../../../theme/variables'; const { gray25, gray200, gray500 } = vars; +const useMockApi = () => mockApi; + const customStyle = { fontSize: '1rem', backgroundColor: '#fff', @@ -17,6 +18,7 @@ const customStyle = { padding: 0 }; +// eslint-disable-next-line no-unused-vars const formatExtensions = { 'JSON-LD': 'jsonld', 'Turtle': 'ttl', @@ -27,6 +29,7 @@ const formatExtensions = { const RawDataViewer = ({ dataId, dataFormat }) => { const [formattedData, setFormattedData] = useState(null); + // eslint-disable-next-line no-unused-vars const [loading, setLoading] = useState(true); const { getEndpointsIlxGet } = useMockApi(); @@ -35,6 +38,7 @@ const RawDataViewer = ({ dataId, dataFormat }) => { setFormattedData(JSON.stringify(rawResponse, null, 2)); setLoading(false) }) + // eslint-disable-next-line react-hooks/exhaustive-deps }, [dataId, dataFormat]); return ( @@ -67,4 +71,9 @@ const RawDataViewer = ({ dataId, dataFormat }) => { ); }; +RawDataViewer.propTypes = { + dataId: PropTypes.string.isRequired, + dataFormat: PropTypes.string.isRequired +}; + export default RawDataViewer; diff --git a/src/components/SingleTermView/OverView/TableRow.jsx b/src/components/SingleTermView/OverView/TableRow.jsx index d8d34e7b..1ff524a4 100644 --- a/src/components/SingleTermView/OverView/TableRow.jsx +++ b/src/components/SingleTermView/OverView/TableRow.jsx @@ -1,6 +1,9 @@ -import { Box, IconButton, Tooltip, Typography } from "@mui/material"; import { useState } from "react"; +import PropTypes from "prop-types"; +import { Box, IconButton, Tooltip, Typography } from "@mui/material"; import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'; + + const TableRow = ({ tableStyles, data, onDragStart, onDragEnter, onDragEnd, index, columnWidth }) => { const { id, subject, predicate, object } = data; const [isHovered, setIsHovered] = useState(false); @@ -48,4 +51,14 @@ const TableRow = ({ tableStyles, data, onDragStart, onDragEnter, onDragEnd, inde ); }; -export default TableRow; \ No newline at end of file +TableRow.propTypes = { + tableStyles: PropTypes.object.isRequired, + data: PropTypes.object.isRequired, + onDragStart: PropTypes.func.isRequired, + onDragEnter: PropTypes.func.isRequired, + onDragEnd: PropTypes.func.isRequired, + index: PropTypes.number.isRequired, + columnWidth: PropTypes.number.isRequired +}; + +export default TableRow; diff --git a/src/components/SingleTermView/OverView/ViewDiagramDialog.jsx b/src/components/SingleTermView/OverView/ViewDiagramDialog.jsx index 439af16d..06fddfb6 100644 --- a/src/components/SingleTermView/OverView/ViewDiagramDialog.jsx +++ b/src/components/SingleTermView/OverView/ViewDiagramDialog.jsx @@ -1,16 +1,18 @@ -import CustomizedDialog from "../../common/CustomizedDialog"; +import * as React from "react"; +import {useState} from "react"; +import PropTypes from 'prop-types' +import Button from "@mui/material/Button"; import {Box, Divider} from "@mui/material"; +import Graph from "../../GraphViewer/Graph"; import Typography from "@mui/material/Typography"; -import Button from "@mui/material/Button"; -import PlaylistAddOutlinedIcon from "@mui/icons-material/PlaylistAddOutlined"; -import * as React from "react"; -import {vars} from "../../../theme/variables"; import AddPredicateDialog from "./AddPredicateDialog"; -import {useState} from "react"; +import CustomizedDialog from "../../common/CustomizedDialog"; import CustomSingleSelect from "../../common/CustomSingleSelect"; -import Graph from "../../GraphViewer/Graph"; +import PlaylistAddOutlinedIcon from "@mui/icons-material/PlaylistAddOutlined"; +import {vars} from "../../../theme/variables"; const {gray600, gray700} = vars + const HeaderRightSideContent = ({handleOpenAddPredicate, selectedItem, predicates}) => { const [type, setType] = React.useState(selectedItem?.title); const [count, setCount] = React.useState(selectedItem?.count) @@ -81,10 +83,22 @@ const ViewDiagramDialog = ({open, handleClose, image, selectedItem, predicates}) { openAddPredicate && } - - ) } -export default ViewDiagramDialog \ No newline at end of file +HeaderRightSideContent.propTypes = { + handleOpenAddPredicate: PropTypes.func, + selectedItem: PropTypes.object, + predicates: PropTypes.array +} + +ViewDiagramDialog.propTypes = { + open: PropTypes.bool, + handleClose: PropTypes.func, + image: PropTypes.string, + selectedItem: PropTypes.object, + predicates: PropTypes.array +} + +export default ViewDiagramDialog diff --git a/src/components/SingleTermView/RequestMergeChanges.jsx b/src/components/SingleTermView/RequestMergeChanges.jsx index f5752cca..d892a891 100644 --- a/src/components/SingleTermView/RequestMergeChanges.jsx +++ b/src/components/SingleTermView/RequestMergeChanges.jsx @@ -1,14 +1,14 @@ -import React from "react"; -import { useState, useEffect, useCallback } from "react"; +import { debounce } from 'lodash' +import PropTypes from "prop-types"; +import { EditNoteIcon } from "../../Icons"; import { Box, Button } from "@mui/material"; -import CustomizedDialog from "../common/CustomizedDialog"; import MergePanel from "./MergePanel/MergePanel"; import StatusDialog from "../common/StatusDialog"; -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; -import { EditNoteIcon } from "../../Icons"; import { getMatchTerms } from "../../api/endpoints"; +import { useState, useEffect, useCallback } from "react"; +import CustomizedDialog from "../common/CustomizedDialog"; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import { getVariant } from "../../api/endpoints/swaggerMockMissingEndpoints"; -import { debounce } from 'lodash' const HeaderRightSideContent = ({ handleClose, handleSubmit }) => { @@ -22,13 +22,19 @@ const HeaderRightSideContent = ({ handleClose, handleSubmit }) => { ); }; +HeaderRightSideContent.propTypes = { + handleClose: PropTypes.func.isRequired, + handleSubmit: PropTypes.func.isRequired, +}; const RequestMergeChanges = ({ searchTerm, open, handleClose }) => { const [data, setData] = useState(null); const [modifiedData, setModifiedData] = useState(null); + // eslint-disable-next-line const [loading, setLoading] = useState(true); const [openStatusDialog, setOpenStatusDialog] = useState(false); + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchTerms = useCallback( debounce((searchTerm) => { if (searchTerm) { @@ -36,7 +42,7 @@ const RequestMergeChanges = ({ searchTerm, open, handleClose }) => { setData(data?.results[0]); setLoading(false); }); - getVariant("base", "ILX_....").then(data => { + getVariant("base", "ILX_....").then(data => { setModifiedData(data); }); } @@ -87,4 +93,10 @@ const RequestMergeChanges = ({ searchTerm, open, handleClose }) => { ) } -export default RequestMergeChanges; \ No newline at end of file +RequestMergeChanges.propTypes = { + searchTerm: PropTypes.string.isRequired, + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired, +}; + +export default RequestMergeChanges; diff --git a/src/components/SingleTermView/SingleSearch.jsx b/src/components/SingleTermView/SingleSearch.jsx index 670b909d..13996436 100644 --- a/src/components/SingleTermView/SingleSearch.jsx +++ b/src/components/SingleTermView/SingleSearch.jsx @@ -1,3 +1,4 @@ +import PropTypes from "prop-types"; import { useRef, useState } from "react"; import { TextField, @@ -6,19 +7,21 @@ import { Typography, Box, } from "@mui/material"; -import { vars } from "../../theme/variables"; import { SearchIcon } from "../../Icons"; +import { vars } from "../../theme/variables"; import ListItem from "@mui/material/ListItem"; const { brand300, gray50, gray200, gray900, gray600 } = vars; const SingleSearch = ({ onChange, + // eslint-disable-next-line no-unused-vars selectedValue, options = [], startAdornment = true, sx, placeholder, + // eslint-disable-next-line no-unused-vars isFullWidth = true, }) => { const [searchTerm, setSearchTerm] = useState(""); @@ -113,4 +116,15 @@ const SingleSearch = ({ ); }; +SingleSearch.propTypes = { + onChange: PropTypes.func.isRequired, + selectedValue: PropTypes.object, + options: PropTypes.array, + startAdornment: PropTypes.bool, + sx: PropTypes.object, + placeholder: PropTypes.string, + isFullWidth: PropTypes.bool, + key: PropTypes.string, +}; + export default SingleSearch; diff --git a/src/components/SingleTermView/Variants/CustomTableHead.jsx b/src/components/SingleTermView/Variants/CustomTableHead.jsx index 18a20eed..3fbaf527 100644 --- a/src/components/SingleTermView/Variants/CustomTableHead.jsx +++ b/src/components/SingleTermView/Variants/CustomTableHead.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -import {TableHead, TableSortLabel, TableRow, TableCell, Box, IconButton} from '@mui/material'; import {EditNoteOutlined} from "@mui/icons-material"; +import {TableHead, TableSortLabel, TableRow, TableCell, Box, IconButton} from '@mui/material'; export default function CustomTableHead(props) { const { order, orderBy, onRequestSort, headCells, viewEditAttributes = false, setOpenEditAttributes, setAttributes, attributes } = props; @@ -79,4 +79,5 @@ CustomTableHead.propTypes = { viewEditAttributes: PropTypes.bool, setOpenEditAttributes: PropTypes.func, setAttributes: PropTypes.func, + attributes: PropTypes.array }; diff --git a/src/components/SingleTermView/Variants/VariantsPanel.jsx b/src/components/SingleTermView/Variants/VariantsPanel.jsx index 5dcc9506..9427edda 100644 --- a/src/components/SingleTermView/Variants/VariantsPanel.jsx +++ b/src/components/SingleTermView/Variants/VariantsPanel.jsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import { Box } from '@mui/material'; import VariantsTable from './VariantsTable'; import { getVariants } from '../../../api/endpoints'; @@ -71,7 +72,8 @@ const headCells = [ { id: 'action_buttons', label: '' } ]; -const VariantsPanel = () => { +const VariantsPanel = () => { + // eslint-disable-next-line no-unused-vars const [variants, setVariants] = React.useState([]); React.useEffect(() => { @@ -86,4 +88,9 @@ const VariantsPanel = () => { ) } + +VariantsPanel.propTypes = { + variants: PropTypes.array +} + export default VariantsPanel; diff --git a/src/components/SingleTermView/Variants/VariantsTable.jsx b/src/components/SingleTermView/Variants/VariantsTable.jsx index e7d19d72..437859c3 100644 --- a/src/components/SingleTermView/Variants/VariantsTable.jsx +++ b/src/components/SingleTermView/Variants/VariantsTable.jsx @@ -1,19 +1,20 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import { Box, Table, TableBody, TableCell, TableContainer, TableRow, Paper, Chip, Typography, IconButton, Pagination, PaginationItem } from '@mui/material'; import CustomTableHead from './CustomTableHead'; -import { ArrowOutwardIcon, DownloadIcon } from '../../../Icons'; import DoneIcon from '@mui/icons-material/Done'; -import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; -import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import { vars } from '../../../theme/variables'; import {getComparator, stableSort} from "../../../helpers"; +import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import { ArrowOutwardIcon, DownloadIcon } from '../../../Icons'; +import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined'; +import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; +import { vars } from '../../../theme/variables'; const { gray100, gray200, gray600, gray700, gray900 } = vars; const paperStyle = { @@ -70,6 +71,7 @@ const VariantsTable = ({ rows, headCells }) => { const sortedRows = React.useMemo( () => stableSort(rows, getComparator(order, orderBy)), + // eslint-disable-next-line react-hooks/exhaustive-deps [order, orderBy] ); @@ -158,4 +160,9 @@ const VariantsTable = ({ rows, headCells }) => { ); }; -export default VariantsTable; \ No newline at end of file +VariantsTable.propTypes = { + rows: PropTypes.array.isRequired, + headCells: PropTypes.array.isRequired, +}; + +export default VariantsTable; diff --git a/src/components/TermEditor/AddNewTermDialogContent.jsx b/src/components/TermEditor/AddNewTermDialogContent.jsx index 6ae2e4d4..7c11140e 100644 --- a/src/components/TermEditor/AddNewTermDialogContent.jsx +++ b/src/components/TermEditor/AddNewTermDialogContent.jsx @@ -1,28 +1,28 @@ -import * as React from "react"; -import { useState, useEffect, useMemo, useCallback } from "react"; -import { useNavigate } from "react-router-dom"; +import { debounce } from 'lodash'; +import PropTypes from "prop-types"; import { Box } from "@mui/material"; -import { vars } from "../../theme/variables"; -import BasicTabs from "../common/CustomTabs"; -import ManualImportTab from "./ManualImportTab"; import ImportFileTab from "./ImportFileTab"; +import BasicTabs from "../common/CustomTabs"; +import { addTerm } from "../../api/endpoints"; import NewTermSidebar from "./NewTermSidebar"; -import AddPredicatesStep from "./AddPredicatesStep"; import StatusStep from "../common/StatusStep"; -import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; +import { useNavigate } from "react-router-dom"; +import ManualImportTab from "./ManualImportTab"; +import AddPredicatesStep from "./AddPredicatesStep"; import { getAddTermStatusProps } from "./termStatusProps"; -import * as mockApi from "../../api/endpoints/swaggerMockMissingEndpoints"; -import * as mockApiInterlex from "../../api/endpoints/interLexURIStructureAPI"; import { termParser } from "../../../src/parsers/termParser"; +import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; import { getExistingIDs, getUser } from "../../api/endpoints"; -import { addTerm } from "../../api/endpoints"; -import { debounce } from 'lodash'; +import { useState, useEffect, useMemo, useCallback } from "react"; +import * as mockApi from "../../api/endpoints/swaggerMockMissingEndpoints"; +import * as mockApiInterlex from "../../api/endpoints/interLexURIStructureAPI"; + +import { vars } from "../../theme/variables"; +const { gray800, gray700 } = vars; const useMockApi = () => mockApi; const useMockApiInterlex = () => mockApiInterlex; -const { gray800, gray700 } = vars; - const initialFormState = { label: "", synonyms: [], @@ -68,6 +68,7 @@ const AddNewTermDialogContent = ({ activeStep, areMatchesChecked, onMatchesChang const memoData = useMemo(() => data, [data]); + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchTerms = useCallback( debounce((termValue) => { setLoading(true); @@ -96,6 +97,7 @@ const AddNewTermDialogContent = ({ activeStep, areMatchesChecked, onMatchesChang .catch((error) => { console.log("Error ", error) }); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [addTerm]); const handleChangeTabs = (_, newValue) => setTabValue(newValue); @@ -168,6 +170,7 @@ const AddNewTermDialogContent = ({ activeStep, areMatchesChecked, onMatchesChang } }, [memoData]); + // eslint-disable-next-line react-hooks/exhaustive-deps const getIds = useCallback(debounce(async () => { const ids = await getExistingIDs(); setIds(ids) @@ -175,7 +178,7 @@ const AddNewTermDialogContent = ({ activeStep, areMatchesChecked, onMatchesChang useEffect(() => { getIds(); - }, []) + }, [getIds]); useEffect(() => { if (activeStep === 2) { @@ -212,6 +215,7 @@ const AddNewTermDialogContent = ({ activeStep, areMatchesChecked, onMatchesChang const isResultsEmpty = termResults.length === 0; const isLabelEmpty = formState.label === ""; + // eslint-disable-next-line no-unused-vars const isContinueButtonDisabled = !areMatchesChecked || isLabelEmpty const formattedNewTermId = formatIdText(newTermId); @@ -255,4 +259,11 @@ const AddNewTermDialogContent = ({ activeStep, areMatchesChecked, onMatchesChang ); }; -export default AddNewTermDialogContent; \ No newline at end of file +AddNewTermDialogContent.propTypes = { + activeStep: PropTypes.number.isRequired, + areMatchesChecked: PropTypes.bool.isRequired, + onMatchesChange: PropTypes.func.isRequired, + onReset: PropTypes.func.isRequired +}; + +export default AddNewTermDialogContent; diff --git a/src/components/TermEditor/AddPredicatesStep.jsx b/src/components/TermEditor/AddPredicatesStep.jsx index 284f6bd5..b8ac83ce 100644 --- a/src/components/TermEditor/AddPredicatesStep.jsx +++ b/src/components/TermEditor/AddPredicatesStep.jsx @@ -1,15 +1,16 @@ import React from "react"; -import { Box, Typography, Grid, Button } from "@mui/material"; -import PredicateGroupInput from "../SingleTermView/OverView/PredicateGroupInput"; +import PropTypes from "prop-types"; +import AddIcon from '@mui/icons-material/Add'; import CustomizedInput from "../common/CustomizedInput"; +import { Box, Typography, Grid, Button } from "@mui/material"; import CustomSingleSelect from "../common/CustomSingleSelect"; -import AddIcon from '@mui/icons-material/Add'; import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; +import PredicateGroupInput from "../SingleTermView/OverView/PredicateGroupInput"; + import { vars } from "../../theme/variables"; const { gray800 } = vars; const AddPredicatesStep = ({ searchTerm, predicatesOptions }) => { - const [predicates, setPredicates] = React.useState([{ subject: searchTerm, predicate: '', object: { type: 'Object', value: '', isLink: false } }]); const handleAddPredicate = () => { @@ -82,4 +83,9 @@ const AddPredicatesStep = ({ searchTerm, predicatesOptions }) => { ) } -export default AddPredicatesStep; \ No newline at end of file +AddPredicatesStep.propTypes = { + searchTerm: PropTypes.string.isRequired, + predicatesOptions: PropTypes.array.isRequired +}; + +export default AddPredicatesStep; diff --git a/src/components/TermEditor/ImportFile.jsx b/src/components/TermEditor/ImportFile.jsx index 9e54c879..8638f781 100644 --- a/src/components/TermEditor/ImportFile.jsx +++ b/src/components/TermEditor/ImportFile.jsx @@ -1,8 +1,9 @@ -import React, { useEffect, useState } from "react"; +import PropTypes from "prop-types"; +import { useEffect, useState } from "react"; import { Box, IconButton, Typography } from "@mui/material"; import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; -import { vars } from "../../theme/variables"; +import { vars } from "../../theme/variables"; const { white, gray300, brand700, gray600, gray700 } = vars; const MAX_FILE_SIZE_MB = 800; @@ -83,6 +84,8 @@ const ImportFile = ({ onFilesSelected }) => { } }; + + // eslint-disable-next-line no-unused-vars const handleRemoveFile = (index) => { setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index)); }; @@ -128,4 +131,8 @@ const ImportFile = ({ onFilesSelected }) => { ); }; +ImportFile.propTypes = { + onFilesSelected: PropTypes.func.isRequired, +}; + export default ImportFile; diff --git a/src/components/TermEditor/ImportFileTab.jsx b/src/components/TermEditor/ImportFileTab.jsx index fd37b06f..0443cf78 100644 --- a/src/components/TermEditor/ImportFileTab.jsx +++ b/src/components/TermEditor/ImportFileTab.jsx @@ -1,10 +1,11 @@ -import { Box, Stack, Typography, FormControl, Divider } from "@mui/material"; -import CustomizedInput from "../common/CustomizedInput"; +import PropTypes from "prop-types"; import ImportFile from "./ImportFile"; -import Checkbox from "../common/CustomCheckbox"; import { CSVIcon } from "../../Icons"; -import { vars } from "../../theme/variables"; +import Checkbox from "../common/CustomCheckbox"; +import CustomizedInput from "../common/CustomizedInput"; +import { Box, Stack, Typography, FormControl, Divider } from "@mui/material"; +import { vars } from "../../theme/variables"; const { gray300, gray800, gray600, gray700, gray200 } = vars; const ImportFileTab = ({ files, url, onFilesChange, onChangeUrl }) => { @@ -68,4 +69,11 @@ const ImportFileTab = ({ files, url, onFilesChange, onChangeUrl }) => { ) } +ImportFileTab.propTypes = { + files: PropTypes.array.isRequired, + url: PropTypes.string.isRequired, + onFilesChange: PropTypes.func.isRequired, + onChangeUrl: PropTypes.func.isRequired +} + export default ImportFileTab; diff --git a/src/components/TermEditor/ManualImportTab.jsx b/src/components/TermEditor/ManualImportTab.jsx index f326abe7..fc2996a3 100644 --- a/src/components/TermEditor/ManualImportTab.jsx +++ b/src/components/TermEditor/ManualImportTab.jsx @@ -1,16 +1,15 @@ -import React from "react"; -import { Box, Grid, Button, FormControlLabel } from "@mui/material"; -import CustomInputBox from "../common/CustomInputBox"; +import PropTypes from "prop-types"; import Checkbox from "../common/CustomCheckbox"; -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; -import { vars } from "../../theme/variables"; import ExistingIdsSearch from "./ExistingIdsSearch"; +import CustomInputBox from "../common/CustomInputBox"; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import { Box, Grid, Button, FormControlLabel } from "@mui/material"; import CustomAutocompleteBox from "../common/CustomAutocompleteBox"; +import { vars } from "../../theme/variables"; const { gray600, brand700, brand800 } = vars; const ManualImportTab = ({ formState, onInputChange, handleSidebarOpen, matchesChecked, handleMatchesChange, isResultsEmpty, existingIDsOptions, onExistingIDsChange, onSynonymsChange }) => { - return ( @@ -130,4 +129,16 @@ const ManualImportTab = ({ formState, onInputChange, handleSidebarOpen, matchesC ); }; +ManualImportTab.propTypes = { + formState: PropTypes.object.isRequired, + onInputChange: PropTypes.func.isRequired, + handleSidebarOpen: PropTypes.func.isRequired, + matchesChecked: PropTypes.bool.isRequired, + handleMatchesChange: PropTypes.func.isRequired, + isResultsEmpty: PropTypes.bool.isRequired, + existingIDsOptions: PropTypes.array.isRequired, + onExistingIDsChange: PropTypes.func.isRequired, + onSynonymsChange: PropTypes.func.isRequired +}; + export default ManualImportTab; diff --git a/src/components/TermEditor/NewTermSidebar.jsx b/src/components/TermEditor/NewTermSidebar.jsx index da90a238..2067f866 100644 --- a/src/components/TermEditor/NewTermSidebar.jsx +++ b/src/components/TermEditor/NewTermSidebar.jsx @@ -1,14 +1,12 @@ -import React from 'react'; -import { Box, Typography, IconButton, Tooltip, Stack, CircularProgress } from '@mui/material'; +import PropTypes from 'prop-types'; import { StartIcon, JoinRightIcon } from '../../Icons'; import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; -import { vars } from '../../theme/variables'; +import { Box, Typography, IconButton, Tooltip, Stack, CircularProgress } from '@mui/material'; +import { vars } from '../../theme/variables'; const { gray200, gray800, brand600 } = vars; - export default function NewTermSidebar({ open, loading, onToggle, results, isResultsEmpty }) { - if (loading) { return @@ -100,3 +98,11 @@ export default function NewTermSidebar({ open, loading, onToggle, results, isRes ); } + +NewTermSidebar.propTypes = { + open: PropTypes.bool.isRequired, + loading: PropTypes.bool.isRequired, + onToggle: PropTypes.func.isRequired, + results: PropTypes.array.isRequired, + isResultsEmpty: PropTypes.bool.isRequired, +}; diff --git a/src/components/TermEditor/TermDialog.jsx b/src/components/TermEditor/TermDialog.jsx index 88a60e72..2017216a 100644 --- a/src/components/TermEditor/TermDialog.jsx +++ b/src/components/TermEditor/TermDialog.jsx @@ -1,13 +1,14 @@ import * as React from "react"; import { useState } from "react"; -import { Box, Divider, MobileStepper, Stack, Button } from "@mui/material"; -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; -import { vars } from "../../theme/variables"; -import CustomizedDialog from "../common/CustomizedDialog"; +import PropTypes from "prop-types"; import CustomButton from "../common/CustomButton"; import TermDialogContent from "./TermDialogContent"; +import CustomizedDialog from "../common/CustomizedDialog"; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import AddNewTermDialogContent from "./AddNewTermDialogContent"; +import { Box, Divider, MobileStepper, Stack, Button } from "@mui/material"; +import { vars } from "../../theme/variables"; const { gray100, gray200, gray400, brand700 } = vars; const HeaderRightSideContent = ({ activeStep, onContinue, onClose, isContinueButtonDisabled }) => ( @@ -101,4 +102,18 @@ const TermDialog = ({ open, handleClose, searchTerm, forwardPredicateStep }) => ); }; +HeaderRightSideContent.propTypes = { + activeStep: PropTypes.number.isRequired, + onContinue: PropTypes.func.isRequired, + onClose: PropTypes.func.isRequired, + isContinueButtonDisabled: PropTypes.bool.isRequired +}; + +TermDialog.propTypes = { + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired, + searchTerm: PropTypes.string, + forwardPredicateStep: PropTypes.bool +}; + export default TermDialog; diff --git a/src/components/TermEditor/TermDialogContent.jsx b/src/components/TermEditor/TermDialogContent.jsx index 20f8cbc5..53766526 100644 --- a/src/components/TermEditor/TermDialogContent.jsx +++ b/src/components/TermEditor/TermDialogContent.jsx @@ -1,26 +1,24 @@ -import * as React from "react"; -import { useState, useEffect, useMemo, useCallback } from "react"; -import { Box, Stack, Typography, Chip } from "@mui/material"; -import AddPredicatesStep from "./AddPredicatesStep"; -import StatusStep from "../common/StatusStep"; +import { debounce } from 'lodash'; import TermForm from "./TermForm"; +import PropTypes from 'prop-types'; import TermSidebar from "./TermSidebar"; -import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; -import { getTermStatusProps } from "./termStatusProps"; -import * as mockApi from "../../api/endpoints/swaggerMockMissingEndpoints"; +import StatusStep from "../common/StatusStep"; +import AddPredicatesStep from "./AddPredicatesStep"; import { elasticSearch } from "../../api/endpoints"; -import { termParser } from "../../parsers/termParser"; -import { debounce } from 'lodash'; -import { vars } from "../../theme/variables"; +import { getTermStatusProps } from "./termStatusProps"; +import { Box, Stack, Typography, Chip } from "@mui/material"; +import AddOutlinedIcon from "@mui/icons-material/AddOutlined"; +import { useState, useEffect, useMemo, useCallback } from "react"; +import { vars } from "../../theme/variables"; const { success600, success700 } = vars; -const useMockApi = () => mockApi; - const TermDialogContent = ({ activeStep, searchTerm, onReset }) => { - const [loading, setLoading] = useState(true); const [openSidebar, setOpenSidebar] = useState(true); + // eslint-disable-next-line no-unused-vars + const [termValue, setTermValue] = useState(searchTerm); + // eslint-disable-next-line no-unused-vars const [responseStatus, setResponseStatus] = useState({ success: true }) const [predicates, setPredicates] = useState([{ subject: '', predicate: '', object: { type: 'Object', value: '', isLink: false } }]) const [data, setData] = useState(null); @@ -35,9 +33,15 @@ const TermDialogContent = ({ activeStep, searchTerm, onReset }) => { comment: '' }); + const getMatchTerms = (searchTerm) => { + return searchTerm; + } + + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchTerms = useCallback( debounce(async(searchTerm) => { setLoading(true); + // eslint-disable-next-line no-unused-vars const data = await elasticSearch(searchTerm); if (searchTerm) { const data = await elasticSearch(searchTerm); @@ -147,4 +151,10 @@ const TermDialogContent = ({ activeStep, searchTerm, onReset }) => { ) } -export default TermDialogContent; \ No newline at end of file +TermDialogContent.propTypes = { + activeStep: PropTypes.number.isRequired, + searchTerm: PropTypes.string.isRequired, + onReset: PropTypes.func.isRequired +} + +export default TermDialogContent; diff --git a/src/components/TermEditor/TermForm.jsx b/src/components/TermEditor/TermForm.jsx index 6d6dddfe..fa412862 100644 --- a/src/components/TermEditor/TermForm.jsx +++ b/src/components/TermEditor/TermForm.jsx @@ -1,9 +1,9 @@ -import React from "react"; -import { Box, Grid, Button, FormControlLabel, Autocomplete, Chip, Stack, Typography, TextField } from "@mui/material"; -import CustomInputBox from "../common/CustomInputBox"; +import PropTypes from 'prop-types'; import CloseIcon from '@mui/icons-material/Close'; -import { vars } from "../../theme/variables"; +import CustomInputBox from "../common/CustomInputBox"; +import { Box, Grid, Autocomplete, Chip, Stack, Typography, TextField } from "@mui/material"; +import { vars } from "../../theme/variables"; const { gray50, gray300, gray400, gray500, gray600, gray700, brand600, gray800 } = vars; const styles = { @@ -192,4 +192,11 @@ const TermForm = ({ formState, data, onInputChange, onAutocompleteChange }) => { ); }; -export default TermForm; \ No newline at end of file +TermForm.propTypes = { + formState: PropTypes.object, + data: PropTypes.object, + onInputChange: PropTypes.func, + onAutocompleteChange: PropTypes.func +}; + +export default TermForm; diff --git a/src/components/TermEditor/TermSidebar.jsx b/src/components/TermEditor/TermSidebar.jsx index 4bd0636a..13f88e81 100644 --- a/src/components/TermEditor/TermSidebar.jsx +++ b/src/components/TermEditor/TermSidebar.jsx @@ -1,15 +1,15 @@ import React from 'react'; -import { Box, Typography, IconButton, Tooltip, Stack, Divider, Grid, CircularProgress, Chip } from '@mui/material'; +import PropTypes from 'prop-types'; +import { ListIcon, StartIcon } from '../../Icons'; import CustomSingleSelect from '../common/CustomSingleSelect'; import CopyLinkComponent from '../common/CopyLinkComponent'; -import { ListIcon, StartIcon } from '../../Icons'; import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined'; -import { vars } from '../../theme/variables'; +import { Box, Typography, IconButton, Tooltip, Stack, Divider, Grid, CircularProgress, Chip } from '@mui/material'; +import { vars } from '../../theme/variables'; const { gray200, gray500, gray600, gray800 } = vars; - export default function TermSidebar({ open, loading, onToggle, data }) { const [numberOfVisiblePages, setNumberOfVisiblePages] = React.useState(20); @@ -17,6 +17,10 @@ export default function TermSidebar({ open, loading, onToggle, data }) { setNumberOfVisiblePages(v); }; + const handleChipClick = (id) => { + console.log('Chip clicked', id); + }; + if (loading) { return @@ -209,4 +213,11 @@ export default function TermSidebar({ open, loading, onToggle, data }) { )} ); -} \ No newline at end of file +} + +TermSidebar.propTypes = { + open: PropTypes.bool, + loading: PropTypes.bool, + onToggle: PropTypes.func, + data: PropTypes.object +} diff --git a/src/components/common/CopyLinkComponent.jsx b/src/components/common/CopyLinkComponent.jsx index 4419ea62..05cf8194 100644 --- a/src/components/common/CopyLinkComponent.jsx +++ b/src/components/common/CopyLinkComponent.jsx @@ -1,9 +1,11 @@ -import { Box, IconButton, Tooltip, Button } from '@mui/material'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; +import PropTypes from 'prop-types'; import LinkIcon from '@mui/icons-material/Link'; -import { vars } from "../../theme/variables"; +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; +import { Box, IconButton, Tooltip, Button } from '@mui/material'; +import { vars } from "../../theme/variables"; const { brand700 } = vars + const CopyLinkComponent = ({ url }) => { const handleCopy = () => { navigator.clipboard.writeText(url) @@ -33,4 +35,8 @@ const CopyLinkComponent = ({ url }) => { ); }; -export default CopyLinkComponent; \ No newline at end of file +CopyLinkComponent.propTypes = { + url: PropTypes.string.isRequired +} + +export default CopyLinkComponent; diff --git a/src/components/common/CustomAutocompleteBox.jsx b/src/components/common/CustomAutocompleteBox.jsx index a811efb9..719c9822 100644 --- a/src/components/common/CustomAutocompleteBox.jsx +++ b/src/components/common/CustomAutocompleteBox.jsx @@ -7,10 +7,11 @@ import { Stack, Typography } from "@mui/material"; -import { HelpOutlinedIcon } from "../../Icons"; -import { vars } from "../../theme/variables"; +import PropTypes from "prop-types"; import ListItem from '@mui/material/ListItem'; +import { HelpOutlinedIcon } from "../../Icons"; +import { vars } from "../../theme/variables"; const { white, brand600, gray50, gray200, gray600, gray800, gray300 } = vars; const CustomAutocompleteBox = ({ label, value, onChange, isRequired, placeholder, isEndAdornmentVisible, helperText, startAdornment, options }) => { @@ -196,4 +197,17 @@ const CustomAutocompleteBox = ({ label, value, onChange, isRequired, placeholder ); }; +CustomAutocompleteBox.propTypes = { + label: PropTypes.string.isRequired, + value: PropTypes.object, + onChange: PropTypes.func.isRequired, + isRequired: PropTypes.bool, + placeholder: PropTypes.string, + isEndAdornmentVisible: PropTypes.bool, + helperText: PropTypes.string, + startAdornment: PropTypes.node, + options: PropTypes.array, + key: PropTypes.string +}; + export default CustomAutocompleteBox; diff --git a/src/components/common/CustomBreadcrumbs.jsx b/src/components/common/CustomBreadcrumbs.jsx index 0f2536ca..bb884029 100644 --- a/src/components/common/CustomBreadcrumbs.jsx +++ b/src/components/common/CustomBreadcrumbs.jsx @@ -1,10 +1,12 @@ -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Typography from '@mui/material/Typography'; +import PropTypes from 'prop-types'; import Link from '@mui/material/Link'; +import Typography from '@mui/material/Typography'; +import Breadcrumbs from '@mui/material/Breadcrumbs'; import NavigateNextIcon from '@mui/icons-material/NavigateNext'; -import {vars} from "../../theme/variables"; +import {vars} from "../../theme/variables"; const {gray500, gray300, gray600, brand700, gray700} = vars + const CustomBreadcrumbs = ({breadcrumbItems}) => { return ( { color: gray700 } }, - '& .MuiBreadcrumbs-separator': { margin: '0 .75rem' } @@ -44,4 +45,12 @@ const CustomBreadcrumbs = ({breadcrumbItems}) => { ); } -export default CustomBreadcrumbs \ No newline at end of file +CustomBreadcrumbs.propTypes = { + breadcrumbItems: PropTypes.arrayOf(PropTypes.shape({ + label: PropTypes.string.isRequired, + href: PropTypes.string, + icon: PropTypes.elementType + })).isRequired +} + +export default CustomBreadcrumbs diff --git a/src/components/common/CustomButton.jsx b/src/components/common/CustomButton.jsx index fcda7726..d53a8e44 100644 --- a/src/components/common/CustomButton.jsx +++ b/src/components/common/CustomButton.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import PropTypes from 'prop-types'; import {IconButton} from '@mui/material'; import {vars} from "../../theme/variables"; @@ -25,4 +25,10 @@ const CustomButton = ({sx = {}, onClick, children}) => { ) } -export default CustomButton; \ No newline at end of file +CustomButton.propTypes = { + sx: PropTypes.object, + onClick: PropTypes.func, + children: PropTypes.node +} + +export default CustomButton; diff --git a/src/components/common/CustomCheckbox.jsx b/src/components/common/CustomCheckbox.jsx index 0facd417..382d9699 100644 --- a/src/components/common/CustomCheckbox.jsx +++ b/src/components/common/CustomCheckbox.jsx @@ -1,5 +1,5 @@ +import PropTypes from 'prop-types'; import {FormControlLabel} from "@mui/material"; -import React from "react" import {Checkbox as MuiCheckbox} from '@mui/material'; import { CheckboxDefault, CheckboxSelected } from "../../Icons"; @@ -23,4 +23,12 @@ const Checkbox = ({label = '', sx = {}, checked, onChange, name}) => { ) } -export default Checkbox; \ No newline at end of file +Checkbox.propTypes = { + label: PropTypes.string, + sx: PropTypes.object, + checked: PropTypes.bool, + onChange: PropTypes.func, + name: PropTypes.string +} + +export default Checkbox; diff --git a/src/components/common/CustomInputBox.jsx b/src/components/common/CustomInputBox.jsx index f6b6968c..7ad726db 100644 --- a/src/components/common/CustomInputBox.jsx +++ b/src/components/common/CustomInputBox.jsx @@ -1,7 +1,8 @@ -import { Stack, Typography, TextField, InputAdornment } from "@mui/material"; +import PropTypes from 'prop-types'; import { HelpOutlinedIcon } from "../../Icons"; -import { vars } from "../../theme/variables"; +import { Stack, Typography, TextField, InputAdornment } from "@mui/material"; +import { vars } from "../../theme/variables"; const { gray50, gray300, gray400, gray600, gray700, gray800, gray900, brand600 } = vars; const CustomInputBox = ({ id, name, value, onInputChange, label, isRequired, helperText, placeholder, isEndAdornmentVisible, multiline, rows, sx }) => { @@ -60,4 +61,20 @@ const CustomInputBox = ({ id, name, value, onInputChange, label, isRequired, hel ) } -export default CustomInputBox; \ No newline at end of file + +CustomInputBox.propTypes = { + id: PropTypes.string, + name: PropTypes.string, + value: PropTypes.string, + onInputChange: PropTypes.func, + label: PropTypes.string, + isRequired: PropTypes.bool, + helperText: PropTypes.string, + placeholder: PropTypes.string, + isEndAdornmentVisible: PropTypes.bool, + multiline: PropTypes.bool, + rows: PropTypes.number, + sx: PropTypes.object +} + +export default CustomInputBox; diff --git a/src/components/common/CustomPagination.jsx b/src/components/common/CustomPagination.jsx index b72e79ff..0732f10a 100644 --- a/src/components/common/CustomPagination.jsx +++ b/src/components/common/CustomPagination.jsx @@ -1,4 +1,3 @@ -import React from "react"; import PropTypes from "prop-types"; import { Pagination, PaginationItem, Typography } from "@mui/material"; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; diff --git a/src/components/common/CustomSelectBox.jsx b/src/components/common/CustomSelectBox.jsx index f6611486..346b79a3 100644 --- a/src/components/common/CustomSelectBox.jsx +++ b/src/components/common/CustomSelectBox.jsx @@ -1,8 +1,8 @@ -import * as React from 'react'; -import { Stack, FormControl, MenuItem, Select, Typography } from '@mui/material'; +import PropTypes from 'prop-types'; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; -import { vars } from '../../theme/variables'; +import { Stack, FormControl, MenuItem, Select, Typography } from '@mui/material'; +import { vars } from '../../theme/variables'; const { white, gray200, gray300, gray500, gray600, gray700, gray800 } = vars; const CustomSelectBox = ({ isRequired, label, value, onChange, options, sx, placeholder }) => { @@ -72,4 +72,14 @@ const CustomSelectBox = ({ isRequired, label, value, onChange, options, sx, plac ); } +CustomSelectBox.propTypes = { + isRequired: PropTypes.bool, + label: PropTypes.string, + value: PropTypes.any.isRequired, + onChange: PropTypes.func.isRequired, + options: PropTypes.array.isRequired, + sx: PropTypes.object, + placeholder: PropTypes.string +} + export default CustomSelectBox; diff --git a/src/components/common/CustomSingleSelect.jsx b/src/components/common/CustomSingleSelect.jsx index 72088172..c79a8361 100644 --- a/src/components/common/CustomSingleSelect.jsx +++ b/src/components/common/CustomSingleSelect.jsx @@ -1,8 +1,10 @@ -import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; +import PropTypes from 'prop-types'; import {FormControl, InputLabel, MenuItem, Select} from "@mui/material"; -import {vars} from "../../theme/variables"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; +import {vars} from "../../theme/variables"; const {gray700, gray300, gray500} = vars + const CustomSingleSelect = ({value, onChange, options, FormControlSX, SelectSX, isFormControlFullWidth, placeholder}) => { return( @@ -53,4 +55,14 @@ const CustomSingleSelect = ({value, onChange, options, FormControlSX, SelectSX, ) } -export default CustomSingleSelect \ No newline at end of file +CustomSingleSelect.propTypes = { + value: PropTypes.any.isRequired, + onChange: PropTypes.func.isRequired, + options: PropTypes.array.isRequired, + FormControlSX: PropTypes.object, + SelectSX: PropTypes.object, + isFormControlFullWidth: PropTypes.bool, + placeholder: PropTypes.string +} + +export default CustomSingleSelect diff --git a/src/components/common/CustomTable.jsx b/src/components/common/CustomTable.jsx index 1b34d051..5647926a 100644 --- a/src/components/common/CustomTable.jsx +++ b/src/components/common/CustomTable.jsx @@ -1,54 +1,88 @@ -import * as React from 'react'; -import { - Box, Table, TableBody, TableContainer, Paper -} from '@mui/material'; -import CustomTableHead from './CustomTableHead'; -import CustomPagination from './CustomPagination'; -import { vars } from '../../theme/variables'; +import PropTypes from "prop-types"; +import * as React from "react"; +import { Box, Table, TableBody, TableContainer, Paper } from "@mui/material"; +import CustomTableHead from "./CustomTableHead"; +import CustomPagination from "./CustomPagination"; +import { vars } from "../../theme/variables"; const { gray200 } = vars; const paperStyle = { - width: '100%', - border: `1px solid ${gray200}`, - boxShadow: '0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06)', - borderRadius: '0.75rem' + width: "100%", + border: `1px solid ${gray200}`, + boxShadow: + "0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06)", + borderRadius: "0.75rem", }; - const CustomTable = React.forwardRef((props, ref) => { - const {rows, order, orderBy, setOrder, setOrderBy, - headCells, isCheckboxPresent, selected, handleSelectAllClick, rowsPerPage, page, handlePageChange, children} = props; + const { + rows, + order, + orderBy, + setOrder, + setOrderBy, + headCells, + isCheckboxPresent, + selected, + handleSelectAllClick, + rowsPerPage, + page, + handlePageChange, + children, + } = props; - const handleRequestSort = (event, property) => { - setOrder(order === 'asc' ? 'desc' : 'asc') - setOrderBy(property); - }; + const handleRequestSort = (event, property) => { + setOrder(order === "asc" ? "desc" : "asc"); + setOrderBy(property); + }; - return ( - - - - - - - {children} - -
- - {rowsPerPage !== undefined && } - - - ); + return ( + + + + + + {children} +
+ + {rowsPerPage !== undefined && ( + + )} + + + ); }); -export default CustomTable; \ No newline at end of file +CustomTable.displayName = "CustomTable"; +CustomTable.propTypes = { + rows: PropTypes.array, + order: PropTypes.oneOf(["asc", "desc"]), + orderBy: PropTypes.string, + setOrder: PropTypes.func, + setOrderBy: PropTypes.func, + headCells: PropTypes.array, + isCheckboxPresent: PropTypes.bool, + selected: PropTypes.array, + handleSelectAllClick: PropTypes.func, + rowsPerPage: PropTypes.number, + page: PropTypes.number, + handlePageChange: PropTypes.func, + children: PropTypes.node, +}; + +export default CustomTable; diff --git a/src/components/common/CustomTableHead.jsx b/src/components/common/CustomTableHead.jsx index 705087e4..bc2fd78a 100644 --- a/src/components/common/CustomTableHead.jsx +++ b/src/components/common/CustomTableHead.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -import { TableHead, TableSortLabel, TableRow, TableCell } from '@mui/material'; import Checkbox from './CustomCheckbox'; +import { TableHead, TableSortLabel, TableRow, TableCell } from '@mui/material'; export default function CustomTableHead(props) { @@ -51,7 +51,12 @@ export default function CustomTableHead(props) { } CustomTableHead.propTypes = { - onRequestSort: PropTypes.func.isRequired, - order: PropTypes.oneOf(['asc', 'desc']).isRequired, - orderBy: PropTypes.string.isRequired, -}; \ No newline at end of file + onSelectAllClick: PropTypes.func, + order: PropTypes.oneOf(['asc', 'desc']), + orderBy: PropTypes.string, + numSelected: PropTypes.number, + rowCount: PropTypes.number, + onRequestSort: PropTypes.func, + headCells: PropTypes.array, + isCheckboxPresent: PropTypes.bool +} diff --git a/src/components/common/CustomTabs.jsx b/src/components/common/CustomTabs.jsx index 81c773b5..aaa1ce5d 100644 --- a/src/components/common/CustomTabs.jsx +++ b/src/components/common/CustomTabs.jsx @@ -1,11 +1,10 @@ -import * as React from 'react'; import PropTypes from 'prop-types'; -import Tabs from '@mui/material/Tabs'; +import Box from '@mui/material/Box'; import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; -import { vars } from "../../theme/variables"; +import { vars } from "../../theme/variables"; const { brand700, brand600, gray500, gray200 } = vars function CustomTabPanel(props) { const { children, value, index, ...other } = props; @@ -40,6 +39,8 @@ function a11yProps(index) { }; } + +// eslint-disable-next-line no-unused-vars const BasicTabs = ({ tabs, tabValue, handleChange, onMouseDown, parentBoxStyles, tabStyles }) => { return ( @@ -76,4 +77,13 @@ const BasicTabs = ({ tabs, tabValue, handleChange, onMouseDown, parentBoxStyles, ); } -export default BasicTabs \ No newline at end of file +BasicTabs.propTypes = { + tabs: PropTypes.array.isRequired, + tabValue: PropTypes.number.isRequired, + handleChange: PropTypes.func.isRequired, + onMouseDown: PropTypes.func, + parentBoxStyles: PropTypes.object, + tabStyles: PropTypes.object +}; + +export default BasicTabs diff --git a/src/components/common/CustomViewButton.jsx b/src/components/common/CustomViewButton.jsx index e4630f70..5b8fa5f1 100644 --- a/src/components/common/CustomViewButton.jsx +++ b/src/components/common/CustomViewButton.jsx @@ -1,6 +1,7 @@ +import PropTypes from 'prop-types'; import {Button} from "@mui/material"; -import {vars} from "../../theme/variables"; +import {vars} from "../../theme/variables"; const { gray50, gray300 } = vars; const CustomViewButton = ({ view, listView, onClick, icon }) => ( @@ -23,4 +24,11 @@ const CustomViewButton = ({ view, listView, onClick, icon }) => ( ); -export default CustomViewButton \ No newline at end of file +CustomViewButton.propTypes = { + view: PropTypes.string.isRequired, + listView: PropTypes.string.isRequired, + onClick: PropTypes.func.isRequired, + icon: PropTypes.element.isRequired +}; + +export default CustomViewButton diff --git a/src/components/common/CustomizedDialog.jsx b/src/components/common/CustomizedDialog.jsx index 59af80bc..ded95122 100644 --- a/src/components/common/CustomizedDialog.jsx +++ b/src/components/common/CustomizedDialog.jsx @@ -1,19 +1,27 @@ -import * as React from 'react'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import IconButton from '@mui/material/IconButton'; -import CloseIcon from '@mui/icons-material/Close'; -import Typography from '@mui/material/Typography'; -import {Box, Divider, Slide} from "@mui/material"; -import {vars} from "../../theme/variables"; -const {gray600, gray200} = vars +import * as React from "react"; +import PropTypes from "prop-types"; +import Dialog from "@mui/material/Dialog"; +import IconButton from "@mui/material/IconButton"; +import CloseIcon from "@mui/icons-material/Close"; +import Typography from "@mui/material/Typography"; +import { Box, Divider, Slide } from "@mui/material"; +import DialogContent from "@mui/material/DialogContent"; + +import { vars } from "../../theme/variables"; +const { gray600, gray200 } = vars; const Transition = React.forwardRef(function Transition(props, ref) { return ; }); -const CustomizedDialog = ({children, title, open, handleClose, HeaderRightSideContent, sx}) => { - +const CustomizedDialog = ({ + children, + title, + open, + handleClose, + HeaderRightSideContent, + sx, +}) => { return ( - - - - - - - {title} - - + id="customized-dialog-title" + > + + + + + + + {title} + + {HeaderRightSideContent} - + {children} ); -} +}; + +CustomizedDialog.propTypes = { + children: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired, + HeaderRightSideContent: PropTypes.node, + sx: PropTypes.object, +}; -export default CustomizedDialog \ No newline at end of file +export default CustomizedDialog; diff --git a/src/components/common/CustomizedInput.jsx b/src/components/common/CustomizedInput.jsx index 2a67729b..3dc16359 100644 --- a/src/components/common/CustomizedInput.jsx +++ b/src/components/common/CustomizedInput.jsx @@ -1,9 +1,10 @@ +import PropTypes from 'prop-types'; +import {Typography} from "@mui/material"; import { styled } from '@mui/material/styles'; import InputBase from '@mui/material/InputBase'; import FormControl from '@mui/material/FormControl'; -import {vars} from "../../theme/variables"; -import {Typography} from "@mui/material"; +import {vars} from "../../theme/variables"; const { gray800, gray300, gray700, brand600, gray500, gray50 }= vars const BootstrapInput = styled(InputBase)(() => ({ @@ -59,8 +60,15 @@ const CustomizedInput = (props) => { - ); } -export default CustomizedInput; \ No newline at end of file +CustomizedInput.propTypes = { + label: PropTypes.string, + value: PropTypes.string, + onChange: PropTypes.func, + placeholder: PropTypes.string, + sx: PropTypes.object +} + +export default CustomizedInput; diff --git a/src/components/common/CustomizedRadio.jsx b/src/components/common/CustomizedRadio.jsx index 54d95dc1..c0159b29 100644 --- a/src/components/common/CustomizedRadio.jsx +++ b/src/components/common/CustomizedRadio.jsx @@ -1,5 +1,7 @@ -import { styled } from '@mui/material/styles'; +import PropTypes from 'prop-types'; import Radio from '@mui/material/Radio'; +import { styled } from '@mui/material/styles'; + import {vars} from "../../theme/variables"; const {brand600, white, gray300, gray50} = vars @@ -9,7 +11,6 @@ const BpIcon = styled('span')(() => ({ height: 16, backgroundColor: white, border: `1px solid ${gray300}`, - '.Mui-focusVisible &': { outline: '2px auto rgba(19,124,189,.6)', outlineOffset: 2, @@ -44,7 +45,6 @@ const BpCheckedIcon = styled(BpIcon)({ 'input:hover ~ &': { backgroundColor: brand600, }, - 'input:disabled ~ &': { boxShadow: 'none', background: gray50, @@ -70,4 +70,8 @@ const CustomizedRadio = ({checked}) => { ); } -export default CustomizedRadio; \ No newline at end of file +CustomizedRadio.propTypes = { + checked: PropTypes.bool +}; + +export default CustomizedRadio; diff --git a/src/components/common/CustomizedTreeView.jsx b/src/components/common/CustomizedTreeView.jsx index 0a234b95..cb692b54 100644 --- a/src/components/common/CustomizedTreeView.jsx +++ b/src/components/common/CustomizedTreeView.jsx @@ -1,12 +1,11 @@ +import {Box, Chip} from "@mui/material"; import { styled } from '@mui/material/styles'; import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem'; -import {vars} from "../../theme/variables"; import ExpandLessOutlinedIcon from '@mui/icons-material/ExpandLessOutlined'; import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined'; -import {Box, Chip} from "@mui/material"; -import React from "react"; +import {vars} from "../../theme/variables"; const {gray500, brand200, brand50} = vars const ITEMS = [ @@ -78,7 +77,6 @@ const StyledTreeItem = styled((props) => ( borderColor: brand200, backgroundColor: brand50 }} - /> } } @@ -112,4 +110,4 @@ const CustomizedTreeView = () => { ); } -export default CustomizedTreeView \ No newline at end of file +export default CustomizedTreeView diff --git a/src/components/common/OrganizationsList.jsx b/src/components/common/OrganizationsList.jsx index 8f1edc7e..d70ba765 100644 --- a/src/components/common/OrganizationsList.jsx +++ b/src/components/common/OrganizationsList.jsx @@ -1,6 +1,8 @@ -import {Box, Typography, Button, Link, List, ListItem, ListItemText} from "@mui/material"; +import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; import PersonAddOutlinedIcon from '@mui/icons-material/PersonAddOutlined'; +import {Box, Typography, Button, Link, List, ListItem, ListItemText} from "@mui/material"; + import { vars } from "../../theme/variables"; const { gray700, gray500, gray200, brand600 } = vars; @@ -89,7 +91,6 @@ const OrganizationsList = ({organizations, viewJoinButton = true}) => { Join organization } - @@ -108,4 +109,9 @@ const OrganizationsList = ({organizations, viewJoinButton = true}) => { ); } +OrganizationsList.propTypes = { + organizations: PropTypes.array.isRequired, + viewJoinButton: PropTypes.bool +}; + export default OrganizationsList; diff --git a/src/components/common/StatusDialog.jsx b/src/components/common/StatusDialog.jsx index 5a2c6a88..9ca26c45 100644 --- a/src/components/common/StatusDialog.jsx +++ b/src/components/common/StatusDialog.jsx @@ -1,10 +1,11 @@ -import CustomizedDialog from "./CustomizedDialog"; +import PropTypes from "prop-types"; import { Box } from "@mui/material"; -import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; -import { vars } from "../../theme/variables"; import { BackgroundPattern } from "../../Icons"; +import CustomizedDialog from "./CustomizedDialog"; +import Typography from "@mui/material/Typography"; +import { vars } from "../../theme/variables"; const { gray600, gray900 } = vars; const HeaderRightSideContent = ({ handleClose, finishButtonTitle, finishButtonEndIcon }) => { @@ -17,6 +18,12 @@ const HeaderRightSideContent = ({ handleClose, finishButtonTitle, finishButtonEn ); }; +HeaderRightSideContent.propTypes = { + handleClose: PropTypes.func, + finishButtonTitle: PropTypes.string, + finishButtonEndIcon: PropTypes.node, +}; + const StatusDialog = ({ open, handleClose, title, message, subMessage, finishButtonTitle, actionButtonTitle, handleActionButtonClick, finishButtonEndIcon, actionButtonStartIcon }) => { return ( ( @@ -21,6 +21,10 @@ const StatusBackground = ({ responseStatus }) => ( ); +StatusBackground.propTypes = { + responseStatus: PropTypes.object, +}; + const StatusMessage = ({ message, description, additionalInfo }) => ( ( ); +StatusMessage.propTypes = { + message: PropTypes.string, + description: PropTypes.string, + additionalInfo: PropTypes.string, +}; + const ActionButtons = ({ isTryButtonVisible, isCloseButtonVisible, @@ -58,6 +68,16 @@ const ActionButtons = ({ ); +ActionButtons.propTypes = { + isTryButtonVisible: PropTypes.bool, + isCloseButtonVisible: PropTypes.bool, + onAction: PropTypes.func, + onTryAgain: PropTypes.func, + onClose: PropTypes.func, + actionButtonMessage: PropTypes.string, + actionButtonStartIcon: PropTypes.node, +}; + const StatusStep = ({ statusProps, onAction, onTryAgain, onClose, actionButtonStartIcon, additionalInfo }) => { const { statusResponse, @@ -121,4 +141,13 @@ const StatusStep = ({ statusProps, onAction, onTryAgain, onClose, actionButtonSt ) } +StatusStep.propTypes = { + statusProps: PropTypes.object, + onAction: PropTypes.func, + onTryAgain: PropTypes.func, + onClose: PropTypes.func, + actionButtonStartIcon: PropTypes.node, + additionalInfo: PropTypes.string, +}; + export default StatusStep; diff --git a/src/components/organizations/index.jsx b/src/components/organizations/index.jsx index ea756583..e0673821 100644 --- a/src/components/organizations/index.jsx +++ b/src/components/organizations/index.jsx @@ -1,16 +1,14 @@ import {useEffect, useState } from "react"; -import {Box, Typography, CircularProgress} from "@mui/material"; -import { vars } from "../../theme/variables"; import { getOrganizations } from "../../api/endpoints"; import OrganizationsList from "../common/OrganizationsList"; +import {Box, Typography, CircularProgress} from "@mui/material"; +import { vars } from "../../theme/variables"; const { gray700 } = vars; -const URL = "https://raw.githubusercontent.com/MetaCell/interlex/feature/ILEX-41/src/static/Organizations.json" const Organizations = () => { const [organizations, setOrganizations] = useState([]); const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); const fetchOrganizations = async() => { const organizations = await getOrganizations() @@ -22,17 +20,13 @@ const Organizations = () => { setLoading(true) fetchOrganizations(); }, []); - + if (loading) { return } - // if (error) { - // return
error
; - // } - return ( diff --git a/src/contexts/DataContext.jsx b/src/contexts/DataContext.jsx index 460ee299..fc3ba719 100644 --- a/src/contexts/DataContext.jsx +++ b/src/contexts/DataContext.jsx @@ -1,10 +1,11 @@ +import { debounce } from 'lodash'; +import PropTypes from 'prop-types'; import {createContext, useCallback, useEffect, useState} from "react"; import * as mockApi from "../api/endpoints/swaggerMockMissingEndpoints"; -import { debounce } from 'lodash'; const useMockApi = () => mockApi; - const GlobalDataContext = createContext(); + const GlobalDataProvider = ({ children }) => { const [user, setUser] = useState(null); const [activeOntology, setActiveOntology] = useState(null); @@ -32,16 +33,17 @@ const GlobalDataProvider = ({ children }) => { const setEditBulkSearchData = (filters) => { setEditBulkSearchFilters(filters); }; - - + + + // eslint-disable-next-line react-hooks/exhaustive-deps const fetchUser= useCallback(debounce(async () => { const data = await getUser("123"); setUser(data) }, 500), [getUser]); - + useEffect(() => { fetchUser() - }, []); + }, [fetchUser]); const dataContextValue = { user, @@ -64,4 +66,8 @@ const GlobalDataProvider = ({ children }) => { ); }; +GlobalDataProvider.propTypes = { + children: PropTypes.node.isRequired, +}; + export { GlobalDataContext, GlobalDataProvider }; diff --git a/src/main.jsx b/src/main.jsx index 0cdbb8ce..a0f7b346 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,13 +1,12 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' import './index.css' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import App from './App'; -import { AuthProvider } from './../mock/mutator/auth.context'; +import React from 'react' import worker from './mock' +import ReactDOM from 'react-dom/client' +import { AuthProvider } from './../mock/mutator/auth.context'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); -import * as serviceWorker from './serviceWorker'; - + worker.start(); ReactDOM.createRoot(document.getElementById('root')).render( @@ -19,5 +18,3 @@ ReactDOM.createRoot(document.getElementById('root')).render( , ) - - diff --git a/src/mock.js b/src/mock.js index e947b64e..4542a07c 100644 --- a/src/mock.js +++ b/src/mock.js @@ -1,8 +1,7 @@ import { setupWorker } from 'msw/browser'; import { getSwaggerMockMissingEndpointsMock } from './api/endpoints/swaggerMockMissingEndpoints.msw'; -import { getInterLexURIStructureAPIMock } from './api/endpoints/interLexURIStructureAPI.msw'; const handlers = [...getSwaggerMockMissingEndpointsMock()]; const worker = setupWorker(...handlers); -export default worker \ No newline at end of file +export default worker diff --git a/src/theme/index.jsx b/src/theme/index.jsx index e5deacb5..78b97a3a 100644 --- a/src/theme/index.jsx +++ b/src/theme/index.jsx @@ -848,7 +848,6 @@ const theme = createTheme({ border: `1px solid ${gray300}`, fontSize: ".875rem", borderRadius: ".5rem", - color: gray800, textTransform: "none", height: "2.5rem", diff --git a/yarn.lock b/yarn.lock index 9794abac..3a01cf29 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4417,6 +4417,11 @@ prop-types@^15.6.2, prop-types@^15.8.1: object-assign "^4.1.1" react-is "^16.13.1" +property-expr@^2.0.5: + version "2.0.6" + resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.6.tgz#f77bc00d5928a6c748414ad12882e83f24aec1e8" + integrity sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA== + property-information@^5.0.0: version "5.6.0" resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69" @@ -5045,6 +5050,11 @@ text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== +tiny-case@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03" + integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q== + to-fast-properties@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" @@ -5062,6 +5072,11 @@ toidentifier@1.0.1: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35" integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA== +toposort@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330" + integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg== + tr46@~0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" @@ -5099,6 +5114,11 @@ type-fest@^0.21.3: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37" integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w== +type-fest@^2.19.0: + version "2.19.0" + resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b" + integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA== + type-fest@^4.9.0: version "4.18.1" resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.18.1.tgz#47e8d4e493cf7ed6c643bad698d5810d72cbdf79" @@ -5377,3 +5397,13 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +yup@^1.6.1: + version "1.6.1" + resolved "https://registry.yarnpkg.com/yup/-/yup-1.6.1.tgz#8defcff9daaf9feac178029c0e13b616563ada4b" + integrity sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA== + dependencies: + property-expr "^2.0.5" + tiny-case "^1.0.3" + toposort "^2.0.2" + type-fest "^2.19.0"