From 97750609a2d6f921a8a04c1bc04d3fb6d1a98b76 Mon Sep 17 00:00:00 2001
From: Manjiri Tapaswi <manjiri.tapaswi@konghq.com>
Date: Thu, 29 Feb 2024 14:33:30 -0800
Subject: [PATCH] fix(*): make filter input width take up max available space
 [KHCP-9907] (#1196)

---
 .../entities-certificates/src/components/CACertificateList.vue | 3 ++-
 .../entities-certificates/src/components/CertificateList.vue   | 3 ++-
 .../src/components/ConsumerCredentialList.vue                  | 1 +
 .../src/components/ConsumerGroupList.vue                       | 3 ++-
 .../entities-consumers/src/components/ConsumerList.vue         | 3 ++-
 .../src/components/GatewayServiceList.vue                      | 3 ++-
 .../entities/entities-key-sets/src/components/KeySetList.vue   | 3 ++-
 packages/entities/entities-keys/src/components/KeyList.vue     | 3 ++-
 .../entities/entities-plugins/src/components/PluginList.vue    | 3 ++-
 packages/entities/entities-routes/src/components/RouteList.vue | 3 ++-
 packages/entities/entities-snis/src/components/SniList.vue     | 3 ++-
 .../src/components/UpstreamsList.vue                           | 3 ++-
 packages/entities/entities-vaults/src/components/VaultList.vue | 3 ++-
 13 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
index 8ac753dfa2..0a198eb0f0 100644
--- a/packages/entities/entities-certificates/src/components/CACertificateList.vue
+++ b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-ca-certificate"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('ca-certificates.list.toolbar_actions.new_ca_certificate') }}
@@ -483,7 +484,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
index 81e07f5c6d..8adfa86ea8 100644
--- a/packages/entities/entities-certificates/src/components/CertificateList.vue
+++ b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-certificate"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('certificates.list.toolbar_actions.new_certificate') }}
@@ -550,7 +551,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
index 7bdc6665ae..ec13e12afc 100644
--- a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
+++ b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -29,6 +29,7 @@
               appearance="primary"
               data-testid="toolbar-add-credential"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t(`credentials.list.toolbar_actions.${config.plugin}.new`) }}
diff --git a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
index ab540caf8a..9b12ffb7f3 100644
--- a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
+++ b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
@@ -42,6 +42,7 @@
               appearance="primary"
               data-testid="toolbar-add-consumer-group"
               icon="plus"
+              size="large"
               :to="config.consumerId ? undefined : config.createRoute"
               @click="() => config.consumerId ? handleAddToGroupClick() : undefined"
             >
@@ -612,7 +613,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 
   .exit-modal-message {
diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
index 19ddb7412e..c204e0341e 100644
--- a/packages/entities/entities-consumers/src/components/ConsumerList.vue
+++ b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -42,6 +42,7 @@
               appearance="primary"
               data-testid="toolbar-add-consumer"
               icon="plus"
+              size="large"
               :to="config.consumerGroupId ? undefined : config.createRoute"
               @click="() => config.consumerGroupId ? handleAddConsumerClick() : undefined"
             >
@@ -626,7 +627,7 @@ onBeforeMount(async () => {
   }
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
index 9d6d2e905e..b0acf1cee4 100644
--- a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
+++ b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-gateway-service"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('gateway_services.list.toolbar_actions.new_gateway_service') }}
@@ -556,7 +557,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-key-sets/src/components/KeySetList.vue b/packages/entities/entities-key-sets/src/components/KeySetList.vue
index bc8233d5b0..dd59d1d76c 100644
--- a/packages/entities/entities-key-sets/src/components/KeySetList.vue
+++ b/packages/entities/entities-key-sets/src/components/KeySetList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-key-set"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('keySets.list.toolbar_actions.new_key_set') }}
@@ -484,7 +485,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
index c31de59b7a..26a30f71d8 100644
--- a/packages/entities/entities-keys/src/components/KeyList.vue
+++ b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-key"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('keys.list.toolbar_actions.new_key') }}
@@ -493,7 +494,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
index 0b1591610d..6c2db84ca7 100644
--- a/packages/entities/entities-plugins/src/components/PluginList.vue
+++ b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -40,6 +40,7 @@
               appearance="primary"
               data-testid="toolbar-add-plugin"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('plugins.list.toolbar_actions.new_plugin') }}
@@ -771,7 +772,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 330px;
+    margin-right: $kui-space-50;
   }
 
   .table-content-overflow-wrapper {
diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
index 715a2403c7..a7fc384b27 100644
--- a/packages/entities/entities-routes/src/components/RouteList.vue
+++ b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -39,6 +39,7 @@
               appearance="primary"
               data-testid="toolbar-add-route"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('routes.list.toolbar_actions.new_route') }}
@@ -541,7 +542,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-snis/src/components/SniList.vue b/packages/entities/entities-snis/src/components/SniList.vue
index b865fc1ca4..2cd5f4a797 100644
--- a/packages/entities/entities-snis/src/components/SniList.vue
+++ b/packages/entities/entities-snis/src/components/SniList.vue
@@ -39,6 +39,7 @@
               appearance="primary"
               data-testid="toolbar-add-sni"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('snis.list.toolbar_actions.new') }}
@@ -481,7 +482,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue b/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
index 4397d70282..58b54d3224 100644
--- a/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
+++ b/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
@@ -39,6 +39,7 @@
               appearance="primary"
               data-testid="toolbar-add-upstream"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('upstreams.list.toolbar_actions.new_upstream') }}
@@ -462,7 +463,7 @@ onBeforeMount(async () => {
 <style lang="scss" scoped>
 .kong-ui-entities-upstreams-list {
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
   .upstream-name {
     font-weight: 600;
diff --git a/packages/entities/entities-vaults/src/components/VaultList.vue b/packages/entities/entities-vaults/src/components/VaultList.vue
index daa0a9f447..dbab6cfd98 100644
--- a/packages/entities/entities-vaults/src/components/VaultList.vue
+++ b/packages/entities/entities-vaults/src/components/VaultList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-vault"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('vaults.list.toolbar_actions.new_vault') }}
@@ -482,7 +483,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 
   .table-content-overflow-wrapper {