adds error for cases when token is invalid

Author: netmenya

ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "puzl__github-workflow-ui",
   "private": true,
-  "version": "0.7.3",
+  "version": "0.7.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

ui/src/pages/App.module.css

@@ -1,5 +1,6 @@
 .app {
     --app-header-height: 38px;
+    height: 100vh;
 }
 
 .grid {
@@ -8,11 +9,12 @@
     display: grid;
     grid-gap: 1rem;
     max-width: 2000px;
+    position: relative;
+    min-height: calc(100vh - var(--app-header-height));
 
 
     @media (min-width: 64em) {
         grid-template-columns: 20rem 1fr;
-        min-height: calc(100vh - var(--app-header-height));
     }
 
     @media (min-width: 1700px) {

ui/src/pages/_ui/OrganisationSelector/OrganisationSelector.jsx

@@ -32,6 +32,41 @@ export const OrganisationSelector = ({}) => {
       setOrganisation(orgs[0]);
     }
   }, [shouldPrefillOrganisation]);
+  
+  if (error) {
+    return (
+        <div className={styles.errorOverlay}>
+          <div className={styles.errorOverlayContent}>
+            <div>{error.message}</div>
+            <div>Please, make sure that you provided valid GitHub fine-grained personal token, issued with the following permissions:</div>
+            <div className={styles.permissions}>
+              <p><strong>Repositories:</strong></p>
+              <div>   - Content: `Read and write`</div>
+              <div>   - Workflows: `Read and write`</div>
+              <p><strong>Organizations:</strong></p>
+              <div>   - Members: `Read-only`</div>
+            </div>
+          </div>
+        </div>
+    );
+  } else if (orgs?.length === 0) {
+    return (
+      <div className={styles.errorOverlay}>
+        <div className={styles.errorOverlayContent}>
+          <div>No organisations found.</div>
+          <div>At this moment assistant works only for repos within organisation.</div>
+          <div>Check that your token was issued with following permissions:</div>
+          <div className={styles.permissions}>
+            <p><strong>Repositories:</strong></p>
+            <div>   - Content: `Read and write`</div>
+            <div>   - Workflows: `Read and write`</div>
+            <p><strong>Organizations:</strong></p>
+            <div>   - Members: `Read-only`</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className={styles.wrapper}>

ui/src/pages/_ui/OrganisationSelector/OrganisationSelector.module.css

@@ -8,4 +8,39 @@
 .picker {
     max-width: 100%;
     min-width: 200px;
+}
+
+.errorOverlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 1.2rem;
+    color: var(--muted-foreground);
+    display: grid;
+    align-items: center;
+    justify-items: center;
+}
+
+.errorOverlayContent {
+    width: 100%;
+    max-width: 40em;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+.permissions {
+    margin: 1.25rem auto;
+    padding: 1.5rem;
+    text-align: left;
+    border-radius: var(--gw__border-radius);
+    border: 1px solid var(--gw__border-color);
+    font-size: 0.875em;
+    max-width: max-content;
+}
+
+.permissions * + p {
+    margin-top: 1em;
 }