feat(twitch): add twitch integration

2023-11-02 13:49:01 +03:00
43 changed files with 129 additions and 1110 deletions
--- a/packages/backend/src/apps/microsoft-teams/assets/favicon.svg
+++ b/packages/backend/src/apps/microsoft-teams/assets/favicon.svg
@@ -1,57 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="1024"  height="1024" >
-      <defs>
-        <linearGradient id="plate-fill" x1="-.2" y1="-.2" x2=".8" y2=".8">
-          <stop offset="0" stop-color="#5a62c4"></stop>
-          <stop offset="1" stop-color="#3940ab"></stop>
-        </linearGradient>
-        <style>
-          .cls-1{fill:#5059c9}.cls-2{fill:#7b83eb}
-        </style>
-        <filter id="person-shadow" x="-50%" y="-50%" width="300%" height="300%">
-          <feGaussianBlur in="SourceAlpha" stdDeviation="25"></feGaussianBlur>
-          <feOffset dy="25"></feOffset>
-          <feComponentTransfer>
-            <feFuncA type="linear" slope=".25"></feFuncA>
-          </feComponentTransfer>
-          <feMerge>
-            <feMergeNode></feMergeNode>
-            <feMergeNode in="SourceGraphic"></feMergeNode>
-          </feMerge>
-        </filter>
-        <filter id="back-plate-shadow" x="-50%" y="-50%" width="300%" height="300%">
-	<feGaussianBlur in="SourceAlpha" stdDeviation="24"></feGaussianBlur>
-	  <feOffset dx="2" dy="24"></feOffset>
-          <feComponentTransfer>
-          <feFuncA type="linear" slope=".6"></feFuncA>
-          </feComponentTransfer>
-          <feMerge>
-            <feMergeNode></feMergeNode>
-            <feMergeNode in="SourceGraphic"></feMergeNode>
-          </feMerge>
-        </filter>
-        <filter id="tee-shadow" x="-50%" y="-50%" width="250%" height="250%">
-          <feGaussianBlur in="SourceAlpha" stdDeviation="12"></feGaussianBlur>
-          <feOffset dx="10" dy="20"></feOffset>
-          <feComponentTransfer>
-            <feFuncA type="linear" slope=".2"></feFuncA>
-          </feComponentTransfer>
-          <feMerge>
-            <feMergeNode></feMergeNode>
-            <feMergeNode in="SourceGraphic"></feMergeNode>
-          </feMerge>
-        </filter>
-        <clipPath id="back-plate-clip">
-          <path d="M684 432H512v-49.143A112 112 0 1 0 416 272a111.556 111.556 0 0 0 10.785 48H160a32.094 32.094 0 0 0-32 32v320a32.094 32.094 0 0 0 32 32h178.67c15.236 90.8 94.2 160 189.33 160 106.039 0 192-85.961 192-192V468a36 36 0 0 0-36-36z" fill="#fff"></path>
-        </clipPath>
-      </defs>
-      <g id="small_person" filter="url(#person-shadow)">
-        <path id="Body" class="cls-1" d="M692 432h168a36 36 0 0 1 36 36v164a120 120 0 0 1-120 120 120 120 0 0 1-120-120V468a36 36 0 0 1 36-36z"></path>
-        <circle id="Head" class="cls-1" cx="776" cy="304" r="80"></circle>
-      </g>
-      <g id="Large_Person" filter="url(#person-shadow)">
-        <path id="Body-2" data-name="Body" class="cls-2" d="M372 432h312a36 36 0 0 1 36 36v204a192 192 0 0 1-192 192 192 192 0 0 1-192-192V468a36 36 0 0 1 36-36z"></path>
-        <circle id="Head-2" data-name="Head" class="cls-2" cx="528" cy="272" r="112"></circle>
-      </g>
-      <rect id="Back_Plate" x="128" y="320" width="384" height="384" rx="32" ry="32" filter="url(#back-plate-shadow)" clip-path="url(#back-plate-clip)" fill="url(#plate-fill)"></rect>
-      <path id="Letter_T" d="M399.365 445.855h-60.293v164.2h-38.418v-164.2h-60.02V414h158.73z" filter="url(#tee-shadow)" fill="#fff"></path>
-    </svg>
--- a/packages/backend/src/apps/microsoft-teams/common/add-auth-header.ts
+++ b/packages/backend/src/apps/microsoft-teams/common/add-auth-header.ts
@@ -1,13 +0,0 @@
-import { TBeforeRequest } from '@automatisch/types';
-
-const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
-  requestConfig.headers['Content-Type'] = 'application/x-www-form-urlencoded';
-
-  if ($.auth.data?.accessToken) {
-    requestConfig.headers.Authorization = `${$.auth.data.tokenType} ${$.auth.data.accessToken}`;
-  }
-
-  return requestConfig;
-};
-
-export default addAuthHeader;
--- a/packages/backend/src/apps/microsoft-teams/common/auth-scope.ts
+++ b/packages/backend/src/apps/microsoft-teams/common/auth-scope.ts
@@ -1,9 +0,0 @@
-const authScope: string[] = [
-  'offline_access',
-  'email',
-  'User.Read',
-  'openid',
-  'profile',
-];
-
-export default authScope;
--- a/packages/backend/src/apps/microsoft-teams/common/get-current-user.ts
+++ b/packages/backend/src/apps/microsoft-teams/common/get-current-user.ts
@@ -1,8 +0,0 @@
-import { IGlobalVariable, IJSONObject } from '@automatisch/types';
-
-const getCurrentUser = async ($: IGlobalVariable): Promise<IJSONObject> => {
-  const response = await $.http.get('/v1.0/me');
-  return response.data;
-};
-
-export default getCurrentUser;
--- a/packages/backend/src/apps/microsoft-teams/index.ts
+++ b/packages/backend/src/apps/microsoft-teams/index.ts
@@ -1,16 +0,0 @@
-import defineApp from '../../helpers/define-app';
-import addAuthHeader from './common/add-auth-header';
-import auth from './auth';
-
-export default defineApp({
-  name: 'Microsoft Teams',
-  key: 'microsoft-teams',
-  baseUrl: 'https://teams.live.com',
-  apiBaseUrl: 'https://graph.microsoft.com',
-  iconUrl: '{BASE_URL}/apps/microsoft-teams/assets/favicon.svg',
-  authDocUrl: 'https://automatisch.io/docs/apps/microsoft-teams/connection',
-  primaryColor: '464EB8',
-  supportsConnections: true,
-  beforeRequest: [addAuthHeader],
-  auth,
-});
--- a/packages/backend/src/apps/spotify/common/add-auth-header.ts
+++ b/packages/backend/src/apps/spotify/common/add-auth-header.ts
@@ -1,7 +1,8 @@
 import { TBeforeRequest } from '@automatisch/types';

 const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
-  if (requestConfig.additionalProperties?.skipAddingAuthHeader) return requestConfig;
+  if (requestConfig.additionalProperties?.skipAddingAuthHeader)
+    return requestConfig;

  if ($.auth.data?.accessToken) {
    const authorizationHeader = `Bearer ${$.auth.data.accessToken}`;
--- a/packages/backend/src/apps/twitch/assets/favicon.svg
+++ b/packages/backend/src/apps/twitch/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" overflow="visible" width="40" height="40" version="1.1" viewBox="0 0 40 40" x="0px" y="0px" class="ScSvg-sc-mx5axi-2 iAAiAK"><g fill="#5C16C5"><polygon points="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animate dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate><animate dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate></polygon><polygon points="26 25 30 21 30 10 14 10 14 25 18 25 18 29 22 25" class="ScFace-sc-mx5axi-4 fDFkyX" fill="#FFFFFF"><animateTransform dur="150ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></polygon><g class="ScEyes-sc-mx5axi-5 fAMMxB" fill="#5C16C5"><path d="M20,14 L22,14 L22,20 L20,20 L20,14 Z M27,14 L27,20 L25,20 L25,14 L27,14 Z" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animateTransform dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></path></g></g></svg>
--- a/packages/backend/src/apps/microsoft-teams/auth/generate-auth-url.ts
+++ b/packages/backend/src/apps/microsoft-teams/auth/generate-auth-url.ts
@@ -9,13 +9,12 @@ export default async function generateAuthUrl($: IGlobalVariable) {
  const redirectUri = oauthRedirectUrlField.value as string;
  const searchParams = new URLSearchParams({
    client_id: $.auth.data.clientId as string,
-    response_type: 'code',
    redirect_uri: redirectUri,
-    response_mode: 'query',
+    response_type: 'code',
    scope: authScope.join(' '),
  });

-  const url = `https://login.microsoftonline.com/organizations/oauth2/v2.0/authorize?${searchParams.toString()}`;
+  const url = `https://id.twitch.tv/oauth2/authorize?${searchParams.toString()}`;

  await $.auth.set({
    url,
--- a/packages/backend/src/apps/microsoft-teams/auth/index.ts
+++ b/packages/backend/src/apps/microsoft-teams/auth/index.ts
@@ -11,10 +11,10 @@ export default {
      type: 'string' as const,
      required: true,
      readOnly: true,
-      value: '{WEB_APP_URL}/app/microsoft-teams/connections/add',
+      value: '{WEB_APP_URL}/app/twitch/connections/add',
      placeholder: null,
      description:
-        'When asked to input a redirect URL in Microsoft identity platform, enter the URL above.',
+        'When asked to input a redirect URL in Twitch, enter the URL above.',
      clickToCopy: true,
    },
    {
--- a/packages/backend/src/apps/microsoft-teams/auth/is-still-verified.ts
+++ b/packages/backend/src/apps/microsoft-teams/auth/is-still-verified.ts
@@ -1,9 +1,8 @@
 import { IGlobalVariable } from '@automatisch/types';
-import getCurrentUser from '../common/get-current-user';

 const isStillVerified = async ($: IGlobalVariable) => {
-  const currentUser = await getCurrentUser($);
-  return !!currentUser.displayName;
+  const { data } = await $.http.get('https://id.twitch.tv/oauth2/validate');
+  return !!data.login;
 };

 export default isStillVerified;
--- a/packages/backend/src/apps/microsoft-teams/auth/refresh-token.ts
+++ b/packages/backend/src/apps/microsoft-teams/auth/refresh-token.ts
@@ -11,16 +11,16 @@ const refreshToken = async ($: IGlobalVariable) => {
  });

  const { data } = await $.http.post(
-    'https://login.microsoftonline.com/organizations/oauth2/v2.0/token',
+    'https://id.twitch.tv/oauth2/token',
    params.toString()
  );

  await $.auth.set({
    accessToken: data.access_token,
+    refreshToken: data.refresh_token,
    expiresIn: data.expires_in,
    scope: authScope.join(' '),
    tokenType: data.token_type,
-    refreshToken: data.refresh_token,
  });
 };

--- a/packages/backend/src/apps/microsoft-teams/auth/verify-credentials.ts
+++ b/packages/backend/src/apps/microsoft-teams/auth/verify-credentials.ts
@@ -1,53 +1,63 @@
 import { IField, IGlobalVariable } from '@automatisch/types';
 import getCurrentUser from '../common/get-current-user';
-import authScope from '../common/auth-scope';
-import { URLSearchParams } from 'node:url';

 const verifyCredentials = async ($: IGlobalVariable) => {
  const oauthRedirectUrlField = $.app.auth.fields.find(
    (field: IField) => field.key == 'oAuthRedirectUrl'
  );
  const redirectUri = oauthRedirectUrlField.value as string;
-
-  const params = new URLSearchParams({
-    client_id: $.auth.data.clientId as string,
-    scope: authScope.join(' '),
-    code: $.auth.data.code as string,
-    redirect_uri: redirectUri,
-    grant_type: 'authorization_code',
-    client_secret: $.auth.data.clientSecret as string,
-  });
-
  const headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
  };
+  const userParams = {
+    client_id: $.auth.data.clientId,
+    client_secret: $.auth.data.clientSecret,
+    code: $.auth.data.code,
+    grant_type: 'authorization_code',
+    redirect_uri: redirectUri,
+  };

  const { data } = await $.http.post(
-    `https://login.microsoftonline.com/organizations/oauth2/v2.0/token`,
-    params.toString(),
-    { headers }
+    `https://id.twitch.tv/oauth2/token`,
+    null,
+    { headers, params: userParams }
  );

  await $.auth.set({
-    accessToken: data.access_token,
-    tokenType: data.token_type,
+    userAccessToken: data.access_token,
  });

  const currentUser = await getCurrentUser($);

-  const screenName = [currentUser.displayName, $.auth.data.mail]
+  const screenName = [currentUser.display_name, currentUser.email]
    .filter(Boolean)
    .join(' @ ');

  await $.auth.set({
    clientId: $.auth.data.clientId,
    clientSecret: $.auth.data.clientSecret,
-    scope: data.scope,
-    expiresIn: data.expires_in,
-    extExpiresIn: data.ext_expires_in,
-    refreshToken: data.refresh_token,
+    scope: $.auth.data.scope,
+    userExpiresIn: data.expires_in,
+    userRefreshToken: data.refresh_token,
    screenName,
  });
+
+  const appParams = {
+    client_id: $.auth.data.clientId,
+    client_secret: $.auth.data.clientSecret,
+    grant_type: 'client_credentials',
+  };
+
+  const response = await $.http.post(
+    `https://id.twitch.tv/oauth2/token`,
+    null,
+    { headers, params: appParams }
+  );
+
+  await $.auth.set({
+    appAccessToken: response.data.access_token,
+    appExpiresIn: response.data.expires_in,
+  });
 };

 export default verifyCredentials;
--- a/packages/backend/src/apps/twitch/common/add-auth-header.ts
+++ b/packages/backend/src/apps/twitch/common/add-auth-header.ts
@@ -0,0 +1,20 @@
+import { TBeforeRequest } from '@automatisch/types';
+
+const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
+  const clientId = $.auth.data.clientId as string;
+  let token;
+  if (requestConfig.additionalProperties?.appAccessToken) {
+    token = $.auth.data.appAccessToken;
+  } else {
+    token = $.auth.data.userAccessToken;
+  }
+
+  if (token && clientId) {
+    requestConfig.headers.Authorization = `Bearer ${token}`;
+    requestConfig.headers['Client-Id'] = clientId;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;
--- a/packages/backend/src/apps/twitch/common/auth-scope.ts
+++ b/packages/backend/src/apps/twitch/common/auth-scope.ts
@@ -0,0 +1,3 @@
+const authScope: string[] = ['user:read:email'];
+
+export default authScope;
--- a/packages/backend/src/apps/twitch/common/get-current-user.ts
+++ b/packages/backend/src/apps/twitch/common/get-current-user.ts
@@ -0,0 +1,8 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const getCurrentUser = async ($: IGlobalVariable) => {
+  const { data: currentUser } = await $.http.get('/helix/users');
+  return currentUser.data[0];
+};
+
+export default getCurrentUser;
--- a/packages/backend/src/apps/microsoft-teams/index.d.ts
+++ b/packages/backend/src/apps/microsoft-teams/index.d.ts
--- a/packages/backend/src/apps/twitch/index.ts
+++ b/packages/backend/src/apps/twitch/index.ts
@@ -0,0 +1,16 @@
+import defineApp from '../../helpers/define-app';
+import addAuthHeader from './common/add-auth-header';
+import auth from './auth';
+
+export default defineApp({
+  name: 'Twitch',
+  key: 'twitch',
+  baseUrl: 'https://www.twitch.tv',
+  apiBaseUrl: 'https://api.twitch.tv',
+  iconUrl: '{BASE_URL}/apps/twitch/assets/favicon.svg',
+  authDocUrl: 'https://automatisch.io/docs/apps/twitch/connection',
+  primaryColor: '5C16C5',
+  supportsConnections: true,
+  beforeRequest: [addAuthHeader],
+  auth,
+});
--- a/packages/docs/pages/.vitepress/config.js
+++ b/packages/docs/pages/.vitepress/config.js
@@ -188,14 +188,6 @@ export default defineConfig({
            { text: 'Connection', link: '/apps/mattermost/connection' },
          ],
        },
-        {
-          text: 'Microsoft Teams',
-          collapsible: true,
-          collapsed: true,
-          items: [
-            { text: 'Connection', link: '/apps/microsoft-teams/connection' },
-          ],
-        },
        {
          text: 'Miro',
          collapsible: true,
@@ -400,6 +392,12 @@ export default defineConfig({
            { text: 'Connection', link: '/apps/twilio/connection' },
          ],
        },
+        {
+          text: 'Twitch',
+          collapsible: true,
+          collapsed: true,
+          items: [{ text: 'Connection', link: '/apps/twitch/connection' }],
+        },
        {
          text: 'Twitter',
          collapsible: true,
--- a/packages/docs/pages/apps/microsoft-teams/connection.md
+++ b/packages/docs/pages/apps/microsoft-teams/connection.md
@@ -1,28 +0,0 @@
-# Microsoft Teams
-
-:::info
-This page explains the steps you need to follow to set up the Microsoft Teams
-connection in Automatisch. If any of the steps are outdated, please let us know!
-:::
-
-1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com).
-2. Click **Identity** from the menu on the left.
-3. Expand the **Applications** and click **App Registrations**.
-4. In this page, click on **New registrations**.
-5. Fill in the **Name** field.
-6. Select the **Accounts in any organizational directory** option.
-7. In Redirect URI, select **Web** as platform.
-8. Copy **OAuth Redirect URL** from Automatisch to the **Redirect URI** field.
-9. Click on the **Register** button at the end of the form.
-10. Go to the **Authentication** tab and select **Access tokens (used for implicit flows)** in the **Implicit grant and hybrid flows** section.
-11. Click on the **Save** button.
-12. Go to the **Overview** tab.
-13. Copy the **Application (client) ID** value to the `Client ID` field on Automatisch.
-14. In the same page, click on the **Add a certificate or secret** link.
-15. Click on the **New client secret** button.
-16. Fill in the **Description**, **Expires**, **Start**, and **End** fields.
-17. It is important to note that you need to reconnect your connection manually once the client secret expires.
-18. and click on the **Add** button.
-19. Copy the **Client Secret** value to the `Client Secret` field on Automatisch.
-20. Click **Submit** button on Automatisch.
-21. Congrats! Start using your new Microsoft Teams connection within the flows.
--- a/packages/docs/pages/apps/twitch/connection.md
+++ b/packages/docs/pages/apps/twitch/connection.md
@@ -0,0 +1,19 @@
+# Twitch
+
+:::info
+This page explains the steps you need to follow to set up the Twitch
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the [developer console](https://dev.twitch.tv/console) to register an app.
+2. Select on the **Applications** tab and click on the **Register Your Application**.
+3. Enter a name for your app.
+4. Copy **OAuth Redirect URL** from Automatisch to **OAuth Redirect URLs** field.
+5. Select a **Category** and click on the **Create** button.
+6. Go back to **Applications** tab and choose your app under **Developer Applications**.
+7. Click the **Manage**.
+8. Copy the **Your Client ID** value from the following popup to the `Client ID` field on Automatisch.
+9. Click on the **New Secret** and generate your client secret key.
+10. Copy the **Your Client Secret** value from the following popup to the `Client Secret` field on Automatisch.
+11. Click **Submit** button on Automatisch.
+12. Congrats! Start using your new Twitch connection within the flows.
--- a/packages/docs/pages/public/favicons/microsoft-teams.svg
+++ b/packages/docs/pages/public/favicons/microsoft-teams.svg
@@ -1,64 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="1024"  height="1024" >
-      <defs>
-        <linearGradient id="plate-fill" x1="-.2" y1="-.2" x2=".8" y2=".8">
-          <stop offset="0" stop-color="#5a62c4"></stop>
-          <stop offset="1" stop-color="#3940ab"></stop>
-        </linearGradient>
-        <style>
-          .cls-1{fill:#5059c9}.cls-2{fill:#7b83eb}
-        </style>
-        <filter id="person-shadow" x="-50%" y="-50%" width="300%" height="300%">
-          <feGaussianBlur in="SourceAlpha" stdDeviation="25"></feGaussianBlur>
-          <feOffset dy="25"></feOffset>
-          <feComponentTransfer>
-            <feFuncA type="linear" slope=".25"></feFuncA>
-          </feComponentTransfer>
-          <feMerge>
-            <feMergeNode></feMergeNode>
-            <feMergeNode in="SourceGraphic"></feMergeNode>
-          </feMerge>
-        </filter>
-
-
-        <filter id="back-plate-shadow" x="-50%" y="-50%" width="300%" height="300%">
-          
-	<feGaussianBlur in="SourceAlpha" stdDeviation="24"></feGaussianBlur>
-	  <feOffset dx="2" dy="24"></feOffset>
-          <feComponentTransfer>
-          <feFuncA type="linear" slope=".6"></feFuncA>
-
-          </feComponentTransfer>
-          <feMerge>
-            <feMergeNode></feMergeNode>
-            <feMergeNode in="SourceGraphic"></feMergeNode>
-          </feMerge>
-        </filter>
-        <filter id="tee-shadow" x="-50%" y="-50%" width="250%" height="250%">
-          <feGaussianBlur in="SourceAlpha" stdDeviation="12"></feGaussianBlur>
-          <feOffset dx="10" dy="20"></feOffset>
-          <feComponentTransfer>
-            <feFuncA type="linear" slope=".2"></feFuncA>
-          </feComponentTransfer>
-          <feMerge>
-            <feMergeNode></feMergeNode>
-            <feMergeNode in="SourceGraphic"></feMergeNode>
-          </feMerge>
-        </filter>
-
-       
-
-        <clipPath id="back-plate-clip">
-          <path d="M684 432H512v-49.143A112 112 0 1 0 416 272a111.556 111.556 0 0 0 10.785 48H160a32.094 32.094 0 0 0-32 32v320a32.094 32.094 0 0 0 32 32h178.67c15.236 90.8 94.2 160 189.33 160 106.039 0 192-85.961 192-192V468a36 36 0 0 0-36-36z" fill="#fff"></path>
-        </clipPath>
-      </defs>
-      <g id="small_person" filter="url(#person-shadow)">
-        <path id="Body" class="cls-1" d="M692 432h168a36 36 0 0 1 36 36v164a120 120 0 0 1-120 120 120 120 0 0 1-120-120V468a36 36 0 0 1 36-36z"></path>
-        <circle id="Head" class="cls-1" cx="776" cy="304" r="80"></circle>
-      </g>
-      <g id="Large_Person" filter="url(#person-shadow)">
-        <path id="Body-2" data-name="Body" class="cls-2" d="M372 432h312a36 36 0 0 1 36 36v204a192 192 0 0 1-192 192 192 192 0 0 1-192-192V468a36 36 0 0 1 36-36z"></path>
-        <circle id="Head-2" data-name="Head" class="cls-2" cx="528" cy="272" r="112"></circle>
-      </g>
-      <rect id="Back_Plate" x="128" y="320" width="384" height="384" rx="32" ry="32" filter="url(#back-plate-shadow)" clip-path="url(#back-plate-clip)" fill="url(#plate-fill)"></rect>
-      <path id="Letter_T" d="M399.365 445.855h-60.293v164.2h-38.418v-164.2h-60.02V414h158.73z" filter="url(#tee-shadow)" fill="#fff"></path>
-    </svg>
--- a/packages/docs/pages/public/favicons/twitch.svg
+++ b/packages/docs/pages/public/favicons/twitch.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" overflow="visible" width="40" height="40" version="1.1" viewBox="0 0 40 40" x="0px" y="0px" class="ScSvg-sc-mx5axi-2 iAAiAK"><g fill="#5C16C5"><polygon points="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animate dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate><animate dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate></polygon><polygon points="26 25 30 21 30 10 14 10 14 25 18 25 18 29 22 25" class="ScFace-sc-mx5axi-4 fDFkyX" fill="#FFFFFF"><animateTransform dur="150ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></polygon><g class="ScEyes-sc-mx5axi-5 fAMMxB" fill="#5C16C5"><path d="M20,14 L22,14 L22,20 L20,20 L20,14 Z M27,14 L27,20 L25,20 L25,14 L27,14 Z" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animateTransform dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></path></g></g></svg>
--- a/packages/e2e-tests/fixtures/admin/create-role-page.js
+++ b/packages/e2e-tests/fixtures/admin/create-role-page.js
@@ -1,106 +0,0 @@
-const { AuthenticatedPage } = require('../authenticated-page');
-const { RoleConditionsModal } = require('./role-conditions-modal');
-
-export class AdminCreateRolePage extends AuthenticatedPage {
-  screenshotPath = '/admin/create-role'
-
-  /**
-   * @param {import('@playwright/test').Page} page
-   */
-  constructor (page) {
-    super(page);
-    this.nameInput = page.getByTestId('name-input');
-    this.descriptionInput = page.getByTestId('description-input');
-    this.createButton = page.getByTestId('create-button');
-    this.connectionRow = page.getByTestId('Connection-permission-row');
-    this.executionRow = page.getByTestId('Execution-permission-row');
-    this.flowRow = page.getByTestId('Flow-permission-row');
-  }
-
-  /**
-   * @param {('Connection'|'Execution'|'Flow')} subject 
-   */
-  getRoleConditionsModal (subject) {
-    return new RoleConditionsModal(this.page, subject);
-  }
-
-  async getPermissionConfigs () {
-    const subjects = ['Connection', 'Flow', 'Execution'];
-    const permissionConfigs = [];
-    for (let subject of subjects) {
-      const row = this.getSubjectRow(subject);
-      const actionInputs = await this.getRowInputs(row);
-      Object.keys(actionInputs).forEach(action => {
-        permissionConfigs.push({
-          action,
-          locator: actionInputs[action],
-          subject,
-          row
-        });
-      });
-    }
-    return permissionConfigs;
-  }
-
-  /**
-   * 
-   * @param {(
-   *   'Connection' | 'Flow' | 'Execution'
-   * )} subject 
-   */
-  getSubjectRow (subject) {
-    const k = `${subject.toLowerCase()}Row`
-    if (this[k]) {
-      return this[k]
-    } else {
-      throw 'Unknown row'
-    }
-  }
-
-  /**
-   * @param {import('@playwright/test').Locator} row 
-   */
-  async getRowInputs (row) {
-    const inputs = {
-      // settingsButton: row.getByTestId('permission-settings-button')
-    }
-    for (let input of ['create', 'read', 'update', 'delete', 'publish']) {
-      const testId = `${input}-checkbox`
-      if (await row.getByTestId(testId).count() > 0) {
-        inputs[input] = row.getByTestId(testId).locator('input');
-      }
-    }
-    return inputs
-  }
-
-  /**
-   * @param {import('@playwright/test').Locator} row 
-   */
-  async clickPermissionSettings (row) {
-    await row.getByTestId('permission-settings-button').click();
-  }
-
-  /**
-   * 
-   * @param {string} subject 
-   * @param {'create'|'read'|'update'|'delete'|'publish'} action
-   * @param {boolean} val 
-   */
-  async updateAction (subject, action, val) {
-    const row = await this.getSubjectRow(subject);
-    const inputs = await this.getRowInputs(row);
-    if (inputs[action]) {
-      if (await inputs[action].isChecked()) {
-        if (!val) {
-          await inputs[action].click();
-        }
-      } else {
-        if (val) {
-          await inputs[action].click();
-        }
-      }
-    } else {
-      throw new Error(`${subject} does not have action ${action}`)
-    }
-  }
-}
--- a/packages/e2e-tests/fixtures/admin/delete-role-modal.js
+++ b/packages/e2e-tests/fixtures/admin/delete-role-modal.js
@@ -1,19 +0,0 @@
-export class DeleteRoleModal {
-  screenshotPath = '/admin/delete-role-modal';
-
-  /**
-   * @param {import('@playwright/test').Page} page
-   */
-  constructor (page) {
-    this.page = page;
-    this.modal = page.getByTestId('delete-role-modal');
-    this.cancelButton = this.modal.getByTestId('confirmation-cancel-button');
-    this.deleteButton = this.modal.getByTestId('confirmation-confirm-button');
-  }
-
-  async close () {
-    await this.page.click('body', {
-      position: { x: 10, y: 10 }
-    });
-  }
-}
--- a/packages/e2e-tests/fixtures/admin/edit-role-page.js
+++ b/packages/e2e-tests/fixtures/admin/edit-role-page.js
@@ -1,9 +0,0 @@
-const { AdminCreateRolePage } = require('./create-role-page')
-
-export class AdminEditRolePage extends AdminCreateRolePage {
-  constructor (page) {
-    super(page);
-    delete this.createButton;
-    this.updateButton = page.getByTestId('update-button');
-  }
-}
--- a/packages/e2e-tests/fixtures/admin/edit-user-page.js
+++ b/packages/e2e-tests/fixtures/admin/edit-user-page.js
@@ -13,7 +13,6 @@ export class AdminEditUserPage extends AuthenticatedPage {
    super(page);
    this.fullNameInput = page.getByTestId('full-name-input');
    this.emailInput = page.getByTestId('email-input');
-    this.roleInput = page.getByTestId('role.id-autocomplete');
    this.updateButton = page.getByTestId('update-button');
  }

--- a/packages/e2e-tests/fixtures/admin/index.js
+++ b/packages/e2e-tests/fixtures/admin/index.js
@@ -2,10 +2,6 @@ const { AdminCreateUserPage } = require('./create-user-page');
 const { AdminEditUserPage } = require('./edit-user-page');
 const { AdminUsersPage } = require('./users-page');

-const { AdminRolesPage } = require('./roles-page');
-const { AdminCreateRolePage } = require('./create-role-page');
-const { AdminEditRolePage } = require('./edit-role-page');
-
 export const adminFixtures = {
  adminUsersPage: async ({ page }, use) => {
    await use(new AdminUsersPage(page));
@@ -15,15 +11,5 @@ export const adminFixtures = {
  },
  adminEditUserPage: async ({page}, use) => {
    await use(new AdminEditUserPage(page));
-  },
-  adminRolesPage: async ({ page}, use) => {
-    await use(new AdminRolesPage(page));
-  },
-  adminEditRolePage: async ({ page}, use) => {
-    await use(new AdminEditRolePage(page));
-  },
-  adminCreateRolePage: async ({ page}, use) => {
-    await use(new AdminCreateRolePage(page));
-  },
+  }
 }
-
--- a/packages/e2e-tests/fixtures/admin/role-conditions-modal.js
+++ b/packages/e2e-tests/fixtures/admin/role-conditions-modal.js
@@ -1,47 +0,0 @@
-export class RoleConditionsModal {
-
-  /**
-   * @param {import('@playwright/test').Page} page 
-   * @param {('Connection'|'Execution'|'Flow')} subject
-   */
-  constructor (page, subject) {
-    this.page = page;
-    this.modal = page.getByTestId(`${subject}-role-conditions-modal`);
-    this.modalBody = this.modal.getByTestId('role-conditions-modal-body');
-    this.createCheckbox = this.modal.getByTestId(
-      'isCreator-create-checkbox'
-    ).locator('input');
-    this.readCheckbox = this.modal.getByTestId(
-      'isCreator-read-checkbox'
-    ).locator('input');
-    this.updateCheckbox = this.modal.getByTestId(
-      'isCreator-update-checkbox'
-    ).locator('input');
-    this.deleteCheckbox = this.modal.getByTestId(
-      'isCreator-delete-checkbox'
-    ).locator('input');
-    this.publishCheckbox = this.modal.getByTestId(
-      'isCreator-publish-checkbox'
-    ).locator('input');
-    this.applyButton = this.modal.getByTestId('confirmation-confirm-button');
-    this.cancelButton = this.modal.getByTestId('confirmation-cancel-button');
-  }
-
-  async getAvailableConditions () {
-    let conditions = {};
-    const actions = ['create', 'read', 'update', 'delete', 'publish'];
-    for (let action of actions) {
-      const locator = this[`${action}Checkbox`];
-      if (locator && await locator.count() > 0) {
-        conditions[action] = locator;
-      }
-    }
-    return conditions;
-  }
-
-  async close () {
-    await this.page.click('body', {
-      position: { x: 10, y: 10 }
-    });
-  }
-}
--- a/packages/e2e-tests/fixtures/admin/roles-page.js
+++ b/packages/e2e-tests/fixtures/admin/roles-page.js
@@ -1,79 +0,0 @@
-const { AuthenticatedPage } = require('../authenticated-page');
-const { DeleteRoleModal } = require('./delete-role-modal')
-
-export class AdminRolesPage extends AuthenticatedPage {
-  screenshotPath = '/admin-roles';
-
-  /**
-   * @param {import('@playwright/test').Page} page
-   */
-  constructor (page) {
-    super(page);
-    this.roleDrawerLink = page.getByTestId('roles-drawer-link');
-    this.createRoleButton = page.getByTestId('create-role');
-    this.deleteRoleModal = new DeleteRoleModal(page);
-    this.roleRow = page.getByTestId('role-row');
-    this.rolesLoader = page.getByTestId('roles-list-loader');
-  }
-
-  /**
-   * 
-   * @param {boolean} isMobile - navigation on smaller devices requires the
-   * user to open up the drawer menu 
-   */
-  async navigateTo (isMobile=false) {
-    await this.profileMenuButton.click();
-    await this.adminMenuItem.click();
-    if (isMobile) {
-      await this.drawerMenuButton.click();
-    }
-    await this.roleDrawerLink.click();
-  }
-
-  /**
-   * @param {string} name 
-   */
-  async getRoleRowByName (name) {
-    return this.roleRow.filter({
-      has: this.page.getByTestId('role-name').filter({
-        hasText: name
-      })
-    });
-  }
-
-  /**
-   * @param {import('@playwright/test').Locator} row 
-   */
-  async getRowData (row) {
-    return {
-      role: await row.getByTestId('role-name').textContent(),
-      description: await row.getByTestId('role-description').textContent(),
-      canEdit: await row.getByTestId(
-          'role-edit'
-        ).isEnabled(),
-      canDelete: await row.getByTestId(
-          'role-delete'
-        ).isEnabled()
-    }
-  }
-
-  /**
-   * @param {import('@playwright/test').Locator} row 
-   */
-  async clickEditRole (row) {
-    await row.getByTestId('role-edit').click();
-  }
-
-  /**
-   * @param {import('@playwright/test').Locator} row 
-   */
-  async clickDeleteRole (row) {
-    await row.getByTestId('role-delete').click();
-    return this.deleteRoleModal;
-  }
-
-  async editRole (subject) {
-    const row = await this.getRoleRowByName(subject);
-    await this.clickEditRole(row);
-  }
-}
--- a/packages/e2e-tests/fixtures/admin/users-page.js
+++ b/packages/e2e-tests/fixtures/admin/users-page.js
@@ -25,11 +25,6 @@ export class AdminUsersPage extends AuthenticatedPage {
  async navigateTo () {
    await this.profileMenuButton.click();
    await this.adminMenuItem.click();
-    if (await this.usersLoader.isVisible()) {
-      await this.usersLoader.waitFor({
-        state: 'detached'
-      });
-    }
  }

  /**
@@ -71,14 +66,8 @@ export class AdminUsersPage extends AuthenticatedPage {

  /**
   * @param {string} email 
-   * @returns {import('@playwright/test').Locator | null}
   */
  async findUserPageWithEmail (email) {
-    if (await this.usersLoader.isVisible()) {
-      await this.usersLoader.waitFor({
-        state: 'detached'
-      });
-    }
    // start at the first page
    const firstPageDisabled = await this.firstPageButton.isDisabled();
    if (!firstPageDisabled) {
@@ -86,11 +75,6 @@ export class AdminUsersPage extends AuthenticatedPage {
    }

    while (true) {
-      if (await this.usersLoader.isVisible()) {
-        await this.usersLoader.waitFor({
-          state: 'detached'
-        });
-      }
      const rowLocator = await this.getUserRowByEmail(email);
      if ((await rowLocator.count()) === 1) {
        return rowLocator;
--- a/packages/e2e-tests/fixtures/authenticated-page.js
+++ b/packages/e2e-tests/fixtures/authenticated-page.js
@@ -14,7 +14,6 @@ export class AuthenticatedPage extends BasePage {
    this.adminMenuItem = this.page.getByRole('menuitem', { name: 'Admin' });
    this.userInterfaceDrawerItem = this.page.getByTestId('user-interface-drawer-link');
    this.appBar = this.page.getByTestId('app-bar');
-    this.drawerMenuButton = this.page.getByTestId('drawer-menu-button');
    this.goToDashboardButton = this.page.getByTestId('go-back-drawer-link');
    this.typographyLogo = this.page.getByTestId('typography-logo');
    this.customLogo = this.page.getByTestId('custom-logo');
--- a/packages/e2e-tests/fixtures/login-page.js
+++ b/packages/e2e-tests/fixtures/login-page.js
@@ -1,19 +1,9 @@
+const path = require('node:path');
+const { expect } = require('@playwright/test');
 const { BasePage } = require('./base-page');

 export class LoginPage extends BasePage {
  path = '/login';
-  static defaultEmail = process.env.LOGIN_EMAIL;
-  static defaultPassword = process.env.LOGIN_PASSWORD;
-
-  static setDefaultLogin (email, password) {
-    this.defaultEmail = email;
-    this.defaultPassword = password;
-  }
-
-  static resetDefaultLogin () {
-    this.defaultEmail = process.env.LOGIN_EMAIL;
-    this.defaultPassword = process.env.LOGIN_PASSWORD;
-  }

  /**
   * @param {import('@playwright/test').Page} page
@@ -32,8 +22,8 @@ export class LoginPage extends BasePage {
  }

  async login(
-    email = LoginPage.defaultEmail,
-    password = LoginPage.defaultPassword
+    email = process.env.LOGIN_EMAIL,
+    password = process.env.LOGIN_PASSWORD
  ) {
    await this.page.goto(this.path);
    await this.emailTextField.fill(email);
--- a/packages/e2e-tests/tests/admin/manage-roles.spec.js
+++ b/packages/e2e-tests/tests/admin/manage-roles.spec.js
@@ -1,458 +0,0 @@
-const { test, expect } = require('../../fixtures/index');
-const { LoginPage } = require('../../fixtures/login-page');
-
-test.describe('Role management page', () => {
-  test.skip('Admin role is not deletable', async ({ adminRolesPage }) => {
-    await adminRolesPage.navigateTo();
-    const adminRow = await adminRolesPage.getRoleRowByName('Admin');
-    const rowCount = await adminRow.count();
-    await expect(rowCount).toBe(1);
-    const data = await adminRolesPage.getRowData(adminRow);
-    await expect(data.role).toBe('Admin');
-    await expect(data.canEdit).toBe(true);
-    await expect(data.canDelete).toBe(false);
-  });
-
-  test('Can create, edit, and delete a role', async ({
-    adminCreateRolePage,
-    adminEditRolePage,
-    adminRolesPage,
-    page,
-  }) => {
-    await test.step('Create a new role', async () => {
-      await adminRolesPage.navigateTo();
-      await adminRolesPage.createRoleButton.click();
-      await adminCreateRolePage.nameInput.fill('Create Edit Test');
-      await adminCreateRolePage.descriptionInput.fill('Test description');
-      await adminCreateRolePage.createButton.click();
-      await adminCreateRolePage.snackbar.waitFor({
-        state: 'attached',
-      });
-      const snackbar = await adminCreateRolePage.getSnackbarData(
-        'snackbar-create-role-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminCreateRolePage.closeSnackbar();
-    });
-
-    let roleRow = await test.step(
-      'Make sure role data is correct',
-      async () => {
-        const roleRow = await adminRolesPage.getRoleRowByName(
-          'Create Edit Test'
-        );
-        const rowCount = await roleRow.count();
-        await expect(rowCount).toBe(1);
-        const roleData = await adminRolesPage.getRowData(roleRow);
-        await expect(roleData.role).toBe('Create Edit Test');
-        await expect(roleData.description).toBe('Test description');
-        await expect(roleData.canEdit).toBe(true);
-        await expect(roleData.canDelete).toBe(true);
-        return roleRow;
-      }
-    );
-
-    await test.step('Edit the role', async () => {
-      await adminRolesPage.clickEditRole(roleRow);
-      await adminEditRolePage.nameInput.fill('Create Update Test');
-      await adminEditRolePage.descriptionInput.fill('Update test description');
-      await adminEditRolePage.updateButton.click();
-      await adminEditRolePage.snackbar.waitFor({
-        state: 'attached',
-      });
-      const snackbar = await adminEditRolePage.getSnackbarData(
-        'snackbar-edit-role-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminEditRolePage.closeSnackbar();
-    });
-
-    roleRow = await test.step(
-      'Make sure changes reflected on roles page',
-      async () => {
-        const roleRow = await adminRolesPage.getRoleRowByName(
-          'Create Update Test'
-        );
-        const rowCount = await roleRow.count();
-        await expect(rowCount).toBe(1);
-        const roleData = await adminRolesPage.getRowData(roleRow);
-        await expect(roleData.role).toBe('Create Update Test');
-        await expect(roleData.description).toBe('Update test description');
-        await expect(roleData.canEdit).toBe(true);
-        await expect(roleData.canDelete).toBe(true);
-        return roleRow;
-      }
-    );
-
-    await test.step('Delete the role', async () => {
-      await adminRolesPage.clickDeleteRole(roleRow);
-      const deleteModal = adminRolesPage.deleteRoleModal;
-      await deleteModal.modal.waitFor({
-        state: 'attached',
-      });
-      await deleteModal.deleteButton.click();
-      await adminRolesPage.snackbar.waitFor({
-        state: 'attached',
-      });
-      const snackbar = await adminRolesPage.getSnackbarData(
-        'snackbar-delete-role-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminRolesPage.closeSnackbar();
-      await deleteModal.modal.waitFor({
-        state: 'detached',
-      });
-      const rowCount = await roleRow.count();
-      await expect(rowCount).toBe(0);
-    });
-  });
-
-  // This test breaks right now
-  test.skip('Make sure create/edit role page is scrollable', async ({
-    adminRolesPage,
-    page,
-  }) => {
-    const initViewportSize = page.viewportSize;
-    await page.setViewportSize({
-      width: 800,
-      height: 400,
-    });
-
-    await test.step('Ensure create role page is scrollable', async () => {
-      await adminRolesPage.navigateTo(true);
-      await adminRolesPage.createRoleButton.click();
-
-      const initScrollTop = await page.evaluate(() => {
-        return document.documentElement.scrollTop;
-      });
-      await page.mouse.move(400, 100);
-      await page.mouse.click(400, 100);
-      await page.mouse.wheel(200, 0);
-      const updatedScrollTop = await page.evaluate(() => {
-        return document.documentElement.scrollTop;
-      });
-      await expect(initScrollTop).not.toBe(updatedScrollTop);
-    });
-
-    await test.step('Ensure edit role page is scrollable', async () => {
-      await adminRolesPage.navigateTo(true);
-      const adminRow = await adminRolesPage.getRoleRowByName('Admin');
-      await adminRolesPage.clickEditRole(adminRow);
-
-      const initScrollTop = await page.evaluate(() => {
-        return document.documentElement.scrollTop;
-      });
-      await page.mouse.move(400, 100);
-      await page.mouse.wheel(200, 0);
-      const updatedScrollTop = await page.evaluate(() => {
-        return document.documentElement.scrollTop;
-      });
-      await expect(initScrollTop).not.toBe(updatedScrollTop);
-    });
-
-    await test.step('Reset viewport', async () => {
-      await page.setViewportSize(initViewportSize);
-    });
-  });
-
-  test('Cannot delete a role with a user attached to it', async ({
-    adminCreateRolePage,
-    adminRolesPage,
-    adminUsersPage,
-    adminCreateUserPage,
-    adminEditUserPage,
-    page,
-  }) => {
-    await adminRolesPage.navigateTo();
-    await test.step('Create a new role', async () => {
-      await adminRolesPage.createRoleButton.click();
-      await adminCreateRolePage.nameInput.fill('Delete Role');
-      await adminCreateRolePage.createButton.click();
-      await adminCreateRolePage.snackbar.waitFor({
-        state: 'attached',
-      });
-      const snackbar = await adminCreateRolePage.getSnackbarData(
-        'snackbar-create-role-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminCreateRolePage.closeSnackbar();
-    });
-    await test.step(
-      'Create a new user with the "Delete Role" role',
-      async () => {
-        await adminUsersPage.navigateTo();
-        await adminUsersPage.createUserButton.click();
-        await adminCreateUserPage.fullNameInput.fill('User Role Test');
-        await adminCreateUserPage.emailInput.fill(
-          'user-role-test@automatisch.io'
-        );
-        await adminCreateUserPage.passwordInput.fill('sample');
-        await adminCreateUserPage.roleInput.click();
-        await adminCreateUserPage.page
-          .getByRole('option', { name: 'Delete Role' })
-          .click();
-        await adminCreateUserPage.createButton.click();
-        await adminUsersPage.snackbar.waitFor({
-          state: 'attached',
-        });
-        const snackbar = await adminUsersPage.getSnackbarData(
-          'snackbar-create-user-success'
-        );
-        await expect(snackbar.variant).toBe('success');
-        await adminUsersPage.closeSnackbar();
-      }
-    );
-    await test.step(
-      'Try to delete "Delete Role" role when new user has it',
-      async () => {
-        await adminRolesPage.navigateTo();
-        const row = await adminRolesPage.getRoleRowByName('Delete Role');
-        const modal = await adminRolesPage.clickDeleteRole(row);
-        await modal.deleteButton.click();
-        await adminRolesPage.snackbar.waitFor({
-          state: 'attached',
-        });
-        const snackbar = await adminRolesPage.getSnackbarData('snackbar-error');
-        await expect(snackbar.variant).toBe('error');
-        await adminRolesPage.closeSnackbar();
-        await modal.close();
-      }
-    );
-    await test.step('Change the role the user has', async () => {
-      await adminUsersPage.navigateTo();
-      await adminUsersPage.usersLoader.waitFor({
-        state: 'detached',
-      });
-      const row = await adminUsersPage.findUserPageWithEmail(
-        'user-role-test@automatisch.io'
-      );
-      await adminUsersPage.clickEditUser(row);
-      await adminEditUserPage.roleInput.click();
-      await adminEditUserPage.page
-        .getByRole('option', { name: 'Admin' })
-        .click();
-      await adminEditUserPage.updateButton.click();
-      await adminEditUserPage.snackbar.waitFor({
-        state: 'attached',
-      });
-      const snackbar = await adminEditUserPage.getSnackbarData(
-        'snackbar-edit-user-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminEditUserPage.closeSnackbar();
-    });
-    await test.step('Delete the original role', async () => {
-      await adminRolesPage.navigateTo();
-      const row = await adminRolesPage.getRoleRowByName('Delete Role');
-      const modal = await adminRolesPage.clickDeleteRole(row);
-      await expect(modal.modal).toBeVisible();
-      await modal.deleteButton.click();
-      await adminRolesPage.snackbar.waitFor({
-        state: 'attached',
-      });
-      const snackbar = await adminRolesPage.getSnackbarData(
-        'snackbar-delete-role-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminRolesPage.closeSnackbar();
-    });
-  });
-
-  test('Deleting a role after deleting a user with that role', async ({
-    adminCreateRolePage,
-    adminRolesPage,
-    adminUsersPage,
-    adminCreateUserPage,
-    page,
-  }) => {
-    await adminRolesPage.navigateTo();
-    await test.step('Create a new role', async () => {
-      await adminRolesPage.createRoleButton.click();
-      await adminCreateRolePage.nameInput.fill('Cannot Delete Role');
-      await adminCreateRolePage.createButton.click();
-      await adminCreateRolePage.snackbar.waitFor({
-        state: 'attached',
-      });
-      const snackbar = await adminCreateRolePage.getSnackbarData(
-        'snackbar-create-role-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminCreateRolePage.closeSnackbar();
-    });
-    await test.step('Create a new user with this role', async () => {
-      await adminUsersPage.navigateTo();
-      await adminUsersPage.createUserButton.click();
-      await adminCreateUserPage.fullNameInput.fill('User Delete Role Test');
-      await adminCreateUserPage.emailInput.fill(
-        'user-delete-role-test@automatisch.io'
-      );
-      await adminCreateUserPage.passwordInput.fill('sample');
-      await adminCreateUserPage.roleInput.click();
-      await adminCreateUserPage.page
-        .getByRole('option', { name: 'Cannot Delete Role' })
-        .click();
-      await adminCreateUserPage.createButton.click();
-      await adminCreateUserPage.snackbar.waitFor({
-        state: 'attached',
-      });
-      const snackbar = await adminCreateUserPage.getSnackbarData(
-        'snackbar-create-user-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminCreateUserPage.closeSnackbar();
-    });
-    await test.step('Delete this user', async () => {
-      await adminUsersPage.navigateTo();
-      const row = await adminUsersPage.findUserPageWithEmail(
-        'user-delete-role-test@automatisch.io'
-      );
-      const modal = await adminUsersPage.clickDeleteUser(row);
-      await modal.deleteButton.click();
-      await adminUsersPage.snackbar.waitFor({
-        state: 'attached',
-      });
-      const snackbar = await adminUsersPage.getSnackbarData(
-        'snackbar-delete-user-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminUsersPage.closeSnackbar();
-    });
-    await test.step('Try deleting this role', async () => {
-      await adminRolesPage.navigateTo();
-      const row = await adminRolesPage.getRoleRowByName('Cannot Delete Role');
-      const modal = await adminRolesPage.clickDeleteRole(row);
-      await modal.deleteButton.click();
-      await adminRolesPage.snackbar.waitFor({
-        state: 'attached',
-      });
-      /*
-        * TODO: await snackbar - make assertions based on product 
-        * decisions
-        const snackbar = await adminRolesPage.getSnackbarData();
-        await expect(snackbar.variant).toBe('...');
-        */
-      await adminRolesPage.closeSnackbar();
-    });
-  });
-});
-
-test('Accessibility of role management page', async ({
-  page,
-  adminUsersPage,
-  adminCreateUserPage,
-  adminEditUserPage,
-  adminRolesPage,
-  adminCreateRolePage,
-}) => {
-  test.slow();
-  await test.step('Create the basic test role', async () => {
-    await adminRolesPage.navigateTo();
-    await adminRolesPage.createRoleButton.click();
-    await adminCreateRolePage.nameInput.fill('Basic Test');
-    await adminCreateRolePage.createButton.click();
-    await adminCreateRolePage.snackbar.waitFor({
-      state: 'attached',
-    });
-    const snackbar = await adminCreateRolePage.getSnackbarData(
-      'snackbar-create-role-success'
-    );
-    await expect(snackbar.variant).toBe('success');
-    await adminCreateRolePage.closeSnackbar();
-  });
-
-  await test.step('Create a new user with the basic role', async () => {
-    await adminUsersPage.navigateTo();
-    await adminUsersPage.createUserButton.click();
-    await adminCreateUserPage.fullNameInput.fill('Role Test');
-    await adminCreateUserPage.emailInput.fill('basic-role-test@automatisch.io');
-    await adminCreateUserPage.passwordInput.fill('sample');
-    await adminCreateUserPage.roleInput.click();
-    await adminCreateUserPage.page
-      .getByRole('option', { name: 'Basic Test' })
-      .click();
-    await adminCreateUserPage.createButton.click();
-    await adminCreateUserPage.snackbar.waitFor({
-      state: 'attached',
-    });
-    const snackbar = await adminCreateUserPage.getSnackbarData(
-      'snackbar-create-user-success'
-    );
-    await expect(snackbar.variant).toBe('success');
-    await adminCreateRolePage.closeSnackbar();
-  });
-
-  await test.step('Logout and login to the basic role user', async () => {
-    await page.getByTestId('profile-menu-button').click();
-    await page.getByTestId('logout-item').click();
-    // await page.reload({ waitUntil: 'networkidle' });
-    const loginPage = new LoginPage(page);
-    await loginPage.login('basic-role-test@automatisch.io', 'sample');
-    await expect(loginPage.loginButton).not.toBeVisible();
-    await expect(page).toHaveURL('/flows');
-  });
-
-  await test.step(
-    'Navigate to the admin settings page and make sure it is blank',
-    async () => {
-      const pageUrl = new URL(page.url());
-      const url = `${pageUrl.origin}/admin-settings/users`;
-      await page.goto(url);
-      await page.waitForTimeout(750);
-      const isUnmounted = await page.evaluate(() => {
-        const root = document.querySelector('#root');
-        if (root) {
-          return root.children.length === 0;
-        }
-        return false;
-      });
-      await expect(isUnmounted).toBe(true);
-    }
-  );
-
-  await test.step('Log back into the admin account', async () => {
-    await page.goto('/');
-    await page.getByTestId('profile-menu-button').click();
-    await page.getByTestId('logout-item').click();
-    const loginPage = new LoginPage(page);
-    await loginPage.login();
-  });
-
-  await test.step('Move the user off the role', async () => {
-    await adminUsersPage.navigateTo();
-    const row = await adminUsersPage.findUserPageWithEmail(
-      'basic-role-test@automatisch.io'
-    );
-    await adminUsersPage.clickEditUser(row);
-    await adminEditUserPage.roleInput.click();
-    await adminEditUserPage.page.getByRole('option', { name: 'Admin' }).click();
-    await adminEditUserPage.updateButton.click();
-    await adminEditUserPage.snackbar.waitFor({
-      state: 'attached',
-    });
-    await adminEditUserPage.closeSnackbar();
-  });
-
-  await test.step('Delete the role', async () => {
-    await adminRolesPage.navigateTo();
-    const roleRow = await adminRolesPage.getRoleRowByName('Basic Test');
-    await adminRolesPage.clickDeleteRole(roleRow);
-    const deleteModal = adminRolesPage.deleteRoleModal;
-    await deleteModal.modal.waitFor({
-      state: 'attached',
-    });
-    await deleteModal.deleteButton.click();
-    await adminRolesPage.snackbar.waitFor({
-      state: 'attached',
-    });
-    const snackbar = await adminRolesPage.getSnackbarData(
-      'snackbar-delete-role-success'
-    );
-    await expect(snackbar.variant).toBe('success');
-    await adminRolesPage.closeSnackbar();
-    await deleteModal.modal.waitFor({
-      state: 'detached',
-    });
-    const rowCount = await roleRow.count();
-    await expect(rowCount).toBe(0);
-  });
-});
--- a/packages/e2e-tests/tests/admin/role-conditions.spec.js
+++ b/packages/e2e-tests/tests/admin/role-conditions.spec.js
@@ -1,69 +0,0 @@
-const { test, expect } = require('../../fixtures/index');
-
-test(
-  'Role permissions conform with role conditions ',
-  async({ adminRolesPage, adminCreateRolePage }) => {
-    await adminRolesPage.navigateTo();
-    await adminRolesPage.createRoleButton.click();
-    
-    /*
-    example config: {
-      action: 'read',
-      subject: 'connection',
-      row: page.getByTestId('connection-permission-row'),
-      locator: row.getByTestId('read-checkbox')
-    }
-    */
-    const permissionConfigs = 
-      await adminCreateRolePage.getPermissionConfigs();
-
-    await test.step(
-      'Iterate over each permission config and make sure role conditions conform',
-      async () => {
-        for (let config of permissionConfigs) {
-          await config.locator.click();
-          await adminCreateRolePage.clickPermissionSettings(config.row);
-          const modal = adminCreateRolePage.getRoleConditionsModal(
-            config.subject
-          );
-          await expect(modal.modal).toBeVisible();
-          const conditions = await modal.getAvailableConditions();
-          for (let conditionAction of Object.keys(conditions)) {
-            if (conditionAction === config.action) {
-              await expect(conditions[conditionAction]).not.toBeDisabled();
-            } else {
-              await expect(conditions[conditionAction]).toBeDisabled();
-            }
-          }
-          await modal.close();
-          await config.locator.click();
-        }
-      }
-    );
-  }
-);
-
-test(
-  'Default role permissions conforms with role conditions',
-  async({ adminRolesPage, adminCreateRolePage }) => {
-    await adminRolesPage.navigateTo();
-    await adminRolesPage.createRoleButton.click();
-
-    const subjects = ['Connection', 'Execution', 'Flow'];
-    for (let subject of subjects) {
-      const row = adminCreateRolePage.getSubjectRow(subject)
-      const modal = adminCreateRolePage.getRoleConditionsModal(subject);
-      await adminCreateRolePage.clickPermissionSettings(row);
-      await expect(modal.modal).toBeVisible();
-      const availableConditions = await modal.getAvailableConditions();
-      const conditions = ['create', 'read', 'update', 'delete', 'publish'];
-      for (let condition of conditions) {
-        if (availableConditions[condition]) {
-          await expect(availableConditions[condition]).toBeDisabled();
-        }
-      }
-      await modal.close();
-    }
-
-  }
-);
--- a/packages/web/src/components/AppBar/index.tsx
+++ b/packages/web/src/components/AppBar/index.tsx
@@ -56,7 +56,6 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
            aria-label="open drawer"
            onClick={drawerOpen ? onDrawerClose : onDrawerOpen}
            sx={{ mr: 2 }}
-            data-test="drawer-menu-button"
          >
            {drawerOpen && matchSmallScreens ? <MenuOpenIcon /> : <MenuIcon />}
          </IconButton>
--- a/packages/web/src/components/ConditionalIconButton/index.tsx
+++ b/packages/web/src/components/ConditionalIconButton/index.tsx
@@ -21,7 +21,6 @@ export default function ConditionalIconButton(props: any): React.ReactElement {
        component={buttonProps.component}
        to={buttonProps.to}
        disabled={buttonProps.disabled}
-        data-test={buttonProps['data-test']}
      >
        {icon}
      </IconButton>
--- a/packages/web/src/components/ControlledCheckbox/index.tsx
+++ b/packages/web/src/components/ControlledCheckbox/index.tsx
@@ -5,7 +5,6 @@ import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
 type ControlledCheckboxProps = {
  name: string;
  defaultValue?: boolean;
-  dataTest?: string;
 } & Omit<CheckboxProps, 'defaultValue'>;

 export default function ControlledCheckbox(
@@ -19,7 +18,6 @@ export default function ControlledCheckbox(
    disabled = false,
    onBlur,
    onChange,
-    dataTest,
    ...checkboxProps
  } = props;

@@ -55,7 +53,6 @@ export default function ControlledCheckbox(
              onBlur?.(...args);
            }}
            inputRef={ref}
-            data-test={dataTest}
          />
        );
      }}
--- a/packages/web/src/components/DeleteRoleButton/index.ee.tsx
+++ b/packages/web/src/components/DeleteRoleButton/index.ee.tsx
@@ -48,7 +48,6 @@ export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
            disabled={!allowed || disabled}
            onClick={() => setShowConfirmation(true)}
            size="small"
-            data-test="role-delete"
          >
            <DeleteIcon />
          </IconButton>
@@ -63,7 +62,6 @@ export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
        onConfirm={handleConfirm}
        cancelButtonChildren={formatMessage('deleteRoleButton.cancel')}
        confirmButtionChildren={formatMessage('deleteRoleButton.confirm')}
-        data-test="delete-role-modal"
      />
    </>
  );
--- a/packages/web/src/components/PermissionCatalogField/PermissionSettings.ee.tsx
+++ b/packages/web/src/components/PermissionCatalogField/PermissionSettings.ee.tsx
@@ -66,15 +66,10 @@ export default function PermissionSettings(props: PermissionSettingsProps) {
  };

  return (
-    <Dialog
-      open
-      onClose={cancel}
-      sx={{ display: open ? 'block' : 'none' }}
-      data-test={`${subject}-role-conditions-modal`}
-    >
+    <Dialog open onClose={cancel} sx={{ display: open ? 'block' : 'none' }}>
      <DialogTitle>{formatMessage('permissionSettings.title')}</DialogTitle>

-      <DialogContent data-test="role-conditions-modal-body">
+      <DialogContent>
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
@@ -118,7 +113,6 @@ export default function PermissionSettings(props: PermissionSettingsProps) {
                        {action.subjects.includes(subject) && (
                          <ControlledCheckbox
                            name={`${fieldPrefix}.${action.key}.conditions.${condition.key}`}
-                            dataTest={`${condition.key}-${action.key.toLowerCase()}-checkbox`}
                            defaultValue={defaultChecked}
                            disabled={
                              getValues(
--- a/packages/web/src/components/PermissionCatalogField/index.ee.tsx
+++ b/packages/web/src/components/PermissionCatalogField/index.ee.tsx
@@ -62,7 +62,6 @@ const PermissionCatalogField = ({
            <TableRow
              key={subject.key}
              sx={{ '&:last-child td': { border: 0 } }}
-              data-test={`${subject.key}-permission-row`}
            >
              <TableCell scope="row">
                <Typography variant="subtitle2">{subject.label}</Typography>
@@ -75,7 +74,6 @@ const PermissionCatalogField = ({
                      <ControlledCheckbox
                        disabled={disabled}
                        name={`${name}.${subject.key}.${action.key}.value`}
-                        dataTest={`${action.key.toLowerCase()}-checkbox`}
                      />
                    )}

@@ -91,7 +89,6 @@ const PermissionCatalogField = ({
                    size="small"
                    onClick={() => setDialogName(subject.key)}
                    disabled={disabled}
-                    data-test="permission-settings-button"
                  >
                    <SettingsIcon />
                  </IconButton>
--- a/packages/web/src/components/RoleList/index.ee.tsx
+++ b/packages/web/src/components/RoleList/index.ee.tsx
@@ -49,29 +49,21 @@ export default function RoleList(): React.ReactElement {
          </TableRow>
        </TableHead>
        <TableBody>
-          {loading && <ListLoader
-            rowsNumber={3}
-            columnsNumber={2}
-            data-test="roles-list-loader" />}
+          {loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
          {!loading &&
            roles.map((role) => (
              <TableRow
                key={role.id}
                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-                data-test="role-row"
              >
                <TableCell scope="row">
-                  <Typography
-                    variant="subtitle2"
-                    data-test="role-name"
-                  >{role.name}</Typography>
+                  <Typography variant="subtitle2">{role.name}</Typography>
                </TableCell>

                <TableCell scope="row">
-                  <Typography
-                    variant="subtitle2"
-                    data-test="role-description"
-                  >{role.description}</Typography>
+                  <Typography variant="subtitle2">
+                    {role.description}
+                  </Typography>
                </TableCell>

                <TableCell>
@@ -80,7 +72,6 @@ export default function RoleList(): React.ReactElement {
                      size="small"
                      component={Link}
                      to={URLS.ROLE(role.id)}
-                      data-test="role-edit"
                    >
                      <EditIcon />
                    </IconButton>
@@ -88,7 +79,6 @@ export default function RoleList(): React.ReactElement {
                    <DeleteRoleButton
                      disabled={role.isAdmin}
                      roleId={role.id}
-                      data-test="role-delete"
                    />
                  </Stack>
                </TableCell>
--- a/packages/web/src/pages/CreateRole/index.ee.tsx
+++ b/packages/web/src/pages/CreateRole/index.ee.tsx
@@ -69,14 +69,12 @@ export default function CreateRole(): React.ReactElement {
                name="name"
                label={formatMessage('roleForm.name')}
                fullWidth
-                data-test="name-input"
              />

              <TextField
                name="description"
                label={formatMessage('roleForm.description')}
                fullWidth
-                data-test="description-input"
              />

              <PermissionCatalogField
@@ -90,7 +88,6 @@ export default function CreateRole(): React.ReactElement {
                color="primary"
                sx={{ boxShadow: 2 }}
                loading={loading}
-                data-test="create-button"
              >
                {formatMessage('createRole.submit')}
              </LoadingButton>
--- a/packages/web/src/pages/EditRole/index.ee.tsx
+++ b/packages/web/src/pages/EditRole/index.ee.tsx
@@ -92,7 +92,6 @@ export default function EditRole(): React.ReactElement {
                    required={true}
                    name="name"
                    label={formatMessage('roleForm.name')}
-                    data-test="name-input"
                    fullWidth
                  />

@@ -100,7 +99,6 @@ export default function EditRole(): React.ReactElement {
                    disabled={role.isAdmin}
                    name="description"
                    label={formatMessage('roleForm.description')}
-                    data-test="description-input"
                    fullWidth
                  />
                </>
@@ -118,7 +116,6 @@ export default function EditRole(): React.ReactElement {
                sx={{ boxShadow: 2 }}
                loading={loading}
                disabled={role?.isAdmin || roleLoading}
-                data-test="update-button"
              >
                {formatMessage('editRole.submit')}
              </LoadingButton>
				`@@ -0,0 +1 @@`
				<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" overflow="visible" width="40" height="40" version="1.1" viewBox="0 0 40 40" x="0px" y="0px" class="ScSvg-sc-mx5axi-2 iAAiAK"><g fill="#5C16C5"><polygon points="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animate dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate><animate dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate></polygon><polygon points="26 25 30 21 30 10 14 10 14 25 18 25 18 29 22 25" class="ScFace-sc-mx5axi-4 fDFkyX" fill="#FFFFFF"><animateTransform dur="150ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></polygon><g class="ScEyes-sc-mx5axi-5 fAMMxB" fill="#5C16C5"><path d="M20,14 L22,14 L22,20 L20,20 L20,14 Z M27,14 L27,20 L25,20 L25,14 L27,14 Z" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animateTransform dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></path></g></g></svg>