setup ui (#268)

* setup ui

* capital letter

---------

Co-authored-by: Maycon Santos <mlsmaycon@gmail.com>

src/components/SetupKeyEdit.tsx

@@ -13,6 +13,7 @@ import {
   Tag,
   Typography,
   Card,
+  Tooltip,
 } from "antd";
 import { RootState } from "typesafe-actions";
 import {
@@ -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();
@@ -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]);
 
@@ -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(
@@ -258,8 +257,7 @@ const SetupKeyNew = (props: any) => {
     dispatch(personalAccessTokenActions.resetPersonalAccessTokens(null));
     setVisibleNewSetupKey(false);
   };
-
-  return (
+   return (
     <>
       {!isGroupUpdateView && (
         <Breadcrumb
@@ -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",
                   }}
@@ -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",
@@ -358,8 +359,48 @@ 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 === "one-off" ? "One-off" : "Reusable"
+                      }
+                      suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
+                      style={{ marginTop: "8px" }}
+                    />
+                  </Col>
+                </Col>
+
+                <Col sm={24} md={8} lg={3}>
+                  <Paragraph
+                    style={{
+                      whiteSpace: "pre-line",
+                      margin: 0,
+                      fontWeight: "500",
+                    }}
+                  >
+                    <Paragraph
+                      style={{
+                        whiteSpace: "pre-line",
+                        margin: 0,
+                        fontWeight: "500",
+                      }}
+                    ></Paragraph>
+                    {/* {formSetupKey.type === "one-off" ? "One-off" : "Reusable"}, */}
+                    Available uses
                   </Paragraph>
                   <Col>
                     <Input
@@ -378,44 +419,6 @@ const SetupKeyNew = (props: any) => {
               </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
-                    style={{
-                      whiteSpace: "pre-line",
-                      margin: 0,
-                      fontWeight: "500",
-                    }}
-                >
-                  <Paragraph
-                      style={{
-                        whiteSpace: "pre-line",
-                        margin: 0,
-                        fontWeight: "500",
-                      }}
-                  ></Paragraph>
-                  Ephemeral peers enabled?
-                </Paragraph>
-                <Col>
-                  <Input
-                      disabled
-                      value={formSetupKey.ephemeral? "yes" : "no"}
-                      suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
-                      style={{ marginTop: "8px" }}
-                  />
-
-                </Col>
-              </Col>
               {!isGroupUpdateView && (
                 <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
                   <Paragraph style={{ margin: 0, fontWeight: "500" }}>
@@ -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>

src/components/SetupKeyNew.tsx

@@ -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}>

src/index.css

@@ -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;
 }

src/views/SetupKeys.tsx

@@ -20,6 +20,7 @@ import {
   Space,
   Table,
   Tag,
+  Tooltip,
   Typography,
 } from "antd";
 import { SetupKey, SetupKeyToSave } from "../store/setup-key/types";
@@ -108,28 +109,27 @@ export const SetupKeys = () => {
     );
   }, []);
 
-
   useEffect(() => {
     setDataTable(transformDataTable(filterDataTable("")));
   }, [textToSearch, optionValidAll]);
 
   useEffect(() => {
     if (!loading) {
-         const quickFilter = getFilterState("setupKeysFilter", "quickFilter");
-        if (quickFilter) setOptionValidAll(quickFilter);
+      const quickFilter = getFilterState("setupKeysFilter", "quickFilter");
+      if (quickFilter) setOptionValidAll(quickFilter);
 
-        const searchText = getFilterState("setupKeysFilter", "search");
-        if (searchText) setTextToSearch(searchText);
+      const searchText = getFilterState("setupKeysFilter", "search");
+      if (searchText) setTextToSearch(searchText);
 
-        const pageSize = getFilterState("setupKeysFilter", "pageSize");
-        if (pageSize) onChangePageSize(pageSize, "setupKeysFilter");
+      const pageSize = getFilterState("setupKeysFilter", "pageSize");
+      if (pageSize) onChangePageSize(pageSize, "setupKeysFilter");
 
-        if (quickFilter || searchText || pageSize) {
-             setDataTable(transformDataTable(filterDataTable(searchText)));
-        } else {
-           setDataTable(transformDataTable(filterDataTable("")));
-         }
-     }
+      if (quickFilter || searchText || pageSize) {
+        setDataTable(transformDataTable(filterDataTable(searchText)));
+      } else {
+        setDataTable(transformDataTable(filterDataTable("")));
+      }
+    }
   }, [loading]);
 
   const deleteKey = "deleting";
@@ -184,7 +184,7 @@ export const SetupKeys = () => {
       );
       dispatch(setupKeyActions.resetSavedSetupKey(null));
       dispatch(setupKeyActions.setSetupEditKeyVisible(false));
-      setShowGroupModal(false)
+      setShowGroupModal(false);
     } else if (savedSetupKey.error) {
       message.error({
         content:
@@ -201,9 +201,9 @@ export const SetupKeys = () => {
   }, [savedSetupKey]);
 
   const filterDataTable = (searchText: string): SetupKey[] => {
-     const t = searchText
-       ? searchText.toLowerCase().trim()
-       : textToSearch.toLowerCase().trim();
+    const t = searchText
+      ? searchText.toLowerCase().trim()
+      : textToSearch.toLowerCase().trim();
     let f: SetupKey[] = [...setupKeys];
     if (optionValidAll === "valid") {
       f = filter(setupKeys, (_f: SetupKey) => _f.valid && !_f.revoked);
@@ -296,6 +296,7 @@ export const SetupKeys = () => {
         auto_groups: key?.auto_groups,
         last_used: key?.last_used,
         usage_limit: key?.usage_limit,
+        ephemeral: key?.ephemeral,
       } as SetupKey)
     );
   };
@@ -317,7 +318,7 @@ export const SetupKeys = () => {
         usage_limit: key?.usage_limit,
       } as SetupKey)
     );
-    setShowGroupModal(true)
+    setShowGroupModal(true);
   };
 
   useEffect(() => {
@@ -358,7 +359,9 @@ export const SetupKeys = () => {
     let btn = (
       <Button
         type="link"
-        onClick={() => setKeyAndViewGroups(setupKeyToAction as SetupKeyDataTable)}
+        onClick={() =>
+          setKeyAndViewGroups(setupKeyToAction as SetupKeyDataTable)
+        }
       >
         {displayGroups.length}
       </Button>
@@ -576,14 +579,6 @@ export const SetupKeys = () => {
                           (a as any).name.localeCompare((b as any).name)
                         }
                         render={(text, record: any, index) => {
-                            let sk = record as SetupKeyDataTable;
-                            let expiry = sk.ephemeral ? (
-                                <Tag>
-                                    <Text type="secondary" style={{ fontSize: 10 }}>
-                                        ephemeral peers enabled
-                                    </Text>
-                                </Tag>
-                            ) : null;
                           return (
                             <Button
                               type="text"
@@ -592,25 +587,22 @@ export const SetupKeys = () => {
                               }
                               className="tooltip-label"
                             >
-                                <span style={{ textAlign: "left" }}>
-                                    <Row>
-                                      {" "}
-                                      <Text className="font-500">
-                                          <Badge
-                                                size={"small"}
-                                                status={
-                                                    record.state === "valid"
-                                                        ? "success"
-                                                        : "error"
-                                                }
-                                                text={text}
-                                            ></Badge>
-                                      </Text>
-                                    </Row>
-                                    <Row >
-                                      {expiry}
-                                    </Row>
-                                </span>
+                              <span style={{ textAlign: "left" }}>
+                                <Row>
+                                  {" "}
+                                  <Text className="font-500">
+                                    <Badge
+                                      size={"small"}
+                                      status={
+                                        record.state === "valid"
+                                          ? "success"
+                                          : "error"
+                                      }
+                                      text={text}
+                                    ></Badge>
+                                  </Text>
+                                </Row>
+                              </span>
                             </Button>
                           );
                         }}
@@ -625,6 +617,26 @@ export const SetupKeys = () => {
                         sorter={(a, b) =>
                           (a as any).type.localeCompare((b as any).type)
                         }
+                        render={(text, record, index) => {
+                          let sk = record as SetupKeyDataTable;
+                          let expiry = sk.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>
+                          ) : null;
+                          return (
+                            <>
+                              <div className="emp-wrapper">
+                                <p>{sk.type}</p>
+                                {expiry}
+                              </div>
+                            </>
+                          );
+                        }}
                       />
                       <Column
                         title="Key"