Bring back Connections UI

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Currently, I have to define my entire connection configuration every time inside a function in function.ts It would be better if I could do it through a UI and simply use it through a single line of code in my function.

I think connections can be added like:

1. Just adjacent to Queries, there can be another tab for Connections. As they are related, it would be better if shown closer.
2. When a user starts adding a query, without adding a connection, then in the query modal at the top right corner we can show a +Add Connection button.
3. When in a code query, I am using a connection then it should also show on the query modal. Instead of Local, it should say MySQL:

Examples 🌈

No response

Motivation 🔦

No response

[Janpot]

Currently, I have to define my entire connection configuration every time inside a function in function.ts

Can you show an example of this? It should be perfectly possible to share code between functions.

[prakhargupta1]

Can you show an example of this? It should be perfectly possible to share code between functions.

So when this started happening, I created different .ts files. But the connections part was identical Eg: https://github.com/mui/mui-private/blob/d9877747de725bd42dde99d9c1f6dc3fa0ac57e3/tools/toolpad/resources/getorders.ts#L6 and https://github.com/mui/mui-private/blob/d9877747de725bd42dde99d9c1f6dc3fa0ac57e3/tools/toolpad/resources/functions.ts#L49

[Janpot]

One way to solve this problem could be to put shared logic in a separate function. e.g.

// ./mySql.ts
export async function getConnection () {
  if (!process.env.STORE_PASSWORD) {
    throw new Error(`Env variable STORE_PASSWORD not configured`);
  }
  if (!process.env.BASTION_SSH_KEY) {
    throw new Error(`Env variable BASTION_SSH_KEY not configured`);
  }

  const ssh = new SSH2Promise({
    host: process.env.BASTION_HOST,
    port: 22,
    username: process.env.BASTION_USERNAME,
    privateKey: process.env.BASTION_SSH_KEY.replace(/\\n/g, '\n'),
  });

  const tunnel = await ssh.addTunnel({
    remoteAddr: 'c111501.sgvps.net',
    remotePort: 3306,
  })

  const connection = await mysql.createConnection({
    host: 'localhost',
    port: tunnel.localPort,
    user: process.env.STORE_USERNAME,
    password: process.env.STORE_PASSWORD,
    database: process.env.STORE_DATABASE,
  });

  return connection;
}

Then use it in your function:

import { getConnection as getMySqlConnection } from '../mySql'

export const getorders = createFunction(
    async function getorders({ parameters }) {
      const connection = await getMySqlConnection()

      const [rows] = await connection.execute(`
      SELECT
      post.email,
      post.qty,
      post.order_item_name,
      c.type,
      ...
    `)
  }
  // ...
)

[oliviertassinari]

Currently, I have to define my entire connection configuration every time inside a function in function.ts It would be better if I could do it through a UI and simple use it in through a single line of code in my function.

I'm coming to this issue with the same pain point. I'm looking into covering a new KPI for https://www.notion.so/mui-org/KPIs-1ce9658b85ce4628a2a2ed2ae74ff69c?pvs=4#daeec7a0f9644693918656f488df82d7. Ideally, I would like to use the Toolpad UI editor. I feel that writing code in a .js file is overkill for my case. I also miss the autofill and install value preview I have inside Toolpad that isn't there in an IDE.

However, because I need to access HIBOB_TOKEN_READ_STANDARD I'm still forced to create a new function. See: https://github.com/mui/mui-public/pull/104 as an example of what I would like to avoid.