GithubHelp home page GithubHelp logo

mondaycom / monday-sdk-js Goto Github PK

View Code? Open in Web Editor NEW
83.0 12.0 38.0 908 KB

Node.js and JavaScript SDK for developing over the monday.com platform

Home Page: https://monday.com

License: MIT License

JavaScript 53.88% TypeScript 46.12%
monday sdk javascript nodejs hacktoberfest

monday-sdk-js's People

Contributors

antonru92 avatar arutkowski00 avatar dorshakedmonday avatar edogr1 avatar grahhnt avatar gregra81 avatar helenhl20 avatar karlssonivan avatar liorrabin avatar parahall avatar rami-monday avatar shayelkana avatar talharamati avatar theteladras avatar vasquezam avatar vladmonday avatar yuhgto avatar zivnadel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

monday-sdk-js's Issues

[Bug] Unable to get boardViewId from monday.get("context")

i am using monday.sdk.js for the very first time and as per documentations i can get boardViewId and boardId from monday.get("context") but this is not working in my case.

the format i am getting is

boardIds: [11111111]
editMode: true
instanceId: -1
instanceType: "board_view"
itemIds: undefined
region: "use1"
theme: "light"
user: {id: '1111111', isAdmin: false, isGuest: false, isViewOnly: false}
viewMode: "fullscreen"

implementations

  this.mondaySdk.get('context')
     .then(async context => {
       this.boardConstants.boardId = context.data.boardId;
       this.boardConstants.viewId = context.data.boardViewId;
       await this.initQuery(this.boardConstants.boardId);
     })
     .catch(error => { throw new Error(error); });

Queries With Whitespace Cause Error in monday.api

Describe the bug
Calls to monday.api containing queries with whitespace began failing on March 29 at 6:00 a.m. EST.

Steps to reproduce

  1. Embed the SDK in an app
  2. Run the following code (sensitive info redacted).
monday.api(`mutation {
        create_item(
          board_id: ...,
          item_name: "...",
          column_values: "{
            \"date\" : {
              \"date\" : \"...\",
              \"time\" : \"...\"
            },
            \"numbers\": \"...\",
            \"long_text\": {
              \"text\" : \"...\\n...\"
            }
          }"
        ) {
          id
        }
      }`
)
  1. See the request fails with an error (sensitive info redacted).
Parse error on bad Unicode escape sequence: "{\n            \\\"date\\\" : {\n              \\\"date\\\" : \\\"...\\\",\n              \\\"time\\\" : \\\"...\\\n            },\n            \\\"numbers\\\": \\\"...\\\"...}" (error) at [5, 26]"
  1. Remove whitespace from the query to fix it (read the end for details).

Expected behavior
Before March 29 at 6:00 a.m. EST, queries with whitespace worked.

Context and environment
These calls are run routinely in a scheduled cloud function on the Google Cloud Platform.

Solution
Putting the query in a function that removes whitespace solved the issue.

const removeNewLines = (s: string) => {
  s = s.replace(/\s{2,}/g, ' ');
  s = s.replace(/\t/g, ' ');
  s = s
    .toString()
    .trim()
    .replace(/(\r\n|\n|\r)/g, '');
  return s;
};

monday.api(removeNewLines(`mutation...`)

.

.

[Bug] monday.set method doesn't honor parameters

Describe the bug
The monday.set method doesn't seem to use the params you supply it.

Steps to reproduce

  1. Embed the SDK in an app
  2. Call monday.set('settings', { properties... })
  3. You can see in the request payload that the values you give to each property aren't present, and the defaults are used instead

Expected behavior
I expected the new settings to be applied to my app.

Context and environment

  • I am using the monday.set method
  • I am using Chrome as my browser
  • The app is still in development, and the offending code can be seen here or in one of the screenshots below

Additional information
Here are screenshots that may help provide clarity:

The function I've written that calls the monday.set method. The globalCardlockState, checkInReminder, teamGoal, teamMemberCount, and teamSuccessRate properties always have the same values shown in the image, regardless of what I pass into the method.


code-for-updating-settings

The request's payload.


request-payload

A snippet of the monday.set method as shown in the README.


sdk-method

Create new workspace.

What problem is this request going to solve?
I want to create new workspace using api can you please create new mutation for the create workspace

What is the solution you'd like to see?
Create new mutation for the workspace.

Describe alternatives you've considered
Yes not working

Additional information

[Bug] Nextjs 14 and monday-sdk-js npm package = "TypeError: fetch is not a function"

Summary

I am working on an app for Monday.com api. It uses the "monday-sdk-js package".

I have it working fine on nextjs 13.4, but when I upgrade to Nextjs 14 I am getting this error. From what I can find there was something "node-fetch" related that was removed from Nextjs, potentionally causing this issue.

How can I go about making this package work? I assume by polyfilling node-fetch somehow but I am unclear on how to properly do this after searching.

The monday-sdk-js package has logic like:

import mondaySdk from "monday-sdk-js";
const monday = mondaySdk();
monday.setApiVersion("2023-10");

 const query = "query { boards (ids: 5798486455) { groups { title id }} }";
  const result = await monday.api(query, options);
  console.log("fetchCategories", result);

So in my component or server action I query the data, I never have direct access or actually write the fetch call. Inside the monday-sdk-js node_modules folder there is a file called "fetch.js" which has the fetch call and where the error is being thrown.

const fetch = require("node-fetch");

// for tests - to allow stubbing node-fetch with sinon
function nodeFetch(url, options = {}) {
  return fetch(url, options);
}

module.exports = {
  nodeFetch
};

How do i properly deal with this situation in NextJs 14?

Additional information

No response

Example

No response

monday.oauthToken always fails

Describe the bug
Using monday sdk on server side to exchange the code for an token fails with an empty error

Steps to reproduce

  1. Embed the SDK in an app
  2. Call monday.oauthToken( "code", MONDAY_APP_CLIENT_ID, MONDAY_APP_CLIENT_SECRET )
  3. See the request fails with an empty error
  4. ...

Expected behavior
auth token should be returned

Context and environment
Used inside lambda function on NodeJs environment

Additional information
Although in the documentation is specified that the parameters should be sent as x-form-urlencoded : https://apps.developer.monday.com/docs/oauth
Screenshot 2022-08-03 at 21 05 28
looks like the library itself is not respecting that and is using body as string :

await fetch.nodeFetch(url, {
    method: options.method || "POST",
    body: JSON.stringify(data || {}),
    headers: {
      Authorization: token,
      "Content-Type": "application/json"
    }
  });

in oauth-service.js

execute(data, null, { url: MONDAY_OAUTH_TOKEN_URL });

this method is invoked which uses inside body as string

this can be the issue probably...

[Bug] monday.storage.instance.setItem not storing values between page reloads

Describe the bug
monday.storage does not remember setItems between page reloads

Steps to reproduce
Working code

  1. Add follwing code (a setItem and a getItem)
import mondaySdk from "monday-sdk-js";
const monday = mondaySdk();
const KEY = 'key';

monday.storage.instance.setItem(KEY, JSON.stringify({ tjo: 'tjo'})).then(res => {
  monday.storage.instance.getItem(KEY).then(res => {
    console.log(res.data.value); // -----> Correct { value: str, success: true }
  });
});
  1. Comment out the setItem
monday.storage.instance.getItem(KEY).then(res => {
  console.log(res.data.value); 
});
  1. Reload page --> // -----> Incorrect { value: null, success: true }

Expected behavior
Just like localStorage, getItem returns the right value after a page reload. Have I misunderstood anything? Here are the monday (docs)[https://developer.monday.com/apps/docs/mondaystorage]

Context and environment
Running the app inside the monday preview mode

Additional information
"monday-sdk-js": "^0.3.2"

[Bug] API is sending token as object

Npm package [email protected]

I'm trying the following code

monday.setToken("token");

monday
  .api("query { me { id, name } }", {
    token,
  })
  .then((res) => console.log(res));

And when I open the network tab I see this

image

Checking the code on client.js, I found this line :

 return mondayApiClient.execute(params, {token} );

However, the execute function receives the token as String, not Object

async function execute(data, token, options = {}) {
... 
let response = await apiRequest(fullUrl, data, token, options);

Typescript support

Well the problem it's solving is pretty obvious, we get proper typings for everything pretty much :D

A good implemention will cover all GQL schemas as types, obviously the SDK core functionality typed.
there's some very good tools to achieve that such as https://www.npmjs.com/package/graphql-schema-typescript

At the moment even initializing the SDK itself is complicated and errors aren't thrown back to the consumer which makes things near impossible to debug.

[Bug] Some execute functions are broken since 0.3.4

Describe the bug
Since the last release (0.3.4), some function from monday.execute doesn't work anymore and trigger an error. It happen for:

  • monday.execute("confirm")
  • monday.execute("notice")

(and maybe others)

Triggered error:

Uncaught (in promise) TypeError: i is undefined
    execute https://cdn.monday.com/build/app-feature-iframe-component-e02c5df35db72c8af440.js:1
    receiveMessage https://cdn.monday.com/build/app-feature-iframe-component-e02c5df35db72c8af440.js:1
    a https://cdn.monday.com/build/utility_vendor-30f43bc4b224568e2b6c.js:2
    _wrapEventTarget https://cdn.monday.com/build/utility_vendor-30f43bc4b224568e2b6c.js:2
    d https://cdn.monday.com/build/utility_vendor-30f43bc4b224568e2b6c.js:2
    componentDidMount https://cdn.monday.com/build/app-feature-iframe-component-e02c5df35db72c8af440.js:1
    aa https://cdn.monday.com/build/externals-b4bb2147.js:2
    gu https://cdn.monday.com/build/externals-b4bb2147.js:2
    unstable_runWithPriority https://cdn.monday.com/build/externals-b4bb2147.js:2
    $l https://cdn.monday.com/build/externals-b4bb2147.js:2
    vu https://cdn.monday.com/build/externals-b4bb2147.js:2
    ru https://cdn.monday.com/build/externals-b4bb2147.js:2
    ql https://cdn.monday.com/build/externals-b4bb2147.js:2
    unstable_runWithPriority https://cdn.monday.com/build/externals-b4bb2147.js:2
    $l https://cdn.monday.com/build/externals-b4bb2147.js:2
    ql https://cdn.monday.com/build/externals-b4bb2147.js:2
    Kl https://cdn.monday.com/build/externals-b4bb2147.js:2
    ne https://cdn.monday.com/build/externals-b4bb2147.js:2
    qt https://cdn.monday.com/build/externals-b4bb2147.js:2
    a https://cdn.monday.com/build/utility_vendor-30f43bc4b224568e2b6c.js:2
3 app-feature-iframe-component-e02c5df35db72c8af440.js:1:63027

Steps to reproduce

Here is a basic reproduction case:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/monday-sdk-js/dist/main.js"></script>
</head>
<body>
    <button onclick="showConfirmation()">Confirmation</button>
    <button onclick="showFlag()">Flag</button>
    See console for error
</body>

<script>
    function showConfirmation() {
        const monday = window.mondaySdk();
        monday.execute("confirm", {
            message: "Are you sure?",
            confirmButton: "Let's go!",
            cancelButton: "No way",
            excludeCancelButton: false
        }).then((res) => {
            console.log(res.data);
            // {"confirm": true}
        });
    }

    function showFlag() {
        const monday = window.mondaySdk();
        monday.execute("notice", {
            message: "I'm a success message",
            type: "success", // or "error" (red), or "info" (blue)
            timeout: 10000,
        });
    }
</script>

</html>

Expected behavior

  • Clicking on "Confirmation" should display the confirmation dialog
  • Clicking on "Flag" should display notice flag

Context and environment
Tested on a monday.com instance, in the developer center, using a board feature.

Additional information
image

[Bug] monday.storage.instance.setItem does have wrong types

Describe the bug
For monday.storage.instance.setItem there seem to be wrong types.

Steps to reproduce

  1. Embed the SDK in an app
  2. Call monday.storage.instance.setItem
  3. Check the parameter types that can be passed to the method
    grafik
  4. Also check implemented types: client-data.interface.ts

Expected behavior
According to the documentation and the implementation of the storage, it should be possible to also pass additional options like the previous_version attribute. Those types are not being reflected correctly in TS.
So I would assume the method to work like:

monday.storage.instance.setItem('some_key', myJsonData, {previous_version: previousVersion})

Context and environment
Tested using the sdk on client side in a widget.

Constants not loaded correctly when NODE_ENV set to "development"

Hi,

there seems to be a bug with the loading of basic constants affecting dev environments. In my case the constants were mostly loaded as "undefined" which leads to an url like this 'undefined://undefinedundefined/v2' which is obviously not working.
The issue seems to be for me in line 10 with process.env[key] !== "undefined", I think this should be changed to process.env[key] !== undefined for a correct comparison.

const getEnvOrDefault = (key, defaultVal) => {
return isNodeDevStageEnv() && process.env[key] !== "undefined" ? process.env[key] : defaultVal;
};

I have in my .env file NODE_ENV=development.
I included the following vars in my .env which fixed it as a workaround for now:

# Temporary fix for monday.com api sdk
MONDAY_COM_PROTOCOL=https
MONDAY_COM_DOMAIN=monday.com
MONDAY_SUBDOMAIN_API=api.
MONDAY_OAUTH_SUBDOMAIN=auth.

I'm happy to assist in all follow-up questions 😊

Edit: It seems like there is already an open pr for that: #118

[Feature] Strip extra whitespace from payload before sending requests

What problem is this request going to solve?
The SDK is sending a bunch of unnecessary whitespace in the request payload when making api calls. Which in our specific use case is a bunch of extra \t indentation characters from graphql code.

What is the solution you'd like to see?
The SDK should automatically strip out all superfluous characters before sending a payload. Those characters being things like spaces, tabs, return line chars, end of line chars, other whitespace chars, and commented out graphql lines.

[Bug] monday.storage.instance.deleteItem(key) failed when key does not exist

Describe the bug
When trying to delete a key that does not exist, the Promise won't return and the error on the console is:
components-fa9c6aebdcd36ea0b03a.js:1 Uncaught DOMException: Failed to execute 'postMessage' on 'Window': function(e){var t;if(2===x){if(!c)for(c={};t=Wt.exec(a);)c[t[1].toLowerCase()]=t[2];t=c[e.toLowerCase()]}return null==t?null:t} could not be cloned. at B.postMessage (https://cdn.monday.com/build/components-fa9c6aebdcd36ea0b03a.js:1:148412) at callback (https://cdn.monday.com/build/components-fa9c6aebdcd36ea0b03a.js:1:147993) at Object.<anonymous> (https://cdn.monday.com/build/main-4240d31c3d88e3b4f16b.js:1:3969554) at c (https://cdn.monday.com/assets/lib/jquery-1.11.2-39cc7e053fb2635f0759e107fe933746213d55b818b20d9b6b6a772bdcc87ea2.js:25:22505) at Object.fireWith [as rejectWith] (https://cdn.monday.com/assets/lib/jquery-1.11.2-39cc7e053fb2635f0759e107fe933746213d55b818b20d9b6b6a772bdcc87ea2.js:25:23325) at n (https://cdn.monday.com/assets/lib/jquery-1.11.2-39cc7e053fb2635f0759e107fe933746213d55b818b20d9b6b6a772bdcc87ea2.js:27:3985) at XMLHttpRequest.t (https://cdn.monday.com/assets/lib/jquery-1.11.2-39cc7e053fb2635f0759e107fe933746213d55b818b20d9b6b6a772bdcc87ea2.js:27:10196)

Steps to reproduce

  1. Embed the SDK in an app
  2. Call monday.storage.instance.deleteItem(key) with a key that has never been set.
  3. See the request fails

Expected behavior
Expect the crash to be caught and return the failure in the Promise

Context and environment
Chrome desktop browser

[Bug] Wrong types on monday sdk

Describe the bug
Related to version 0.5.2.

When executing the following code, the res objects have wrong types on them:

import mondaySdk from 'monday-sdk-js';
const monday = mondaySdk();

monday.get('<any allowed key>').then(res => {
    // res does have wrong types here
})

According to the implementation (see this line), the current return type is Promise<GetterResponse<AppFeatureType>[T] & CustomResponse>. So that assumes that when running e.g. monday.get('context').then(res), res would have already the context information like res.app or res.user. However, the above call returns an object like

{
    "method": "get",
    "type": "context", // corresponding type
    "requestId": "some-id",
    "errorMessage": undefined // Or a message in case of error
    "data": {} // Here the data is only located
}

so that you have to call res.data.app or res.data.user.

Steps to reproduce

  1. Embed the SDK in an app (v0.5.2)
  2. Use typescript
  3. Call monday.get('<any allowed key>').then(res => { /* .... */})
  4. Check proposed types for the res object

Expected behavior
Correct types are returned like described above.

Context and environment
Came up while trying to access monday.get('context').

[Feature] Get the sorted results using monday.listen

Describe the bug
The monday.listen method is unable to get the sorted results, and it can't trigger the itemIds listener either.

Steps to reproduce

  1. Embed the SDK in an app
  2. Execute monday.listen("itemIds", (res) => { console.log(res.data); });
  3. Use the sort feature
    image
  4. Found that the itemIds listener could not be triggered

Expected behavior
The itemIds listener should be triggered, and the sorted results should be returned.

Context and environment
OS: macOS
Browser: Google Chrome 85.0.4183.83

Additional information
Null

[Bug] Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.

Describe the bug
Unable to import and use monday-sdk-js in a vue project using Vite as bundler.

Steps to reproduce

  1. Create a new project using npm init vue@next (with Vite)
  2. Install monday-sdk-js
  3. import and initialize monday-sdk
  4. Get error Uncaught Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.

Expected behavior
Expected to be able to import and use MondaySDK clientside

Context and environment
Vite, vue3, firefox

[Feature] API for sending in file

What problem is this request going to solve?
It would be nice to be able to run a file request through the SDK rather than sending it in as a post request with my token key.
When sending a file as a post request to /v2 or /v2/file endpoint from a host such as ngrok.io, I get a CORS issue.
If I send a file to /v2 endpoint from a published build from website.monday.com, I am able to successfully send a file through a post request. Unfortunately /v2/file still gets a CORS issue.

What is the solution you'd like to see?
It would be great to send a file through the SDK. I know that most of the queries/mutations for monday.api() are JSON string so it's going to be different than file that is multipart/form-data. I don't know what goes on in house as it gets sent home with window.parent.postMessage(), but my recommendation is sending it with a different function. So instead of Monday.api(query, options) , create a new one and call it something like: Monday.file()

const formData = new FormData();
formData.append("variables[file]", file, filename );
const query = `mutation addFile($file: File!) {add_file_to_update (update_id: 1234, file: $file) {id}}`;
formData.append("query", query )

Monday.file(query, {form: formData})

Or if the backend is in charge of converting file to formdata, then the user could write:
Monday.file(query, {variables: {update_ID: 123, file: file}})

Describe alternatives you've considered
I have it already working by sending the file to the backend which bypasses the CORS issue straight to the v2/file endpoint since I can't access it through the client side.

Additional information
I created a post regarding this topic here: https://community.monday.com/t/requesting-code-example-for-file-upload-via-mondays-sdk-client-side/10099

And here's a separate discussion regarding the CORS limitation on the client side via file post requests: https://community.monday.com/t/cors-issue-when-uploading-file-with-api-v2/9993

Update Column

What problem is this request going to solve?
Can you please provide feature for update column title using mutation.

What is the solution you'd like to see?
There will be way to update the column title using mutation

Describe alternatives you've considered

Additional information

[Bug] constants.js: Access to environment variables is breaking cypress tests + storybook stories

Describe the bug
We are using cypress to write component tests for our apps. In some components we are using an internal utils library with shared logic. This library itself is using the monday sdk. When now writing tests for our components or creating stories, it might be that the sdk is initialized at some point, even though it is not directly used in the component.

Due to a change made in the constants.js in this PR our tests are now failing with the following error

TypeError: The following error originated from your test code, not from Cypress.

  > Cannot read properties of undefined (reading 'MONDAY_COM_PROTOCOL')

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
    at <stack trace>

It seems as if the call to isNodeDevStageEnv() is working (even though process.env is accessed there as well) but the following call to process.env.MONDAY_COM_PROTOCOL is then failing because process.env is not defined.

Steps to reproduce

  1. Embed the SDK in an app
  2. Create a new react component and in there initialize the sdk (const monday = mondaySdk())
  3. Create either a new storybook story or a cypress component test for the newly created component
  4. Either run npx cypress run --headless --component, npx cypress open and navigate to the component test or npx storybook dev

Expected behavior
Either the component test should run successfully or the story should be loaded without any issues

Context and environment

  • OS: mac
  • sdk version: In our case tested with 0.4.12 but error should still occur also in latest version
  • cypress version: 12.17.4
  • storybook version: 7.0.22
  • react version: 18.2.0

Additional information
Current workaround is setting process.env.NODE_ENV to test. This way isNodeDevStageEnv() returns false and the subsequent calls - which are producing the error - are not being made anymore.

I think the fix would just be to do optional chaining like process.env?.[key] or to extend the isNodeEnv() method to check for the existence of process.env.

Get Column Details

What problem is this request going to solve?
Can you please provide a value of the description while querying the values for the column

What is the solution you'd like to see?
It will return the column description for while we fetch the column details

Describe alternatives you've considered

Additional information

[Bug] Errors caught in sdk aren't being propagated to

Describe the bug
If you monday.api throws an exception, its being watched somewhere in the parent window and is not
propagated to the IFrame, therefor client apps cannot catch the errors

main-7200c6b71d99dbf4fa50.js:1 Error: Graphql validation errors
    at main-7200c6b71d99dbf4fa50.js:1
    at c (vendors-e5822d6167d2f886eaaa.js:2)
    at Generator._invoke (vendors-e5822d6167d2f886eaaa.js:2)
    at Generator.forEach.e.<computed> [as next] (vendors-e5822d6167d2f886eaaa.js:2)
    at o (vendors-e5822d6167d2f886eaaa.js:2)
    at s (vendors-e5822d6167d2f886eaaa.js:2)

the catcher (main-7200c6b71d99dbf4fa50) is hosted by monday
https://cdn7.monday.com/build/main-7200c6b71d99dbf4fa50.js

Steps to reproduce

  1. Embed the SDK in an app
  2. remove a permission (me:read)
  3. Call monday.api(...) to fetch { me { name }}
  4. try to catch the error

When API throws an error, promise is never fulfilled

I'm writing an embedded app and I noticed that if the API throws an error, this is not communicated back to app running in the iframe, and because of this, the promise is also never fulfilled.

This is the code calling the local api ->

_localApi(method, args) {

Only resolve is implemented.

This is code on the monday site actually calling the api:
image

If an error occurs it is logged to the console, but not communicated back to the app running in the iframe.

I can work around this temporarily with a timeout, but it would be nice to get the actual error.

[Bug] triggerFilesUpload Failing Partially

Describe the bug
I am having a hard time using the triggerFilesUpload, I see the file in file gallery but only for a few minutes, then its gone. I also get an error in the console after the upload. I think it has to do with attaching the file to a column.

Steps to reproduce

  1. Embed the SDK in an app
  2. Call monday .execute("triggerFilesUpload", { boardId: boardId, itemId: fileres.data.create_item.id, columnId: "files", })
  3. See the request succeeds initially but an error is logged in console and the file eventually is gone from file gallery in monday.com

Expected behavior
I'd expect the file to show up in the column ID I named, not just the gallery. I also expect it to persist.

Context and environment
local app, google chrome latest version, latest version of the SDK

Additional information

[Bug] monday.execute for 'openItemCard' does not resolve promise for kind 'updates'

Describe the bug
monday.execute for type 'openItemCard' returns a promise. There are 2 kinds possible: 'columns' or 'updates' (https://developer.monday.com/apps/docs/mondayexecute#open-item-card). When using the default 'columns' for kind the returned promise resolves correctly when the card is closed. when using 'updates' as kind, the promise never resolves nor rejects when closing the card.

Steps to reproduce

  1. Embed the SDK in an app
  2. Call monday.execute('openItemCard', { itemId: item.id, kind: 'updates' }) and wait for the returned promise to resolve
  3. Close the opened updates item card
  4. The promise does not resolve nor reject

Expected behavior
The promise should resolve when closing the 'updates' item card.

Context and environment
Working with a custom view on a board, implemented as a react app. Using version 0.3.2 of monday-sdk-js (latest version at time of writing)

[Bug] Storage API Versioning

Describe the bug
Storage API does not respect versioning

Steps to reproduce
Get something from storage:

this.mondayClientSdk.storage.instance.getItem(key).then(
    r => {
      const version = r.data.version;
      // Keep track of the version
    }
);

Store a new value:

this.mondayClientSdk.storage.instance.setItem(key, value).then(
  r => console.log(r),
  e => console.error(e)
);

Note that a different version is now in stored.

Now try to store a new value using the version retrieved in the first snippet:

this.mondayClientSdk.storage.instance.setItem(key, value, {previous_version: version}).then(
  r => console.log(r),
  e => console.error(e)
);

This succeeds and does not result in a version_conflict error as described in the docs.

Expected behavior
A version_conflict error.

[Bug] openItemCard keep refreshing the page

Describe the bug
https://www.loom.com/share/08678a1075ed4547a60af0699db87289

The button is triggering the following code:
monday.execute('openItemCard', { itemId: 973937553 });

As you can see in the video, when the popup open and close, the page behind the popup will refresh, this is causing serious performance issue to our custom app (the amount of our data is very large and it keep retrieving the data again and again), it wasn't like this before, can I know what is the problem?

Br, YarHuoy

monday-sdk-js Types not found after migrating quickstart-react to react Typescript

Describe the bug
When running tsc I get the following warning:

src/App.tsx:33:23 - error TS7016: Could not find a declaration file for module 'monday-sdk-js'. '/repo/node_modules/monday-sdk-js/src/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/monday-sdk-js` if it exists or add a new declaration (.d.ts) file containing `declare module 'monday-sdk-js';`

33 import mondaySdk from "monday-sdk-js";

Steps to reproduce

  1. Clone (quickstart-react)[https://github.com/mondaycom/welcome-apps/tree/master/apps/quickstart-react] from mondays offical welcome apps repo
  2. Migrate quickstart-react to Typescript to a working project
  3. Run tsc
  4. See error above

Note: If you install @types/monday-sdk-js you see the following warning in package-lock.js, so I assume it should not fix my problem.

"node_modules/@types/monday-sdk-js": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/@types/monday-sdk-js/-/monday-sdk-js-0.2.1.tgz",
      "integrity": "sha512-avjXIhnk3iQuK5OMPe0VlkT6iedYXJJcFr7kSgTsSW9vSmmv+NwQrMwS5IhatAzIxtPpl9CKpF0tyUmUJboc5A==",
      "deprecated": "This is a stub types definition. monday-sdk-js provides its own type definitions, so you do not need this installed.",
      "dependencies": {
        "monday-sdk-js": "*"
      }
    },

Expected behavior
No error when running tsc

Thoughts:
I see the types folder in the monday-sdk-js project. Is some extra typeRoots necessery in the tsconfig.json to make this work?

Thanks!

[Bug] No error handling for calling monday.instance.getItem/setItem with a valid monday.setToken

Describe the bug
When experimenting with monday.instance.getItem/setItem I spent quite a bit of time debugging. It looks like it only works when running inside of Monday and not

Steps to reproduce
Call the following code:

import mondaySdk from "monday-sdk-js";
const monday = mondaySdk();
monday.setToken(<correct token>);

monday.storage.instance.setItem('test', 'Lorem Ipsum').then(res => {
    console.log(res);
    monday.storage.instance.getItem('test').then(res => {
      console.log(res);
      console.log(res.data.value);
    });
  });

The structure printed is the follwing:
// setItem
args: {method: 'set', key: 'test', value: 'Lorem Ipsum', options: {…}, segment: 'instance'}
clientId: undefined
method: "storage"
requestId: "gwtl9xq"
version: "0.1.6"

// getItem
args: {method: 'get', key: 'test', options: {…}, segment: 'instance'}
clientId: undefined
method: "storage"
requestId: "wgzie0e"
version: "0.3.0"
``

Expected behavior
A clear error or success: false when running it with a token. I know that you can't set "storage" in the oath settings, still a clear error would save devs time.

Workaround:
Check for clientId === undefined.

[Bug] monday.storage.instance.setItem(someKey, someVal) silently fails when someVal contains a newline character

Describe the bug

monday.storage.instance.setItem(someKey, someVal) silently fails when someVal contains a newline character

Steps to reproduce

  1. Embed the SDK in an app
  2. Call monday.storage.instance.setItem(someKey, someVal) where someVal has a newline character
  3. The request silently fails

Example 1: Expected behavior

Without a newline character, everything is fine.

const monday = mondaySdk();

const someKey = "someKey";
const someVal = "Lorem Ipsum 123";
monday.storage.instance.setItem(someKey, someVal).then((res) => {
  console.log(res);
  // --> {method: 'storage', type: undefined, data: {success: true, version: 'edc92'}, requestId: 'en3u9u96f', errorMessage: undefined}
  
  monday.storage.instance.getItem(someKey).then((res) => {
    console.log(res.data.value); 
    // --> Lorem Ipsum 123
    
  });
});

Example 2: Actual behavior with new line character

This now fails silently because of a new line character, but reports that it has succeeded.

const monday = mondaySdk();

const someKey = "someKey";
const someVal = "Lorem Ipsum 123\n\nxxxx";
monday.storage.instance.setItem(someKey, someVal).then((res) => {
  console.log(res);
  // --> {method: 'storage', type: undefined, data: {success: true, version: 'edc92'}, requestId: 'en3u9u96f', errorMessage: undefined}
  
  monday.storage.instance.getItem(someKey).then((res) => {
    console.log(res.data.value); // --> NULL
  });
});

Example 3: A workaround

Dodgy workaround to get around the failure from the new line character

const monday = mondaySdk();
const someKey = "someKey";
const someVal = "Lorem Ipsum 123\n\nxxxx";
const newLine = "[NEWLINE]";
monday.storage.instance.setItem(
  someKey, 
  someVal.replaceAll("\n", newLine)
).then((res) => {
  console.log(res);
  // --> {method: 'storage', type: undefined, data: {success: true, version: 'edc92'}, requestId: 'en3u9u96f', errorMessage: undefined}
  
  monday.storage.instance.getItem(someKey).then((res) => {
    console.log(
      res.data.value
    ); // --> Lorem Ipsum 123[NEWLINE][NEWLINE]xxxx
    
    console.log(
      res.data.value
        .replaceAll(newLine, "\n")
    ); // --> Lorem Ipsum 123\n\nxxxx
  });
});

Context and environment
What capabilities were you trying to use?
-monday.storage.instance.setItem(someKey, someVal) where someVal has a newline character

On which browser/mobile device?

  • any desktop browser

What app was involved?

  • my own developer app

Additional information

Encountered Internal server error when trying to upload a file through query

In my app, I have set up the sdk with the right token, I can make other query, however When I try to upload a file to a column on a board, it hits an internal server error.
my code as following:

const file = await fetch('/images/test.pdf').then(r => r.arrayBuffer());
console.log(file)
const query = mutation {add_file_to_column (item_id: 1844256842, column_id: "files", file: ${file}) {id}}

try{
const response = await monday.api(query)
console.log(24, response)

}catch(e){
console.log(e)
}
error message as follow

Screenshot 2024-02-26 at 9 39 02 am Screenshot 2024-02-26 at 9 39 14 am

Forced development environment and support for variables in queries (server)

No matter what is set in the NODE_ENV environment variable, it fails to use the SDK as it has hardcoded a non-existend url. See the line referenced in the link below:

https://github.com/DaPulse/monday-sdk/blob/86a59412a9a9d523a73de1a19a2ab31b110e09d3/src/constants.js#L3

Also I think setting this as a process.env.NODE_ENV is not a good idea since it takes whatever the user is using in his environment. I think it would be good to use a parameter or always stick to the public API as part of the sdk.

Create Dropdown with default labels

Describe the bug
I want to create drop down with default options, I have tried with defaults option but not working.

Steps to reproduce

  1. Embed the SDK in an app
  2. Call mutation { create_column(board_id: <bordId>, title: "DropDown 3", column_type: dropdown, defaults: "{\"labels\":[\"My label\"]}") { id } }
  3. See the request fails
  4. Only create column without any default label

Expected behavior
There should be new column with default value which passed in default labels

[Feature] Custom event triggering

What problem is this request going to solve?
In real-time applications, we have to use custom remote servers to trigger updates in all connected clients.

What is the solution you'd like to see?
Since Monday already has board events, it would be good if the app was able to trigger and listen to custom events.

The creation of a trigger(eventName, metadata) function that would work with the already existing listen(eventName, listener) function.

Describe alternatives you've considered
The main alternative is to use a custom websocket server, which would handle and broadcast events to all users connected to the view, but that depends relying on that external server in order to work.

[Bug] storage.instance.deleteItem is missing TS types

Describe the bug
When using the sdk with typescript, the type for storage.instance.deleteItem is missing

Steps to reproduce

  1. Embed the SDK in an app using TS
  2. Try to call monday.storage.instance.deleteItem(...)
  3. TS is complaining that method is not available
    grafik
  4. There is no type added for the method in the corresponding types file:
    grafik

Expected behavior
Method should be available

Context and environment
Used sdk on client side

apiVersion not getting included in localApi calls

Describe the bug
When localApi client is used (there's no token) apiVersion parameter does not gets included in the parameters:
image

Steps to reproduce

  1. Embed the SDK in an app
  2. Call monday.api(...) including apiVersion parameter using a local API call.
  3. See the request does not include the requested apiVersion header.

Expected behavior
Header gets actually included.

Context and environment
Using monday.api in a local context.

[Bug] SDK is missing types for monetization methods

Describe the bug
The SDK doesn't have types for monday.execute('openPlanSelection'). Not a blocker, the most recent version of SDK has a fallback to allow for any string method.

Steps to reproduce

  1. Embed the SDK in typescript app
  2. Call 'monday.execute('openPlanSelection')
  3. Autocomplete does not work (but you don't receive an error)

Expected behavior
The monetization methods should be supported: https://developer.monday.com/apps/docs/api-reference#sdk-methods

[Bug] Exception on success monday.storage.deleteItem

Describe the bug
A clear and concise description of what the bug is.
When deleteItem functions called, I receive this exception:

Uncaught TypeError: Cannot set properties of undefined (setting 'success')

The error:

app-feature-iframe-component-1fffa32651b189dc98dc.js:1 Uncaught TypeError: Cannot set properties of undefined (setting 'success')
    at Object.<anonymous> (app-feature-iframe-component-1fffa32651b189dc98dc.js:1:54642)
    at c (jquery-1.11.2-39cc7e053fb2635f0759e107fe933746213d55b818b20d9b6b6a772bdcc87ea2.js:25:22505)
    at Object.fireWith [as resolveWith] (jquery-1.11.2-39cc7e053fb2635f0759e107fe933746213d55b818b20d9b6b6a772bdcc87ea2.js:25:23325)
    at n (jquery-1.11.2-39cc7e053fb2635f0759e107fe933746213d55b818b20d9b6b6a772bdcc87ea2.js:27:3960)
    at XMLHttpRequest.t (jquery-1.11.2-39cc7e053fb2635f0759e107fe933746213d55b818b20d9b6b6a772bdcc87ea2.js:27:10196)

Steps to reproduce

  1. Embed the SDK in an app
  2. Call monday.storage.setItem('test', 'test data')
  3. Call monday.storage.deleteItem('test')
  4. See the successful request, but thrown exception

Expected behavior
No errors were thrown, promise should be resolved successfully.

Context and environment
Google Chrome, 115.0.5790.170.

Additional information
Here are those requests:

create new data request:
POST https://xxx.monday.com/app_storage_api/v2/test
Status Code: 201

remove the data request:
DELETE https://xxx.monday.com/app_storage_api/v2/test
Status Code: 204

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.