Skip to content

refactor(web-devtools): revamp-ruler-ui #1685

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 16, 2024
Merged

refactor(web-devtools): revamp-ruler-ui #1685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd68a9b
refactor(web-devtools): revamp-ruler-ui
tractorss Sep 11, 2024
57716ac
refactor(web-devtools): update-component-name
tractorss Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from "react";
import styled from "styled-components";

import { Button } from "@kleros/ui-components-library";

import LabeledInput from "components/LabeledInput";

import Header from "./Header";

const Container = styled.div`
width: 100%;
display: flex;
flex-direction: column;
gap: 32px;
`;

const InputContainer = styled.div`
display: flex;
flex-direction: column;
gap: 16px;
`;

const StyledLabel = styled.label`
word-wrap: break-word;
`;

const ChangeDeveloper: React.FC = () => {
return (
<Container>
<Header text="Developer" />
<InputContainer>
<StyledLabel>Current Developer : 0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99</StyledLabel>
<LabeledInput label="New Developer" />
</InputContainer>
<Button text="Update" />
</Container>
);
};
Comment on lines +27 to +38
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Improve reusability and add missing handlers.

The component looks good overall, but consider the following improvements:

  1. Pass the current developer address as a prop instead of hardcoding it. This will make the component more reusable.
  2. Add onChange and onClick handlers for the input and button. This will make the component functional.

Apply this diff to implement the suggested improvements:

-const ChangeDeveloper: React.FC = () => {
+interface ChangeDeveloperProps {
+  currentDeveloper: string;
+  onNewDeveloperChange: (newDeveloper: string) => void;
+  onUpdateClick: () => void;
+}
+
+const ChangeDeveloper: React.FC<ChangeDeveloperProps> = ({
+  currentDeveloper,
+  onNewDeveloperChange,
+  onUpdateClick,
+}) => {
   return (
     <Container>
       <Header text="Developer" />
       <InputContainer>
-        <StyledLabel>Current Developer : 0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99</StyledLabel>
-        <LabeledInput label="New Developer" />
+        <StyledLabel>Current Developer : {currentDeveloper}</StyledLabel>
+        <LabeledInput
+          label="New Developer"
+          onChange={(event) => onNewDeveloperChange(event.target.value)}
+        />
       </InputContainer>
-      <Button text="Update" />
+      <Button text="Update" onClick={onUpdateClick} />
     </Container>
   );
 };
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const ChangeDeveloper: React.FC = () => {
return (
<Container>
<Header text="Developer" />
<InputContainer>
<StyledLabel>Current Developer : 0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99</StyledLabel>
<LabeledInput label="New Developer" />
</InputContainer>
<Button text="Update" />
</Container>
);
};
interface ChangeDeveloperProps {
currentDeveloper: string;
onNewDeveloperChange: (newDeveloper: string) => void;
onUpdateClick: () => void;
}
const ChangeDeveloper: React.FC<ChangeDeveloperProps> = ({
currentDeveloper,
onNewDeveloperChange,
onUpdateClick,
}) => {
return (
<Container>
<Header text="Developer" />
<InputContainer>
<StyledLabel>Current Developer : {currentDeveloper}</StyledLabel>
<LabeledInput
label="New Developer"
onChange={(event) => onNewDeveloperChange(event.target.value)}
/>
</InputContainer>
<Button text="Update" onClick={onUpdateClick} />
</Container>
);
};


export default ChangeDeveloper;
51 changes: 0 additions & 51 deletions web-devtools/src/app/(main)/ruler/ChangeRuler.tsx
View file
Open in desktop

This file was deleted.

11 changes: 11 additions & 0 deletions web-devtools/src/app/(main)/ruler/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";
import styled from "styled-components";

const Container = styled.h2`
border-bottom: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
padding: 8px 0px;
`;

const Header: React.FC<{ text: string }> = ({ text }) => <Container>{text}</Container>;

export default Header;
56 changes: 56 additions & 0 deletions web-devtools/src/app/(main)/ruler/ManualRuling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React, { useState } from "react";
import styled from "styled-components";

import { Button } from "@kleros/ui-components-library";

import LabeledInput from "components/LabeledInput";

import Header from "./Header";

const Container = styled.div`
width: 100%;
display: flex;
flex-direction: column;
gap: 32px;
`;

const SelectContainer = styled.div`
display: flex;
gap: 16px;
justify-content: space-around;
flex-wrap: wrap;
`;

const ManualRuling: React.FC = () => {
const [tie, setTie] = useState<boolean>(false);
const [overriden, setOverriden] = useState<boolean>(false);
const [disputeId, setDisputeId] = useState<number>();
const [ruling, setRuling] = useState<number>();

return (
<Container>
<Header text="Manual Ruling" />
<SelectContainer>
<LabeledInput
label="Dispute ID"
type="number"
value={disputeId}
onChange={(e) => setDisputeId(Number(e.target.value))}
/>

<LabeledInput label="Ruling" type="number" value={ruling} onChange={(e) => setRuling(Number(e.target.value))} />
<LabeledInput label="Tie" inputType="checkbox" checked={tie} onChange={() => setTie((prev) => !prev)} />
<LabeledInput
label="Overidden"
inputType="checkbox"
checked={overriden}
onChange={() => setOverriden((prev) => !prev)}
/>
</SelectContainer>

<Button text="Rule" />
</Container>
);
};

export default ManualRuling;
116 changes: 66 additions & 50 deletions web-devtools/src/app/(main)/ruler/RulingModes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,89 @@
import React, { useState } from "react";
import styled from "styled-components";

import { Checkbox, Field } from "@kleros/ui-components-library";
import { RULING_MODE } from "consts";

import LightButton from "components/LightButton";
import { Button, Radio } from "@kleros/ui-components-library";

import LabeledInput from "components/LabeledInput";

import Header from "./Header";

const Container = styled.div`
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0;
border: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue} 1px solid;
border-radius: 4px;
padding: 16px;
flex-direction: column;
gap: 32px;
`;
const RulingSettings = styled.div`

const SelectContainer = styled.div`
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
margin: 16px 0;
flex-wrap: wrap;
gap: 16px;
`;
const FieldContainer = styled.div`

const AutomaticPresetInputsContainer = styled.div`
display: flex;
align-items: center;
width: fit-content;
height: fit-content;
padding-left: 8px;
gap: 8px;
font-size: 14px;
border-radius: 4px;
border: ${({ theme }) => theme.klerosUIComponentsStroke} 1px solid;
color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
gap: 16px;
justify-content: space-around;
flex-wrap: wrap;
`;

const RulingModes: React.FC = () => {
const [tie, setTie] = useState<boolean>(false);
const [overriden, setOverriden] = useState<boolean>(false);
const [ruling, setRuling] = useState<number>();
const [rulingMode, setRulingMode] = useState<RULING_MODE | null>(null);

return (
<div>
<h3>Ruling Mode</h3>
<Container>
<RulingSettings>
<LightButton text={"Rule Now Manually"} />
<FieldContainer>
ruling <Field placeholder={"1"}></Field>
</FieldContainer>
</RulingSettings>

<RulingSettings>
<LightButton text={"Run Automatically with a Preset"} />
<FieldContainer>
ruling <Field placeholder={"1"}></Field>
</FieldContainer>
<FieldContainer>
<Checkbox label="" small checked={tie} onChange={() => setTie((old) => !old)} />
<Field placeholder={"tie"}></Field>
</FieldContainer>
<FieldContainer>
<Checkbox label="" small checked={overriden} onChange={() => setOverriden((old) => !old)} />
<Field placeholder={"overriden"}></Field>
</FieldContainer>
</RulingSettings>
<Container>
<Header text="Ruling Mode" />
<SelectContainer>
<Radio
small
label="Manual"
checked={rulingMode === RULING_MODE.Manual}
onChange={() => {
setRulingMode(RULING_MODE.Manual);
}}
/>
<Radio
small
label="Random Preset"
checked={rulingMode === RULING_MODE.RandomPreset}
onChange={() => {
setRulingMode(RULING_MODE.RandomPreset);
}}
/>
<Radio
small
label="Automatic Preset"
checked={rulingMode === RULING_MODE.AutomaticPreset}
onChange={() => {
setRulingMode(RULING_MODE.AutomaticPreset);
}}
/>
<AutomaticPresetInputsContainer>
<LabeledInput
label="Ruling"
type="number"
value={ruling}
onChange={(e) => setRuling(Number(e.target.value))}
/>
<LabeledInput label="Tie" inputType="checkbox" checked={tie} onChange={() => setTie((prev) => !prev)} />
<LabeledInput
label="Overidden"
inputType="checkbox"
checked={overriden}
onChange={() => setOverriden((prev) => !prev)}
/>
</AutomaticPresetInputsContainer>
</SelectContainer>

<RulingSettings>
<LightButton text={"Run Automatically Randomly"} />
</RulingSettings>
</Container>
</div>
<Button text="Update" />
</Container>
);
};

Expand Down
53 changes: 27 additions & 26 deletions web-devtools/src/app/(main)/ruler/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,60 +2,61 @@
import React from "react";
import styled from "styled-components";

import { DropdownCascader, Field } from "@kleros/ui-components-library";
import { DropdownCascader } from "@kleros/ui-components-library";

import { SelectArbitrable } from "utils/dummyData";

import ChangeRuler from "./ChangeRuler";
import { responsiveSize } from "styles/responsiveSize";

import ChangeDeveloper from "./ChangeDeveloper";
import ManualRuling from "./ManualRuling";
import RulingModes from "./RulingModes";

const Container = styled.div`
min-height: calc(100vh - 160px);
display: flex;
flex-direction: column;
gap: 48px;
margin: 16px 32px;
align-items: center;
padding: ${responsiveSize(32, 72)} ${responsiveSize(16, 132)} ${responsiveSize(76, 96)};
`;

const Arbitrables = styled.div`
width: 100%;
background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin: 16px 0;
padding: 8px 16px;
border-radius: 3px;
`;

const SettingsPane = styled.div`
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 16px 0;
`;
const StyledLabel = styled.label``;

const Ruler: React.FC = () => {
return (
<Container>
<h1>Ruler</h1>

<Arbitrables>
<div>
<label>Select Arbitrable</label>
<DropdownCascader
placeholder={"Select Arbitrable"}
onSelect={() => {
//todo;
}}
items={SelectArbitrable}
/>
</div>
<div>
<label>Current Ruling Mode</label>
<Field value={"auto mode"}></Field>
</div>
<StyledLabel>Arbitrable:</StyledLabel>
<DropdownCascader
placeholder={"Select Arbitrable"}
onSelect={() => {
//todo;
}}
items={SelectArbitrable}
/>
</Arbitrables>

<SettingsPane>
<RulingModes />
<ChangeRuler />
</SettingsPane>
<RulingModes />
<ManualRuling />
<ChangeDeveloper />
</Container>
);
};
Expand Down
Loading
Loading