Fixing component key references in Connect docs (#16653)

* Fixing component key references

You can pass component keys in a structured object or as a string, updating the docs to use a common string interface to reduce complexity.

* Update pnpm-lock.yaml

* Fixing over-zealous Claude

Author: dannyroosevelt

docs-v2/pages/connect/api.mdx

@@ -1314,9 +1314,7 @@ const pd = createBackendClient({
 });
 
 // Retrieve the "New Issue (Instant)" component for the Gitlab app
-const { data: component } = await pd.getComponent({
-  key: "gitlab-new-issue",
-});
+const { data: component } = await pd.getComponent({ key: "gitlab-new-issue" });
 
 // Parse and return the data you need
 ```
@@ -1452,9 +1450,7 @@ const pd: BackendClient = createBackendClient(clientOpts);
 // Retrieve the configuration options for the "projectId" prop of the "List
 // Commits" component for the Gitlab app.
 const requestOpts: ConfigureComponentOpts = {
-  componentId: {
-    key: "gitlab-list-commits",
-  },
+  id: "gitlab-list-commits",
   configuredProps: {
     gitlab: {
       authProvisionId: "apn_kVh9AoD",
@@ -1493,9 +1489,7 @@ const pd = createBackendClient({
 // Retrieve the configuration options for the "projectId" prop of the "List
 // Commits" component for the Gitlab app.
 const { options } = await pd.configureComponent({
-  componentId: {
-    key: "gitlab-list-commits",
-  },
+  id: "gitlab-list-commits",
   configuredProps: {
     gitlab: {
       authProvisionId: "apn_kVh9AoD",
@@ -1668,9 +1662,7 @@ const pd: BackendClient = createBackendClient(clientOpts);
 // Retrieve the configuration options for the "Add Single Row" component for
 // the Google Sheets app. Note that the `sheetId` prop is a dynamic prop.
 const requestOpts: ReloadComponentPropsOpts = {
-  componentId: {
-    key: "google_sheets-add-single-row",
-  },
+  id: "google_sheets-add-single-row",
   configuredProps: {
     googleSheets: {
       authProvisionId: "apn_V1hMoE7",
@@ -1707,9 +1699,7 @@ const pd = createBackendClient({
 // Retrieve the configuration options for the "Add Single Row" component for
 // the Google Sheets app. Note that the `sheetId` prop is a dynamic prop.
 const { dynamicProps } = await pd.reloadComponentProps({
-  componentId: {
-    key: "google_sheets-add-single-row",
-  },
+  id: "google_sheets-add-single-row",
   configuredProps: {
     googleSheets: {
       authProvisionId: "apn_V1hMoE7",
@@ -1883,9 +1873,7 @@ const pd: BackendClient = createBackendClient(clientOpts);
 
 // Run the "List Commits" action for the Gitlab app
 const requestOpts: RunActionOpts = {
-  actionId: {
-    key: "gitlab-list-commits",
-  },
+  id: "gitlab-list-commits",
   configuredProps: {
     gitlab: {
       authProvisionId: "apn_kVh9AoD",
@@ -1928,9 +1916,7 @@ const {
   os,       // The observations produced by the action
   ret,      // The value returned by the action
 } = await pd.runAction({
-  actionId: {
-    key: "gitlab-list-commits",
-  },
+  id: "gitlab-list-commits",
   configuredProps: {
     gitlab: {
       authProvisionId: "apn_kVh9AoD",
@@ -2092,9 +2078,7 @@ const pd: BackendClient = createBackendClient(clientOpts);
 
 // Deploy the "New Issue (Instant)" trigger for the Gitlab app
 const requestOpts: DeployTriggerOpts = {
-  triggerId: {
-    key: "gitlab-new-issue",
-  },
+  id: "gitlab-new-issue",
   configuredProps: {
     gitlab: {
       authProvisionId: "apn_kVh9AoD",
@@ -2133,9 +2117,7 @@ const pd = createBackendClient({
 
 // Deploy the "New Issue (Instant)" trigger for the Gitlab app
 const { data: deployedTrigger } = await pd.deployTrigger({
-  triggerId: {
-    key: "gitlab-new-issue",
-  },
+  id: "gitlab-new-issue",
   configuredProps: {
     gitlab: {
       authProvisionId: "apn_kVh9AoD",

docs-v2/pages/connect/components.mdx

@@ -305,6 +305,10 @@ steps, focused on getting the right input parameters (aka
 Configuring each prop for a component often involves an API call to retrieve the possible values,
 unless the values that a prop can take are static or free-form. The endpoint is accessible at:
 
+```
+POST /v1/connect/{project_id}/components/configure
+```
+
 Typically, the options for a prop are linked to a specific user's account. Each
 of these props implements an `options` method that retrieves the necessary
 options from the third-party API, formats them, and sends them back in the
@@ -1119,9 +1123,7 @@ You can call `configureComponent` on the `sql` prop to retrieve database schema
 const resp = await pd.configureComponent({
   externalUserId: externalUserId,
   propName: "sql",
-  componentId: {
-    key: "postgresql-execute-custom-query",
-  },
+  id: "postgresql-execute-custom-query",
   configuredProps: {
     postgresql: {
       authProvisionId: accountId
@@ -1234,7 +1236,7 @@ const { dynamicProps } = await pd.reloadProps({ … });
 const resp = await pd.runAction({
   externalUserId: "abc-123",
   id: "google_sheets-add-single-row",
-  dynamicPropsId: dynamicProps.id, // Must include this 
+  dynamicPropsId: dynamicProps.id, // Must include this
   configuredProps: {
     googleSheets: {
       authProvisionId: account.id,