feat: update login flow (#6)

* feat: create Auth card component for Overview card Signed-off-by: adityasinghal26 <[email protected]> * feat: overview card conditional rendering based on Daytona sign-in state Signed-off-by: adityasinghal26 <[email protected]> * fix: update import from adityasinghal26 to daytonaio Signed-off-by: adityasinghal26 <[email protected]> * fix: remove unnecessary logging Signed-off-by: adityasinghal26 <[email protected]> * fix: update yarn lockfile with imports Signed-off-by: adityasinghal26 <[email protected]> * feat: list card conditional rendering based on Daytona sign-in state Signed-off-by: adityasinghal26 <[email protected]> * fix: update import for WorkspaceListCard Signed-off-by: adityasinghal26 <[email protected]> * fix: update daytona URL in app-config Signed-off-by: adityasinghal26 <[email protected]> --------- Signed-off-by: adityasinghal26 <[email protected]>
daytonaio · Sep 29, 2024 · 4d98c94 · 4d98c94
1 parent 1a155cb
commit 4d98c94
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 41 deletions.
diff --git a/app-config.yaml b/app-config.yaml
@@ -81,7 +81,7 @@ auth:
             - resolver: emailLocalPartMatchingUserEntityName
 
 daytona:
-  domain: daytona.adisinghal.com
+  domain: daytona.domain.com
 
 scaffolder:
   # see https://backstage.io/docs/features/software-templates/configuration for software template options

diff --git a/plugins/daytona/src/components/AuthCardComponent/AuthCardComponent.tsx b/plugins/daytona/src/components/AuthCardComponent/AuthCardComponent.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { useApi } from "@backstage/core-plugin-api";
+import { Box, Button, Card, CardContent, CardHeader, Divider, ListItemText, Typography } from "@material-ui/core";
+import DaytonaIcon from "../../assets/DaytonaIcon";
+import { daytonaAuthApiRef } from "@daytonaio/daytona-web";
+import { isError } from '@backstage/errors';
+
+export const AuthCardComponent = () => {
+    const daytonaAuthApi = useApi(daytonaAuthApiRef);
+    const [error, setError] = useState<string>();
+
+    const handleAuthenticate = async () => {
+        try {
+            await daytonaAuthApi.signIn();
+        } catch (e) {
+            setError(isError(e) ? e.message : 'An unspecified error occurred');
+        } 
+    }
+
+    return (
+        <Card style={{
+            display: 'flex',
+            flexDirection: 'column',
+            height: 'calc(100% - 10px)', // for pages without content header
+            marginBottom: '10px',
+          }}>
+            <CardHeader 
+                title={
+                    <>
+                        <Box display="flex" alignItems="center" marginBottom={2}>
+                            <DaytonaIcon/> 
+                            <Box mr={1} width={2}/>
+                            Daytona Workspaces
+                        </Box>  
+                    </>
+                }/>
+            <Divider />
+            <CardContent style={{ padding: 0, overflow: 'auto', display: 'block' }}>
+                <div style={{ display: 'block', textAlign: 'center', padding: '10%' }}>
+                    <DaytonaIcon />
+                    <Typography variant="body1" style={{ display: 'block', wordWrap: "break-word" }}>
+                        <span style={{ display: 'block', textAlign: 'center' }}>
+                            Link your Daytona account to create and manage workspaces.
+                        </span>
+                    </Typography>
+                    <div style={{padding: '3%', }}>
+                        <Button variant="contained" color="primary" onClick={handleAuthenticate}>
+                                Authenticate
+                        </Button>
+                        <ListItemText
+                            primary={error && <Typography color="error">{error}</Typography>}
+                        />
+                    </div>
+                </div>
+
+            </CardContent>
+        </Card>
+    );
+}
diff --git a/plugins/daytona/src/components/AuthCardComponent/index.ts b/plugins/daytona/src/components/AuthCardComponent/index.ts
@@ -0,0 +1 @@
+export * from './AuthCardComponent';
diff --git a/plugins/daytona/src/components/WorkspaceComponent/WorkspaceComponent.tsx b/plugins/daytona/src/components/WorkspaceComponent/WorkspaceComponent.tsx
@@ -6,7 +6,7 @@ import {
   Content,
   HeaderLabel,
 } from '@backstage/core-components';
-import { WorkspaceListComponent } from '../WorkspaceListComponent';
+import { WorkspaceListCard } from '../WorkspaceListComponent';
 
 export const WorkspaceComponent = () => (
   <Page themeId="tool">
@@ -17,7 +17,7 @@ export const WorkspaceComponent = () => (
     <Content>
       <Grid container spacing={3} direction="column">
         <Grid item>
-          <WorkspaceListComponent />
+          <WorkspaceListCard />
         </Grid>
       </Grid>
     </Content>

diff --git a/plugins/daytona/src/components/WorkspaceListComponent/WorkspaceListCard.tsx b/plugins/daytona/src/components/WorkspaceListComponent/WorkspaceListCard.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from "react";
+import { useApi, SessionState } from "@backstage/core-plugin-api";
+import { AuthCardComponent } from "../AuthCardComponent/AuthCardComponent";
+import { daytonaAuthApiRef } from "@daytonaio/daytona-web";
+import { WorkspaceListComponent } from "./WorkspaceListComponent";
+
+export const WorkspaceListCard = () => {
+    const daytonaAuthApi = useApi(daytonaAuthApiRef);
+    const [isLoggedIn, setIsLoggedIn] = useState(() => {
+      // Initialize state based on session storage
+      return window.sessionStorage.getItem('isDaytonaSignedIn') === 'true';
+    });
+    // window.sessionStorage.setItem('isDaytonaSignedIn', 'false');
+    // const isDaytonaSignedIn = window.sessionStorage.getItem('isDaytonaSignedIn') == 'true';
+
+    useEffect(() => {
+      const authSubscription = daytonaAuthApi.sessionState$().subscribe(state => {
+        console.log('isDaytonaSignedIn inside useEffect', state);
+        if (state === SessionState.SignedIn) {
+          setIsLoggedIn(true);
+          window.sessionStorage.setItem('isDaytonaSignedIn', 'true');
+          console.log('isDaytonaSignedIn inside if-block', window.sessionStorage.getItem('isDaytonaSignedIn') == 'true');
+        } else {
+          setIsLoggedIn(false);
+          window.sessionStorage.setItem('isDaytonaSignedIn', 'false');
+        }
+      });
+      return () => {
+        authSubscription.unsubscribe();
+      };
+    }, [daytonaAuthApi]);
+
+    // const isDaytonaSignedIn = window.sessionStorage.getItem('isDaytonaSignedIn') == 'true';
+    console.log('isDaytonaSignedIn after useEffect', window.sessionStorage.getItem('isDaytonaSignedIn') == 'true');
+
+    return (
+      <>
+      {isLoggedIn ? <WorkspaceListComponent /> : <AuthCardComponent />}
+      </>
+    );
+}
diff --git a/plugins/daytona/src/components/WorkspaceListComponent/index.ts b/plugins/daytona/src/components/WorkspaceListComponent/index.ts
@@ -1,2 +1,3 @@
+export * from './WorkspaceListCard';
 export * from './WorkspaceListComponent';
 export * from './WorkspaceListComponentTeam';
diff --git a/plugins/daytona/src/components/WorkspaceOverviewContent/WorkspaceOverviewCard.tsx b/plugins/daytona/src/components/WorkspaceOverviewContent/WorkspaceOverviewCard.tsx
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from "react";
+import { useApi, SessionState } from "@backstage/core-plugin-api";
+import { AuthCardComponent } from "../AuthCardComponent";
+import { daytonaAuthApiRef } from "@daytonaio/daytona-web";
+import { WorkspaceOverviewContent } from "./WorkspaceOverviewContent";
+
+export const WorkspaceOverviewCard = () => {
+    const daytonaAuthApi = useApi(daytonaAuthApiRef);
+    const [isLoggedIn, setIsLoggedIn] = useState(() => {
+      // Initialize state based on session storage
+      return window.sessionStorage.getItem('isDaytonaSignedIn') === 'true';
+    });
+
+    useEffect(() => {
+      const authSubscription = daytonaAuthApi.sessionState$().subscribe(state => {
+        if (state === SessionState.SignedIn) {
+          setIsLoggedIn(true);
+          window.sessionStorage.setItem('isDaytonaSignedIn', 'true');
+        } else {
+          setIsLoggedIn(false);
+        }
+      });
+      return () => {
+        authSubscription.unsubscribe();
+      };
+    }, [daytonaAuthApi]);
+
+    return (
+      <>
+      {isLoggedIn ? <WorkspaceOverviewContent /> : <AuthCardComponent />}
+      </>
+    );
+}
diff --git a/plugins/daytona/src/components/WorkspaceOverviewContent/index.ts b/plugins/daytona/src/components/WorkspaceOverviewContent/index.ts
@@ -1 +1 @@
-export * from './WorkspaceOverviewContent';
+export * from './WorkspaceOverviewCard';
diff --git a/plugins/daytona/src/plugin.ts b/plugins/daytona/src/plugin.ts
@@ -38,7 +38,7 @@ export const DaytonaOverviewContent = daytonaPlugin.provide(
     name: 'DaytonaOverviewContent',
     component: {
       lazy: () =>
-        import('./components/WorkspaceOverviewContent').then(m => m.WorkspaceOverviewContent),
+        import('./components/WorkspaceOverviewContent').then(m => m.WorkspaceOverviewCard),
     }
   })
 )
diff --git a/yarn.lock b/yarn.lock
@@ -2,12 +2,6 @@
 # yarn lockfile v1
 
 
-"@adityasinghal26/daytona-web@link:plugins/daytona-web":
-  version "0.1.1"
-  dependencies:
-    "@backstage/core-app-api" "^1.13.0"
-    "@backstage/core-plugin-api" "^1.9.3"
-
 "@adobe/css-tools@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.0.tgz#728c484f4e10df03d5a3acd0d8adcbbebff8ad63"
@@ -5001,6 +4995,12 @@
     pkginfo "^0.4.1"
     uid2 "^1.0.0"
 
+"@daytonaio/daytona-web@link:plugins/daytona-web":
+  version "0.1.3"
+  dependencies:
+    "@backstage/core-app-api" "^1.13.0"
+    "@backstage/core-plugin-api" "^1.9.3"
+
 "@emotion/babel-plugin@^11.11.0":
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
@@ -10876,8 +10876,6 @@ apg-lite@^1.0.3:
 "app@link:packages/app":
   version "0.0.0"
   dependencies:
-    "@adityasinghal26/backstage-plugin-daytona" "^0.2.0"
-    "@adityasinghal26/daytona-web" "^0.1.0"
     "@backstage/app-defaults" "^1.5.5"
     "@backstage/catalog-model" "^1.5.0"
     "@backstage/cli" "^0.26.5"
@@ -10901,6 +10899,8 @@ apg-lite@^1.0.3:
     "@backstage/plugin-techdocs-react" "^1.2.4"
     "@backstage/plugin-user-settings" "^0.8.6"
     "@backstage/theme" "^0.5.4"
+    "@daytonaio/backstage-plugin-daytona" "^0.2.0"
+    "@daytonaio/daytona-web" "^0.1.0"
     "@material-ui/core" "^4.12.2"
     "@material-ui/icons" "^4.9.1"
     history "^5.0.0"
@@ -23629,16 +23629,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -23716,7 +23707,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", [email protected], strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -23730,13 +23721,6 @@ [email protected]:
   dependencies:
     ansi-regex "^4.1.0"
 
-[email protected], strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -25606,7 +25590,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -25624,15 +25608,6 @@ wrap-ansi@^6.0.1:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"