Update desktop-test-app and template to use iui-layouts (#300)

* Update desktop-app and template to use iui-layouts * Remove unnecessary css import * Fix SignIn and ItwinSelect css * CVE-2023-4863 - bump electron to 24.8.3 * Move PageLayout.Content into App.tsx * Add TitleArea to SelectImodel and remove css * Add TitleArea to Home/Itwin and remove unused css * Add change file * WIP Changes that removes more CSS vs last commit * Add PageLayout.Content pad for Home & SelectImodel * Fix noItwinFound css * Add WIP changes to the template package * Revert electron peerDep * Revert change file for desktop-viewer-react * Add PageLayout CSS to root template * Bump react-scripts to fix localization bug * Clean up css and code * Update layout for selectItwin/IModel
iTwin · Sep 21, 2023 · 8590398 · 8590398
1 parent 40c380a
commit 8590398
Show file tree

Hide file tree

Showing 24 changed files with 423 additions and 565 deletions.
diff --git a/common/changes/@itwin/cra-template-desktop-viewer/AddItwinUILayouts_2023-09-18-23-00.json b/common/changes/@itwin/cra-template-desktop-viewer/AddItwinUILayouts_2023-09-18-23-00.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/cra-template-desktop-viewer",
+      "comment": "Update the app and components to use ITwinUI-layouts",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@itwin/cra-template-desktop-viewer"
+}
diff --git a/common/changes/@itwin/desktop-viewer-react/AddItwinUILayouts_2023-09-19-23-21.json b/common/changes/@itwin/desktop-viewer-react/AddItwinUILayouts_2023-09-19-23-21.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/desktop-viewer-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/desktop-viewer-react"
+}
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/apps/desktop-viewer-test/package.json b/packages/apps/desktop-viewer-test/package.json
@@ -58,6 +58,8 @@
     "@itwin/imodels-access-frontend": "^4.0.4",
     "@itwin/itwinui-css": "^1.12.0",
     "@itwin/itwinui-icons-react": "^2.4.0",
+    "@itwin/itwinui-layouts-css": "^0.2.0",
+    "@itwin/itwinui-layouts-react": "^0.2.0",
     "@itwin/itwinui-react": "^2.12.0",
     "@itwin/itwinui-variables": "^2.0.0",
     "@itwin/measure-tools-react": "^0.13.0",
@@ -69,7 +71,7 @@
     "@itwin/tree-widget-react": "^1.0.0",
     "@itwin/webgl-compatibility": "^4.0.6",
     "dotenv-flow": "^3.2.0",
-    "electron": "^24.6.5",
+    "electron": "^24.8.3",
     "minimist": "^1.2.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -79,7 +81,7 @@
     "redux": "^4.2.1"
   },
   "devDependencies": {
-    "@bentley/react-scripts": "^5.0.4",
+    "@bentley/react-scripts": "^5.0.5",
     "@itwin/build-tools": "^4.0.6",
     "@types/electron-devtools-installer": "^2.2.2",
     "@types/minimist": "^1.2.2",

diff --git a/packages/apps/desktop-viewer-test/src/frontend/components/App.tsx b/packages/apps/desktop-viewer-test/src/frontend/components/App.tsx
@@ -6,6 +6,7 @@
 import type { DesktopInitializerParams } from "@itwin/desktop-viewer-react";
 import { useConnectivity } from "@itwin/desktop-viewer-react";
 import { useDesktopViewerInitializer } from "@itwin/desktop-viewer-react";
+import { PageLayout } from "@itwin/itwinui-layouts-react";
 import { ThemeProvider } from "@itwin/itwinui-react";
 import {
   MeasurementActionToolbar,
@@ -14,7 +15,7 @@ import {
 import { PropertyGridManager } from "@itwin/property-grid-react";
 import { TreeWidget } from "@itwin/tree-widget-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 
 import type { ViewerSettings } from "../../common/ViewerConfig";
 import { viewerRpcs } from "../../common/ViewerConfig";
@@ -85,12 +86,30 @@ const App = () => {
     <ThemeProvider theme="dark" style={{ height: "100%" }}>
       <SettingsContext.Provider value={{ settings, addRecent }}>
         <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<HomeRoute />} />
-            <Route path="/itwins/:iTwinId" element={<IModelsRoute />} />
-            <Route path="/itwins" element={<ITwinsRoute />} />
-            <Route path="/viewer" element={<ViewerRoute />} />
-          </Routes>
+          <PageLayout>
+            <Routes>
+              <Route
+                element={
+                  <PageLayout.Content padded>
+                    <Outlet />
+                  </PageLayout.Content>
+                }
+              >
+                <Route path="/" element={<HomeRoute />} />
+                <Route path="/itwins/:iTwinId" element={<IModelsRoute />} />
+                <Route path="/itwins" element={<ITwinsRoute />} />
+              </Route>
+              <Route
+                element={
+                  <PageLayout.Content>
+                    <Outlet />
+                  </PageLayout.Content>
+                }
+              >
+                <Route path="/viewer" element={<ViewerRoute />} />
+              </Route>
+            </Routes>
+          </PageLayout>
         </BrowserRouter>
       </SettingsContext.Provider>
     </ThemeProvider>

diff --git a/packages/apps/desktop-viewer-test/src/frontend/components/home/Home.scss b/packages/apps/desktop-viewer-test/src/frontend/components/home/Home.scss
@@ -2,16 +2,15 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-
 .home-title {
-  padding: 100px 100px 50px 100px !important;
+  margin-top: var(--iui-size-m);
   font-weight: 900;
 }
+
 .home {
   display: grid;
   grid-template-rows: 250px auto;
   grid-template-columns: minmax(300px, 50%) 50%;
-  padding: 0 100px 100px 100px;
   .home-section {
     a,
     span {
@@ -45,4 +44,4 @@
       width: 100% !important;
     }
   }
-}
+}
diff --git a/packages/apps/desktop-viewer-test/src/frontend/components/home/Home.tsx b/packages/apps/desktop-viewer-test/src/frontend/components/home/Home.tsx
@@ -8,6 +8,7 @@ import "./Home.scss";
 import { InternetConnectivityStatus } from "@itwin/core-common";
 import { useConnectivity } from "@itwin/desktop-viewer-react";
 import { SvgFolderOpened, SvgImodel } from "@itwin/itwinui-icons-react";
+import { PageLayout } from "@itwin/itwinui-layouts-react";
 import { Blockquote, Text } from "@itwin/itwinui-react";
 import React, { useContext, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
@@ -55,10 +56,12 @@ const Home = () => {
   };
 
   return (
-    <div>
-      <Text className="home-title" variant="headline">
-        iTwin Viewer for Desktop
-      </Text>
+    <>
+      <PageLayout.TitleArea>
+        <Text className="home-title" variant="headline">
+          iTwin Viewer for Desktop
+        </Text>
+      </PageLayout.TitleArea>
       <div className="home">
         <div className="home-section start">
           <Text variant="title"> {ITwinViewerApp.translate("home.start")}</Text>
@@ -99,7 +102,7 @@ const Home = () => {
           <Recents />
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/packages/apps/desktop-viewer-test/src/frontend/components/modelSelector/SelectIModel.scss b/packages/apps/desktop-viewer-test/src/frontend/components/modelSelector/SelectIModel.scss
diff --git a/packages/apps/desktop-viewer-test/src/frontend/components/modelSelector/SelectIModel.tsx b/packages/apps/desktop-viewer-test/src/frontend/components/modelSelector/SelectIModel.tsx
@@ -3,12 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-import "./SelectIModel.scss";
-
 import { BriefcaseConnection } from "@itwin/core-frontend";
 import { getBriefcaseStatus, ModelStatus } from "@itwin/desktop-viewer-react";
 import type { IModelFull, IModelGridProps } from "@itwin/imodel-browser-react";
 import { IModelGrid } from "@itwin/imodel-browser-react";
+import { PageLayout } from "@itwin/itwinui-layouts-react";
 import type { TileProps } from "@itwin/itwinui-react";
 import { Text } from "@itwin/itwinui-react";
 import React, {
@@ -198,18 +197,17 @@ export const SelectIModel = ({
   };
 
   return (
-    <div className="itv-scrolling-container select-imodel">
-      <div className={"itv-content-margins"}>
+    <>
+      <PageLayout.TitleArea>
         <Text variant="title">{`iModels for ${iTwinName}`}</Text>
-      </div>
-      <div className="itv-scrolling-content">
-        <IModelGrid
-          accessToken={accessToken}
-          iTwinId={iTwinId}
-          onThumbnailClick={selectIModel}
-          useIndividualState={useProgressIndicator}
-        />
-      </div>
-    </div>
+      </PageLayout.TitleArea>
+
+      <IModelGrid
+        accessToken={accessToken}
+        iTwinId={iTwinId}
+        onThumbnailClick={selectIModel}
+        useIndividualState={useProgressIndicator}
+      />
+    </>
   );
 };