Add org selection dropdown to org auth token button (#7716)

Luca Forstner · ArthurKnaus · web-flow · commit ed088bb216c8 · 2023-08-31T16:42:41.000+02:00
Co-authored-by: ArthurKnaus &lt;knauar@gmail.com&gt;
diff --git a/src/components/__tests__/__snapshots__/codeBlock.test.js.snap b/src/components/__tests__/__snapshots__/codeBlock.test.js.snap
@@ -122,8 +122,31 @@ exports[`CodeWrapper renders org auth token placeholder when signed in 1`] = `
   <span
     className="css-1rhw0e5"
     onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex={0}
+    title="Click to generate token"
   >
-    Click to generate token
+    <span
+      style={
+        {
+          "display": undefined,
+        }
+      }
+    >
+      <span
+        className="css-1f5vc5"
+        style={
+          {
+            "opacity": 1,
+            "position": "relative",
+            "transform": "none",
+          }
+        }
+      >
+        Click to generate token
+      </span>
+    </span>
   </span>
 </code>
 `;
diff --git a/src/components/codeBlock.tsx b/src/components/codeBlock.tsx
@@ -105,53 +105,163 @@ type KeywordSelectorProps = {
   keyword: string;
 };
 
+type TokenState =
+  | {status: 'none'}
+  | {status: 'loading'}
+  | {status: 'success'; token: string}
+  | {status: 'error'};
+
+const dropdownPopperOptions = {
+  placement: 'bottom' as const,
+  modifiers: [
+    {
+      name: 'offset',
+      options: {offset: [0, 10]},
+    },
+    {name: 'arrow'},
+  ],
+};
+
 function OrgAuthTokenCreator() {
-  const codeContext = useContext(CodeContext);
+  const {codeKeywords} = useContext(CodeContext);
 
-  const [tokenState, setTokenState] = useState<'none' | 'loading' | 'success' | 'error'>(
-    'none'
+  const [tokenState, setTokenState] = useState<TokenState>({status: 'none'});
+  const [isOpen, setIsOpen] = useState(false);
+  const [referenceEl, setReferenceEl] = useState<HTMLSpanElement>(null);
+  const [dropdownEl, setDropdownEl] = useState<HTMLElement>(null);
+  const {styles, state, attributes} = usePopper(
+    referenceEl,
+    dropdownEl,
+    dropdownPopperOptions
   );
-  const [token, setToken] = useState(null);
-  const [sharedSelection] = codeContext.sharedKeywordSelection;
-  const {codeKeywords} = codeContext;
 
-  const choices = codeKeywords?.PROJECT;
+  useOnClickOutside({
+    ref: {current: referenceEl},
+    enabled: isOpen,
+    handler: () => setIsOpen(false),
+  });
+
+  const createToken = async (orgSlug: string) => {
+    setTokenState({status: 'loading'});
+    const token = await createOrgAuthToken({
+      orgSlug,
+      name: `Generated by Docs on ${new Date().toISOString().slice(0, 10)}`,
+    });
+
+    if (token) {
+      setTokenState({
+        status: 'success',
+        token,
+      });
+    } else {
+      setTokenState({
+        status: 'error',
+      });
+    }
+  };
+
+  const orgSet = new Set<string>();
+  codeKeywords?.PROJECT?.forEach(projectKeyword => {
+    orgSet.add(projectKeyword.ORG_SLUG);
+  });
+  const orgSlugs = [...orgSet];
+
+  const [isAnimating, setIsAnimating] = useState(false);
 
-  // When not signed in, we just show a placeholder, as the user can't generate a token in this case
   if (!codeKeywords.USER) {
+    // User is not logged in - show dummy token
     return <Fragment>sntrys_YOUR_TOKEN_HERE</Fragment>;
   }
 
-  const currentSelectionIdx = sharedSelection.PROJECT ?? 0;
-  const currentSelection = choices[currentSelectionIdx];
+  if (tokenState.status === 'success') {
+    return <Fragment>{tokenState.token}</Fragment>;
+  }
 
-  const name = `Generated by Docs for ${currentSelection.PROJECT_SLUG} on ${new Date()
-    .toISOString()
-    .slice(0, 10)}`;
+  if (tokenState.status === 'error') {
+    return <Fragment>There was an error while generating your token.</Fragment>;
+  }
+
+  if (tokenState.status === 'loading') {
+    return <Fragment>Generating token...</Fragment>;
+  }
 
-  const updateToken = async () => {
-    if (tokenState !== 'none') {
-      return;
+  const selector = isOpen && (
+    <PositionWrapper style={styles.popper} ref={setDropdownEl} {...attributes.popper}>
+      <AnimatedContainer>
+        <Dropdown>
+          <Arrow
+            style={styles.arrow}
+            data-placement={state?.placement}
+            data-popper-arrow
+          />
+          <DropdownHeader>Select an organization:</DropdownHeader>
+          <Selections>
+            {orgSlugs.map(org => {
+              return (
+                <ItemButton
+                  key={org}
+                  isActive={false}
+                  onClick={() => {
+                    createToken(org);
+                    setIsOpen(false);
+                  }}
+                >
+                  {org}
+                </ItemButton>
+              );
+            })}
+          </Selections>
+        </Dropdown>
+      </AnimatedContainer>
+    </PositionWrapper>
+  );
+
+  const portal = getPortal();
+
+  const handlePress = () => {
+    if (orgSlugs.length === 1) {
+      createToken(orgSlugs[0]);
+    } else {
+      setIsOpen(!isOpen);
     }
-    setTokenState('loading');
-    const tokenStr = await createOrgAuthToken({
-      orgSlug: currentSelection.ORG_SLUG,
-      name,
-    });
-    setTokenState(token ? 'success' : 'error');
-    setToken(tokenStr);
   };
 
   return (
-    <KeywordDropdown onClick={updateToken}>
-      {tokenState === 'none'
-        ? 'Click to generate token'
-        : tokenState === 'loading'
-        ? 'Generating...'
-        : token
-        ? token
-        : 'Error generating token'}
-    </KeywordDropdown>
+    <Fragment>
+      <KeywordDropdown
+        ref={setReferenceEl}
+        role="button"
+        title="Click to generate token"
+        tabIndex={0}
+        onClick={() => {
+          handlePress();
+        }}
+        onKeyDown={e => {
+          if (['Enter', 'Space'].includes(e.key)) {
+            handlePress();
+          }
+        }}
+      >
+        <span
+          style={{
+            // We set inline-grid only when animating the keyword so they
+            // correctly overlap during animations, but this must be removed
+            // after so copy-paste correctly works.
+            display: isAnimating ? 'inline-grid' : undefined,
+          }}
+        >
+          <AnimatePresence initial={false}>
+            <Keyword
+              onAnimationStart={() => setIsAnimating(true)}
+              onAnimationComplete={() => setIsAnimating(false)}
+            >
+              Click to generate token
+            </Keyword>
+          </AnimatePresence>
+        </span>
+      </KeywordDropdown>
+      {portal && createPortal(<AnimatePresence>{selector}</AnimatePresence>, portal)}
+    </Fragment>
   );
 }
 
@@ -162,16 +272,11 @@ function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
   const [referenceEl, setReferenceEl] = useState<HTMLSpanElement>(null);
   const [dropdownEl, setDropdownEl] = useState<HTMLElement>(null);
 
-  const {styles, state, attributes} = usePopper(referenceEl, dropdownEl, {
-    placement: 'bottom',
-    modifiers: [
-      {
-        name: 'offset',
-        options: {offset: [0, 10]},
-      },
-      {name: 'arrow'},
-    ],
-  });
+  const {styles, state, attributes} = usePopper(
+    referenceEl,
+    dropdownEl,
+    dropdownPopperOptions
+  );
 
   useOnClickOutside({
     ref: {current: referenceEl},
@@ -195,26 +300,32 @@ function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
   const selector = isOpen && (
     <PositionWrapper style={styles.popper} ref={setDropdownEl} {...attributes.popper}>
       <AnimatedContainer>
-        <Arrow style={styles.arrow} data-placement={state?.placement} data-popper-arrow />
-        <Selections>
-          {choices.map((item, idx) => {
-            const isActive = idx === currentSelectionIdx;
-            return (
-              <ItemButton
-                key={idx}
-                isActive={isActive}
-                onClick={() => {
-                  const newSharedSelection = {...sharedSelection};
-                  newSharedSelection[group] = idx;
-                  setSharedSelection(newSharedSelection);
-                  setIsOpen(false);
-                }}
-              >
-                {item.title}
-              </ItemButton>
-            );
-          })}
-        </Selections>
+        <Dropdown>
+          <Arrow
+            style={styles.arrow}
+            data-placement={state?.placement}
+            data-popper-arrow
+          />
+          <Selections>
+            {choices.map((item, idx) => {
+              const isActive = idx === currentSelectionIdx;
+              return (
+                <ItemButton
+                  key={idx}
+                  isActive={isActive}
+                  onClick={() => {
+                    const newSharedSelection = {...sharedSelection};
+                    newSharedSelection[group] = idx;
+                    setSharedSelection(newSharedSelection);
+                    setIsOpen(false);
+                  }}
+                >
+                  {item.title}
+                </ItemButton>
+              );
+            })}
+          </Selections>
+        </Dropdown>
       </AnimatedContainer>
     </PositionWrapper>
   );
@@ -342,16 +453,19 @@ const Arrow = styled('div')`
   }
 `;
 
+const Dropdown = styled('div')`
+  overflow: hidden;
+  border-radius: 3px;
+  background: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+`;
+
 const Selections = styled('div')`
   padding: 4px 0;
-  margin-top: -2px;
-  background: #fff;
-  border-radius: 3px;
   overflow: scroll;
   overscroll-behavior: contain;
   max-height: 210px;
   min-width: 300px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 `;
 
 const AnimatedContainer = styled(motion.div)``;
@@ -367,6 +481,13 @@ AnimatedContainer.defaultProps = {
   },
 };
 
+const DropdownHeader = styled('div')`
+  padding: 4px 8px;
+  color: #80708f;
+  background-color: #fff;
+  border-bottom: 1px solid #dbd6e1;
+`;
+
 const ItemButton = styled('button')<{isActive: boolean}>`
   font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI';
   font-size: 0.85rem;
diff --git a/src/components/codeContext.tsx b/src/components/codeContext.tsx
@@ -206,7 +206,7 @@ export async function createOrgAuthToken({
 }: {
   name: string;
   orgSlug: string;
-}) {
+}): Promise<string | null> {
   const baseUrl =
     process.env.NODE_ENV === 'development'
       ? 'http://dev.getsentry.net:8000/'
