From ff4755be64bc75f47a648ec184d6b364c801b259 Mon Sep 17 00:00:00 2001
From: kAy <kmaharjan4@atlassian.com>
Date: Fri, 11 Aug 2023 16:14:35 +1000
Subject: [PATCH] 5ku UI changes (#2337)

* - Back button changed to cross
- InstallationRequested split to a new route
- Minor cleanup

* - Lint fixes

* - test case added for the request installation screen

* - test case added for the request installation screen

* - Cleanup

* - Add organization button added in the Success screen
- Test case updated

* - Removed the auto-redirect from the jira-get.ts

* - Orgs list separated to a different component

* - Minor cleanup

* - WIP - error states

* - UI changes

* - Dropdown component removed
- Text changes and updating test cases

* - Minor styling fix

* - Link added

---------

Co-authored-by: Gary Xue <105693507+gxueatlassian@users.noreply.github.com>
---
 spa/src/app.tsx                               |   2 +
 spa/src/common/LoggedinInfo.tsx               |  31 ++++
 spa/src/common/Wrapper.tsx                    |   5 +-
 spa/src/components/SelectDropdown/index.tsx   |  72 ---------
 spa/src/components/SelectDropdown/test.tsx    |  28 ----
 spa/src/components/Step/index.tsx             |   1 +
 .../pages/ConfigSteps/OrgsContainer/index.tsx | 142 ++++++++++++++++++
 .../ConfigSteps/SkeletonForLoading/index.tsx  |  38 +++++
 spa/src/pages/ConfigSteps/index.tsx           | 138 ++++-------------
 spa/src/pages/ConfigSteps/test.tsx            |  61 ++++----
 spa/src/pages/Connected/index.tsx             |  40 +++--
 spa/src/pages/Connected/test.tsx              |  12 +-
 spa/src/pages/InstallationRequested/index.tsx |  48 ++++++
 spa/src/pages/InstallationRequested/test.tsx  |  35 +++++
 spa/src/utils/modifyError.tsx                 |   2 +-
 src/routes/jira/jira-get.test.ts              |  23 ---
 src/routes/jira/jira-get.ts                   |   4 -
 17 files changed, 407 insertions(+), 275 deletions(-)
 create mode 100644 spa/src/common/LoggedinInfo.tsx
 delete mode 100644 spa/src/components/SelectDropdown/index.tsx
 delete mode 100644 spa/src/components/SelectDropdown/test.tsx
 create mode 100644 spa/src/pages/ConfigSteps/OrgsContainer/index.tsx
 create mode 100644 spa/src/pages/ConfigSteps/SkeletonForLoading/index.tsx
 create mode 100644 spa/src/pages/InstallationRequested/index.tsx
 create mode 100644 spa/src/pages/InstallationRequested/test.tsx

diff --git a/spa/src/app.tsx b/spa/src/app.tsx
index b808e8da96..6314647ee9 100644
--- a/spa/src/app.tsx
+++ b/spa/src/app.tsx
@@ -7,6 +7,7 @@ import {
 import StartConnection from "./pages/StartConnection";
 import ConfigSteps from "./pages/ConfigSteps";
 import Connected from "./pages/Connected";
+import InstallationRequested from "./pages/InstallationRequested";
 
 import * as Sentry from "@sentry/react";
 import { initSentry } from "./sentry";
@@ -32,6 +33,7 @@ const App = () => {
 					<Route index element={<StartConnection/>}/>
 					<Route path="steps" element={<ConfigSteps/>}/>
 					<Route path="connected" element={<Connected />}/>
+					<Route path="installationRequested" element={<InstallationRequested />}/>
 				</Route>
 			</SentryRoutes>
 		</BrowserRouter>
diff --git a/spa/src/common/LoggedinInfo.tsx b/spa/src/common/LoggedinInfo.tsx
new file mode 100644
index 0000000000..c3363ee743
--- /dev/null
+++ b/spa/src/common/LoggedinInfo.tsx
@@ -0,0 +1,31 @@
+import Button from "@atlaskit/button";
+import styled from "@emotion/styled";
+import { popup } from "../utils";
+import analyticsClient from "../analytics";
+import OAuthManager from "../services/oauth-manager";
+
+const LoggedInContent = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 0 auto;
+`;
+
+const LoggedinInfo = ({ username, logout }: { username: string; logout: () => void;}) => {
+	const clicked = () => {
+		// Opens the popup for logging out of GitHub
+		popup("https://github.com/logout");
+		// Clearing the locally stored tokens
+		OAuthManager.clear();
+		// Passed callbacks, for re-rendering/changing states
+		logout();
+		analyticsClient.sendUIEvent({ actionSubject: "switchGitHubAccount", action: "clicked" });
+	};
+
+	return <LoggedInContent>
+		<div data-testid="logged-in-as">Logged in as <b>{username}</b>.&nbsp;</div>
+		<Button style={{ paddingLeft: 0 }} appearance="link" onClick={clicked}>Change GitHub login</Button>
+	</LoggedInContent>;
+};
+
+export default LoggedinInfo;
diff --git a/spa/src/common/Wrapper.tsx b/spa/src/common/Wrapper.tsx
index 61a3d5130b..215af47271 100644
--- a/spa/src/common/Wrapper.tsx
+++ b/spa/src/common/Wrapper.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import styled from "@emotion/styled";
 import Button from "@atlaskit/button";
-import ArrowLeftIcon from "@atlaskit/icon/glyph/arrow-left";
+import CrossIcon from "@atlaskit/icon/glyph/cross";
 import analyticsClient from "../analytics";
 
 const navHeight = 56;
@@ -27,7 +27,8 @@ export const Wrapper = (attr: {
 }) => {
 	return <WrapperOutterStyled>
 			<Button
-				iconBefore={<ArrowLeftIcon label="Back to home" size="medium" />}
+				style={{ float: "right" }}
+				iconBefore={<CrossIcon label="Close" size="medium" />}
 				appearance="subtle"
 				onClick={ navigateToHomePage }
 			>
diff --git a/spa/src/components/SelectDropdown/index.tsx b/spa/src/components/SelectDropdown/index.tsx
deleted file mode 100644
index 250cba7d67..0000000000
--- a/spa/src/components/SelectDropdown/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Label } from "@atlaskit/form";
-import Select from "@atlaskit/select";
-import styled from "@emotion/styled";
-import { token } from "@atlaskit/tokens";
-import React from "react";
-
-export type OrgOptionsType = {
-	label?: string;
-	options: Array<LabelType>
-};
-
-export type LabelType = {
-	label: string;
-	value: string;
-	requiresSsoLogin?: boolean;
-	isIPBlocked?: boolean;
-	isAdmin?: boolean;
-};
-
-const SelectDropdownContainer = styled.div`
-	margin: ${token("space.150")} 0;
-	position: relative;
-`;
-const IconContainer = styled.span`
-	position: absolute;
-	z-index: 2;
-	top: 30px;
-	left: 8px;
-`;
-const SelectContainer = styled.div`
-	.react-select__value-container {
-		padding-left: ${token("space.400")};
-	}
-`;
-
-const SelectDropdown = ({
-	options,
-	label,
-	onChange,
-	placeholder = "",
-	isLoading = false,
-	icon,
-}: {
-	options: Array<OrgOptionsType>,
-	label: string,
-	onChange: (args: LabelType | null) => void,
-	placeholder?: string,
-	isLoading: boolean,
-	icon?: React.JSX.Element
-}) => {
-	return (<>
-		<SelectDropdownContainer>
-			<IconContainer>
-				{icon}
-			</IconContainer>
-			<Label htmlFor="select-org">{label}</Label>
-			<SelectContainer>
-				<Select
-					inputId="select-org"
-					className="single-select"
-					isLoading={isLoading}
-					classNamePrefix="react-select"
-					onChange={onChange}
-					options={options}
-					placeholder={placeholder}
-				/>
-			</SelectContainer>
-		</SelectDropdownContainer>
-	</>);
-};
-
-export default SelectDropdown;
diff --git a/spa/src/components/SelectDropdown/test.tsx b/spa/src/components/SelectDropdown/test.tsx
deleted file mode 100644
index 98dedffd04..0000000000
--- a/spa/src/components/SelectDropdown/test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import SelectDropdown from "./index";
-
-test("Basic check for the select dropdown", async () => {
-	render(
-		<SelectDropdown
-			onChange={jest.fn()}
-			isLoading={false}
-			options={[
-				{
-					label: "Label",
-					options: [
-						{ label: "First", value: "1" },
-						{ label: "Second", value: "2" },
-						{ label: "Third", value: "3" },
-					]
-				}
-			]}
-			label="Dropdown label"
-			placeholder="Dropdown placeholder"
-			icon={<span data-testid="selectIconId">🎉</span>}
-		/>
-	);
-
-	expect(screen.queryByText("Dropdown label")).toBeInTheDocument();
-	expect(screen.queryByText("Dropdown placeholder")).toBeInTheDocument();
-	expect(screen.queryByTestId("selectIconId")).toBeInTheDocument();
-});
diff --git a/spa/src/components/Step/index.tsx b/spa/src/components/Step/index.tsx
index 463a9e4afd..c4cc9e549f 100644
--- a/spa/src/components/Step/index.tsx
+++ b/spa/src/components/Step/index.tsx
@@ -17,6 +17,7 @@ const Header = styled.div`
 const StepTitle = styled.div`
 	cursor: pointer;
 	font-weight: 600;
+	font-size: ${token("space.200")};
 	color: token("color.text");
 	margin: 0 0 ${token("space.100")};
 `;
diff --git a/spa/src/pages/ConfigSteps/OrgsContainer/index.tsx b/spa/src/pages/ConfigSteps/OrgsContainer/index.tsx
new file mode 100644
index 0000000000..71f04929c4
--- /dev/null
+++ b/spa/src/pages/ConfigSteps/OrgsContainer/index.tsx
@@ -0,0 +1,142 @@
+import Button, { LoadingButton } from "@atlaskit/button";
+import { GitHubInstallationType } from "../../../../../src/rest-interfaces";
+import styled from "@emotion/styled";
+import { token } from "@atlaskit/tokens";
+import { useState } from "react";
+import WarningIcon from "@atlaskit/icon/glyph/warning";
+import { popup } from "../../../utils";
+
+type OrgDivType = {
+	key: number;
+	hasError: boolean;
+};
+
+const OrgsWrapper = styled.div`
+	max-height: 250px;
+	overflow-y: auto;
+	padding-right: 80px;
+	margin-right: -80px;
+`;
+const OrgDiv = styled.div<OrgDivType>`
+	display: flex;
+	justify-content: space-between;
+	align-items: ${props => props.hasError ? "start" : "center"};
+	padding: ${token("space.150")} 0;
+	margin-bottom: ${token("space.100")};
+`;
+const OrgName = styled.span`
+	color: ${token("color.text")};
+	font-weight: 590;
+`;
+const Paragraph = styled.div`
+	color: ${token("color.text.subtle")};
+`;
+const IconWrapper = styled.div`
+	padding-top: ${token("space.150")};
+`;
+const StyledLink = styled.a`
+	cursor: pointer;
+`;
+
+const OrganizationsList = ({
+	organizations,
+	loaderForOrgClicked,
+	setLoaderForOrgClicked,
+	clearGitHubToken,
+	connectingOrg,
+}: {
+	organizations: Array<GitHubInstallationType>;
+	// Passing down the states and methods from the parent component
+	loaderForOrgClicked: boolean;
+	setLoaderForOrgClicked: (args: boolean) => void;
+	clearGitHubToken: () => void;
+	connectingOrg: (org: GitHubInstallationType) => void;
+}) => {
+	const [clickedOrg, setClickedOrg] = useState<GitHubInstallationType | undefined>(undefined);
+	const canConnect = (org: GitHubInstallationType) => !org.requiresSsoLogin && !org.isIPBlocked && org.isAdmin;
+
+	// TODO: Automate the login after clearing the GitHub Token
+	const errorMessage = (org: GitHubInstallationType) => {
+		if (org.requiresSsoLogin) {
+			// TODO: Update this to support GHE
+			const accessUrl = `https://github.com/organizations/${org.account.login}/settings/profile`;
+
+			return <>
+				<Paragraph>
+					Make sure you can <StyledLink onClick={() => popup(accessUrl)}>access this organization</StyledLink>.
+				</Paragraph>
+				<Paragraph>
+					After confirming, please <StyledLink onClick={clearGitHubToken}>reset the token</StyledLink>.
+				</Paragraph>
+			</>;
+		}
+
+		if (org.isIPBlocked) {
+			return <>
+				<Paragraph>
+					Can't connect, blocked by your IP allow list.
+				</Paragraph>
+				<Button
+					style={{ paddingLeft: 0 }}
+					appearance="link"
+					onClick={() => popup("https://github.com/atlassian/github-for-jira/blob/main/docs/ip-allowlist.md")}
+				>
+					Learn how to fix this error
+				</Button>
+			</>;
+		}
+
+		if (!org.isAdmin) {
+			return <>
+				<Paragraph>
+					Can't connect, you're not an organization owner.<br />Ask an owner to complete this step.
+				</Paragraph>
+			</>;
+		}
+	};
+
+	return (
+		<OrgsWrapper>
+			{
+				organizations.map(org =>
+					<OrgDiv key={org.id} hasError={!canConnect(org)}>
+						{
+							canConnect(org) ? <>
+								<OrgName>{org.account.login}</OrgName>
+								{
+									loaderForOrgClicked && clickedOrg?.id === org.id ?
+										<LoadingButton style={{width: 80}} isLoading>Loading button</LoadingButton> :
+										<Button
+											isDisabled={loaderForOrgClicked && clickedOrg?.id !== org.id}
+											onClick={async () => {
+												setLoaderForOrgClicked(true);
+												setClickedOrg(org);
+												try {
+													// Calling the create connection function that is passed from the parent
+													await connectingOrg(org);
+												} finally {
+													setLoaderForOrgClicked(false);
+												}
+											}}
+										>
+											Connect
+										</Button>
+								}
+							</> : <>
+								<div>
+									<OrgName>{org.account.login}</OrgName>
+									<div>{errorMessage(org)}</div>
+								</div>
+								<IconWrapper>
+									<WarningIcon label="warning" primaryColor={token("color.background.warning.bold")} size="medium" />
+								</IconWrapper>
+							</>
+						}
+					</OrgDiv>
+				)
+			}
+		</OrgsWrapper>
+	);
+};
+
+export default OrganizationsList;
diff --git a/spa/src/pages/ConfigSteps/SkeletonForLoading/index.tsx b/spa/src/pages/ConfigSteps/SkeletonForLoading/index.tsx
new file mode 100644
index 0000000000..a9069b427a
--- /dev/null
+++ b/spa/src/pages/ConfigSteps/SkeletonForLoading/index.tsx
@@ -0,0 +1,38 @@
+import Step from "../../../components/Step";
+import Skeleton from "@atlaskit/skeleton";
+import styled from "@emotion/styled";
+
+const Content = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 0 auto;
+`;
+
+const SkeletonForLoading = () => <>
+	<Step
+		title={<Skeleton
+			width="60%"
+			height="24px"
+			borderRadius="5px"
+			isShimmering
+		/>}
+	>
+		<Skeleton
+			width="100%"
+			height="24px"
+			borderRadius="5px"
+			isShimmering
+		/>
+	</Step>
+	<Content>
+		<Skeleton
+			width="60%"
+			height="24px"
+			borderRadius="5px"
+			isShimmering
+		/>
+	</Content>
+</>;
+
+export default SkeletonForLoading;
diff --git a/spa/src/pages/ConfigSteps/index.tsx b/spa/src/pages/ConfigSteps/index.tsx
index baf85b6a76..fedb60627e 100644
--- a/spa/src/pages/ConfigSteps/index.tsx
+++ b/spa/src/pages/ConfigSteps/index.tsx
@@ -5,10 +5,9 @@ import styled from "@emotion/styled";
 import SyncHeader from "../../components/SyncHeader";
 import { Wrapper } from "../../common/Wrapper";
 import Step from "../../components/Step";
+import LoggedinInfo  from "../../common/LoggedinInfo";
 import Tooltip, { TooltipPrimitive } from "@atlaskit/tooltip";
-import Skeleton from "@atlaskit/skeleton";
 import { token } from "@atlaskit/tokens";
-import OpenIcon from "@atlaskit/icon/glyph/open";
 import { useNavigate } from "react-router-dom";
 import Error from "../../components/Error";
 import AppManager from "../../services/app-manager";
@@ -16,8 +15,10 @@ import OAuthManager from "../../services/oauth-manager";
 import analyticsClient from "../../analytics";
 import { AxiosError } from "axios";
 import { ErrorObjType, modifyError } from "../../utils/modifyError";
-import { popup, reportError } from "../../utils";
+import { reportError } from "../../utils";
 import { GitHubInstallationType } from "../../../../src/rest-interfaces";
+import OrganizationsList from "../ConfigSteps/OrgsContainer";
+import SkeletonForLoading from "../ConfigSteps/SkeletonForLoading";
 
 type GitHubOptionType = {
 	selectedOption: number;
@@ -90,25 +91,6 @@ const AddOrganizationContainer = styled.div`
 		}
 	}
 `;
-const LoggedInContent = styled.div`
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: 0 auto;
-`;
-const OrgsContainer = styled.div`
-	max-height: 250px;
-	overflow-y: auto;
-	padding-right: 80px;
-	margin-right: -80px;
-`;
-const OrgDiv = styled.div`
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: ${token("space.150")} 0;
-	margin-bottom: ${token("space.100")};
-`;
 const Paragraph = styled.div`
 	color: ${token("color.text.subtle")};
 	margin-bottom: ${token("space.100")};
@@ -138,10 +120,7 @@ const ConfigSteps = () => {
 	const [isLoggedIn, setIsLoggedIn] = useState(isAuthenticated);
 	const [loggedInUser, setLoggedInUser] = useState<string | undefined>(username);
 	const [loaderForLogin, setLoaderForLogin] = useState(false);
-
-	const [clickedOrg, setClickedOrg] = useState<number>(0);
 	const [loaderForOrgClicked, setLoaderForOrgClicked] = useState<boolean>(false);
-	const [hasRequestedOrgsInstallation, setHasRequestedOrgsInstallation] = useState<boolean>(false);
 
 	const [error, setError] = useState<ErrorObjType | undefined>(undefined);
 
@@ -194,18 +173,16 @@ const ConfigSteps = () => {
 
 	const clearGitHubToken = () => {
 		OAuthManager.clear();
+		clearLogin();
+	};
+
+	const clearLogin = () => {
 		setIsLoggedIn(false);
 		setLoaderForLogin(false);
 		setLoggedInUser("");
 		setError(undefined);
 	};
 
-	const logout = () => {
-		popup("https://github.com/logout");
-		clearGitHubToken();
-		analyticsClient.sendUIEvent({ actionSubject: "switchGitHubAccount", action: "clicked" });
-	};
-
 	const doCreateConnection = async (gitHubInstallationId: number, mode: "auto" | "manual", orgLogin?: string) => {
 		try {
 			analyticsClient.sendUIEvent({ actionSubject: "connectOrganisation", action: "clicked" });
@@ -234,7 +211,7 @@ const ConfigSteps = () => {
 					}
 				},
 				onRequested: async (_setupAction: string) => {
-					setHasRequestedOrgsInstallation(true);
+					navigate("/spa/installationRequested");
 				}
 			});
 		} catch (e) {
@@ -265,6 +242,7 @@ const ConfigSteps = () => {
 		return () => {
 			window.removeEventListener("message", handler);
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ originalUrl ]);
 
 	useEffect(() => {
@@ -300,94 +278,39 @@ const ConfigSteps = () => {
 				{
 					isLoggedIn ? <>
 						{
-							loaderForOrgFetching ?
-								<>
-									<Step
-										title={<Skeleton
-											width="60%"
-											height="24px"
-											borderRadius="5px"
-											isShimmering
-										/>}
-									>
-										<Skeleton
-											width="100%"
-											height="24px"
-											borderRadius="5px"
-											isShimmering
-										/>
-									</Step>
-									<LoggedInContent>
-										<Skeleton
-											width="60%"
-											height="24px"
-											borderRadius="5px"
-											isShimmering
-										/>
-									</LoggedInContent>
-								</> : <>
-									{
-										hasRequestedOrgsInstallation ? <Step title="Request sent">
-											<Paragraph>
-												A request is sent to your GitHub organization owner. Once your<br/>
-												request is granted, come back to complete the configuration.
-											</Paragraph>
-										</Step> :
-										<Step title="Connect your GitHub organization to Jira">
+							loaderForOrgFetching ? <SkeletonForLoading /> : <>
+									<Step title="Select a GitHub organization">
 												<>
 													<Paragraph>
-														Repositories from this organization will be available to all<br />
-														projects in <b>{hostUrl?.jiraHost}</b>.
+														This organization's repositories will be available to all projects<br />
+														in <b>{hostUrl?.jiraHost}</b>.
 													</Paragraph>
 													{
-														organizations.length === 0 &&
-														<NoOrgsParagraph>No organizations found!</NoOrgsParagraph>
+														organizations.length === 0 ? <NoOrgsParagraph>No organizations found!</NoOrgsParagraph> :
+															<OrganizationsList
+																organizations={organizations}
+																loaderForOrgClicked={loaderForOrgClicked}
+																setLoaderForOrgClicked={setLoaderForOrgClicked}
+																clearGitHubToken={clearGitHubToken}
+																connectingOrg={(org) => doCreateConnection(org.id, "manual", org.account?.login)} />
 													}
-													<OrgsContainer>
-														{
-															organizations.map(org =>
-																<OrgDiv key={org.id}>
-																	<span>{org.account.login}</span>
-																	{
-																		loaderForOrgClicked && clickedOrg === org.id ?
-																			<LoadingButton style={{width: 80}} isLoading>Loading button</LoadingButton> :
-																			<Button
-																				isDisabled={loaderForOrgClicked && clickedOrg !== org.id}
-																				onClick={async () => {
-																					setLoaderForOrgClicked(true);
-																					setClickedOrg(org.id);
-																					try {
-																						await doCreateConnection(org.id, "manual", org.account?.login);
-																					} finally {
-																						setLoaderForOrgClicked(false);
-																					}
-																				}}
-																			>
-																				Connect
-																			</Button>
-																	}
-																</OrgDiv>
-															)
-														}
-													</OrgsContainer>
 													<AddOrganizationContainer>
 														<Button
 															iconBefore={<AddIcon label="add new org" size="medium"/>}
 															isDisabled={loaderForOrgClicked}
-															aria-label="Install new Org"
+															aria-label="Install organization"
 															onClick={() => installNewOrg("manual")}
 														/>
 														<div onClick={() => !loaderForOrgClicked && installNewOrg("manual")}>
-															Add an organization
+															{ organizations.length === 0 ? "Select an organization in GitHub" : "Select another organization" }
 														</div>
 													</AddOrganizationContainer>
 												</>
 											</Step>
-									}
-									<LoggedInContent>
-										<div data-testid="logged-in-as">Logged in as <b>{loggedInUser}</b>.&nbsp;</div>
-										<Button style={{ paddingLeft: 0 }} appearance="link" onClick={logout}>Change GitHub login</Button>
-									</LoggedInContent>
+									<LoggedinInfo
+										username={loggedInUser || ""}
+										logout={clearLogin}
+									/>
 								</>
 						}
 					</>
@@ -429,19 +352,16 @@ const ConfigSteps = () => {
 								{
 									loaderForLogin ? <LoadingButton appearance="primary" isLoading>Loading</LoadingButton> :
 										<Button
-											iconAfter={<OpenIcon label="open" size="medium"/>}
-											aria-label="Get started"
+											aria-label="Next"
 											appearance="primary"
 											onClick={authorize}
 										>
-											Get started
+											Next
 										</Button>
 								}
 							</>
 					</Step>
 				}
-
-
 			</ConfigContainer>
 		</Wrapper>
 	);
diff --git a/spa/src/pages/ConfigSteps/test.tsx b/spa/src/pages/ConfigSteps/test.tsx
index 5cb2387b66..f4dd0370be 100644
--- a/spa/src/pages/ConfigSteps/test.tsx
+++ b/spa/src/pages/ConfigSteps/test.tsx
@@ -17,7 +17,7 @@ jest.mock("react-router-dom", () => ({
 const Authenticated = {
 	checkValidity: jest.fn().mockReturnValue(Promise.resolve(true)),
 	authenticateInGitHub: jest.fn().mockReturnValue(Promise),
-	fetchOrgs: jest.fn().mockReturnValue({ orgs: [ { account: { login: "org-1" }, id: 1 }, { account: { login: "org-2" }, id: 2 }, { account: { login: "org-3" }, id: 3  } ]}),
+	fetchOrgs: jest.fn().mockReturnValue({ orgs: [ { account: { login: "org-1" }, id: 1, isAdmin: true }, { account: { login: "org-2" }, id: 2, isAdmin: true }, { account: { login: "org-3" }, id: 3, isAdmin: true  } ]}),
 	installNewApp: jest.fn(),
 	connectOrg: jest.fn(),
 	setTokens: jest.fn(),
@@ -59,6 +59,15 @@ const UnAuthenticated = {
 };
 window.open = jest.fn();
 
+// String values
+const CONNECT_GITHUB_TO_JIRA = "Connect Github to Jira";
+const GITHUB_CLOUD = "GitHub Cloud";
+const GITHUB_ENTERPRISE = "GitHub Enterprise Server";
+const SELECT_GH_PRODUCT = "Select your GitHub product";
+const SELECT_GH_PRODUCT_CTA = "Next";
+const SELECT_GH_TEXT = "Select a GitHub organization";
+const NO_ORGS_INSTALL_ORG_CTA = "Select an organization in GitHub";
+
 test("Connect GitHub Screen - Initial Loading of the page when not authenticated", async () => {
 	jest.mocked(OAuthManager).getUserDetails = UnAuthenticated.getUserDetails;
 	jest.mocked(OAuthManager).checkValidity = UnAuthenticated.checkValidity;
@@ -71,11 +80,11 @@ test("Connect GitHub Screen - Initial Loading of the page when not authenticated
 		);
 	});
 
-	expect(screen.queryByText("Connect Github to Jira")).toBeInTheDocument();
-	expect(screen.queryByText("GitHub Cloud")).toBeInTheDocument();
-	expect(screen.queryByText("GitHub Enterprise Server")).toBeInTheDocument();
-	expect(screen.queryByText("Select your GitHub product")).toBeInTheDocument();
-	expect(screen.queryByRole("button", { name: "Get started" })).toHaveTextContent("Get started");
+	expect(screen.queryByText(CONNECT_GITHUB_TO_JIRA)).toBeInTheDocument();
+	expect(screen.queryByText(GITHUB_CLOUD)).toBeInTheDocument();
+	expect(screen.queryByText(GITHUB_ENTERPRISE)).toBeInTheDocument();
+	expect(screen.queryByText(SELECT_GH_PRODUCT)).toBeInTheDocument();
+	expect(screen.queryByRole("button", { name: SELECT_GH_PRODUCT_CTA })).toHaveTextContent(SELECT_GH_PRODUCT_CTA);
 });
 
 test("Connect GitHub Screen - Checking the GitHub Enterprise flow when not authenticated", async () => {
@@ -90,8 +99,8 @@ test("Connect GitHub Screen - Checking the GitHub Enterprise flow when not authe
 		);
 	});
 
-	await act(() => userEvent.click(screen.getByText("GitHub Enterprise Server")));
-	await act(() => userEvent.click(screen.getByText("Get started")));
+	await act(() => userEvent.click(screen.getByText(GITHUB_ENTERPRISE)));
+	await act(() => userEvent.click(screen.getByText(SELECT_GH_PRODUCT_CTA)));
 
 	expect(AP.getLocation).toHaveBeenCalled();
 });
@@ -109,8 +118,8 @@ test("Connect GitHub Screen - Checking the GitHub Cloud flow when not authentica
 		);
 	});
 
-	await act(() => userEvent.click(screen.getByText("GitHub Cloud")));
-	await act(() => userEvent.click(screen.getByText("Get started")));
+	await act(() => userEvent.click(screen.getByText(GITHUB_CLOUD)));
+	await act(() => userEvent.click(screen.getByText(SELECT_GH_PRODUCT_CTA)));
 
 	expect(OAuthManager.authenticateInGitHub).toHaveBeenCalled();
 });
@@ -133,13 +142,13 @@ test("Connect GitHub Screen - Checking the GitHub Cloud flow when authenticated
 		);
 	});
 
-	expect(screen.queryByText("GitHub Cloud")).not.toBeInTheDocument();
-	expect(screen.queryByText("GitHub Enterprise Server")).not.toBeInTheDocument();
-	expect(screen.queryByText("Get started")).not.toBeInTheDocument();
-	expect(screen.queryByText("Select your GitHub product")).not.toBeInTheDocument();
+	expect(screen.queryByText(GITHUB_CLOUD)).not.toBeInTheDocument();
+	expect(screen.queryByText(GITHUB_ENTERPRISE)).not.toBeInTheDocument();
+	expect(screen.queryByText("Next ")).not.toBeInTheDocument();
+	expect(screen.queryByText(SELECT_GH_PRODUCT)).not.toBeInTheDocument();
 
 	// Checking if all the orgs are being displayed
-	expect(screen.queryByText("Connect your GitHub organization to Jira")).toBeInTheDocument();
+	expect(screen.queryByText(SELECT_GH_TEXT)).toBeInTheDocument();
 	expect(screen.queryByText("org-1")).toBeInTheDocument();
 	expect(screen.queryByText("org-2")).toBeInTheDocument();
 	expect(screen.queryByText("org-3")).toBeInTheDocument();
@@ -153,7 +162,7 @@ test("Connect GitHub Screen - Checking the GitHub Cloud flow when authenticated
 	expect(await screen.findAllByRole("button", { name: "Connect" })).toHaveLength(2);
 	expect(screen.getAllByRole("button", { name: "Connect" })[0]).toBeDisabled();
 	expect(screen.getAllByRole("button", { name: "Connect" })[1]).toBeDisabled();
-	expect(screen.getByLabelText("Install new Org")).toBeDisabled();
+	expect(screen.getByLabelText("Install organization")).toBeDisabled();
 	expect(AppManager.connectOrg).toBeCalled();
 });
 
@@ -170,20 +179,20 @@ test("Connect GitHub Screen - Checking the GitHub Cloud flow when authenticated
 		);
 	});
 
-	expect(screen.queryByText("GitHub Cloud")).not.toBeInTheDocument();
-	expect(screen.queryByText("GitHub Enterprise Server")).not.toBeInTheDocument();
-	expect(screen.queryByText("Get started")).not.toBeInTheDocument();
-	expect(screen.queryByText("Select your GitHub product")).not.toBeInTheDocument();
+	expect(screen.queryByText(GITHUB_CLOUD)).not.toBeInTheDocument();
+	expect(screen.queryByText(GITHUB_ENTERPRISE)).not.toBeInTheDocument();
+	expect(screen.queryByText(SELECT_GH_PRODUCT_CTA)).not.toBeInTheDocument();
+	expect(screen.queryByText(SELECT_GH_PRODUCT)).not.toBeInTheDocument();
 
 	// Checking to see no orgs are being displayed
-	expect(screen.queryByText("Connect your GitHub organization to Jira")).toBeInTheDocument();
+	expect(screen.queryByText(SELECT_GH_TEXT)).toBeInTheDocument();
 	expect(screen.queryByText("org-1")).not.toBeInTheDocument();
 	expect(screen.queryByText("org-2")).not.toBeInTheDocument();
 	expect(screen.queryByText("org-3")).not.toBeInTheDocument();
 
 	// Testing the click on the Install button
-	expect(screen.queryByText("Add an organization")).toBeInTheDocument();
-	await act(async() => { await userEvent.click(screen.getByText("Add an organization")); });
+	expect(screen.queryByText(NO_ORGS_INSTALL_ORG_CTA)).toBeInTheDocument();
+	await act(async() => { await userEvent.click(screen.getByText(NO_ORGS_INSTALL_ORG_CTA)); });
 	expect(AppManager.installNewApp).toBeCalled();
 });
 
@@ -206,8 +215,8 @@ test("Connect GitHub Screen - Changing GitHub login when authenticated", async (
 	await act(() => userEvent.click(screen.getByText("Change GitHub login")));
 	expect(window.open).toHaveBeenCalled();
 
-	expect(screen.queryByText("GitHub Cloud")).toBeInTheDocument();
-	expect(screen.queryByText("GitHub Enterprise Server")).toBeInTheDocument();
-	expect(screen.queryByText("Get started")).toBeInTheDocument();
+	expect(screen.queryByText(GITHUB_CLOUD)).toBeInTheDocument();
+	expect(screen.queryByText(GITHUB_ENTERPRISE)).toBeInTheDocument();
+	expect(screen.queryByText(SELECT_GH_PRODUCT_CTA)).toBeInTheDocument();
 });
 
diff --git a/spa/src/pages/Connected/index.tsx b/spa/src/pages/Connected/index.tsx
index ecfacbbe44..00ae6d71d2 100644
--- a/spa/src/pages/Connected/index.tsx
+++ b/spa/src/pages/Connected/index.tsx
@@ -4,6 +4,7 @@ import { token } from "@atlaskit/tokens";
 import Heading from "@atlaskit/heading";
 import Button from "@atlaskit/button";
 import analyticsClient, { useEffectScreenEvent } from "../../analytics";
+import { useNavigate } from "react-router-dom";
 
 const ConnectedContainer = styled.div`
 	margin: 0 auto;
@@ -15,10 +16,17 @@ const HeaderImg = styled.img`
 const Title = styled.h2`
 	margin: ${token("space.400")} ${token("space.0")} ${token("space.0")};
 `;
+const TopContent = styled.div`
+	color: ${token("color.text.subtle")};
+	margin: ${token("space.300")} ${token("space.0")} ${token("space.100")};
+`;
 const Paragraph = styled.div`
 	color: ${token("color.text.subtle")};
 	margin: ${token("space.300")} ${token("space.0")};
 `;
+const ButtonContainer = styled.div`
+	margin: ${token("space.0")} ${token("space.0")} ${token("space.300")} ${token("space.0")};
+`;
 const FlexWrapper = styled.div`
 	padding: ${token("space.300")} ${token("space.0")} ${token("space.0")};
 	display: flex;
@@ -39,9 +47,9 @@ const SectionImg = styled.img`
 `;
 
 const Connected = () => {
-
 	useEffectScreenEvent("SuccessfulConnectedScreen");
 
+	const navigate = useNavigate();
 	const navigateToBackfillPage = () => {
 		analyticsClient.sendUIEvent({ actionSubject: "checkBackfillStatus", action: "clicked" });
 		AP.navigator.go( "addonmodule", { moduleKey: "gh-addon-admin" });
@@ -52,11 +60,19 @@ const Connected = () => {
 			<div>
 				<HeaderImg src="/public/assets/jira-github-connected.svg" alt=""/>
 				<Title>GitHub is connected!</Title>
-				<Paragraph>
-					Its' time to let everyone know that GitHub's ready to use in their<br />
-					project. For development work to appear in Jira, your team<br />
-					needs to link their work using issue keys.
-				</Paragraph>
+				<TopContent>
+					Its' time to let everyone know that GitHub's ready to use and your<br />
+					team can use issue keys to link work to Jira.<br />
+				</TopContent>
+				<ButtonContainer>
+					<Button
+						style={{ paddingLeft: 0 }}
+						appearance="link"
+						onClick={() => navigate("/spa/steps")}
+					>
+						Add another organization
+					</Button>
+				</ButtonContainer>
 			</div>
 			<div>
 				<Heading level="h500">What's next?</Heading>
@@ -94,10 +110,16 @@ const Connected = () => {
 				</FlexWrapper>
 			</div>
 			<Paragraph>
-				We're backfilling your organization's repositories into Jira (this<br />
+				We're backfilling your organization's repositories into Jira (this <br/>
 				can take a while, depending on how many repositories you<br />
-				have).<br/>
-				<Button style={{ paddingLeft: 0 }} appearance="link" onClick={navigateToBackfillPage}>Check your backfill status</Button>
+				have).
+				<Button
+					style={{ paddingLeft: 0, height: 14, lineHeight: "14px", display: "inline-flex" }}
+					appearance="link"
+					onClick={navigateToBackfillPage}
+				>
+					Check your backfill status
+				</Button>
 			</Paragraph>
 		</ConnectedContainer>
 	</Wrapper>);
diff --git a/spa/src/pages/Connected/test.tsx b/spa/src/pages/Connected/test.tsx
index 1da93888c4..378f47a776 100644
--- a/spa/src/pages/Connected/test.tsx
+++ b/spa/src/pages/Connected/test.tsx
@@ -1,5 +1,5 @@
 import { BrowserRouter } from "react-router-dom";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import Connected from "./index";
 import userEvent from "@testing-library/user-event";
 
@@ -10,6 +10,11 @@ import userEvent from "@testing-library/user-event";
 		go: jest.fn()
 	}
 };
+const navigate = jest.fn();
+jest.mock("react-router-dom", () => ({
+	...jest.requireActual("react-router-dom"),
+	useNavigate: () => navigate
+}));
 
 jest.mock("../../analytics/analytics-proxy-client", () => {
 	return {
@@ -34,10 +39,15 @@ test("Basic check for the Connected Page", async () => {
 	expect(screen.queryByText("Learn about issue linking")).toBeInTheDocument();
 	expect(screen.queryByText("Learn about development work in Jira")).toBeInTheDocument();
 	expect(screen.queryByText("Check your backfill status")).toBeInTheDocument();
+	expect(screen.queryByText("Add another organization")).toBeInTheDocument();
 
 	expect(screen.getByText("Learn about issue linking")).toHaveAttribute("href", "https://support.atlassian.com/jira-software-cloud/docs/reference-issues-in-your-development-work/");
 	expect(screen.getByText("Learn about development work in Jira")).toHaveAttribute("href", "https://support.atlassian.com/jira-cloud-administration/docs/integrate-with-development-tools/");
 
 	await userEvent.click(screen.getByText("Check your backfill status"));
 	expect(AP.navigator.go).toHaveBeenCalled();
+
+	await act(() => userEvent.click(screen.getByText("Add another organization")));
+	expect(navigate).toHaveBeenCalledWith("/spa/steps");
+
 });
diff --git a/spa/src/pages/InstallationRequested/index.tsx b/spa/src/pages/InstallationRequested/index.tsx
new file mode 100644
index 0000000000..e8987e5fc0
--- /dev/null
+++ b/spa/src/pages/InstallationRequested/index.tsx
@@ -0,0 +1,48 @@
+import LoggedinInfo from "../../common/LoggedinInfo";
+import { Wrapper } from "../../common/Wrapper";
+import Step from "../../components/Step";
+import SyncHeader from "../../components/SyncHeader";
+import OAuthManager from "../../services/oauth-manager";
+import styled from "@emotion/styled";
+import { token } from "@atlaskit/tokens";
+import Button from "@atlaskit/button";
+import { useNavigate } from "react-router-dom";
+
+const Paragraph = styled.div`
+	color: ${token("color.text.subtle")};
+	margin-bottom: ${token("space.100")};
+`;
+
+const InstallationRequested = () => {
+	const navigate = useNavigate();
+	const username = OAuthManager.getUserDetails().username || "";
+
+	const navigateBackToSteps = () => navigate("/spa/steps");
+
+	return (
+		<Wrapper>
+			<SyncHeader />
+			<Step title="Request sent">
+				<>
+					<Paragraph>
+						Once the owner of this organization has installed Jira, you (or <br />
+						another Jira admin) can come back here and finish the set up.
+					</Paragraph>
+					<Button
+						style={{ paddingLeft: 0 }}
+						appearance="link"
+						onClick={navigateBackToSteps}
+					>
+						Add another organization
+					</Button>
+				</>
+			</Step>
+			<LoggedinInfo
+				username={username}
+				logout={navigateBackToSteps}
+			/>
+		</Wrapper>
+	);
+};
+
+export default InstallationRequested;
diff --git a/spa/src/pages/InstallationRequested/test.tsx b/spa/src/pages/InstallationRequested/test.tsx
new file mode 100644
index 0000000000..27247e9b6a
--- /dev/null
+++ b/spa/src/pages/InstallationRequested/test.tsx
@@ -0,0 +1,35 @@
+import { BrowserRouter } from "react-router-dom";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import InstallationRequested from "./index";
+import OAuthManager from "../../services/oauth-manager";
+
+const navigate = jest.fn();
+jest.mock("react-router-dom", () => ({
+	...jest.requireActual("react-router-dom"),
+	useNavigate: () => navigate
+}));
+jest.mock("../../services/oauth-manager");
+window.open = jest.fn();
+
+test("Basic check for the Connected Page", async () => {
+	jest.mocked(OAuthManager).getUserDetails = jest.fn().mockReturnValue({ username: "kay" });
+	jest.mocked(OAuthManager).clear = jest.fn();
+
+	render(
+		<BrowserRouter>
+			<InstallationRequested />
+		</BrowserRouter>
+	);
+
+	expect(screen.queryByText("Once the owner of this organization has installed Jira, you (or another Jira admin) can come back here and finish the set up.")).toBeInTheDocument();
+	expect(screen.queryByText("Add another organization")).toBeInTheDocument();
+	expect(screen.queryByText("Change GitHub login")).toBeInTheDocument();
+
+	await act(() => userEvent.click(screen.getByText("Add another organization")));
+	expect(navigate).toHaveBeenCalledWith("/spa/steps");
+
+	await act(() => userEvent.click(screen.getByText("Change GitHub login")));
+	expect(window.open).toHaveBeenCalled();
+	expect(OAuthManager.clear).toHaveBeenCalled();
+});
diff --git a/spa/src/utils/modifyError.tsx b/spa/src/utils/modifyError.tsx
index 6259b691fa..11fcb2effc 100644
--- a/spa/src/utils/modifyError.tsx
+++ b/spa/src/utils/modifyError.tsx
@@ -18,7 +18,7 @@ type ErrorWithErrorCode = {
 	errorCode: ErrorCode
 };
 
-const GENERIC_MESSAGE = "Something went wrong, please try again later.";
+const GENERIC_MESSAGE = "Something went wrong and we couldn’t connect to GitHub, try again.";
 
 export const modifyError = (
   error: AxiosError<ApiError> | SimpleError | ErrorWithErrorCode,
diff --git a/src/routes/jira/jira-get.test.ts b/src/routes/jira/jira-get.test.ts
index 1dafd6a5d0..49fd49fbcf 100644
--- a/src/routes/jira/jira-get.test.ts
+++ b/src/routes/jira/jira-get.test.ts
@@ -10,8 +10,6 @@ import express from "express";
 import supertest from "supertest";
 import { encodeSymmetric } from "atlassian-jwt";
 import { getFrontendApp } from "~/src/app";
-import { when } from "jest-when";
-import { booleanFlag, BooleanFlags } from "config/feature-flags";
 
 jest.mock("config/feature-flags");
 jest.mock("utils/app-properties-utils");
@@ -307,25 +305,4 @@ describe.each([
 				expect(response.text).toContain("<h1 class=\"jiraConfiguration__header__title\">GitHub configuration</h1>");
 			});
 	});
-
-	describe("5ku new experience", () => {
-		it("should redirect to new spa entry page on empty state if ff on", async () => {
-			when(booleanFlag).calledWith(BooleanFlags.USE_NEW_5KU_SPA_EXPERIENCE, jiraHost)
-				.mockResolvedValue(true);
-			await supertest(frontendApp)
-				.get(url)
-				.expect(302)
-				.expect("location", "/spa?from=homepage");
-		});
-		it("should show existing page on empty state if ff off", async () => {
-			when(booleanFlag).calledWith(BooleanFlags.USE_NEW_5KU_SPA_EXPERIENCE, jiraHost)
-				.mockResolvedValue(false);
-			await supertest(frontendApp)
-				.get(url)
-				.expect(200)
-				.then(response => {
-					expect(response.text).toContain("<h1 class=\"jiraConfiguration__header__title\">GitHub configuration</h1>");
-				});
-		});
-	});
 });
diff --git a/src/routes/jira/jira-get.ts b/src/routes/jira/jira-get.ts
index 3444935895..6b78e651c1 100644
--- a/src/routes/jira/jira-get.ts
+++ b/src/routes/jira/jira-get.ts
@@ -162,10 +162,6 @@ const renderJiraCloudAndEnterpriseServer = async (res: Response, req: Request):
 	const hasConnections =  !!(installations.total || gheServers?.length);
 
 	const useNewSPAExperience = await booleanFlag(BooleanFlags.USE_NEW_5KU_SPA_EXPERIENCE, jiraHost);
-	if (useNewSPAExperience && !hasConnections) {
-		res.redirect("/spa?from=homepage");
-		return;
-	}
 
 	res.render("jira-configuration.hbs", {
 		host: jiraHost,