fix: fusion ts incompatibility

.eslintrc.json

@@ -40,7 +40,7 @@
       "react/jsx-indent-props": [2, 4],
       "react/require-default-props": 0,
       "react/prop-types": 0,
-      "max-len": ["error", 120],
+      "max-len": ["warn", 150],
       "linebreak-style": 0,
       "no-console": 0,
       "no-debugger": 0,

src/AppComponent.tsx

@@ -1,5 +1,5 @@
 import { useCurrentUser, useFusionEnvironment } from "@equinor/fusion"
-import { FC } from "react"
+import React, { FC } from "react"
 import { BrowserRouter } from "react-router-dom"
 import { ModuleRegistry } from "@ag-grid-community/core"
 import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model"

src/AppRouter.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { Route, Routes } from "react-router-dom"
 import EquipmentListView from "./Views/EquipmentListView"
 import TagComparisonView from "./Views/TagComparisonView"

src/Components/BackButton.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import { useNavigate } from "react-router-dom"
 import { arrow_back } from "@equinor/eds-icons"
 import { Button, Icon } from "@equinor/eds-core-react"

src/Components/Charts/TotalReviewStatus.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import React, { useState } from "react"
 import { AgChartsReact } from "ag-charts-react"
 import { AgChartOptions } from "ag-charts-community"
 

src/Components/Charts/TotalTagRequirement.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import React, { useState } from "react"
 import { AgChartsReact } from "ag-charts-react"
 import { AgChartOptions } from "ag-charts-community"
 

src/Components/EquipmentListView/EquipmentListReview.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@equinor/eds-core-react"
-import { Dispatch, SetStateAction, useContext } from "react"
+import React, { Dispatch, SetStateAction, useContext } from "react"
 import { TagData } from "../../Models/TagData"
 import { TagDataReview } from "../../Models/TagDataReview"
 import { GetTagDataReviewService } from "../../api/TagDataReviewService"

src/Components/EquipmentListView/EquipmentListReviewRenderer.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from "react"
+import React, { Dispatch, SetStateAction } from "react"
 import { ICellRendererParams } from "ag-grid-community"
 
 export default (

src/Components/EquipmentListView/EquipmentListTable.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useMemo } from "react"
+import React, { Dispatch, SetStateAction, useMemo } from "react"
 import { AgGridReact } from "@ag-grid-community/react"
 import { tokens } from "@equinor/eds-tokens"
 import { Icon } from "@equinor/eds-core-react"

src/Components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import styled from "styled-components"
 import StackedBar from "./StackedBar"
 

src/Components/JIP33Table/JIP33LegendModal.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react"
+import React, { useMemo } from "react"
 import { useAgGridStyles } from "@equinor/fusion-react-ag-grid-addons"
 import { ColDef } from "@ag-grid-community/core"
 import { AgGridReact } from "@ag-grid-community/react"

src/Components/JIP33Table/JIP33Table.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useMemo } from "react"
+import React, { Dispatch, SetStateAction, useMemo } from "react"
 import { useAgGridStyles } from "@equinor/fusion-react-ag-grid-addons"
 import { ColDef } from "@ag-grid-community/core"
 import { AgGridReact } from "@ag-grid-community/react"

src/Components/JIP33WithSideMenu.tsx

@@ -1,6 +1,6 @@
 import { Typography } from "@equinor/eds-core-react"
 import { tokens } from "@equinor/eds-tokens"
-import { Dispatch, SetStateAction, useState } from "react"
+import React, { Dispatch, SetStateAction, useState } from "react"
 import styled from "styled-components"
 import JIP33Table from "./JIP33Table/JIP33Table"
 import { ReviewComment } from "../Models/ReviewComment"

src/Components/SideSheet/Area/AreaSideSheet.tsx

@@ -1,7 +1,14 @@
 import React, { FC } from "react"
-import { Typography, Table } from "@equinor/eds-core-react"
+import {
+    Typography,
+    Table,
+    Button,
+    Icon,
+} from "@equinor/eds-core-react"
+import { external_link } from "@equinor/eds-icons"
 import styled from "styled-components"
 import { ViewContext } from "../../../Context/ViewContext"
+import Card from "../Card"
 
 const Container = styled.div`
     display: flex;
@@ -10,13 +17,6 @@ const Container = styled.div`
     padding: 15px;
 `
 
-const Card = styled.div`
-    padding: 15px;
-    background-color: white;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.05);
-    border-radius: 5px;
-    margin-bottom: 15px;
-`
 const ModelImage = styled.img`
     width: 100%;
     height: 350px;
@@ -27,6 +27,15 @@ const InfoTable = styled(Table)`
     width: 100%;
 `
 
+const ModelContainer = styled.div`
+    position: relative;
+
+    & > button {
+        position: absolute;
+        bottom: 15px;
+        right: 15px;
+`
+
 const AreaCard: FC = () => {
     const { activeTagData } = React.useContext(ViewContext)
     const dummyData: Record<string, string> = {
@@ -49,10 +58,16 @@ const AreaCard: FC = () => {
     return (
         <Container>
             <Card>
-                <ModelImage
-                    src="https://via.placeholder.com/650"
-                    alt="placeholder"
-                />
+                <ModelContainer>
+                    <ModelImage
+                        src="https://via.placeholder.com/650"
+                        alt="placeholder"
+                    />
+                    <Button>
+                        Open in facility 3D model
+                        <Icon data={external_link} size={18} />
+                    </Button>
+                </ModelContainer>
             </Card>
             <Card>
                 <Typography variant="h6">AREA CONDITIONS</Typography>

src/Components/SideSheet/Card.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from "react"
+import styled from "styled-components"
+
+const CardContainer = styled.div`
+    padding: 15px;
+    background-color: white;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.05);
+    border-radius: 5px;
+    margin-bottom: 15px;
+`
+
+const Card: FC = ({ children }) => <CardContainer>{children}</CardContainer>
+
+export default Card

src/Components/SideSheet/ChangeLog/ChangeLogSideSheet.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from "react"
+import styled from "styled-components"
+import { ViewContext } from "../../../Context/ViewContext"
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 15px;
+`
+
+const ChangeLogSideSheet: FC = () => {
+    const { activeTagData } = React.useContext(ViewContext)
+
+    if (!activeTagData) {
+        return null
+    }
+
+    return (
+        <Container>
+            <h1>Change Log</h1>
+            <p>Change log is not implemented yet.</p>
+        </Container>
+    )
+}
+
+export default ChangeLogSideSheet

src/Components/SideSheet/SheetContainer.tsx

@@ -12,6 +12,7 @@ import { ReviewComment } from "../../Models/ReviewComment"
 import InfoStrip from "./InfoStrip"
 import CommentsSideSheet from "./Comments/CommentsSideSheet"
 import AreaSideSheet from "./Area/AreaSideSheet"
+import ChangeLogSideSheet from "./ChangeLog/ChangeLogSideSheet"
 
 const SheetContent = styled.div`
     box-sizing: border-box;
@@ -199,7 +200,9 @@ const SheetContainer: React.FC<Props> = ({
                                 />
                             )}
                         </TabsPanel>
-                        <TabsPanel>{activeTab === 5 && placeholder}</TabsPanel>
+                        <TabsPanel>{activeTab === 5 && (
+                            <ChangeLogSideSheet />
+                        )}</TabsPanel>
                     </SheetBody>
                 </TabsContainer>
             </SheetContent>

src/Components/TagComparisonTable/TagComparisonTable.tsx

@@ -1,7 +1,7 @@
 import { ColDef } from "@ag-grid-community/core"
 import { AgGridReact } from "@ag-grid-community/react"
 import { useAgGridStyles } from "@equinor/fusion-react-ag-grid-addons"
-import { useMemo } from "react"
+import React, { useMemo } from "react"
 import { InstrumentTagData } from "../../Models/InstrumentTagData"
 import { comparisonGeneralColumnDefs } from "./GeneralColumnDefs"
 

src/Views/EquipmentListView.tsx

@@ -1,6 +1,6 @@
 import { Progress, Tabs } from "@equinor/eds-core-react"
 import { useCurrentContext } from "@equinor/fusion-framework-react-app/context"
-import { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import styled from "styled-components"
 import { useNavigate, useParams } from "react-router-dom"
 import { GetTagDataService } from "../api/TagDataService"
@@ -52,6 +52,8 @@ function EquipmentListView() {
     }, [currentProject])
 
     useEffect(() => {
+        let isCancelled = false;
+
         (async () => {
             if (externalId !== undefined) {
                 setError(false)
@@ -62,15 +64,23 @@ function EquipmentListView() {
                     const allTagData = await (
                         await GetTagDataService()
                     ).getAllTagData()
-                    setTagData(allTagData)
 
-                    setIsLoading(false)
+                    if (!isCancelled) {
+                        setTagData(allTagData)
+                        setIsLoading(false)
+                    }
                 } catch {
-                    console.error("Error loading tags")
-                    setError(true)
+                    if (!isCancelled) {
+                        console.error("Error loading tags")
+                        setError(true)
+                    }
                 }
             }
         })()
+
+        return () => {
+            isCancelled = true
+        }
     }, [externalId])
 
     useEffect(() => {

src/Views/JIP33ElectricalTabView.tsx

@@ -1,6 +1,6 @@
 import { Typography } from "@equinor/eds-core-react"
 import styled from "styled-components"
-import { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
 import { BackButton } from "../Components/BackButton"
 import { generateGeneralRowData } from "../Components/JIP33Table/RowData/Electrical/GeneralRowData"

src/Views/JIP33InstrumentTabView.tsx

@@ -1,6 +1,6 @@
 import { Icon, Tabs, Typography } from "@equinor/eds-core-react"
 import styled from "styled-components"
-import {
+import React, {
  useCallback, useContext, useEffect, useState,
 } from "react"
 import { useParams } from "react-router-dom"

src/Views/JIP33MechanicalTabView.tsx

@@ -1,6 +1,6 @@
 import { Typography } from "@equinor/eds-core-react"
 import styled from "styled-components"
-import { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
 import { BackButton } from "../Components/BackButton"
 import { generateGeneralRowData } from "../Components/JIP33Table/RowData/Mechanical/GeneralRowData"

src/Views/TagComparisonView.tsx

@@ -1,5 +1,5 @@
 import { Tabs, Typography } from "@equinor/eds-core-react"
-import { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import styled from "styled-components"
 import { BackButton } from "../Components/BackButton"
 import TagComparisonTable from "../Components/TagComparisonTable/TagComparisonTable"

tsconfig.json

@@ -10,7 +10,7 @@
     "target": "ES6",
     "composite": false,
     "skipLibCheck": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "noEmit": true,