docs: fix Notion List Pages image and naming

docs/docs/integrations/notion/notion-list-pages.md

@@ -5,13 +5,15 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 # Database Query
 
-Langflow allows you to extend its functionality with custom components. The `NotionDatabaseQuery` component is designed to query a Notion database with filtering and sorting. It provides a convenient way to integrate Notion database querying capabilities into your Langflow workflows.
+Langflow allows you to extend its functionality with custom components. The `NotionListPages
+` component is designed to query a Notion database with filtering and sorting. It provides a convenient way to integrate Notion database querying capabilities into your Langflow workflows.
 
 > **Tip**:
 >
 > ### Component Functionality
 >
-> The `NotionDatabaseQuery` component enables you to:
+> The `NotionListPages
+` component enables you to:
 >
 > - Query a Notion database with custom filters and sorting options
 > - Retrieve specific pages from a Notion database based on the provided criteria
@@ -19,27 +21,28 @@ Langflow allows you to extend its functionality with custom components. The `Not
 
 ## Component Usage
 
-To use the `NotionDatabaseQuery` component in a Langflow flow, follow these steps:
+To use the `NotionListPages
+` component in a Langflow flow, follow these steps:
 
-1. **Add the `NotionDatabaseQuery` component to your flow.**
+1. **Add the `NotionListPages
+` component to your flow.**
 2. **Configure the component by providing the required parameters:**
    - `notion_secret`: The Notion integration token for authentication.
    - `database_id`: The ID of the Notion database you want to query.
    - `query_payload`: A JSON string containing the filters and sorting options for the query.
-3. **Connect the `NotionDatabaseQuery` component to other components in your flow as needed.**
+3. **Connect the `NotionListPages
+` component to other components in your flow as needed.**
 
 ### Example Component Code
 
 ```python
 import requests
-from typing import Dict, Any
+import json
-from langchain.agents import Tool
+from typing import Dict, Any, List
-
-from langflow.base.tools.base import build_status_from_tool
 from langflow.custom import CustomComponent
+from langflow.schema import Record
 
-
+class NotionListPages(CustomComponent):
-class NotionDatabaseQuery(CustomComponent):
     display_name = "List Pages [Notion]"
     description = (
         "Query a Notion database with filtering and sorting. "
@@ -50,6 +53,12 @@ class NotionDatabaseQuery(CustomComponent):
     documentation: str = "https://developers.notion.com/reference/post-database-query"
     icon = "NotionDirectoryLoader"
 
+    field_order = [
+        "notion_secret",
+        "database_id",
+        "query_payload",
+    ]
+
     def build_config(self):
         return {
             "notion_secret": {
@@ -74,8 +83,8 @@ class NotionDatabaseQuery(CustomComponent):
         self,
         notion_secret: str,
         database_id: str,
-        query_payload: str,
+        query_payload: str = "{}",
-    ) -> str:
+    ) -> List[Record]:
         try:
             query_data = json.loads(query_payload)
             filter_obj = query_data.get("filter")
@@ -99,34 +108,53 @@ class NotionDatabaseQuery(CustomComponent):
             response.raise_for_status()
 
             results = response.json()
-            output = f"Pages found: {len(results['results'])}\n\n"
+            records = []
-            for page in results["results"]:
+            combined_text = f"Pages found: {len(results['results'])}\n\n"
-                output += f"Page ID: {page['id']}\n"
+            for page in results['results']:
-                output += f"Page URL: {page['url']}\n"
+                page_data = {
-                output += f"Created At: {page['created_time']}\n"
+                    'id': page['id'],
-                output += f"Updated At: {page['last_edited_time']}\n"
+                    'url': page['url'],
-                output += f"Properties: {json.dumps(page['properties'], indent=2)}\n\n"
+                    'created_time': page['created_time'],
+                    'last_edited_time': page['last_edited_time'],
+                    'properties': page['properties'],
+                }
 
-            return output
+                text = (
+                    f"id: {page['id']}\n"
+                    f"url: {page['url']}\n"
+                    f"created_time: {page['created_time']}\n"
+                    f"last_edited_time: {page['last_edited_time']}\n"
+                    f"properties: {json.dumps(page['properties'], indent=2)}\n\n"
+                )
+
+                combined_text += text
+                records.append(Record(text=text, data=page_data))
+            
+            self.status = combined_text.strip()
+            return records
 
         except Exception as e:
-            return f"An error occurred: {str(e)}"
+            self.status = f"An error occurred: {str(e)}"
+            return [Record(text=self.status, data=[])]
 ```
 
 ## Example Usage
 
-Here's an example of how you can use the `NotionDatabaseQuery` component in a Langflow flow and passing to the Prompt component:
+Here's an example of how you can use the `NotionListPages
+` component in a Langflow flow and passing to the Prompt component:
 
 <ZoomableImage
-    alt="NotionDatabaseQuery Flow Example"
+    alt="NotionListPages
+     Flow Example"
     sources={{
-    light: "img/notion/NotionDatabaseQuery_flow_example.png",
+    light: "img/notion/NotionListPages_flow_example.png",
-    dark: "img/notion/NotionDatabaseQuery_flow_example_dark.png",
+    dark: "img/notion/NotionListPages_flow_example_dark.png",
     }}
     style={{ width: "100%", margin: "20px 0" }}
 />
 
-In this example, the `NotionDatabaseQuery` component is used to retrieve specific pages from a Notion database based on the provided filters and sorting options. The retrieved data can then be processed further in the subsequent components of the flow.
+In this example, the `NotionListPages
+` component is used to retrieve specific pages from a Notion database based on the provided filters and sorting options. The retrieved data can then be processed further in the subsequent components of the flow.
 
 ## Best Practices
 
@@ -134,7 +162,8 @@ In this example, the `NotionDatabaseQuery` component is used to retrieve specifi
 >
 > ### Best Practices
 >
-> When using the `NotionDatabaseQuery` component, consider the following best practices:
+> When using the `NotionListPages
+` component, consider the following best practices:
 >
 > - Ensure that you have a valid Notion integration token with the necessary permissions to query the desired database.
 > - Construct the `query_payload` JSON string carefully, following the Notion API documentation for filtering and sorting options.
@@ -145,12 +174,15 @@ In this example, the `NotionDatabaseQuery` component is used to retrieve specifi
 >
 > ### Troubleshooting
 >
-> If you encounter any issues while using the `NotionDatabaseQuery` component, consider the following:
+> If you encounter any issues while using the `NotionListPages
+` component, consider the following:
 >
 > - Double-check that the `notion_secret` and `database_id` are correct and valid.
 > - Verify that the `query_payload` JSON string is properly formatted and contains valid filtering and sorting options.
 > - Check the Notion API documentation for any updates or changes that may affect the component's functionality.
 
-The `NotionDatabaseQuery` component provides a powerful way to integrate Notion database querying capabilities into your Langflow workflows. By leveraging this component, you can easily retrieve specific pages from a Notion database based on custom filters and sorting options, enabling you to build more dynamic and data-driven flows.
+The `NotionListPages
+` component provides a powerful way to integrate Notion database querying capabilities into your Langflow workflows. By leveraging this component, you can easily retrieve specific pages from a Notion database based on custom filters and sorting options, enabling you to build more dynamic and data-driven flows.
 
-We encourage you to explore the capabilities of the `NotionDatabaseQuery` component further and experiment with different querying scenarios to unlock the full potential of integrating Notion databases into your Langflow workflows.
+We encourage you to explore the capabilities of the `NotionListPages
+` component further and experiment with different querying scenarios to unlock the full potential of integrating Notion databases into your Langflow workflows.