Remove most traces of data-cy attributes

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -9,7 +9,6 @@
   export let longPressable = false
   export let disabled = false
   export let icon = ""
-  export let dataCy = null
   export let size = "M"
   export let active = false
   export let fullWidth = false
@@ -37,7 +36,6 @@
 </script>
 
 <button
-  data-cy={dataCy}
   use:longPress
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -6,7 +6,6 @@
   export let disabled = false
   export let align = "left"
   export let portalTarget
-  export let dataCy
 
   let anchor
   let dropdown
@@ -37,7 +36,7 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget} {dataCy}>
+<Popover bind:this={dropdown} {anchor} {align} {portalTarget}>
   <Menu>
     <slot />
   </Menu>

packages/bbui/src/Button/Button.svelte

@@ -13,7 +13,6 @@
   export let icon = undefined
   export let active = false
   export let tooltip = undefined
-  export let dataCy
   export let newStyles = true
   export let id
 
@@ -33,7 +32,6 @@
   class:disabled
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
-  data-cy={dataCy}
   on:click|preventDefault
   on:mouseover={() => (showTooltip = true)}
   on:focus={() => (showTooltip = true)}

packages/bbui/src/Form/Core/EnvDropdown.svelte

@@ -11,7 +11,6 @@
   export let id = null
   export let readonly = false
   export let updateOnChange = true
-  export let dataCy
   export let align
   export let autofocus = false
   export let variables
@@ -123,7 +122,6 @@
       disabled={hbsValue.length || disabled}
       {readonly}
       {id}
-      data-cy={dataCy}
       value={hbsValue.length ? `{{ ${hbsValue[0]} }}` : value}
       placeholder={placeholder || ""}
       on:click

packages/bbui/src/Form/Core/Switch.svelte

@@ -6,7 +6,6 @@
   export let id = null
   export let text = null
   export let disabled = false
-  export let dataCy = null
 
   const dispatch = createEventDispatcher()
   const onChange = event => {
@@ -16,7 +15,6 @@
 
 <div class="spectrum-Switch spectrum-Switch--emphasized">
   <input
-    data-cy={dataCy}
     checked={value}
     {disabled}
     on:change={onChange}

packages/bbui/src/Form/Core/TextField.svelte

@@ -11,7 +11,6 @@
   export let readonly = false
   export let updateOnChange = true
   export let quiet = false
-  export let dataCy
   export let align
   export let autofocus = false
 
@@ -89,7 +88,6 @@
     {disabled}
     {readonly}
     {id}
-    data-cy={dataCy}
     value={value || ""}
     placeholder={placeholder || ""}
     on:click

packages/bbui/src/Form/EnvDropdown.svelte

@@ -13,7 +13,6 @@
   export let error = null
   export let updateOnChange = true
   export let quiet = false
-  export let dataCy
   export let autofocus
   export let variables
   export let showModal
@@ -28,7 +27,6 @@
 
 <Field {label} {labelPosition} {error}>
   <EnvDropdown
-    {dataCy}
     {updateOnChange}
     {error}
     {disabled}

packages/bbui/src/Form/Input.svelte

@@ -13,7 +13,6 @@
   export let error = null
   export let updateOnChange = true
   export let quiet = false
-  export let dataCy
   export let autofocus
 
   const dispatch = createEventDispatcher()
@@ -25,7 +24,6 @@
 
 <Field {label} {labelPosition} {error}>
   <TextField
-    {dataCy}
     {updateOnChange}
     {error}
     {disabled}

packages/bbui/src/Form/InputDropdown.svelte

@@ -14,7 +14,6 @@
   export let error = null
   export let updateOnChange = true
   export let quiet = false
-  export let dataCy
   export let autofocus
   export let options = []
 
@@ -32,7 +31,6 @@
 
 <Field {label} {labelPosition} {error}>
   <InputDropdown
-    {dataCy}
     {updateOnChange}
     {error}
     {disabled}

packages/bbui/src/Form/PickerDropdown.svelte

@@ -21,7 +21,6 @@
   export let getSecondaryOptionColour = () => {}
   export let getSecondaryOptionIcon = () => {}
   export let quiet = false
-  export let dataCy
   export let autofocus
   export let primaryOptions = []
   export let secondaryOptions = []
@@ -98,7 +97,6 @@
   <PickerDropdown
     {searchTerm}
     {autocomplete}
-    {dataCy}
     {error}
     {disabled}
     {readonly}

packages/bbui/src/Form/Toggle.svelte

@@ -9,7 +9,6 @@
   export let text = null
   export let disabled = false
   export let error = null
-  export let dataCy = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -19,5 +18,5 @@
 </script>
 
 <Field {label} {labelPosition} {error}>
-  <Switch {dataCy} {error} {disabled} {text} {value} on:change={onChange} />
+  <Switch {error} {disabled} {text} {value} on:change={onChange} />
 </Field>

packages/bbui/src/Menu/Item.svelte

@@ -5,7 +5,6 @@
   const dispatch = createEventDispatcher()
   const actionMenu = getContext("actionMenu")
 
-  export let dataCy
   export let icon = undefined
   export let disabled = undefined
   export let noClose = false
@@ -35,7 +34,6 @@
 </script>
 
 <li
-  data-cy={dataCy}
   on:click|preventDefault={disabled ? null : onClick}
   class="spectrum-Menu-item"
   class:is-disabled={disabled}

packages/bbui/src/Modal/ModalContent.svelte

@@ -23,7 +23,7 @@
   export let secondaryButtonText = undefined
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
-  export let dataCy = null
+
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
   $: confirmDisabled = disabled || loading
@@ -63,7 +63,6 @@
   role="dialog"
   tabindex="-1"
   aria-modal="true"
-  data-cy={dataCy}
 >
   <div class="spectrum-Dialog-grid">
     {#if title || $$slots.header}

packages/bbui/src/Popover/Popover.svelte

@@ -13,7 +13,6 @@
   export let anchor
   export let align = "right"
   export let portalTarget
-  export let dataCy
   export let maxWidth
   export let direction = "bottom"
   export let showTip = false
@@ -79,7 +78,6 @@
       on:keydown={handleEscape}
       class={"spectrum-Popover is-open " + (tooltipClasses || "")}
       role="presentation"
-      data-cy={dataCy}
       transition:fly|local={{ y: -20, duration: 200 }}
     >
       <slot />

packages/bbui/src/SideNavigation/Item.svelte

@@ -8,7 +8,6 @@
   export let icon = ""
   export let selected = false
   export let disabled = false
-  export let dataCy
   export let badge = ""
 </script>
 
@@ -17,7 +16,6 @@
   class:is-selected={selected}
   class:is-disabled={disabled}
   on:click
-  data-cy={dataCy}
 >
   {#if heading}
     <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">

packages/builder/src/components/backend/DataTable/RowFieldControl.svelte

@@ -42,13 +42,7 @@
 </script>
 
 {#if type === "options" && meta.constraints.inclusion.length !== 0}
-  <Select
+  <Select {label} bind:value options={meta.constraints.inclusion} sort />
-    {label}
-    data-cy="{meta.name}-select"
-    bind:value
-    options={meta.constraints.inclusion}
-    sort
-  />
 {:else if type === "datetime"}
   <DatePicker
     {error}
@@ -61,7 +55,7 @@
 {:else if type === "attachment"}
   <Dropzone {label} {error} bind:value />
 {:else if type === "boolean"}
-  <Toggle text={label} {error} bind:value data-cy="{meta.name}-input" />
+  <Toggle text={label} {error} bind:value />
 {:else if type === "array" && meta.constraints.inclusion.length !== 0}
   <Multiselect
     bind:value
@@ -87,12 +81,5 @@
     {error}
   />
 {:else}
-  <Input
+  <Input {label} {type} {error} bind:value disabled={readonly} />
-    {label}
-    data-cy="{meta.name}-input"
-    {type}
-    {error}
-    bind:value
-    disabled={readonly}
-  />
 {/if}

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -546,9 +546,5 @@
     Your data will be deleted and this action cannot be undone - enter the column
     name to confirm.
   </p>
-  <Input
+  <Input bind:value={deleteColName} placeholder={originalName} />
-    dataCy="delete-column-confirm"
-    bind:value={deleteColName}
-    placeholder={originalName}
-  />
 </ConfirmDialog>

packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte

@@ -119,7 +119,6 @@
        selection is always undefined -->
   <Select
     label="Role"
-    data-cy="roleId-select"
     bind:value={row.roleId}
     options={$roles}
     getOptionLabel={role => role.name}

packages/builder/src/components/backend/DataTable/modals/EditRow.svelte

@@ -13,7 +13,7 @@
   }
 </script>
 
-<Button data-cy="edit-row" secondary small on:click={showModal}>Edit</Button>
+<Button secondary small on:click={showModal}>Edit</Button>
 <Modal bind:this={modal}>
   <svelte:component this={modalContentComponent} {row} />
 </Modal>

packages/builder/src/components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte

@@ -47,7 +47,6 @@
     disabled={error || !name || !datasource?.type}
   >
     <Input
-      data-cy="datasource-name-input"
       label="Datasource Name"
       on:input={checkValid}
       bind:value={name}

packages/builder/src/components/backend/TableNavigator/ListItem.svelte

@@ -6,13 +6,7 @@
   export let indented
 </script>
 
-<div
+<div class:indented class:selected on:click class={className}>
-  data-cy="table-nav-item"
-  class:indented
-  class:selected
-  on:click
-  class={className}
->
   <i class={icon} />
   <span>{title}</span>
   <slot />

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -102,7 +102,6 @@
   disabled={error || !name || (rows.length && !allValid)}
 >
   <Input
-    data-cy="table-name-input"
     thin
     label="Table Name"
     on:input={checkValid}

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -134,11 +134,7 @@
     This action cannot be undone - to continue please enter the table name below
     to confirm.
   </p>
-  <Input
+  <Input bind:value={deleteTableName} placeholder={table.name} />
-    bind:value={deleteTableName}
-    placeholder={table.name}
-    dataCy="delete-table-confirm"
-  />
 </ConfirmDialog>
 
 <style>

packages/builder/src/components/common/AppLockModal.svelte

@@ -74,7 +74,6 @@
 <Modal bind:this={appLockModal}>
   <ModalContent
     title={lockedByHeading}
-    dataCy={"app-lock-modal"}
     showConfirmButton={false}
     showCancelButton={false}
   >

packages/builder/src/components/common/ConfirmDialog.svelte

@@ -9,7 +9,6 @@
   export let onCancel = undefined
   export let warning = true
   export let disabled
-  export let dataCy = null
 
   let modal
 
@@ -29,7 +28,6 @@
     {cancelText}
     {warning}
     {disabled}
-    {dataCy}
   >
     <Body size="S">
       {body}

packages/builder/src/components/common/DashCard.svelte

@@ -4,12 +4,11 @@
   export let title = ""
   export let actionIcon
   export let action
-  export let dataCy
 
   $: actionDefined = typeof action === "function"
 </script>
 
-<div class="dash-card" data-cy={dataCy}>
+<div class="dash-card">
   <div class="dash-card-header" class:active={actionDefined} on:click={action}>
     <span class="dash-card-title">
       <Detail size="M">{title}</Detail>

packages/builder/src/components/common/TemplateDisplay.svelte

@@ -68,7 +68,7 @@
   <div class="template-categories">
     <Layout gap="XL" noPadding>
       {#each filteredCategories as category}
-        <div class="template-category" data-cy={category.name}>
+        <div class="template-category">
           <Detail size="M">{category.name}</Detail>
           <div class="template-grid">
             {#each category.templates as templateEntry}

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -66,11 +66,7 @@
     {error}
   />
   {#if !disabled}
-    <div
+    <div class="icon" on:click={bindingDrawer.show}>
-      class="icon"
-      on:click={bindingDrawer.show}
-      data-cy="text-binding-button"
-    >
       <Icon size="S" name="FlashOn" />
     </div>
   {/if}

packages/builder/src/components/common/inputs/CopyInput.svelte

@@ -3,7 +3,6 @@
 
   export let label = null
   export let value
-  export let dataCy = null
 
   const copyToClipboard = val => {
     const dummy = document.createElement("textarea")
@@ -16,7 +15,7 @@
   }
 </script>
 
-<div data-cy={dataCy}>
+<div>
   <Input readonly {value} {label} />
   <div class="icon" on:click={() => copyToClipboard(value)}>
     <Icon size="S" name="Copy" />

packages/builder/src/components/deploy/DeployModal.svelte

@@ -66,7 +66,6 @@
     title="Publish to production"
     confirmText="Publish"
     onConfirm={publishApp}
-    dataCy={"deploy-app-modal"}
   >
     The changes you have made will be published to the production version of the
     application.
@@ -88,12 +87,7 @@
 
 <!-- Publish complete -->
 <Modal bind:this={publishCompleteModal}>
-  <ModalContent
+  <ModalContent confirmText="Done" cancelText="View App" onCancel={viewApp}>
-    confirmText="Done"
-    cancelText="View App"
-    onCancel={viewApp}
-    dataCy="deploy-app-success-modal"
-  >
     <div slot="header" class="app-published-header">
       <svg
         width="26px"
@@ -105,11 +99,7 @@
       </svg>
       <span class="app-published-header-text">App Published!</span>
     </div>
-    <CopyInput
+    <CopyInput value={publishedUrl} label="You can view your app at:" />
-      value={publishedUrl}
-      label="You can view your app at:"
-      dataCy="deployed-app-url"
-    />
   </ModalContent>
 </Modal>
 

packages/builder/src/components/deploy/DeployNavigation.svelte

@@ -124,7 +124,6 @@
         bind:this={publishPopover}
         align="right"
         disabled={!isPublished}
-        dataCy="publish-popover-menu"
         showTip={true}
         anchor={publishPopoverAnchor}
       >
@@ -148,7 +147,6 @@
               icon="GlobeStrike"
               disabled={!isPublished}
               on:click={unpublishApp}
-              dataCy="publish-popover-action"
             >
               Unpublish
             </Button>
@@ -173,7 +171,6 @@
   title="Confirm unpublish"
   okText="Unpublish app"
   onOk={confirmUnpublishApp}
-  dataCy={"unpublish-modal"}
 >
   Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
 </ConfirmDialog>

packages/builder/src/components/deploy/RevertModal.svelte

@@ -33,7 +33,6 @@
   hoverable
   on:click={revertModal.show}
   tooltip="Revert changes"
-  dataCy="revert-application-topnav"
 />
 <Modal bind:this={revertModal}>
   <ModalContent

packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte

@@ -193,11 +193,7 @@
     </Drawer>
   {/if}
 </div>
-<Popover
+<Popover bind:this={dropdownRight} anchor={anchorRight}>
-  bind:this={dropdownRight}
-  anchor={anchorRight}
-  dataCy={`dataSource-popover-${$store.selectedComponentId}`}
->
   <div class="dropdown">
     <div class="title">
       <Heading size="XS">Tables</Heading>

packages/builder/src/components/design/settings/controls/IconSelect/IconSelect.svelte

@@ -121,12 +121,7 @@
     {displayValue}
   </ActionButton>
 </div>
-<Popover
+<Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
-  bind:this={dropdown}
-  on:open={setSelectedUI}
-  anchor={buttonAnchor}
-  dataCy="icon-popover"
->
   <div class="container">
     <div class="search-area">
       <div class="alphabet-area">

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -74,17 +74,13 @@
   })
 </script>
 
-<div
+<div class="property-control" class:highlighted={highlighted && nullishValue}>
-  class="property-control"
-  class:highlighted={highlighted && nullishValue}
-  data-cy={`setting-${key}`}
->
   {#if type !== "boolean" && label}
     <div class="label">
       <Label>{label}</Label>
     </div>
   {/if}
-  <div data-cy={`${key}-prop-control`} class="control">
+  <div id={`${key}-prop-control`} class="control">
     <svelte:component
       this={control}
       {componentInstance}

packages/builder/src/components/portal/onboarding/TourPopover.svelte

@@ -113,7 +113,6 @@
     align={tourStep?.align}
     bind:this={popover}
     anchor={popoverAnchor}
-    dataCy="tour-popover-menu"
     maxWidth={300}
     dismissible={false}
   >

packages/builder/src/components/settings/ProfileModal.svelte

@@ -23,14 +23,6 @@
     Personalise the platform by adding your first name and last name.
   </Body>
   <Input disabled bind:value={$auth.user.email} label="Email" />
-  <Input
+  <Input bind:value={$values.firstName} label="First name" />
-    bind:value={$values.firstName}
+  <Input bind:value={$values.lastName} label="Last name" />
-    label="First name"
-    dataCy="user-first-name"
-  />
-  <Input
-    bind:value={$values.lastName}
-    label="Last name"
-    dataCy="user-last-name"
-  />
 </ModalContent>

packages/builder/src/components/start/AppRow.svelte

@@ -30,11 +30,11 @@
 </script>
 
 <div class="app-row" on:click={handleDefaultClick}>
-  <div class="title" data-cy={`${app.devId}`}>
+  <div class="title">
     <div class="app-icon">
       <Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
     </div>
-    <div class="name" data-cy="app-name-link">
+    <div class="name">
       <Heading size="S">
         {app.name}
       </Heading>
@@ -56,7 +56,7 @@
     <Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
   </div>
 
-  <div class="app-row-actions" data-cy={`row_actions_${app.appId}`}>
+  <div class="app-row-actions">
     <AppLockModal {app} buttonSize="M" />
     <Button size="S" secondary on:click={goToOverview}>Manage</Button>
     <Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>

packages/builder/src/pages/builder/app/[application]/data/_layout.svelte

@@ -11,9 +11,7 @@
 <div class="data">
   <Panel title="Sources" borderRight>
     <Layout paddingX="L" paddingY="XL" gap="S">
-      <Button dataCy={`new-datasource`} cta on:click={modal.show}>
+      <Button cta on:click={modal.show}>Add source</Button>
-        Add source
-      </Button>
       <CreateDatasourceModal bind:modal />
       <DatasourceNavigator />
     </Layout>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -204,7 +204,7 @@
       store.actions.settings.highlight(data.setting)
 
       // Also scroll setting into view
-      const selector = `[data-cy="${data.setting}-prop-control"`
+      const selector = `#${data.setting}-prop-control`
       const element = document.querySelector(selector)?.parentElement
       if (element) {
         element.scrollIntoView({

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte

@@ -256,7 +256,6 @@
                   draggable="true"
                   on:dragstart={() => onDragStart(component.component)}
                   on:dragend={onDragEnd}
-                  data-cy={`component-${component.name}`}
                   class="component"
                   class:selected={selectedIndex ===
                     orderMap[component.component]}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte

@@ -66,7 +66,7 @@
   })
 </script>
 
-<span data-cy="data-source-modal">
+<span>
   <ModalContent
     title="Autogenerated screens"
     confirmText="Confirm"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte

@@ -33,7 +33,7 @@
           selectedScreenMode = blankScreenModeKey
         }}
       >
-        <div data-cy="blank-screen" class="content screen-type-wrap">
+        <div class="content screen-type-wrap">
           <Icon name="WebPage" />
           <div class="screen-type-text">
             <Heading size="XS">Blank screen</Heading>
@@ -60,7 +60,7 @@
         class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
           .length}
       >
-        <div data-cy="autogenerated-screens" class="content screen-type-wrap">
+        <div class="content screen-type-wrap">
           <Icon name="WebPages" />
           <div class="screen-type-text">
             <Heading size="XS">Autogenerated screens</Heading>

packages/builder/src/pages/builder/apps/index.svelte

@@ -94,7 +94,7 @@
         <Layout noPadding>
           <div class="header">
             <img class="logo" alt="logo" src={$organisation.logoUrl || Logo} />
-            <ActionMenu align="right" dataCy="user-menu">
+            <ActionMenu align="right">
               <div slot="control" class="avatar">
                 <Avatar
                   size="M"

packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte

@@ -21,33 +21,25 @@
   }
 </script>
 
-<ActionMenu align="right" dataCy="user-menu">
+<ActionMenu align="right">
   <div slot="control" class="user-dropdown">
     <Avatar size="M" initials={$auth.initials} url={$auth.user.pictureUrl} />
     <Icon size="XL" name="ChevronDown" />
   </div>
-  <MenuItem
+  <MenuItem icon="UserEdit" on:click={() => profileModal.show()}>
-    icon="UserEdit"
-    on:click={() => profileModal.show()}
-    dataCy="user-info"
-  >
     My profile
   </MenuItem>
-  <MenuItem icon="Moon" on:click={() => themeModal.show()} dataCy="theme">
+  <MenuItem icon="Moon" on:click={() => themeModal.show()}>Theme</MenuItem>
-    Theme
-  </MenuItem>
   <MenuItem icon="LockClosed" on:click={() => updatePasswordModal.show()}>
     Update password
   </MenuItem>
-  <MenuItem icon="Key" on:click={() => apiKeyModal.show()} dataCy="api-key">
+  <MenuItem icon="Key" on:click={() => apiKeyModal.show()}>
     View API key
   </MenuItem>
   <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
     Close developer mode
   </MenuItem>
-  <MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}>
+  <MenuItem icon="LogOut" on:click={logout}>Log out</MenuItem>
-    Log out
-  </MenuItem>
 </ActionMenu>
 
 <Modal bind:this={themeModal}>

packages/builder/src/pages/builder/portal/apps/create.svelte

@@ -46,20 +46,10 @@
     </Breadcrumbs>
     <Header title={$apps.length ? "Create new app" : "Create your first app"}>
       <div slot="buttons">
-        <Button
+        <Button size="M" secondary on:click={initiateAppImport}>
-          dataCy="import-app-btn"
-          size="M"
-          secondary
-          on:click={initiateAppImport}
-        >
           Import app
         </Button>
-        <Button
+        <Button size="M" cta on:click={initiateAppCreation}>
-          dataCy="create-app-btn"
-          size="M"
-          cta
-          on:click={initiateAppCreation}
-        >
           Start from scratch
         </Button>
       </div>

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -240,12 +240,7 @@
         <Layout noPadding gap="L">
           <div class="title">
             <div class="buttons">
-              <Button
+              <Button size="M" cta on:click={initiateAppCreation}>
-                dataCy="create-app-btn"
-                size="M"
-                cta
-                on:click={initiateAppCreation}
-              >
                 Create new app
               </Button>
               {#if $apps?.length > 0}
@@ -258,13 +253,7 @@
                 </Button>
               {/if}
               {#if !$apps?.length}
-                <Button
+                <Button size="L" quiet secondary on:click={initiateAppImport}>
-                  dataCy="import-app-btn"
-                  size="L"
-                  quiet
-                  secondary
-                  on:click={initiateAppImport}
-                >
                   Import app
                 </Button>
               {/if}

packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte

@@ -139,7 +139,6 @@
               secondary
               disabled={!isPublished}
               on:click={viewApp}
-              dataCy="view-app"
             >
               View
             </Button>
@@ -154,7 +153,7 @@
               Edit
             </Button>
           </span>
-          <ActionMenu align="right" dataCy="app-overview-menu-popover">
+          <ActionMenu align="right">
             <span slot="control" class="app-overview-actions-icon">
               <Icon hoverable name="More" />
             </span>
@@ -248,11 +247,7 @@
     <br />
     Please enter the app name below to confirm.
     <br /><br />
-    <Input
+    <Input bind:value={deletionConfirmationAppName} placeholder={app?.name} />
-      bind:value={deletionConfirmationAppName}
-      data-cy="delete-app-confirmation"
-      placeholder={app?.name}
-    />
   </ConfirmDialog>
 {/key}
 

packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte

@@ -104,7 +104,7 @@
 <div class="overview-tab">
   <Layout noPadding gap="XL">
     <div class="top">
-      <DashCard title={"App Status"} dataCy={"app-status"}>
+      <DashCard title={"App Status"}>
         <div class="status-content">
           <div class="status-display">
             {#if isPublished}
@@ -137,7 +137,7 @@
         </div>
       </DashCard>
       {#if appEditor}
-        <DashCard title={"Last Edited"} dataCy={"edited-by"}>
+        <DashCard title={"Last Edited"}>
           <div class="last-edited-content">
             <div class="updated-by">
               {#if appEditor}
@@ -167,9 +167,8 @@
         action={() => {
           $goto("./version")
         }}
-        dataCy={"app-version"}
       >
-        <div class="version-content" data-cy={$store.version}>
+        <div class="version-content">
           <Heading size="XS">{$store.version}</Heading>
           {#if updateAvailable}
             <div class="version-status">
@@ -195,7 +194,6 @@
           action={() => {
             $goto("./access")
           }}
-          dataCy={"access"}
         >
           {#if appUsers.length || appGroups.length}
             <Layout noPadding gap="S">
@@ -246,7 +244,6 @@
           action={() => {
             $goto("../automation-history")
           }}
-          dataCy={"automation-history"}
         >
           <div class="automation-content">
             <div class="automation-metrics">
@@ -272,7 +269,6 @@
           action={() => {
             $goto("../backups")
           }}
-          dataCy={"backups"}
         >
           <div class="backups-content">test</div>
         </DashCard>
@@ -286,7 +282,6 @@
   title="Confirm unpublish"
   okText="Unpublish app"
   onOk={confirmUnpublishApp}
-  dataCy={"unpublish-modal"}
 >
   Are you sure you want to unpublish the app <b>{app?.name}</b>?
 </ConfirmDialog>

packages/builder/src/pages/builder/portal/settings/auth/index.svelte

@@ -391,7 +391,6 @@
                 bind:value={providers.oidc.config.configs[0][field.name]}
                 readonly={field.readonly}
                 placeholder={field.placeholder}
-                dataCy={field.name}
               />
             </div>
             {#if field.copyButton}
@@ -432,7 +431,6 @@
       <div class="form-row">
         <Label size="L">Activated</Label>
         <Toggle
-          dataCy={"oidc-active"}
           text=""
           bind:value={providers.oidc.config.configs[0].activated}
         />
@@ -448,7 +446,6 @@
           on:click={() => {
             providers.oidc.config.configs[0]["scopes"] = [...defaultScopes]
           }}
-          dataCy={"restore-oidc-default-scopes"}
         >
           Restore Defaults
         </Button>
@@ -463,7 +460,6 @@
       <div class="form-row">
         <Label size="L">Auth Scopes</Label>
         <Input
-          dataCy={"new-scope-input"}
           error={scopesFields[0].error}
           placeholder={"New Scope"}
           bind:value={scopesFields[0].inputText}
@@ -532,7 +528,6 @@
         disabled={oidcSaveButtonDisabled}
         cta
         on:click={() => save([providers.oidc])}
-        dataCy="oidc-save"
       >
         Save
       </Button>

packages/builder/src/pages/builder/portal/users/users/index.svelte

@@ -222,12 +222,7 @@
   <Divider />
   <div class="controls">
     <ButtonGroup>
-      <Button
+      <Button disabled={readonly} on:click={createUserModal.show} cta>
-        disabled={readonly}
-        dataCy="add-user"
-        on:click={createUserModal.show}
-        cta
-      >
         Add users
       </Button>
       <Button disabled={readonly} on:click={importUsersModal.show} secondary>