replace fpat resilution from set from extenal link to internal preference & prompting

Author: softmarshmallow

CONTRIBUTING.md

@@ -1,4 +1,3 @@
-
 # Installation & Build
 
 ```
@@ -8,20 +7,13 @@ yarn
 yarn editor
 ```
 
-
-## Setup credentials for development
-
-visit http://localhost:6626/preferences/access-tokens and set pats for api calls
-
-
 ## Structure
 
 - editor - visual editor for development
 - editor-packages - editor related packages
 - packages - core packages contributing to the code-gen logic
 - externals - external foundational packages, like [reflect-core](https://github.com/reflect-ui/reflect-core-ts)
 
-
 # Why 6626?
 
 6626 is from `69 68 2 67` Which is a decimal representation of ED2C(Engine: Design 2 Code)

editor/components/home/home-side-bar-tree.tsx

@@ -89,20 +89,6 @@ const preset_pages: PresetPage[] = [
       },
     ],
   },
-  {
-    id: "Figma",
-    name: "Figma",
-    path: "",
-    depth: 0,
-    children: [
-      {
-        id: "setup-figma-pat",
-        name: "Set Access Token",
-        path: "/preferences/access-tokens",
-        depth: 1,
-      },
-    ],
-  },
 ];
 
 export function HomeSidebarTree() {

editor/hooks/use-design.ts

@@ -149,8 +149,7 @@ export function useDesign({
             .catch((err: FigmaRemoteErrors) => {
               if (err instanceof UnauthorizedError) {
                 // unauthorized
-                router.push("/preferences/access-tokens");
-                console.info(`(ignored) error while fetching design`, err);
+                console.error(`(ignored) error while fetching design`, err);
                 return;
               }
 

editor/pages/figma/index.tsx

@@ -3,12 +3,6 @@ import Link from "next/link";
 export default function FigmaDemoIndexPage() {
   return (
     <div style={{ padding: 24 }}>
-      <p>
-        In order to develop design to code from figma, you'll need to set figma
-        personal access token via
-        <br />
-        <Link href="/preferences/access-tokens">Preferences</Link>
-      </p>
       <Link href="./figma/to-flutter">Flutter demo</Link>
       <br />
       <Link href="./figma/to-react">React demo</Link>

editor/scaffolds/editor/_providers.tsx

@@ -6,26 +6,23 @@ import { EditorCodeWebworkerProvider } from "scaffolds/editor/editor-code-webwor
 import { EditorToastProvider } from "./editor-toast-provider";
 import { FigmaImageServiceProvider } from "./editor-figma-image-service-provider";
 import { useEditorState } from "core/states";
-import { EditorPreferenceProvider } from "./editor-preference-provider";
 
 export function EditorDefaultProviders(props: { children: React.ReactNode }) {
   const [state] = useEditorState();
 
   return (
-    <EditorPreferenceProvider>
-      <EditorToastProvider>
-        <EditorImageRepositoryProvider>
-          <EditorCodeWebworkerProvider>
-            <EditorPreviewDataProvider>
-              <EditorShortcutsProvider>
-                <FigmaImageServiceProvider filekey={state?.design?.key}>
-                  {props.children}
-                </FigmaImageServiceProvider>
-              </EditorShortcutsProvider>
-            </EditorPreviewDataProvider>
-          </EditorCodeWebworkerProvider>
-        </EditorImageRepositoryProvider>
-      </EditorToastProvider>
-    </EditorPreferenceProvider>
+    <EditorToastProvider>
+      <EditorImageRepositoryProvider>
+        <EditorCodeWebworkerProvider>
+          <EditorPreviewDataProvider>
+            <EditorShortcutsProvider>
+              <FigmaImageServiceProvider filekey={state?.design?.key}>
+                {props.children}
+              </FigmaImageServiceProvider>
+            </EditorShortcutsProvider>
+          </EditorPreviewDataProvider>
+        </EditorCodeWebworkerProvider>
+      </EditorImageRepositoryProvider>
+    </EditorToastProvider>
   );
 }

editor/scaffolds/editor/editor-figma-image-service-provider.tsx

@@ -52,6 +52,7 @@ export function FigmaImageServiceProvider({
   );
 
   const fetcher = useMemo(() => {
+    if (!service) return null;
     return {
       fetch: (...p: FetcherParams) => {
         const task = service.fetch(...p);

editor/scaffolds/editor/setup.tsx

@@ -7,6 +7,7 @@ import { warmup } from "scaffolds/editor";
 import { EditorBrowserMetaHead } from "components/editor";
 import type { FileResponse } from "@design-sdk/figma-remote-types";
 import { useWorkspaceInitializerContext } from "scaffolds/workspace";
+import { useDispatch } from "@code-editor/preferences";
 
 const action_fetchfile_id = "fetchfile" as const;
 
@@ -54,6 +55,14 @@ export function SetupEditor({
 
   const [loading, setLoading] = useState<boolean>(true);
   const [state] = useEditorState();
+  const prefDispatch = useDispatch();
+
+  const openFpatConfigurationPreference = useCallback(() => {
+    prefDispatch({
+      type: "open",
+      route: "/figma/personal-access-token",
+    });
+  }, [prefDispatch]);
 
   const initialCanvasMode = q_map_canvas_mode_from_query(
     router.query.mode as string
@@ -149,9 +158,9 @@ export function SetupEditor({
               "You will now see the cached version of this file. To view the latest version, setup your personall access token."
             );
             // TODO: show signin prompt
-            window.open("/preferences/access-tokens", "_blank");
+            openFpatConfigurationPreference();
           } else {
-            router.push("/preferences/access-tokens");
+            openFpatConfigurationPreference();
           }
           break;
         }

editor/scaffolds/preferences/index.tsx

@@ -17,7 +17,7 @@ export function EditorPreferencesRoutesProvider({
 
     dispatch({
       type: "register",
-      route: "/figma/personal-access-tokens",
+      route: "/figma/personal-access-token",
       name: "Personal Access Tokens",
       icon: "@radix-ui/react-icons/FigmaLogoIcon",
       renderer: (p) => <PreferencesFigmaPersonalAccessTokens {...p} />,

editor/scaffolds/preferences/preferences-figma-personal-access-tokens.tsx

@@ -15,13 +15,33 @@ export default function EditorPreferenceFigmaPersonalAccessTokenPage({
   state,
   dispatch,
 }: PreferencePageProps) {
+  const [token, setToken] = React.useState<string | null>(null);
+
+  useEffect(() => {
+    setToken(personal.get_safe());
+  }, []);
+
   return (
     <PageContentLayout direction="row" spacebetween>
       <div>
         <h1>Personal Access Tokens</h1>
-        <TextField disabled value="ftk_xxxxxxxx" />
+        <TextField
+          disabled
+          fullWidth
+          value={token ? masking(token) : ""}
+          placeholder={"No personal access token set"}
+        />
         <div>
-          <RegisterNewFpat onSuccess={() => {}} />
+          <RegisterNewFpat
+            onSuccess={(token) => {
+              setToken(token);
+              personal.set(token);
+              setTimeout(() => {
+                alert("Page will reload");
+                window.location.reload();
+              }, 1000);
+            }}
+          />
         </div>
       </div>
       <HelpPanel
@@ -40,10 +60,10 @@ export default function EditorPreferenceFigmaPersonalAccessTokenPage({
  */
 function masking(token: string): string {
   // reveal first 5 and last 5
-  const first = token.substring(0, 5);
-  const last = token.substring(token.length - 5, token.length);
-  const length = token.length - 10;
-  const masked = "x".repeat(length);
+  const first = token.substring(0, 10);
+  const last = token.substring(token.length - 10, token.length);
+  const length = token.length - 20;
+  const masked = "*".repeat(length);
   return first + masked + last;
 }
 

editor/scaffolds/workspace/_providers.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { PreferencesProvider } from "./preference-provider";
+
+export function WorkspaceDefaultProviders({
+  children,
+}: React.PropsWithChildren<{}>) {
+  return <PreferencesProvider>{children}</PreferencesProvider>;
+}