feature: display detail for webhook.store urls

Author: Samox

src/NavBar/StoreConfig/StoreConfigDialog.tsx

@@ -8,11 +8,13 @@ export const StoreConfigInnerDialog = ({
   storageLimit,
   defaultTargets,
   accessConfig,
+  userHasAccessToStore,
 }: {
   availableStores: { url: string; display: string }[];
   accessConfig: { type: "public" | "private"; sublabel: string };
   storageLimit?: number;
   defaultTargets?: string[];
+  userHasAccessToStore: boolean;
 }) => {
   return (
     <>
@@ -37,6 +39,10 @@ export const StoreConfigInnerDialog = ({
         )}
       </div>
 
+      {userHasAccessToStore
+        ? "You have access to this store"
+        : "You don't have access to this store"}
+
       <Heading>
         <h1>Your private webhooks stores</h1>
       </Heading>
@@ -60,6 +66,14 @@ export const StoreConfigInnerDialog = ({
           </a>
         </Link>
       </P>
+
+      <P>
+        <Link>
+          <a href="https://www.openwebhook.io/docs/intro/#%EF%B8%8F-public-organisation-membership">
+            You don't see your organisation here?
+          </a>
+        </Link>
+      </P>
     </>
   );
 };

src/NavBar/StoreConfig/StoreConfigNavItem.tsx

@@ -10,16 +10,22 @@ import { WebhookStoreUrlContext } from "../WebhookStoreUrl/WebhookStoreUrl.conte
 import { ACCESS_TOKEN_KEY, IDENTITY_TOKEN_KEY } from "../../local-storage";
 import { decodeJWT } from "../../utils/decode-jwt";
 
+export type AuthMetadata =
+  | { protected: true; protectionRule: "hostname webhook.store" }
+  | { protected: true; protectionRule: "github-org"; ghOrg: string }
+  | { protected: false };
+
 export const StoreConfigNavItem = () => {
   const [isClicked, setClicked] = useState<boolean>(false);
 
-  const [authConfig, setAuthConfig] = useState<{ protected: boolean }>({
+  const [authConfig, setAuthConfig] = useState<AuthMetadata>({
     protected: false,
   });
   const [storeConfig, setStoreConfig] = useState<{
     maxNumberOfWebhookPerHost?: number;
     defaultTarget?: string[];
-  }>({});
+    userHasAccessToStore: boolean;
+  }>({ userHasAccessToStore: false });
 
   const { value: webhookStoreUrl } = useContext(WebhookStoreUrlContext);
   const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
@@ -32,32 +38,29 @@ export const StoreConfigNavItem = () => {
     decodeJWT<{ name: string; ghOrganisations: string[] }, any>(idToken);
 
   useEffect(() => {
-    getAuthConfig();
-    getStoreConfig();
+    getConfigs();
   }, []);
 
-  async function getAuthConfig() {
+  async function getConfigs() {
     const initialiseAuthConfig = await get("auth-metadata");
     if (response.ok) setAuthConfig(initialiseAuthConfig);
-  }
-
-  async function getStoreConfig() {
     const initialiseStoreConfig = await get("store-metadata");
-    if (response.ok) setStoreConfig(initialiseStoreConfig);
+    if (response.ok)
+      setStoreConfig({ ...initialiseStoreConfig, userHasAccessToStore: true });
   }
 
-  const accessConfig = {
-    type: authConfig.protected ? "private" : "public",
-    sublabel: authConfig.protected ? "Only you" : "Anyone with the link",
-  } as const;
+  const accessConfig = describeAccessFromAuthConfig(
+    authConfig,
+    webhookStoreUrl
+  );
   const availableStores = identityToken
     ? [
         {
           url: `https://${identityToken.payload.name}.github-org.webhook.store/?access_token=${idToken}`,
           display: `${identityToken.payload.name}.github-org.webhook.store`,
         },
         ...identityToken.payload.ghOrganisations.map((orgName) => ({
-          url: `https://${orgName}.github-org.webhook.store/?access_token=${idToken}`,
+          url: `https://${orgName}.github.webhook.store/?access_token=${idToken}`,
           display: `${orgName}.github-org.webhook.store`,
         })),
       ]
@@ -79,6 +82,7 @@ export const StoreConfigNavItem = () => {
             availableStores={availableStores}
             defaultTargets={defaultTargets}
             storageLimit={storageLimit}
+            userHasAccessToStore={storeConfig.userHasAccessToStore}
           />
         </Dialog>
       }
@@ -88,8 +92,49 @@ export const StoreConfigNavItem = () => {
         appearance={Button.appearances.flat}
         onClick={(_) => setClicked(!isClicked)}
       >
-        <Label size={Label.sizes.xSmall}>Store Config ⚠️</Label>
+        <Label size={Label.sizes.xSmall}>
+          Store Config {authConfig.protected ? null : "⚠️"}
+        </Label>
       </Button>
     </Below>
   );
 };
+
+const describeAccessFromAuthConfig = (
+  authConfig: AuthMetadata,
+  webhookStoreUrl: string
+): { type: "public" | "private"; sublabel: string } => {
+  if (!authConfig.protected) {
+    return { type: "public", sublabel: "Anyone with the link" };
+  }
+
+  if (authConfig.protectionRule === "github-org") {
+    return {
+      type: "private",
+      sublabel: `Only members of ${authConfig.ghOrg} on GitHub`,
+    };
+  }
+
+  if (authConfig.protectionRule === "hostname webhook.store") {
+    const webhookStoreDomain = new URL(webhookStoreUrl).hostname;
+    if (webhookStoreDomain.endsWith(".github.webhook.store")) {
+      const githubUserName =
+        webhookStoreDomain.split(".")[webhookStoreDomain.split(".").length - 4];
+      return {
+        type: "private",
+        sublabel: `Only Github user ${githubUserName}`,
+      };
+    }
+    if (webhookStoreDomain.endsWith(".github-org.webhook.store")) {
+      const githubOrgaName =
+        webhookStoreDomain.split(".")[webhookStoreDomain.split(".").length - 4];
+      return {
+        type: "private",
+        sublabel: `Only members of ${githubOrgaName} on GitHub`,
+      };
+    }
+    return { type: "public", sublabel: "Anyone with the link" };
+  }
+
+  return { type: "public", sublabel: "Anyone with the link" };
+};