update credentials

packages/components/nodes/documentloaders/Figma/Figma.ts

@@ -1,4 +1,5 @@
-import { INode, INodeData, INodeParams } from '../../../src/Interface'
+import { getCredentialData, getCredentialParam } from '../../../src'
+import { ICommonObject, INode, INodeData, INodeParams } from '../../../src/Interface'
 import { FigmaFileLoader, FigmaLoaderParams } from 'langchain/document_loaders/web/figma'
 
 class Figma_DocumentLoaders implements INode {
@@ -9,34 +10,39 @@ class Figma_DocumentLoaders implements INode {
     icon: string
     category: string
     baseClasses: string[]
+    credential: INodeParams
     inputs: INodeParams[]
 
     constructor() {
         this.label = 'Figma'
         this.name = 'figma'
         this.type = 'Document'
-        this.icon = 'figma.png'
+        this.icon = 'figma.svg'
         this.category = 'Document Loaders'
         this.description = 'Load data from a Figma file'
         this.baseClasses = [this.type]
+        this.credential = {
+            label: 'Connect Credential',
+            name: 'credential',
+            type: 'credential',
+            credentialNames: ['figmaApi']
+        }
         this.inputs = [
-            {
-                label: 'Access Token',
-                name: 'accessToken',
-                type: 'password',
-                placeholder: '<FIGMA_ACCESS_TOKEN>'
-            },
             {
                 label: 'File Key',
                 name: 'fileKey',
                 type: 'string',
-                placeholder: 'key'
+                placeholder: 'key',
+                description:
+                    'The file key can be read from any Figma file URL: https://www.figma.com/file/:key/:title. For example, in https://www.figma.com/file/12345/Website, the file key is 12345'
             },
             {
                 label: 'Node IDs',
                 name: 'nodeIds',
                 type: 'string',
-                placeholder: '0, 1, 2'
+                placeholder: '0, 1, 2',
+                description:
+                    'A list of Node IDs, seperated by comma. Refer to <a target="_blank" href="https://www.figma.com/community/plugin/758276196886757462/Node-Inspector">official guide</a> on how to get Node IDs'
             },
             {
                 label: 'Recursive',
@@ -60,18 +66,20 @@ class Figma_DocumentLoaders implements INode {
         ]
     }
 
-    async init(nodeData: INodeData): Promise<any> {
-        const accessToken = nodeData.inputs?.accessToken as string
-        const nodeIds = (nodeData.inputs?.nodeIds as string)?.split(',') || []
+    async init(nodeData: INodeData, _: string, options: ICommonObject): Promise<any> {
+        const nodeIds = (nodeData.inputs?.nodeIds as string)?.trim().split(',') || []
         const fileKey = nodeData.inputs?.fileKey as string
 
-        const options: FigmaLoaderParams = {
+        const credentialData = await getCredentialData(nodeData.credential ?? '', options)
+        const accessToken = getCredentialParam('accessToken', credentialData, nodeData)
+
+        const figmaOptions: FigmaLoaderParams = {
             accessToken,
             nodeIds,
             fileKey
         }
 
-        const loader = new FigmaFileLoader(options)
+        const loader = new FigmaFileLoader(figmaOptions)
         const docs = await loader.load()
 
         return docs

packages/components/nodes/documentloaders/Figma/figma.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#e64a19" d="M26,17h-8c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h8V17z"/><path fill="#7c4dff" d="M25,31h-7c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7V31z"/><path fill="#66bb6a" d="M18,45L18,45c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7v7C25,41.866,21.866,45,18,45z"/><path fill="#ff7043" d="M32,17h-7V3h7c3.866,0,7,3.134,7,7v0C39,13.866,35.866,17,32,17z"/><circle cx="32" cy="24" r="7" fill="#29b6f6"/></svg>