offline spaces-bar "+" should also link to the cloud

src/App.tsx

@@ -20,7 +20,7 @@ import { loadCss } from "utils/css-loader"
 import { useDateTime } from "utils/date-time"
 import { useListenToPostMessage } from "utils/post-message"
 import { useSelector } from "store/redux-separate-context"
-import { selectCloudBaseUrl } from "domains/global/selectors"
+import { selectCloudBaseUrl, selectSignInUrl } from "domains/global/selectors"
 import { Portals } from "domains/chart/components/portals"
 import { useChartsMetadata } from "domains/dashboard/hooks/use-charts-metadata"
 import { PrintModal } from "domains/dashboard/components/print-modal"
@@ -125,6 +125,7 @@ const App: React.FC = () => {
   const [isOffline, setIsOffline] = useState(false)
 
   useListenToFocusMessages()
+  const signInUrl = useSelector(selectSignInUrl)
 
   // const dispatch = useDispatch()
   // const [hasFocus] = useListenToPostMessage("has-focus", (newHasFocus) => {
@@ -140,6 +141,7 @@ const App: React.FC = () => {
               isSignedIn={isSignedIn}
               cloudBaseURL={cloudBaseURL}
               enoughWaitingForIframe={enoughWaitingForIframe}
+              signInUrl={signInUrl}
             />
           )}
           {!isPrintMode && (

src/components/spaces-bar/spaces-bar.tsx

@@ -9,11 +9,13 @@ interface Props {
   cloudBaseURL: string
   isSignedIn: boolean
   enoughWaitingForIframe: boolean
+  signInUrl: string
 }
 export const SpacesBar = ({
   cloudBaseURL,
   isSignedIn,
   enoughWaitingForIframe,
+  signInUrl,
 }: Props) => (
   <ListContainer>
     {isSignedIn ? (
@@ -30,7 +32,12 @@ export const SpacesBar = ({
           <SpacePlaceholder />
         </SpacesList>
         <SeparatedSection>
-          <Button icon="plus" onClick={() => {}} />
+          <Button
+            icon="plus"
+            onClick={() => {
+              window.location.href = signInUrl
+            }}
+          />
         </SeparatedSection>
       </>
     ))}

src/domains/global/selectors.ts

@@ -55,6 +55,17 @@ export const selectRegistry = createSelector(selectGlobal, prop("registry"))
 
 export const selectCloudBaseUrl = createSelector(selectRegistry, prop("cloudBaseURL"))
 
+export const selectSignInUrl = createSelector(
+  selectRegistry,
+  selectCloudBaseUrl,
+  (registry, cloudBaseURL) => {
+    const name = encodeURIComponent(registry.hostname)
+    const origin = encodeURIComponent(`${window.location.origin}/`)
+    // not adding redirect_url - it needs to always be based on newest href
+    return `${cloudBaseURL}/sign-in?id=${registry.machineGuid}&name=${name}&origin=${origin}`
+  },
+)
+
 export const selectIsFetchingHello = createSelector(selectRegistry, prop("isFetchingHello"))
 export const selectIsUsingGlobalRegistry = createSelector(
   selectRegistry,