Skip to content

Commit

Permalink
setup ui (#268)
Browse files Browse the repository at this point in the history 
* setup ui

* capital letter

---------

Co-authored-by: Maycon Santos <[email protected]>
  • Loading branch information
@saroojbkhari @mlsmaycon
saroojbkhari and mlsmaycon authored Sep 7, 2023
1 parent cfea3bd commit 54accb6
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 138 deletions.
185 changes: 94 additions & 91 deletions src/components/SetupKeyEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
Tag,
Typography,
Card,
Tooltip,
} from "antd";
import { RootState } from "typesafe-actions";
import {
Expand Down Expand Up @@ -54,7 +55,7 @@ const SetupKeyNew = (props: any) => {
const savedSetupKey = useSelector(
(state: RootState) => state.setupKey.savedSetupKey
);

const groups = useSelector((state: RootState) => state.group.data);

const [form] = Form.useForm();
Expand Down Expand Up @@ -91,14 +92,13 @@ const SetupKeyNew = (props: any) => {
.filter((g) => allGroups.get(g))
.map((g) => allGroups.get(g)!.name);
}

const fSetupKey = {
...setupKey,
autoGroupNames: setupKey.auto_groups || [],
exp: moment(setupKey.expires),
last: moment(setupKey.last_used),
} as FormSetupKey;
form.setFieldsValue(fSetupKey);
form.setFieldsValue(fSetupKey);
setFormSetupKey(fSetupKey);
}, [setupKey]);

Expand Down Expand Up @@ -126,8 +126,7 @@ const SetupKeyNew = (props: any) => {
await form.validateFields();
} catch (e) {
const errorFields = (e as any).errorFields;
return console.log("errorInfo", errorFields);
}
}

const setupKeyToSave = createSetupKeyToSave();
dispatch(
Expand Down Expand Up @@ -258,8 +257,7 @@ const SetupKeyNew = (props: any) => {
dispatch(personalAccessTokenActions.resetPersonalAccessTokens(null));
setVisibleNewSetupKey(false);
};

return (
return (
<>
{!isGroupUpdateView && (
<Breadcrumb
Expand Down Expand Up @@ -303,13 +301,9 @@ const SetupKeyNew = (props: any) => {
{!isGroupUpdateView && (
<Row style={{ marginTop: "10px" }}>
<Col
xs={24}
sm={24}
md={11}
lg={11}
xl={11}
xxl={11}
span={11}
md={8}
lg={8}
style={{
paddingRight: "70px",
}}
Expand Down Expand Up @@ -343,7 +337,14 @@ const SetupKeyNew = (props: any) => {
/>
</Col>

<Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
<Col
sm={24}
md={8}
lg={6}
style={{
paddingRight: "70px",
}}
>
<Paragraph
style={{
whiteSpace: "pre-line",
Expand All @@ -358,64 +359,66 @@ const SetupKeyNew = (props: any) => {
fontWeight: "500",
}}
></Paragraph>
{formSetupKey.type === "one-off" ? "One-off" : "Reusable"},
available uses
Type{" "}
{formSetupKey.ephemeral ? (
<Tooltip title="Peers that are offline for over 10 minutes will be removed automatically">
<Tag>
<Text type="secondary" style={{ fontSize: 10 }}>
Ephemeral
</Text>
</Tag>
</Tooltip>
) : (
" "
)}
</Paragraph>
<Col>
<Input
disabled
value={
formSetupKey.type === "reusable" &&
formSetupKey.usage_limit === 0
? "unlimited"
: formSetupKey.usage_limit - formSetupKey.used_times
formSetupKey.type === "one-off" ? "One-off" : "Reusable"
}
suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
style={{ marginTop: "8px" }}
/>
</Col>
</Col>
</Row>
)}
<Row style={{ marginTop: `${isGroupUpdateView ? "0" : "39px"}` }}>
<Col
xs={24}
sm={24}
md={11}
lg={11}
xl={11}
xxl={11}
span={11}
style={{
paddingRight: "70px",
}}
>
<Paragraph

<Col sm={24} md={8} lg={3}>
<Paragraph
style={{
whiteSpace: "pre-line",
margin: 0,
fontWeight: "500",
}}
>
<Paragraph
>
<Paragraph
style={{
whiteSpace: "pre-line",
margin: 0,
fontWeight: "500",
}}
></Paragraph>
Ephemeral peers enabled?
</Paragraph>
<Col>
<Input
></Paragraph>
{/* {formSetupKey.type === "one-off" ? "One-off" : "Reusable"}, */}
Available uses
</Paragraph>
<Col>
<Input
disabled
value={formSetupKey.ephemeral? "yes" : "no"}
value={
formSetupKey.type === "reusable" &&
formSetupKey.usage_limit === 0
? "unlimited"
: formSetupKey.usage_limit - formSetupKey.used_times
}
suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
style={{ marginTop: "8px" }}
/>

/>
</Col>
</Col>
</Col>
</Row>
)}
<Row style={{ marginTop: `${isGroupUpdateView ? "0" : "39px"}` }}>
{!isGroupUpdateView && (
<Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
<Paragraph style={{ margin: 0, fontWeight: "500" }}>
Expand All @@ -434,54 +437,54 @@ const SetupKeyNew = (props: any) => {
</Col>
)}
</Row>
<Row style={{ marginTop: `${isGroupUpdateView ? "0" : "39px"}` }}>
<Col
xs={24}
sm={24}
md={!isGroupUpdateView ? 11 : 24}
lg={!isGroupUpdateView ? 11 : 24}
xl={!isGroupUpdateView ? 11 : 24}
xxl={!isGroupUpdateView ? 11 : 24}
span={!isGroupUpdateView ? 11 : 24}
style={{
paddingRight: `${!isGroupUpdateView ? "70px" : "0"}`,
}}
<Row style={{ marginTop: `${isGroupUpdateView ? "0" : "39px"}` }}>
<Col
xs={24}
sm={24}
md={!isGroupUpdateView ? 11 : 24}
lg={!isGroupUpdateView ? 11 : 24}
xl={!isGroupUpdateView ? 11 : 24}
xxl={!isGroupUpdateView ? 11 : 24}
span={!isGroupUpdateView ? 11 : 24}
style={{
paddingRight: `${!isGroupUpdateView ? "70px" : "0"}`,
}}
>
<Paragraph
style={{
whiteSpace: "pre-line",
margin: 0,
fontWeight: "500",
}}
>
<Paragraph
style={{
whiteSpace: "pre-line",
margin: 0,
fontWeight: "500",
}}
>
Auto-assigned groups
</Paragraph>
Auto-assigned groups
</Paragraph>

<Col span={24}>
<Form.Item
style={{ marginTop: "8px", marginBottom: 0 }}
name="autoGroupNames"
rules={[{ validator: selectValidator }]}
<Col span={24}>
<Form.Item
style={{ marginTop: "8px", marginBottom: 0 }}
name="autoGroupNames"
rules={[{ validator: selectValidator }]}
>
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Associate groups with the key"
tagRender={blueTagRender}
dropdownRender={dropDownRender}
// enabled only when we have a new key !setupkey.id or when the key is valid
disabled={!(!setupKey.id || setupKey.valid)}
optionFilterProp="searchValue"
>
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Associate groups with the key"
tagRender={blueTagRender}
dropdownRender={dropDownRender}
// enabled only when we have a new key !setupkey.id or when the key is valid
disabled={!(!setupKey.id || setupKey.valid)}
optionFilterProp="searchValue"
>
{tagGroups.map((m, index) => (
<Option key={index} value={m.id} serchValue={m.name}>
{optionRender(m.name, m.id)}
</Option>
))}
</Select>
</Form.Item>
</Col>
{tagGroups.map((m, index) => (
<Option key={index} value={m.id} serchValue={m.name}>
{optionRender(m.name, m.id)}
</Option>
))}
</Select>
</Form.Item>
</Col>
</Col>
</Row>
</Form>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/components/SetupKeyNew.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -505,7 +505,8 @@ const SetupKeyNew = () => {
type={"secondary"}
style={{ whiteSpace: "pre-line", margin: 0 }}
>
Use this type of key to add peers that will be auto removed after being inactive
Peers that are offline for over 10 minutes will be removed
automatically
</Paragraph>
</Col>
<Col span={6}>
Expand Down
9 changes: 9 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -519,4 +519,13 @@ ul.ant-list-items {
.nohover {
background: transparent!important;
cursor: text;
}
.emp-wrapper {
display: flex;
align-items: center;
gap: 8px;
}

.emp-wrapper p {
margin: 0;
}
Loading

0 comments on commit 54accb6

Please sign in to comment.