Migrating Vue components to React and stores refactoring (#585)

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Sebastian Malton <smalton@mirantis.com>
Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/layout/main-layout.scss

@@ -1,13 +1,12 @@
 
 .MainLayout {
-  --main-layout-header: 40px;
   --sidebar-max-size: 200px;
 
   display: grid;
   grid-template-areas: "aside header" "aside tabs" "aside main" "aside footer";
   grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
   grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
-  height: 100vh;
+  height: 100%;
 
   &.light {
     main {
@@ -46,7 +45,6 @@
     background: $sidebarBackground;
     white-space: nowrap;
     transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 100;
 
     &.pinned {
       width: var(--sidebar-max-size);

src/renderer/components/layout/main-layout.tsx

@@ -7,10 +7,10 @@ import { matchPath, RouteProps } from "react-router-dom";
 import { createStorage, cssNames } from "../../utils";
 import { Tab, Tabs } from "../tabs";
 import { Sidebar } from "./sidebar";
-import { configStore } from "../../config.store";
 import { ErrorBoundary } from "../error-boundary";
 import { Dock } from "../dock";
 import { navigate, navigation } from "../../navigation";
+import { getHostedCluster } from "../../../common/cluster-store";
 import { themeStore } from "../../theme.store";
 
 export interface TabRoute extends RouteProps {
@@ -47,14 +47,14 @@ export class MainLayout extends React.Component<Props> {
 
   render() {
     const { className, contentClass, headerClass, tabs, footer, footerClass, children } = this.props;
-    const { clusterName } = configStore.config;
-    const { pathname } = navigation.location;
+    const routePath = navigation.location.pathname;
+    const cluster = getHostedCluster();
     return (
       <div className={cssNames("MainLayout", className, themeStore.activeTheme.type)}>
         <header className={cssNames("flex gaps align-center", headerClass)}>
-          <div className="box grow flex align-center">
-            {clusterName && <span>{clusterName}</span>}
-          </div>
+          <span className="cluster">
+            {cluster.preferences?.clusterName || cluster.contextName}
+          </span>
         </header>
 
         <aside className={cssNames("flex column", { pinned: this.isPinned, accessible: this.isAccessible })}>
@@ -68,7 +68,7 @@ export class MainLayout extends React.Component<Props> {
         {tabs && (
           <Tabs center onChange={url => navigate(url)}>
             {tabs.map(({ title, path, url, ...routeProps }) => {
-              const isActive = !!matchPath(pathname, { path, ...routeProps });
+              const isActive = !!matchPath(routePath, { path, ...routeProps });
               return <Tab key={url} label={title} value={url} active={isActive}/>
             })}
           </Tabs>

src/renderer/components/layout/sidebar.tsx

@@ -6,13 +6,12 @@ import { computed, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { matchPath, NavLink } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import { configStore } from "../../config.store";
 import { createStorage, cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
 import { namespacesURL } from "../+namespaces/namespaces.route";
 import { nodesURL } from "../+nodes/nodes.route";
-import { usersManagementRoute, usersManagementURL } from "../+user-management/user-management.routes";
+import { usersManagementRoute, usersManagementURL } from "../+user-management/user-management.route";
 import { networkRoute, networkURL } from "../+network/network.route";
 import { storageRoute, storageURL } from "../+storage/storage.route";
 import { clusterURL } from "../+cluster";
@@ -28,7 +27,7 @@ import { crdStore } from "../+custom-resources/crd.store";
 import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources";
 import { CustomResources } from "../+custom-resources/custom-resources";
 import { navigation } from "../../navigation";
-import { isAllowedResource } from "../../api/rbac"
+import { isAllowedResource } from "../../../common/rbac"
 
 const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
 type SidebarContextValue = {
@@ -44,7 +43,9 @@ interface Props {
 @observer
 export class Sidebar extends React.Component<Props> {
   async componentDidMount() {
-    if (!crdStore.isLoaded && isAllowedResource('customresourcedefinitions')) crdStore.loadAll()
+    if (!crdStore.isLoaded && isAllowedResource('customresourcedefinitions')) {
+      crdStore.loadAll()
+    }
   }
 
   renderCustomResources() {
@@ -72,20 +73,20 @@ export class Sidebar extends React.Component<Props> {
 
   render() {
     const { toggle, isPinned, className } = this.props;
-    const { allowedResources } = configStore;
     const query = namespaceStore.getContextParams();
     return (
       <SidebarContext.Provider value={{ pinned: isPinned }}>
         <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })}>
           <div className="header flex align-center">
             <NavLink exact to="/" className="box grow">
-              <Icon svg="logo-full" className="logo-icon"/> <div className="logo-text">Lens</div>
+              <Icon svg="logo-full" className="logo-icon"/>
+              <div className="logo-text">Lens</div>
             </NavLink>
             <Icon
               className="pin-icon"
+              tooltip={<Trans>Compact view</Trans>}
               material={isPinned ? "keyboard_arrow_left" : "keyboard_arrow_right"}
               onClick={toggle}
-              tooltip={isPinned ? <Trans>Compact view</Trans> : <Trans>Extended view</Trans>}
               focusable={false}
             />
           </div>

src/renderer/components/layout/wizard-layout.scss

@@ -0,0 +1,62 @@
+.WizardLayout {
+  $spacing: $padding * 2;
+
+  position: relative;
+  padding: $padding * 3;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr 40%;
+
+  > * {
+    @include custom-scrollbar;
+    --flex-gap: #{$spacing};
+    padding: $spacing;
+  }
+
+  > .head-col {
+    position: sticky;
+    border-bottom: 1px solid $grey-800;
+    justify-content: space-between;
+  }
+
+  > .content-col {
+    margin-right: $spacing;
+    background-color: var(--clusters-menu-bgc);
+    border-radius: $radius;
+
+    > div {
+      flex: 1;
+    }
+
+    > .error {
+      border-radius: $radius;
+      padding: $padding;
+      background-color: pink;
+    }
+  }
+
+  > .info-col {
+    border-left: 1px solid #353a3e;
+  }
+
+  p {
+    line-height: 140%;
+  }
+
+  a {
+    color: $colorInfo;
+  }
+
+  &.centered {
+    .content-col {
+      margin: 0;
+
+      > div {
+        margin: 0 auto;
+        width: 60%;
+        min-width: 570px;
+        max-width: 1000px;
+      }
+    }
+  }
+}

src/renderer/components/layout/wizard-layout.tsx

@@ -0,0 +1,40 @@
+import "./wizard-layout.scss"
+import React from "react";
+import { observer } from "mobx-react";
+import { cssNames, IClassName } from "../../utils";
+
+interface Props {
+  className?: IClassName;
+  header?: React.ReactNode;
+  headerClass?: IClassName;
+  contentClass?: IClassName;
+  infoPanelClass?: IClassName;
+  infoPanel?: React.ReactNode;
+  centered?: boolean;  // Centering content horizontally
+}
+
+@observer
+export class WizardLayout extends React.Component<Props> {
+  render() {
+    const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered, children: content } = this.props;
+    return (
+      <div className={cssNames("WizardLayout", { centered }, className)}>
+        {header && (
+          <div className={cssNames("head-col flex gaps align-center", headerClass)}>
+            {header}
+          </div>
+        )}
+        <div className={cssNames("content-col flex column gaps", contentClass)}>
+          <div className="flex column gaps">
+            {content}
+          </div>
+        </div>
+        {infoPanel && (
+          <div className={cssNames("info-col flex column gaps", infoPanelClass)}>
+            {infoPanel}
+          </div>
+        )}
+      </div>
+    )
+  }
+}