fix: fixing minor code smells

storybookjs · Nov 25, 2024 · 43a045c · 43a045c
1 parent 933f19f
commit 43a045c
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 266 deletions.
diff --git a/code/core/src/manager/FakeProvider.tsx b/code/core/src/manager/FakeProvider.tsx
@@ -6,41 +6,37 @@ import { addons } from '@storybook/core/manager-api';
 
 import Provider from './provider';
 
-export class FakeProvider extends Provider {
-  constructor() {
-    super();
-
-    // @ts-expect-error (Converted from ts-ignore)
-    this.addons = addons;
-    // @ts-expect-error (Converted from ts-ignore)
-    this.channel = {
-      on: () => {},
-      once: () => {},
-      off: () => {},
-      emit: () => {},
-      addListener: () => {},
-      removeListener: () => {},
-    };
-  }
+export const FakeProvider = () => {
+  // @ts-expect-error (Converted from ts-ignore)
+  const addonsInstance = addons;
+  // @ts-expect-error (Converted from ts-ignore)
+  const channel = {
+    on: () => {},
+    once: () => {},
+    off: () => {},
+    emit: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+  };
 
   // @ts-expect-error (Converted from ts-ignore)
-  getElements(type) {
-    return addons.getElements(type);
-  }
+  const getElements = (type: string) => addonsInstance.getElements(type);
 
-  renderPreview() {
-    return <div>This is from a 'renderPreview' call from FakeProvider</div>;
-  }
+  const renderPreview = () => <div>This is from a 'renderPreview' call from FakeProvider</div>;
 
-  // @ts-expect-error (Converted from ts-ignore)
-  handleAPI(api) {
-    addons.loadAddons(api);
-  }
+  const handleAPI = (api: any) => addonsInstance.loadAddons(api);
+
+  const getConfig = () => ({});
 
-  getConfig() {
-    return {};
-  }
-}
+  return (
+    <Provider
+      renderPreview={renderPreview}
+      getElements={getElements}
+      handleAPI={handleAPI}
+      getConfig={getConfig}
+    />
+  );
+};
 
 export const Centered = styled.div({
   width: '100vw',
@@ -51,15 +47,13 @@ export const Centered = styled.div({
   flexDirection: 'column',
 });
 
-export class PrettyFakeProvider extends FakeProvider {
-  renderPreview(...args: any[]) {
-    return (
-      <Centered>
-        This is from a 'renderPreview' call from FakeProvider
-        <hr />
-        'renderPreview' was called with:
-        <pre>{JSON.stringify(args, null, 2)}</pre>
-      </Centered>
-    );
-  }
-}
+export const PrettyFakeProvider = (props: any) => {
+  return (
+    <Centered>
+      This is from a 'renderPreview' call from FakeProvider
+      <hr />
+      'renderPreview' was called with:
+      <pre>{JSON.stringify(props, null, 2)}</pre>
+    </Centered>
+  );
+};
diff --git a/code/core/src/manager/components/sidebar/RefBlocks.tsx b/code/core/src/manager/components/sidebar/RefBlocks.tsx
@@ -17,6 +17,7 @@ const TextStyle = styled.div(({ theme }) => ({
   lineHeight: '20px',
   margin: 0,
 }));
+
 const Text = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s2,
   lineHeight: '20px',
@@ -50,24 +51,31 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
   const [isAuthAttempted, setAuthAttempted] = useState(false);
 
   const refresh = useCallback(() => {
-    globalWindow.document.location.reload();
+    setAuthAttempted(false);
   }, []);
 
-  const open = useCallback<React.MouseEventHandler>((e) => {
-    e.preventDefault();
-    const childWindow = globalWindow.open(loginUrl, `storybook_auth_${id}`, 'resizable,scrollbars');
-
-    // poll for window to close
-    const timer = setInterval(() => {
-      if (!childWindow) {
-        logger.error('unable to access loginUrl window');
-        clearInterval(timer);
-      } else if (childWindow.closed) {
-        clearInterval(timer);
-        setAuthAttempted(true);
-      }
-    }, 1000);
-  }, []);
+  const open = useCallback<React.MouseEventHandler>(
+    (e) => {
+      e.preventDefault();
+      const childWindow = globalWindow.open(
+        loginUrl,
+        `storybook_auth_${id}`,
+        'resizable,scrollbars'
+      );
+
+      // poll for window to close
+      const timer = setInterval(() => {
+        if (!childWindow) {
+          logger.error('unable to access loginUrl window');
+          clearInterval(timer);
+        } else if (childWindow.closed) {
+          clearInterval(timer);
+          setAuthAttempted(true);
+        }
+      }, 1000);
+    },
+    [loginUrl, id]
+  );
 
   return (
     <Contained>
@@ -79,7 +87,6 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
               this Storybook.
             </Text>
             <div>
-              {/* TODO: Make sure this button is working without the deprecated props */}
               <Button small gray onClick={refresh}>
                 <SyncIcon />
                 Refresh now

diff --git a/code/core/src/manager/components/sidebar/RefIndicator.tsx b/code/core/src/manager/components/sidebar/RefIndicator.tsx
@@ -278,6 +278,8 @@ const SourceCodeMessage: FC<{
 
 const LoginRequiredMessage: FC<RefType> = ({ loginUrl, id }) => {
   const theme = useTheme();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
   const open = useCallback<MouseEventHandler>((e) => {
     e.preventDefault();
     const childWindow = globalWindow.open(loginUrl, `storybook_auth_${id}`, 'resizable,scrollbars');
@@ -288,11 +290,15 @@ const LoginRequiredMessage: FC<RefType> = ({ loginUrl, id }) => {
         clearInterval(timer);
       } else if (childWindow.closed) {
         clearInterval(timer);
-        document.location.reload();
+        setIsLoggedIn(true);
       }
     }, 1000);
   }, []);
 
+  if (isLoggedIn) {
+    return <div>Login Successful!</div>;
+  }
+
   return (
     <Message onClick={open}>
       <LockIcon color={theme.color.gold} />