show setup button when pod provider url is not configured

src/content/PageContent.spec.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { ISessionInfo } from '@inrupt/solid-client-authn-browser';
 import { render, screen } from '@testing-library/react';
-import React from 'react';
 import { PageContent } from './PageContent';
 import { useSessionInfo } from './useSessionInfo';
 
@@ -12,6 +12,32 @@ describe('PageContent', () => {
       isLoggedIn: false,
     });
   });
+  describe('without provider url', () => {
+    it('shows setup button', () => {
+      render(
+        <PageContent
+          sessionInfo={{ isLoggedIn: false } as ISessionInfo}
+          providerUrl={null}
+          close={() => null}
+        />
+      );
+      const setupButton = screen.queryByText('Get started');
+      expect(setupButton).toBeInTheDocument();
+    });
+  });
+  describe('when not logged in', () => {
+    it('shows login button', () => {
+      render(
+        <PageContent
+          sessionInfo={{ isLoggedIn: false } as ISessionInfo}
+          providerUrl="https://provider.test"
+          close={() => null}
+        />
+      );
+      const loginButton = screen.queryByText('Login');
+      expect(loginButton).toBeInTheDocument();
+    });
+  });
   describe('close icon', () => {
     it('is present', () => {
       render(

src/content/PageContent.tsx

@@ -1,6 +1,7 @@
 import { ISessionInfo } from '@inrupt/solid-client-authn-browser';
 import React from 'react';
 import { LoginButton } from './LoginButton';
+import { SetupButton } from './SetupButton';
 import { ToolbarContainer } from './ToolbarContainer';
 import { useSessionInfo } from './useSessionInfo';
 
@@ -31,8 +32,10 @@ export const PageContent = ({
       <h1 className="text-3xl mx-4 my-2">WebClip</h1>
       {currentSessionInfo.isLoggedIn ? (
         <ToolbarContainer />
-      ) : (
+      ) : providerUrl ? (
         <LoginButton providerUrl={providerUrl} />
+      ) : (
+        <SetupButton close={close} />
       )}
     </div>
   );

src/content/SetupButton.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MessageType } from '../messages';
+import { sendMessage } from './sendMessage';
+import { SetupButton } from './SetupButton';
+
+jest.mock('./sendMessage');
+
+describe('SetupButton', () => {
+  it('triggers open option page message and calls close when clicked', () => {
+    const close = jest.fn();
+    render(<SetupButton close={close} />);
+    const button = screen.getByText('Get started');
+    fireEvent.click(button);
+    expect(sendMessage).toHaveBeenCalledWith({
+      type: MessageType.OPEN_OPTIONS,
+    });
+    expect(close).toHaveBeenCalled();
+  });
+});

src/content/SetupButton.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from '../components/Button';
+import { MessageType } from '../messages';
+import { sendMessage } from './sendMessage';
+
+interface Props {
+  close: () => void;
+}
+
+export const SetupButton = ({ close }: Props) => {
+  return (
+    <Button
+      loading={false}
+      loadingLabel="Please wait"
+      onClick={async () => {
+        close();
+        await sendMessage({ type: MessageType.OPEN_OPTIONS });
+      }}
+    >
+      Get started
+    </Button>
+  );
+};