[INNO] ARC-2720-Adding links in spa backfill (#2606)

* ARC-2720 Add the edit button to SPA backfill page

* NONE: Amend table head keys for SPA backfill

* ARC-2720 Add the settings dropdown with configure link to backfill SPA

* WIP Create and add link to respositories page

* WIP Add back btn, heading and search bar to repo page

* ARC-2720 Add link to repos on backfill SPA

* NONE Removed unused repositories page and respective route

* ARC-2720 Fixed redirect for repos to existing repos page

Author: sopliu

spa/package.json

@@ -26,6 +26,7 @@
     "@atlaskit/badge": "^15.1.14",
     "@atlaskit/button": "^16.8.0",
     "@atlaskit/css-reset": "^6.5.2",
+    "@atlaskit/dropdown-menu": "^12.1.8",
     "@atlaskit/dynamic-table": "^14.11.5",
     "@atlaskit/form": "^8.11.8",
     "@atlaskit/heading": "^1.3.7",
@@ -37,6 +38,7 @@
     "@atlaskit/skeleton": "^0.2.3",
     "@atlaskit/spinner": "^15.6.1",
     "@atlaskit/textarea": "^4.7.7",
+    "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/tokens": "^1.11.1",
     "@atlaskit/tooltip": "^17.8.3",
     "@emotion/styled": "^11.11.0",

spa/src/common/Wrapper.tsx

@@ -11,7 +11,7 @@ const wrapperStyle = css`
 `;
 const wrapperCenterStyle = css`
 	margin: 0 auto;
-	max-width: 580px;
+	max-width: 800px;
 	height: calc(100vh - ${navHeight * 2}px);
 	display: flex;
 	flex-direction: column;

spa/src/utils/dynamicTableHelper.tsx

@@ -6,6 +6,10 @@ import Lozenge from "@atlaskit/lozenge";
 import { SuccessfulConnection } from "../rest-interfaces";
 import { ThemeAppearance } from "@atlaskit/lozenge/dist/types/Lozenge";
 import { css } from "@emotion/react";
+import EditIcon from "@atlaskit/icon/glyph/edit";
+import Button from "@atlaskit/button";
+import MoreIcon from "@atlaskit/icon/glyph/more";
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from "@atlaskit/dropdown-menu";
 
 type Row = {
 	key: string;
@@ -57,14 +61,19 @@ const createHead = (withWidth: boolean) => {
 				width: withWidth ? 30 : undefined,
 			},
 			{
-				key: "party",
+				key: "repos",
 				content: "Repos",
 				width: withWidth ? 30 : undefined,
 			},
 			{
-				key: "term",
+				key: "status",
 				content: "Status",
 				width: withWidth ? 30 : undefined,
+			},
+			{
+				key: "settings",
+				content: "Settings",
+				width: withWidth ? 10: undefined
 			}
 		],
 	};
@@ -106,16 +115,33 @@ export const getGHSubscriptionsRows = (
 					content: (
 						<div css={rowWrapperStyle}>
 							<span>
-								{cloudConnection.isGlobalInstall
-									? `All repos`
-									: `Only select repos`}
+								<a
+									href="#"
+									onClick={() => {
+										AP.navigator.go("addonmodule", {
+											moduleKey: "gh-addon-subscription-repos",
+											customData: {subscriptionId: cloudConnection.subscriptionId},
+										});
+									}}
+								>
+									{cloudConnection.isGlobalInstall
+										? `All repos`
+										: `Only select repos`}
+								</a>
 							</span>
 							<Badge>
 								{ifAllReposSynced(
 									cloudConnection.numberOfSyncedRepos,
 									cloudConnection.totalNumberOfRepos
 								)}
 							</Badge>
+							<Button
+							href={cloudConnection.html_url}
+							target="_blank"
+							appearance="subtle"
+							iconBefore={<EditIcon label="" size="small"/>}
+							>
+							</Button>
 						</div>
 					),
 				},
@@ -147,6 +173,31 @@ export const getGHSubscriptionsRows = (
 							</div>
 						</div>
 					),
+				},{
+					key: cloudConnection.id,
+					content: (
+						<div css={rowWrapperStyle}>
+							<DropdownMenu
+								trigger={({ triggerRef, ...props }) => (
+									<Button
+										{...props}
+										appearance="subtle"
+										iconBefore={<MoreIcon label="more" size="small"/>}
+										ref={triggerRef}
+									/>
+								)}
+							>
+								<DropdownItemGroup>
+									<DropdownItem
+										href={cloudConnection.html_url}
+										target="_blank"
+									>
+										Configure
+									</DropdownItem>
+								</DropdownItemGroup>
+							</DropdownMenu>
+						</div>
+					)
 				}
 			],
 		})