diff --git a/app-config.yaml b/app-config.yaml index 4b99c71..c193a41 100644 --- 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 new file mode 100644 index 0000000..1ffe9aa --- /dev/null +++ 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(); + + const handleAuthenticate = async () => { + try { + await daytonaAuthApi.signIn(); + } catch (e) { + setError(isError(e) ? e.message : 'An unspecified error occurred'); + } + } + + return ( + + + + + + Daytona Workspaces + + + }/> + + +
+ + + + Link your Daytona account to create and manage workspaces. + + +
+ + {error}} + /> +
+
+ + + + ); +} \ No newline at end of file diff --git a/plugins/daytona/src/components/AuthCardComponent/index.ts b/plugins/daytona/src/components/AuthCardComponent/index.ts new file mode 100644 index 0000000..ed1c822 --- /dev/null +++ b/plugins/daytona/src/components/AuthCardComponent/index.ts @@ -0,0 +1 @@ +export * from './AuthCardComponent'; \ No newline at end of file diff --git a/plugins/daytona/src/components/WorkspaceComponent/WorkspaceComponent.tsx b/plugins/daytona/src/components/WorkspaceComponent/WorkspaceComponent.tsx index 569d0f6..3d9bb28 100644 --- 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 = () => ( @@ -17,7 +17,7 @@ export const WorkspaceComponent = () => ( - + diff --git a/plugins/daytona/src/components/WorkspaceListComponent/WorkspaceListCard.tsx b/plugins/daytona/src/components/WorkspaceListComponent/WorkspaceListCard.tsx new file mode 100644 index 0000000..37ccb86 --- /dev/null +++ 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 ? : } + + ); +} \ No newline at end of file diff --git a/plugins/daytona/src/components/WorkspaceListComponent/index.ts b/plugins/daytona/src/components/WorkspaceListComponent/index.ts index ced7a96..e771abc 100644 --- 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'; \ No newline at end of file diff --git a/plugins/daytona/src/components/WorkspaceOverviewContent/WorkspaceOverviewCard.tsx b/plugins/daytona/src/components/WorkspaceOverviewContent/WorkspaceOverviewCard.tsx new file mode 100644 index 0000000..b4eeca4 --- /dev/null +++ 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 ? : } + + ); +} \ No newline at end of file diff --git a/plugins/daytona/src/components/WorkspaceOverviewContent/index.ts b/plugins/daytona/src/components/WorkspaceOverviewContent/index.ts index 7b088e8..41d3433 100644 --- a/plugins/daytona/src/components/WorkspaceOverviewContent/index.ts +++ b/plugins/daytona/src/components/WorkspaceOverviewContent/index.ts @@ -1 +1 @@ -export * from './WorkspaceOverviewContent'; \ No newline at end of file +export * from './WorkspaceOverviewCard'; \ No newline at end of file diff --git a/plugins/daytona/src/plugin.ts b/plugins/daytona/src/plugin.ts index 28a2a2d..80cf031 100644 --- 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 index 945d95c..1feb549 100644 --- 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", strip-ansi@6.0, 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 @@ strip-ansi@5.2.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@6.0, 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"