Uses colors to visually diferenciate between used and unused filters in search filter table (Netflix#3423)

Author: mvilanova

.eslintrc.json

@@ -0,0 +1,4 @@
+"rules": {
+   "indent": ["error", "tab"],
+   "prettier/prettier": [2, { "useTabs": false }]
+}

.prettierrc

@@ -1,6 +1,8 @@
 {
+  "endOfLine": "auto",
   "printWidth": 100,
   "semi": false,
   "singleQuote": false,
-  "endOfLine": "auto"
+  "tabWidth": 2,
+  "useTabs": false
 }

src/dispatch/static/dispatch/src/search/Table.vue

@@ -44,16 +44,36 @@
           >
             <!-- TODO(mvilanova): Allow to view the list of individuals, teams, services, and notifications upon clicking on the chip -->
             <template #[`item.individuals`]="{ item }">
-              <v-chip small color="info" text-color="white">{{ item.individuals.length }}</v-chip>
+              <v-chip v-if="item.individuals.length == 0" small color="green" text-color="white">
+                {{ item.individuals.length }}
+              </v-chip>
+              <v-chip v-if="item.individuals.length > 0" small color="red" text-color="white">
+                {{ item.individuals.length }}
+              </v-chip>
             </template>
             <template #[`item.teams`]="{ item }">
-              <v-chip small color="info" text-color="white">{{ item.teams.length }}</v-chip>
+              <v-chip v-if="item.teams.length == 0" small color="green" text-color="white">
+                {{ item.teams.length }}
+              </v-chip>
+              <v-chip v-if="item.teams.length > 0" small color="red" text-color="white">
+                {{ item.teams.length }}
+              </v-chip>
             </template>
             <template #[`item.services`]="{ item }">
-              <v-chip small color="info" text-color="white">{{ item.services.length }}</v-chip>
+              <v-chip v-if="item.services.length == 0" small color="green" text-color="white">
+                {{ item.services.length }}
+              </v-chip>
+              <v-chip v-if="item.services.length > 0" small color="red" text-color="white">
+                {{ item.services.length }}
+              </v-chip>
             </template>
             <template #[`item.notifications`]="{ item }">
-              <v-chip small color="info" text-color="white">{{ item.notifications.length }}</v-chip>
+              <v-chip v-if="item.notifications.length == 0" small color="green" text-color="white">
+                {{ item.notifications.length }}
+              </v-chip>
+              <v-chip v-if="item.notifications.length > 0" small color="red" text-color="white">
+                {{ item.notifications.length }}
+              </v-chip>
             </template>
             <template #[`item.enabled`]="{ item }">
               <v-simple-checkbox v-model="item.enabled" disabled />