Adding Team functionality in Asana

[stanty522]

trafficstars

Description

Made changes to the Asana extension to include Teams. This creates a filter for Projects to only be searched under the selected Team.

This addresses an earlier issue where the query for Projects would time out if a workspace had too many existing Projects.

Screencast

Checklist

[ ✅] I read the extension guidelines [ ✅] I read the documentation about publishing [ ✅] I ran npm run build and tested this distribution build in Raycast [✅ ] I checked that files in the assets folder are used by the extension itself [ ✅] I checked that assets used by the README are placed outside of the metadata folder

[raycastbot]

Thank you for your first contribution! :tada:

🔔 @thomaslombart you might want to have a look.

[stanty522]

The documentation makes the distinction that if it's just a personal workspace there's just one team possible.

Maybe a logic check if the person is in an organisation or a workspace and therefore changes it accordingly?

Or another clunky solution - have an Asana for organisations extension and another one for personal workspaces.

[thomaslombart]

Oh, didn't know that. Then I guess, the team's field can simply be hidden if there's only one team available for the user and if the experience is the same when you add a task to a team instead of a workspace for a personal use 🙂

[stanty522]

Hey here's my attempt at trying to fix this. Unfortunately I'm running into some basic syntax error :(

However I think the logic will work. Basically in the Asana documentation there is a boolean property for workspaces that informs us if its an organization or not. So basically I've added this to the workspaces.ts and then I plan to use this as a variable in the CreatTaskForm.tsx which will be a conditional if statement to return the form drop down for teams or not. If true (i,e, workspace is an organization) then return teams form drop down, else don't return.

const isOrganization = workspaces?.map((workspace) => workspace.is_organization);

  if (isOrganization === true) {
      return 
        <Form.Dropdown title="Teams" storeValue {...itemProps.team}>
        {teams?.map((teams) => {
          return (
          <Form.Dropdown.Item 
            key={teams.gid} 
            value={teams.gid} 
            title={teams.name} 
            />
          );
        })}
      </Form.Dropdown>

[stanty522]

@thomaslombart

I figured out the logic of checking if the workspace is an organisation or not. While this works, it unfortunately creates a new issue whereby the workspaces that are NOT organisations cannot select a team, and if a team is not selected a project cannot be selected.

        {workspaces?.map((workspace) => {
            if (workspace.is_organization) {
              return (
                <Form.Dropdown title="Teams" storeValue {...itemProps.team}>
                {teams?.map((teams) => {
                  return (
                  <Form.Dropdown.Item 
                    key={teams.gid} 
                    value={teams.gid} 
                    title={teams.name} 
                    />
                  );
                })}
              </Form.Dropdown>
              );
            }
          })
        }

      <Form.TagPicker title="Projects" placeholder="Select one or more projects" storeValue {...itemProps.projects}>
        {allProjects?.map((project) => {
          return (
            <Form.TagPicker.Item
              key={project.gid}
              icon={getProjectIcon(project)}
              title={project.name}
              value={project.gid}
            />
          );
        })}
      </Form.TagPicker>

[thomaslombart]

and if a team is not selected a project cannot be selected.

But in that case, the projects can be retrieved based on a workspace instead of a team?

[stanty522]

But in that case, the projects can be retrieved based on a workspace instead of a team?

Yes that's possible but I'm not sure how I'd go about that without over complicating the structure :(

[thomaslombart]

Then, I'll take a look at that probably end of next week. I'm focusing on another project at the moment 😊

[thomaslombart]

After taking a look, I think it can be done in a few steps:

• useProjects and getProjects should be modified to handle an additional workspace parameter. The algorithm would be pretty simple: the team is used first to retrieve the projects. But, if it's undefined (in the case you mentioned), then the workspace is used to retrieve it.
• Then in CreateTaskForm, you could pass the workspace and the team to useProjects: useProjects({ workspace, team })

Otherwise, someone from the Raycast team told me the API call to retrieve the projects in the native extension was different than the one used here. Here we use the /projects endpoint whereas in the native extension it's /workspaces/{workspaceId}/typeahead with the resource_type param specified as project. It may be easier to switch to it to remove the project's pagination issue here.

[stanty522]

So I tried the typeahead thing first, and I'm not sure if I did it correctly, but I just ended up with the same issue of having too many projects and for it to even work I had to put the optional parameter of limit. I'm not sure if there's a way to only start the query after X characters have been typed so it won't try to query everything from the start.

The steps you suggested, I only got as far as to add the additional workspace parameter to getProjects and useProjects. Im still quite new to typescript and async programming so not exactly sure how to implement the if then statement check that would retrieve workspace. Is there a similar piece of code where this is done so I can learn from that?

[thomaslombart]

Hey there, I'm not sure where this could have been done... Unfortunately, I won't have enough bandwidth to work on that this week. I'll take another look at it probably next week or maybe the week after.