adding create project modal (#18871)

* adding create project modal

* setting up portal w/ popover for dropdown

* Fixing issues with trying to display dropdown in a portal

* cleanup and adding filling in create project modal a bit

* Adding some git auth functionality

* add project id for now

* remove github logic that checks all repos

* reload projects when we create a new one

* fixing repo sorting to handle multiple projects better

* fill in repo name for projects

* excluding projects in repo results

* handling all new project buttons

* refactor Dropdown2 to use radix popover

* use radix css var for width

* remove project distinction for now

* maintain focus on search input

* adjusting validation logic on repo when creating a project

* remove scmService from server impl

* set project name on backend for now

* make w-full again

* simplify

* implement hasReadAccess for BBS

* remove canInstallWebhook and GitHub app check during webhook installation

* moving project validation into project service

* simplify

* ui cleanup

* handle case where there is no repoProvider

* mock repositoryProvider.hasReadAccess

* missed a Project.slug removal

* ui cleanup per feedback

* adding script to start on other port for local fe dev flow

Author: selfcontained

components/dashboard/package.json

@@ -8,6 +8,7 @@
     "@connectrpc/connect": "1.1.2",
     "@gitpod/gitpod-protocol": "0.1.5",
     "@gitpod/public-api": "0.1.5",
+    "@radix-ui/react-popover": "^1.0.7",
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.29.0",
     "@tanstack/query-async-storage-persister": "^4.29.19",
@@ -84,6 +85,7 @@
   },
   "scripts": {
     "start": "BROWSER=none HMR_HOST=`gp url 3001` craco start",
+    "start-local": "BROWSER=none HMR_HOST=`gp url 3000` craco start",
     "build": "craco build --verbose",
     "lint": "eslint --max-warnings=0 --ext=.jsx,.js,.tsx,.ts ./src",
     "test": "yarn test:unit",

components/dashboard/src/components/Alert.tsx

@@ -111,7 +111,7 @@ export default function Alert(props: AlertProps) {
     return (
         <div
             className={classNames(
-                "flex relative whitespace-pre-wrap p-4",
+                "flex items-center relative whitespace-pre-wrap p-4",
                 info.txtCls,
                 props.className,
                 light ? "" : info.bgCls,
@@ -121,15 +121,15 @@ export default function Alert(props: AlertProps) {
             {showIcon && <span className={`mt-1 mr-4 h-4 w-4 ${info.iconColor}`}>{props.icon ?? info.icon}</span>}
             <span className="flex-1 text-left">{props.children}</span>
             {props.closable && (
-                <span className={`mt-1 ml-4`}>
+                <span className={`ml-4`}>
                     {/* Use an IconButton component once we make it */}
                     <Button
                         type="secondary"
                         className="bg-transparent hover:bg-transparent"
                         onClick={handleClose}
                         autoFocus={autoFocusClose}
                     >
-                        <XSvg className="w-3 h-4 cursor-pointer" />
+                        <XSvg className="w-3 h-4 cursor-pointer text-white" />
                     </Button>
                 </span>
             )}

components/dashboard/src/components/AuthorizeGit.tsx

@@ -53,12 +53,7 @@ export const AuthorizeGit: FC<{ className?: string }> = ({ className }) => {
     const verifiedProviders = authProviders.data.filter((ap) => ap.verified);
 
     return (
-        <div
-            className={classNames(
-                "w-full text-center border-2 border-gray-100 dark:border-gray-800 p-4 m-4 rounded-lg py-10",
-                className,
-            )}
-        >
+        <div className={classNames("text-center p-4 m-4 py-10", className)}>
             {verifiedProviders.length === 0 ? (
                 <>
                     <Heading3 className="pb-2">No Git integrations</Heading3>