[UI] [CI] graphql-ws: Custom ESLint rule for closing websocket connections in UseEffect

Current Behavior

Unmanaged websocket connections in Meshery UI lead to memory leaks.

Desired Behavior

Use of static analysis in eslint to catch accidental exclusion of connection closing.

Implementation

1. Save the following code as no-unclosed-graphql-ws-connections.js in Meshery's ESLint configuration directory (ui/.eslintrc.js).

// rules/no-unclosed-graphql-ws-connections.js

module.exports = {
  meta: {
    type: 'problem',
    docs: {
      description: 'Disallows unclosed GraphQL-WS WebSocket connections',
      category: 'Possible Errors',
      recommended: true,
    },
  },

  create(context) {
    return {
      // Find all variable declarators with the identifier 'graphqlWsClient'
      VariableDeclarator(node) {
        if (node.id.name === 'graphqlWsClient' && node.init) {
          const isGraphQLWsClient =
            node.init.type === 'NewExpression' &&
            node.init.callee.name === 'Client'; // Assuming Client is the imported class

          if (isGraphQLWsClient) {
            context.report({
              node,
              message: 'Unclosed GraphQL-WS WebSocket connection. Ensure the connection is closed properly.',
            });
          }
        }
      },
    };
  },
};

2. Verify Meshery UI's naming convention.

• This rule will now identify any variable declarations named graphqlWsClient that are initialized with the Client class but lack proper closing logic.
• This rule assumes a specific naming convention (graphqlWsClient) and class name (Client). Either update the custom rule above or the naming convention used in Meshery UI, so that the rule matches appropriately.

Explanation of this custom rule

The rule is classified as a potential error (type: 'problem'). It provides a description, category, and recommends enabling it (recommended: true).

1.VariableDeclarator Check:

• The rule iterates through all VariableDeclarator nodes in the code.
• It checks if the identifier name is 'graphqlWsClient' and if it has an initializer (init).

1. Client Class Check: It ensures the initializer is a NewExpression and the callee's name is 'Client', assuming it's the imported class from the GraphQL-WS library.
2. Reporting Unclosed Connections: If both conditions are met, the rule reports an error at the node location with a specific message highlighting the need to close the connection properly.

Acceptance Tests

1. Unclosed websockets within a UseEffect are caught by this custom rule and the lint check marks the failure.

---

Contributor Guides and Handbook

• 🎨 Wireframes and designs for Meshery UI in Figma (open invite)
• 🖥 Contributing to Meshery UI
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack