Fix RC

src/App.css

@@ -69,3 +69,15 @@ pre {
   overflow-y: scroll !important;
   height: 20rem !important;
 }
+
+table,
+th,
+td {
+  border: 0.5px solid hsl(0deg, 0%, 64%) !important;
+  border-collapse: collapse !important;
+}
+
+a .icon {
+  width: 32px !important;
+  height: 32px !important;
+}

src/assets/localization/en.json

@@ -53,5 +53,7 @@
   "static_dynamic_title": "View Type",
   "static_dynamic_choice_message": "Choose dynamic if you want to keep only the necessary information recalculating it at the next import, otherwise choose static to keep all the information without recalculating it during the import.",
   "dynamic": "Dynamic",
-  "static": "Static"
+  "static": "Static",
+  "filter_discovered": "Filter discovered entities",
+  "current_page": "Current Page"
 }

src/assets/localization/it.json

@@ -53,5 +53,7 @@
   "static_dynamic_title": "Tipo di View",
   "static_dynamic_choice_message": "Secgli il tipo dinamico se vuoi mantenere solo le informazioni necessarie ricalcolandola al prossimo import, altrimenti scegli statico per mantenere tutte le informazioni senza ricalcolarle in fase di import.",
   "dynamic": "Dinamico",
-  "static": "Statico"
+  "static": "Statico",
+  "filter_discovered": "Filtra le entità scoperte",
+  "current_page": "Pagina corrente"
 }

src/atoms/InfoView.tsx

@@ -8,36 +8,21 @@ export interface InfoViewProps {
 
 export const InfoView = ({ id, infos }: InfoViewProps) => {
   const toRow = (info: (string | number)[], index: number) => (
-    <tr
-      className={style.contextAccordinText}
-      key={`${id}-info${index}`}
-      style={{ border: "2px solid", borderColor: "hsl(0deg, 0%, 64%)" }}
-    >
+    <tr className={style.contextAccordinText} key={`${id}-info${index}`}>
       <td
         style={{
-          border: "2px solid",
           whiteSpace: "nowrap",
-          borderColor: "hsl(0deg, 0%, 64%)",
         }}
       >
         {<FormattedMessage id={info[0].toString()} />}
       </td>
-      <td style={{ border: "2px solid", borderColor: "hsl(0deg, 0%, 64%)" }}>
-        {info[1]}
-      </td>
+      <td>{info[1]}</td>
     </tr>
   );
 
   return (
     <div className="container" style={{ padding: "14px 24px" }}>
-      <table
-        className="table"
-        style={{
-          borderCollapse: "collapse",
-          border: "1px solid",
-          borderColor: "hsl(0deg, 0%, 64%)",
-        }}
-      >
+      <table className="table">
         <tbody>{infos.map(toRow)}</tbody>
       </table>
     </div>

src/atoms/NodeMenu.tsx

@@ -9,6 +9,8 @@ import { SubListItemsRenderer } from "./SubListItemRender";
 import { useEffect, useState } from "react";
 import { WarningModalAtom } from "./WarningModal";
 import { showModal, fmtValidity } from "../lib/utils";
+import { FormattedMessage } from "react-intl";
+import style from "../css/ContextMenu.module.css";
 
 export interface ContextMenuProps {
   data: GraphNode;
@@ -29,6 +31,10 @@ export const NodeMenuAtom = ({
   const [discoveringList, setDiscoveringList] = useState<string[]>([]);
   const [discovering, setDiscovering] = useState(false);
   const [errorModalText, setErrorModalText] = useState(new Error());
+  const [filterDiscovered, setFilterDiscovered] = useState(false);
+  const [immDependants, setImmDependants] = useState(
+    data.info.immDependants || [],
+  );
   const [errorDetails, setErrorDetails] = useState<string[] | undefined>(
     undefined,
   );
@@ -76,8 +82,6 @@ export const NodeMenuAtom = ({
 
     if (result.failed.length === 0) return;
 
-    console.error(`Failed to discover entities`, result.failed);
-
     addToFailedList(result.failed.map((f) => f.entity));
     setErrorModalText(
       new Error(`Failed to discover ${result.failed.length} entities`),
@@ -106,6 +110,14 @@ export const NodeMenuAtom = ({
     showModal("warning-modal");
   }, [discoveringList]);
 
+  useEffect(() => {
+    setImmDependants(
+      filterDiscovered
+        ? data.info.immDependants.filter((dep) => !isDiscovered(dep))
+        : data.info.immDependants,
+    );
+  }, [filterDiscovered]);
+
   const displayedInfo = [
     ["federation_entity_type_label", data.info.type],
     ["immediate_subordinate_count_label", data.info.immDependants.length],
@@ -149,26 +161,45 @@ export const NodeMenuAtom = ({
               />
             }
           />
-          {data.info.immDependants.length > 0 && (
+          {immDependants.length > 0 && (
             <AccordionAtom
               accordinId="immediate-subordinates-list"
               labelId="subordinate_list"
               hiddenElement={
-                <PaginatedListAtom
-                  items={data.info.immDependants}
-                  itemsPerPage={5}
-                  ItemsRenderer={SubListItemsRenderer({
-                    discovering,
-                    isDiscovered,
-                    isInDiscovery,
-                    addSubordinates,
-                    removeSubordinates,
-                    removeAllSubordinates,
-                    isFailed,
-                  })}
-                  filterFn={immediateFilter}
-                  onItemsFiltered={onFilteredList}
-                />
+                <>
+                  <div
+                    className="toggles"
+                    style={{ width: "100%", paddingLeft: "18px" }}
+                  >
+                    <label
+                      htmlFor="filteredToggle"
+                      className={style.contextAccordinText}
+                    >
+                      <FormattedMessage id="filter_discovered" />
+                      <input
+                        type="checkbox"
+                        id="filteredToggle"
+                        onChange={() => setFilterDiscovered(!filterDiscovered)}
+                      />
+                      <span className="lever"></span>
+                    </label>
+                  </div>
+                  <PaginatedListAtom
+                    items={immDependants}
+                    itemsPerPage={5}
+                    ItemsRenderer={SubListItemsRenderer({
+                      discovering,
+                      isDiscovered,
+                      isInDiscovery,
+                      addSubordinates,
+                      removeSubordinates,
+                      removeAllSubordinates,
+                      isFailed,
+                    })}
+                    filterFn={immediateFilter}
+                    onItemsFiltered={onFilteredList}
+                  />
+                </>
               }
             />
           )}

src/atoms/PaginatedList.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import ReactPaginate from "react-paginate";
 import style from "../css/ContextMenu.module.css";
+import { FormattedMessage } from "react-intl";
 
 export interface PaginatedListAtomProps {
   itemsPerPage: number;
@@ -21,6 +22,7 @@ export const PaginatedListAtom = ({
   const [searchValue, setSearchValue] = useState("");
   const [currentItems, setCurrentItems] = useState(items);
   const [pageCount, setPageCount] = useState(0);
+  const [currentPage, setCurrentPage] = useState(0);
 
   const setCurrentItemsBySearch = (searchValue: string, itemOffset: number) => {
     const endOffset = itemOffset + itemsPerPage;
@@ -37,14 +39,15 @@ export const PaginatedListAtom = ({
 
   const handlePageClick = (event: { selected: number }) => {
     const newOffset = (event.selected * itemsPerPage) % items.length;
+    setCurrentPage(event.selected);
     setItemOffset(newOffset);
   };
 
   const changeSearchValue = (e: any) => setSearchValue(e.target.value);
 
   useEffect(
     () => setCurrentItemsBySearch(searchValue, itemOffset),
-    [searchValue, itemOffset],
+    [searchValue, itemOffset, items],
   );
 
   return (
@@ -87,6 +90,9 @@ export const PaginatedListAtom = ({
           />
         </div>
       </div>
+      <div className={`row justify-content-md-center ${style.contextAccordinText}`}>
+        <FormattedMessage id="current_page" />: {currentPage + 1} / {pageCount}
+      </div>
     </div>
   );
 };

src/atoms/UrlInput.tsx

@@ -5,6 +5,7 @@ import { handleCollapseVisibility, cleanInput } from "../lib/utils";
 import { getTranslations } from "../lib/translations";
 import { handleKeyDownEvent } from "../lib/utils";
 import { isValidUrl } from "../lib/utils";
+import style from "../css/ContextMenu.module.css";
 
 export const UrlInputAtom = () => {
   const [inputValue, setInputValue] = useState("");
@@ -43,7 +44,7 @@ export const UrlInputAtom = () => {
         <div className="col-10">
           <input
             type="text"
-            className="form-control"
+            className={`form-control ${style.contextAccordinText}`}
             id="input-value"
             onChange={changeValue}
             placeholder={
@@ -53,7 +54,6 @@ export const UrlInputAtom = () => {
                   : "insert_anchor_url_label"
               ]
             }
-            style={{ fontSize: "14px" }}
           />
         </div>
         <div className="col-2">