From 6965d370522ba983482e7a9a42e39a9a5617617b Mon Sep 17 00:00:00 2001
From: Marius Vollmer <marius.vollmer@gmail.com>
Date: Thu, 31 Oct 2024 13:05:43 +0200
Subject: [PATCH] storage: Some typing fun

---
 pkg/lib/cockpit.d.ts                          |   4 +
 pkg/storaged/{pages.jsx => pages.tsx}         |  76 ++++++++-----
 ...rage-controls.jsx => storage-controls.tsx} | 105 ++++++++----------
 tsconfig.json                                 |   1 +
 4 files changed, 103 insertions(+), 83 deletions(-)
 rename pkg/storaged/{pages.jsx => pages.tsx} (95%)
 rename pkg/storaged/{storage-controls.jsx => storage-controls.tsx} (77%)

diff --git a/pkg/lib/cockpit.d.ts b/pkg/lib/cockpit.d.ts
index 819485d7f405..9244af4f9d07 100644
--- a/pkg/lib/cockpit.d.ts
+++ b/pkg/lib/cockpit.d.ts
@@ -188,6 +188,10 @@ declare module 'cockpit' {
         href: string;
         go(path: Location | string, options?: { [key: string]: string }): void;
         replace(path: Location | string, options?: { [key: string]: string }): void;
+
+        encode(path: string | Array<string>,
+               options? : { [name: string]: string | Array<string> },
+               with_root?: boolean);
     }
 
     export const location: Location;
diff --git a/pkg/storaged/pages.jsx b/pkg/storaged/pages.tsx
similarity index 95%
rename from pkg/storaged/pages.jsx
rename to pkg/storaged/pages.tsx
index 07c04622ee1b..167609d1b3f9 100644
--- a/pkg/storaged/pages.jsx
+++ b/pkg/storaged/pages.tsx
@@ -131,8 +131,8 @@ const _ = cockpit.gettext;
    complication of how cards and pages interact.
 */
 
-let pages = null;
-let crossrefs = null;
+let pages: Map<string, any> = new Map();
+let crossrefs: Map<string, any> = new Map();
 
 export const PAGE_CATEGORY_PHYSICAL = 1;
 export const PAGE_CATEGORY_VIRTUAL = 2;
@@ -181,7 +181,7 @@ function size_from_card(card) {
     return size_from_card(card.next);
 }
 
-export function new_page(parent, card, options) {
+export function new_page(parent, card, options = {}) {
     const page = {
         location: location_from_card(card),
         name: name_from_card(card),
@@ -191,13 +191,13 @@ export function new_page(parent, card, options) {
         parent,
         children: [],
         card,
-        options: options || {},
+        options,
+        columns: [
+            card.title,
+            card.location,
+            size_from_card(card),
+        ]
     };
-    page.columns = [
-        card.title,
-        card.location,
-        size_from_card(card),
-    ];
     if (parent)
         parent.children.push(page);
     while (card) {
@@ -225,6 +225,26 @@ export function new_card({
     has_warning, has_danger, job_path,
     component, props,
     actions,
+} : {
+    title?,
+    location?,
+    next?,
+    type_extra?,
+    id_extra?,
+    page_name?,
+    page_icon?,
+    page_category?,
+    page_key?,
+    page_location?,
+    page_size?,
+    page_block?,
+    for_summary?,
+    has_warning?,
+    has_danger?,
+    job_path?,
+    component?,
+    props?,
+    actions?,
 }) {
     if (page_block) {
         page_location = [block_location(page_block)];
@@ -317,7 +337,7 @@ function make_menu_item(action) {
 }
 
 function make_page_kebab(page) {
-    const items = [];
+    const items: React.JSX.Element[] = [];
 
     function card_item_group(card) {
         const a = card.actions || [];
@@ -372,8 +392,8 @@ const ActionButtons = ({ card }) => {
         return false;
     }
 
-    const buttons = [];
-    const items = [];
+    const buttons: React.JSX.Element[] = [];
+    const items: React.JSX.Element[] = [];
 
     if (!card.actions)
         return null;
@@ -396,7 +416,7 @@ const ActionButtons = ({ card }) => {
 };
 
 function page_type_extra(page) {
-    const extra = [];
+    const extra: any[] = [];
     let c = page.card;
     while (c) {
         if (c.type_extra)
@@ -434,8 +454,8 @@ function page_type(page) {
 // Thus, we end up with things like "Partition - MDRAID device".
 
 function page_block_summary_1(page) {
-    let description = null;
-    const extra = [];
+    let description = "";
+    const extra: any[] = [];
     for (let card = page.card; card; card = card.next) {
         if (card.for_summary) {
             description = card.id_extra || card.title;
@@ -460,9 +480,9 @@ function page_block_summary(page) {
         return desc1 || desc2;
 }
 
-let narrow_query = null;
+let narrow_query: any = null;
 
-export const useIsNarrow = (onChange) => {
+export const useIsNarrow = (onChange?) => {
     if (!narrow_query) {
         const val = window.getComputedStyle(window.document.body).getPropertyValue("--pf-v5-global--breakpoint--md");
         narrow_query = window.matchMedia(`(max-width: ${val})`);
@@ -472,12 +492,13 @@ export const useIsNarrow = (onChange) => {
     return narrow_query.matches;
 };
 
-export const PageTable = ({ emptyCaption, aria_label, pages, crossrefs, sorted, show_icons }) => {
+export const PageTable = ({ emptyCaption, aria_label, pages, crossrefs, sorted, show_icons } :
+                          { emptyCaption, aria_label, pages?, crossrefs?, sorted, show_icons }) => {
     const [collapsed, setCollapsed] = useState(true);
-    const firstKeys = useRef(false);
+    const firstKeys : any = useRef(false);
     const narrow = useIsNarrow(() => { firstKeys.current = false });
 
-    let rows = [];
+    let rows: React.JSX.Element[] = [];
     const row_keys = new Set();
 
     function make_row(page, crossref, level, border, key) {
@@ -502,7 +523,7 @@ export const PageTable = ({ emptyCaption, aria_label, pages, crossrefs, sorted,
                 return false;
         }
 
-        let info = null;
+        let info: React.JSX.Element | null = null;
         if (card_has_job(page.card))
             info = <>{"\n"}<Spinner isInline size="md" /></>;
         if (card_has_danger(page.card))
@@ -609,7 +630,7 @@ export const PageTable = ({ emptyCaption, aria_label, pages, crossrefs, sorted,
         } else {
             const cols = [
                 <Td key="1" onClick={onClick}>
-                    <div className="indent" style={ { "--level": level } }>
+                    <div className="indent" style={ { "--level": level } as React.CSSProperties }>
                         <Truncate content={name} />
                         {info}
                     </div>
@@ -688,7 +709,7 @@ export const PageTable = ({ emptyCaption, aria_label, pages, crossrefs, sorted,
         </EmptyState>;
     }
 
-    let show_all_button = null;
+    let show_all_button: React.JSX.Element | null = null;
     if (rows.length > 50 && collapsed) {
         show_all_button = (
             <Bullseye>
@@ -756,7 +777,7 @@ function page_display_name(page) {
 }
 
 const PageCardStackItems = ({ page, plot_state }) => {
-    const items = [];
+    const items: React.JSX.Element[] = [];
     let c = page.card;
     while (c) {
         items.push(<React.Fragment key={items.length}>
@@ -775,7 +796,7 @@ export function block_location(block) {
 }
 
 const StorageBreadcrumb = ({ page }) => {
-    const parent_crumbs = [];
+    const parent_crumbs: React.JSX.Element[] = [];
     let pp = page.parent;
     while (pp) {
         parent_crumbs.unshift(
@@ -793,7 +814,8 @@ const StorageBreadcrumb = ({ page }) => {
         </Breadcrumb>);
 };
 
-export const StorageCard = ({ card, alert, alerts, actions, children }) => {
+export const StorageCard = ({ card, alert, alerts, actions, children } :
+                            { card, alert?, alerts?, actions?, children }) => {
     return (
         <Card data-test-card-title={card.title}>
             { (client.in_anaconda_mode() && card.page.parent && !card.next) &&
@@ -847,7 +869,7 @@ export const StoragePage = ({ location, plot_state }) => {
             <PageSection isFilled={false} padding={client.in_anaconda_mode() ? { default: "noPadding" } : {}}>
                 <Stack hasGutter>
                     <MultipathAlert client={client} />
-                    <PageCardStackItems page={page} plot_state={plot_state} noarrow />
+                    <PageCardStackItems page={page} plot_state={plot_state} />
                 </Stack>
             </PageSection>
         </Page>
diff --git a/pkg/storaged/storage-controls.jsx b/pkg/storaged/storage-controls.tsx
similarity index 77%
rename from pkg/storaged/storage-controls.jsx
rename to pkg/storaged/storage-controls.tsx
index d9a03a08e902..e22fb01706e4 100644
--- a/pkg/storaged/storage-controls.jsx
+++ b/pkg/storaged/storage-controls.tsx
@@ -47,28 +47,26 @@ const _ = cockpit.gettext;
  *            excuse in a tooltip.
  */
 
-class StorageControl extends React.Component {
-    render() {
-        const excuse = this.props.excuse;
-        if (!client.superuser.allowed)
-            return <div />;
+const StorageControl = ({ excuse, excuse_placement, content } :
+                        { excuse, excuse_placement?, content }) => {
+    if (!client.superuser.allowed)
+        return <div />;
 
-        if (excuse) {
-            return (
-                <Tooltip id="tip-storage" content={excuse}
-                         position={this.props.excuse_placement || TooltipPosition.top}>
-                    <span>
-                        { this.props.content(excuse) }
-                    </span>
+    if (excuse) {
+        return (
+            <Tooltip id="tip-storage" content={excuse}
+            position={excuse_placement || TooltipPosition.top}>
+                <span>
+                { content(excuse) }
+            </span>
                 </Tooltip>
-            );
-        } else {
-            return this.props.content();
-        }
+        );
+    } else {
+        return content();
     }
-}
+};
 
-function checked(callback, setSpinning, excuse) {
+function checked(callback, setSpinning?, excuse?) {
     return function (event) {
         if (!event)
             return;
@@ -110,7 +108,8 @@ function checked(callback, setSpinning, excuse) {
     };
 }
 
-export const StorageButton = ({ id, kind, excuse, onClick, children, ariaLabel, spinner }) => {
+export const StorageButton = ({ id, kind, excuse, onClick, children, ariaLabel, spinner } :
+                              { id?, kind, excuse, onClick, children, ariaLabel?, spinner? }) => {
     const [spinning, setSpinning] = useState(false);
 
     return <StorageControl excuse={excuse}
@@ -120,13 +119,13 @@ export const StorageButton = ({ id, kind, excuse, onClick, children, ariaLabel,
                                        onClick={checked(onClick, setSpinning)}
                                        variant={kind || "secondary"}
                                        isDisabled={!!excuse || (spinner && spinning)}
-                                       isLoading={spinner ? spinning : undefined}>
+                                       isLoading={spinner ? spinning : false}>
                                    {children}
                                </Button>
                            )} />;
 };
 
-export const StorageLink = ({ id, excuse, onClick, children }) => (
+export const StorageLink = ({ excuse, onClick, children }) => (
     <StorageControl excuse={excuse}
                     content={excuse => (
                         <Button onClick={checked(onClick)}
@@ -141,43 +140,36 @@ export const StorageLink = ({ id, excuse, onClick, children }) => (
 // StorageOnOff - OnOff switch for asynchronous actions.
 //
 
-export class StorageOnOff extends React.Component {
-    constructor() {
-        super();
-        this.state = { promise: null };
-    }
+export const StorageOnOff = ({ excuse, "aria-label": aria_label, state, onChange }) => {
+    const [promise, setPromise] = useState(null);
+    const [promise_goal_state, setPromiseGoalState] = useState(null);
 
-    render() {
-        const self = this;
-
-        function onChange(_event, val) {
-            const promise = self.props.onChange(val);
-            if (promise) {
-                promise.catch(error => {
-                    dialog_open({
-                        Title: _("Error"),
-                        Body: error.toString()
-                    });
-                })
-                        .finally(() => { self.setState({ promise: null }) });
-            }
-
-            self.setState({ promise, promise_goal_state: val });
+    function _onChange(_event, val) {
+        const promise = onChange(val);
+        if (promise) {
+            promise.catch(error => {
+                dialog_open({
+                    Title: _("Error"),
+                    Body: error.toString()
+                });
+            })
+                .finally(() => { setPromise(null) });
         }
 
-        return (
-            <StorageControl excuse={this.props.excuse}
-                            content={(excuse) => (
-                                <Switch isChecked={this.state.promise
-                                    ? this.state.promise_goal_state
-                                    : this.props.state}
-                                                 aria-label={this.props['aria-label']}
-                                                 isDisabled={!!(excuse || this.state.promise)}
-                                                 onChange={onChange} />
-                            )} />
-        );
+        setPromise(promise);
+        setPromiseGoalState(val);
     }
-}
+
+    return (
+        <StorageControl excuse={excuse}
+                        content={(excuse) => (
+                            <Switch isChecked={promise ? promise_goal_state : state}
+                                    aria-label={aria_label}
+                                    isDisabled={!!(excuse || promise)}
+                                    onChange={_onChange} />
+                        )} />
+    );
+};
 
 /* Render a usage bar showing props.stats[0] out of props.stats[1]
  * bytes in use.  If the ratio is above props.critical, the bar will be
@@ -200,7 +192,7 @@ export const StorageUsageBar = ({ stats, critical, block, offset, total, short }
             </span>
             <div className={"usage-bar" + (fraction > critical ? " usage-bar-danger" : "") + (short ? " usage-bar-short" : "")}
                  role="progressbar"
-                 aria-valuemin="0" aria-valuemax={stats[1]} aria-valuenow={stats[0]}
+                 aria-valuemin={0} aria-valuemax={stats[1]} aria-valuenow={stats[0]}
                  aria-label={cockpit.format(_("Usage of $0"), block)}
                  aria-valuetext={labelText}>
                 <div className="usage-bar-indicator usage-bar-other" aria-hidden="true" style={{ width: total_fraction * 100 + "%" }} />
@@ -232,7 +224,8 @@ export const StorageMenuItem = ({ onClick, danger, excuse, children }) => (
     </DropdownItem>
 );
 
-export const StorageBarMenu = ({ label, isKebab, menuItems }) => {
+export const StorageBarMenu = ({ label, isKebab, menuItems } :
+                               { label?, isKebab, menuItems }) => {
     const [isOpen, setIsOpen] = useState(false);
 
     if (!client.superuser.allowed)
diff --git a/tsconfig.json b/tsconfig.json
index 6df13da74b64..09a619b0fb69 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,6 +23,7 @@
         "moduleResolution": "node",
         "noEmit": true,  // we only use `tsc` for type checking
         "strict": true,
+        "noImplicitAny": false,
         "target": "es2020",
     },
     "include": [