5ku UI changes

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>

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;

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 }
 			>

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")};
 `;

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;

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;