Skip to content

Commit

Permalink
Frontend refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
edlouth committed Aug 21, 2023
1 parent f4498e0 commit 8fa01fb
Show file tree
Hide file tree
Showing 7 changed files with 191 additions and 170 deletions.
52 changes: 52 additions & 0 deletions grai-frontend/src/components/graph/drawer/GraphDrawer.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,3 +74,55 @@ test("filter", async () => {
await user.click(screen.getByTestId("FilterAltIcon"))
})
})

test("filter-list", async () => {
const user = userEvent.setup()

render(
<ReactFlowProvider>
<GraphDrawer {...defaultProps} />
</ReactFlowProvider>,
{
path: ":organisationName/:workspaceName/graph",
route: "/default/demo/graph",
},
)

await waitFor(() => {
expect(screen.getByTestId("FilterListIcon")).toBeInTheDocument()
})

await act(async () => {
await user.click(screen.getByTestId("FilterListIcon"))
})
})

test("filter-list expanded", async () => {
const user = userEvent.setup()

render(
<ReactFlowProvider>
<GraphDrawer {...defaultProps} />
</ReactFlowProvider>,
{
path: ":organisationName/:workspaceName/graph",
route: "/default/demo/graph",
},
)

await waitFor(() => {
expect(screen.getByTestId("KeyboardArrowRightIcon")).toBeInTheDocument()
})

await act(async () => {
await user.click(screen.getByTestId("KeyboardArrowRightIcon"))
})

await waitFor(() => {
expect(screen.getByTestId("FilterListIcon")).toBeInTheDocument()
})

await act(async () => {
await user.click(screen.getByTestId("FilterListIcon"))
})
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import userEvent from "@testing-library/user-event"
import { render, screen, waitFor } from "testing"
import AddButton from "./AddButton"

const defaultProps = {
fields: [
{
value: "test",
label: "test",
operators: [],
},
],
onAdd: () => {},
}

test("renders", async () => {
render(<AddButton {...defaultProps} />, {
path: ":organisationName/:workspaceName/graph",
route: "/default/demo/graph",
})

await waitFor(() => {
expect(screen.getByTestId("AddIcon")).toBeInTheDocument()
})
})

test("click", async () => {
render(<AddButton {...defaultProps} />, {
path: ":organisationName/:workspaceName/graph",
route: "/default/demo/graph",
})

await waitFor(() => {
expect(screen.getByTestId("AddIcon")).toBeInTheDocument()
})

await userEvent.click(screen.getByTestId("AddIcon"))

await waitFor(() => {
expect(screen.getByText("Choose data field to add")).toBeInTheDocument()
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -6,94 +6,12 @@ import {
Box,
ClickAwayListener,
Divider,
InputBase,
Popper,
autocompleteClasses,
styled,
} from "@mui/material"
import theme from "theme"
import { Field, Filter } from "components/filters/filters"

interface PopperComponentProps {
anchorEl?: any
disablePortal?: boolean
open: boolean
}

const StyledAutocompletePopper = styled("div")(({ theme }) => ({
[`& .${autocompleteClasses.paper}`]: {
boxShadow: "none",
margin: 0,
color: "inherit",
fontSize: 13,
},
[`& .${autocompleteClasses.listbox}`]: {
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
padding: 0,
[`& .${autocompleteClasses.option}`]: {
minHeight: "auto",
alignItems: "flex-start",
padding: 8,
borderBottom: `1px solid ${
theme.palette.mode === "light" ? " #eaecef" : "#30363d"
}`,
'&[aria-selected="true"]': {
backgroundColor: "transparent",
},
[`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]:
{
backgroundColor: theme.palette.action.hover,
},
},
},
[`&.${autocompleteClasses.popperDisablePortal}`]: {
position: "relative",
},
}))

function PopperComponent(props: PopperComponentProps) {
const { disablePortal, anchorEl, open, ...other } = props
return <StyledAutocompletePopper {...other} />
}

const StyledPopper = styled(Popper)(({ theme }) => ({
border: `1px solid ${theme.palette.mode === "light" ? "#e1e4e8" : "#30363d"}`,
boxShadow: `0 8px 24px ${
theme.palette.mode === "light" ? "rgba(149, 157, 165, 0.2)" : "rgb(1, 4, 9)"
}`,
borderRadius: 6,
width: 300,
zIndex: theme.zIndex.modal,
fontSize: 13,
color: theme.palette.mode === "light" ? "#24292e" : "#c9d1d9",
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
}))

const StyledInput = styled(InputBase)(({ theme }) => ({
padding: 10,
width: "100%",
borderBottom: `1px solid ${
theme.palette.mode === "light" ? "#eaecef" : "#30363d"
}`,
"& input": {
borderRadius: 4,
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#0d1117",
padding: 8,
transition: theme.transitions.create(["border-color", "box-shadow"]),
border: `1px solid ${
theme.palette.mode === "light" ? "#eaecef" : "#30363d"
}`,
fontSize: 14,
"&:focus": {
boxShadow: `0px 0px 0px 3px ${
theme.palette.mode === "light"
? "rgba(3, 102, 214, 0.3)"
: "rgb(12, 45, 107)"
}`,
borderColor: theme.palette.mode === "light" ? "#0366d6" : "#388bfd",
},
},
}))
import PopperComponent from "./PopperComponent"
import StyledInput from "./StyledInput"
import StyledPopper from "./StyledPopper"

type AddPopperProps = {
anchorEl: null | HTMLElement
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,7 @@ import {
ClickAwayListener,
Divider,
IconButton,
InputBase,
Popper,
Tooltip,
autocompleteClasses,
styled,
} from "@mui/material"
import theme from "theme"
import notEmpty from "helpers/notEmpty"
Expand All @@ -24,87 +20,9 @@ import {
OperationOption,
Operator,
} from "components/filters/filters"

interface PopperComponentProps {
anchorEl?: any
disablePortal?: boolean
open: boolean
}

const StyledAutocompletePopper = styled("div")(({ theme }) => ({
[`& .${autocompleteClasses.paper}`]: {
boxShadow: "none",
margin: 0,
color: "inherit",
fontSize: 13,
},
[`& .${autocompleteClasses.listbox}`]: {
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
padding: 0,
[`& .${autocompleteClasses.option}`]: {
minHeight: "auto",
alignItems: "flex-start",
padding: 8,
borderBottom: `1px solid ${
theme.palette.mode === "light" ? " #eaecef" : "#30363d"
}`,
'&[aria-selected="true"]': {
backgroundColor: "transparent",
},
[`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]:
{
backgroundColor: theme.palette.action.hover,
},
},
},
[`&.${autocompleteClasses.popperDisablePortal}`]: {
position: "relative",
},
}))

function PopperComponent(props: PopperComponentProps) {
const { disablePortal, anchorEl, open, ...other } = props
return <StyledAutocompletePopper {...other} />
}

const StyledPopper = styled(Popper)(({ theme }) => ({
border: `1px solid ${theme.palette.mode === "light" ? "#e1e4e8" : "#30363d"}`,
boxShadow: `0 8px 24px ${
theme.palette.mode === "light" ? "rgba(149, 157, 165, 0.2)" : "rgb(1, 4, 9)"
}`,
borderRadius: 6,
width: 300,
zIndex: theme.zIndex.modal,
fontSize: 13,
color: theme.palette.mode === "light" ? "#24292e" : "#c9d1d9",
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
}))

const StyledInput = styled(InputBase)(({ theme }) => ({
padding: 10,
width: "100%",
borderBottom: `1px solid ${
theme.palette.mode === "light" ? "#eaecef" : "#30363d"
}`,
"& input": {
borderRadius: 4,
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#0d1117",
padding: 8,
transition: theme.transitions.create(["border-color", "box-shadow"]),
border: `1px solid ${
theme.palette.mode === "light" ? "#eaecef" : "#30363d"
}`,
fontSize: 14,
"&:focus": {
boxShadow: `0px 0px 0px 3px ${
theme.palette.mode === "light"
? "rgba(3, 102, 214, 0.3)"
: "rgb(12, 45, 107)"
}`,
borderColor: theme.palette.mode === "light" ? "#0366d6" : "#388bfd",
},
},
}))
import PopperComponent from "./PopperComponent"
import StyledInput from "./StyledInput"
import StyledPopper from "./StyledPopper"

type FilterPopperProps = {
anchorEl: null | HTMLElement
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from "react"
import { autocompleteClasses, styled } from "@mui/material"

const StyledAutocompletePopper = styled("div")(({ theme }) => ({
[`& .${autocompleteClasses.paper}`]: {
boxShadow: "none",
margin: 0,
color: "inherit",
fontSize: 13,
},
[`& .${autocompleteClasses.listbox}`]: {
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
padding: 0,
[`& .${autocompleteClasses.option}`]: {
minHeight: "auto",
alignItems: "flex-start",
padding: 8,
borderBottom: `1px solid ${
theme.palette.mode === "light" ? " #eaecef" : "#30363d"
}`,
'&[aria-selected="true"]': {
backgroundColor: "transparent",
},
[`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]:
{
backgroundColor: theme.palette.action.hover,
},
},
},
[`&.${autocompleteClasses.popperDisablePortal}`]: {
position: "relative",
},
}))

interface PopperComponentProps {
anchorEl?: any
disablePortal?: boolean
open: boolean
}

const PopperComponent: React.FC<PopperComponentProps> = props => {
const { disablePortal, anchorEl, open, ...other } = props
return <StyledAutocompletePopper {...other} />
}

export default PopperComponent
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { InputBase, styled } from "@mui/material"

const StyledInput = styled(InputBase)(({ theme }) => ({
padding: 10,
width: "100%",
borderBottom: `1px solid ${
theme.palette.mode === "light" ? "#eaecef" : "#30363d"
}`,
"& input": {
borderRadius: 4,
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#0d1117",
padding: 8,
transition: theme.transitions.create(["border-color", "box-shadow"]),
border: `1px solid ${
theme.palette.mode === "light" ? "#eaecef" : "#30363d"
}`,
fontSize: 14,
"&:focus": {
boxShadow: `0px 0px 0px 3px ${
theme.palette.mode === "light"
? "rgba(3, 102, 214, 0.3)"
: "rgb(12, 45, 107)"

Check warning on line 22 in grai-frontend/src/components/graph/drawer/filters-inline/StyledInput.ts

View check run for this annotation

Codecov / codecov/patch

grai-frontend/src/components/graph/drawer/filters-inline/StyledInput.ts#L22

Added line #L22 was not covered by tests
}`,
borderColor: theme.palette.mode === "light" ? "#0366d6" : "#388bfd",
},
},
}))

export default StyledInput
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Popper, styled } from "@mui/material"

const StyledPopper = styled(Popper)(({ theme }) => ({
border: `1px solid ${theme.palette.mode === "light" ? "#e1e4e8" : "#30363d"}`,
boxShadow: `0 8px 24px ${
theme.palette.mode === "light" ? "rgba(149, 157, 165, 0.2)" : "rgb(1, 4, 9)"
}`,
borderRadius: 6,
width: 300,
zIndex: theme.zIndex.modal,
fontSize: 13,
color: theme.palette.mode === "light" ? "#24292e" : "#c9d1d9",
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
}))

export default StyledPopper

0 comments on commit 8fa01fb

Please sign in to comment.