From 104d8fe6392112a02bb31c96006a64ad07ce6242 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 17 Jan 2022 17:15:10 +0530
Subject: [PATCH] feat(gui): update webhook modal style

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../spreadsheet/components/editColumn.vue     |   4 +-
 .../components/editVirtualColumn.vue          |  23 +-
 .../spreadsheet/components/headerCell.vue     |   6 +-
 .../components/virtualHeaderCell.vue          |   2 +-
 .../spreadsheet/overlay/additinalFeatures.vue |  25 +-
 .../project/spreadsheet/views/xcGridView.vue  |  18 +-
 .../components/project/tableTabs/webhooks.vue | 481 +++++++++---------
 7 files changed, 282 insertions(+), 277 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
index 0dc93c22d4..14e3f1f649 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
@@ -4,7 +4,7 @@
     max-width="400px"
     max-height="95vh"
     style="overflow: auto"
-    class="elevation-0 card nc-col-create-or-edit-card"
+    class=" card nc-col-create-or-edit-card "
   >
     <v-form ref="form" v-model="valid">
       <v-container fluid @click.stop.prevent>
@@ -740,7 +740,7 @@ export default {
 }
 
 .card {
-  border: solid 2px #7f828b33;
+  //border: solid 2px #7f828b33;
 }
 
 .wrapper {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
index d317e30e2e..0271e7b3f1 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
@@ -4,20 +4,11 @@
     max-width="400px"
     max-height="95vh"
     style="overflow: auto"
-    class="elevation-0 card nc-col-create-or-edit-card"
+    class=" card nc-col-create-or-edit-card"
   >
     <v-form v-model="valid">
       <v-container fluid @click.stop.prevent>
         <v-row>
-          <v-col cols="12" class="d-flex pb-0">
-            <v-spacer />
-            <v-btn x-small outlined @click="close">
-              Cancel
-            </v-btn>
-            <v-btn x-small color="primary" :disabled="!valid" @click="save">
-              Save
-            </v-btn>
-          </v-col>
           <v-col cols="12">
             <v-text-field
               ref="column"
@@ -48,6 +39,15 @@
               :sql-ui="sqlUi"
             />
           </v-col>
+          <v-col cols="12" class="d-flex pt-0">
+            <v-spacer />
+            <v-btn x-small outlined @click="close">
+              Cancel
+            </v-btn>
+            <v-btn x-small color="primary" :disabled="!valid" @click="save">
+              Save
+            </v-btn>
+          </v-col>
         </v-row>
       </v-container>
     </v-form>
@@ -57,7 +57,6 @@
 <script>
 import FormulaOptions from '@/components/project/spreadsheet/components/editColumn/formulaOptions'
 import { validateColumnName } from '~/helpers'
-import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
 
 export default {
   name: 'EditVirtualColumn',
@@ -159,7 +158,7 @@ export default {
 }
 
 .card {
-  border: solid 2px #7f828b33;
+  //border: solid 2px #7f828b33;
 }
 
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
index 16f7ab9511..dd38de49fd 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
@@ -85,7 +85,7 @@
       </v-list>
     </v-menu>
 
-    <v-menu v-model="editColumnMenu" offset-y content-class="elevation-0" left>
+    <v-menu v-model="editColumnMenu" offset-y content-class="" left>
       <template #activator="{on}">
         <span v-on="on" />
       </template>
@@ -105,10 +105,10 @@
 
     <v-dialog
       v-model="columnDeleteDialog"
-      @keydown.esc="columnDeleteDialog = false"
-      @keydown.enter="deleteColumn"
       max-width="500"
       persistent
+      @keydown.esc="columnDeleteDialog = false"
+      @keydown.enter="deleteColumn"
     >
       <v-card class="nc-delete-dialog-card">
         <v-card-title class="grey darken-2 subheading white--text">
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
index fd85ad175c..4b6bb95807 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
@@ -109,7 +109,7 @@
       </v-card>
     </v-dialog>
 
-    <v-menu v-model="editColumnMenu" offset-y content-class="elevation-0" left>
+    <v-menu v-model="editColumnMenu" offset-y content-class="" left>
       <template #activator="{on}">
         <span v-on="on" />
       </template>
diff --git a/packages/nc-gui/components/project/spreadsheet/overlay/additinalFeatures.vue b/packages/nc-gui/components/project/spreadsheet/overlay/additinalFeatures.vue
index e304ab5e30..5c9a63a77e 100644
--- a/packages/nc-gui/components/project/spreadsheet/overlay/additinalFeatures.vue
+++ b/packages/nc-gui/components/project/spreadsheet/overlay/additinalFeatures.vue
@@ -1,21 +1,17 @@
 <template>
-  <v-overlay
-    v-if="show"
+  <v-dialog
+    v-model="show"
     align="center"
-    :color="$store.state.windows.darkTheme ? 'white' : 'black'"
-    :dark="$store.state.windows.darkTheme"
-    :light="!$store.state.windows.darkTheme"
     absolute
     opacity=".75"
     z-index="9"
+    width="max(90%,600px)"
   >
-    <div class="d-flex">
-      <v-spacer />
-      <v-icon color="red" x-large class="close-icon" @click="show=false">
-        mdi-close-circle
-      </v-icon>
-    </div>
-    <div style="width:95%; margin: 0 2.5%" class=" feat-container">
+    <!--    :color="$store.state.windows.darkTheme ? 'white' : 'black'"-->
+    <!--    :dark="$store.state.windows.darkTheme"-->
+    <!--    :light="!$store.state.windows.darkTheme"-->
+
+    <div class="feat-container backgroundColorDefault" style="position: relative; min-height: 500px">
       <!--    <v-card max-height="100%" min-width="95%" max-width="100%" style="overflow: auto">-->
       <!--      <v-card-text>-->
 
@@ -39,7 +35,9 @@
       />
       <webhooks
         v-else-if="type === 'webhooks'"
+        class=""
         :nodes="nodes"
+        @close="show=false"
       />
       <validation
         v-else-if="type === 'validators'"
@@ -65,8 +63,7 @@
       <!--      </v-card-text>-->
       <!--    </v-card>-->
     </div>
-  </v-overlay>
-  <span v-else />
+  </v-dialog>
 </template>
 
 <script>
diff --git a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
index 2eff601e43..7d8f7dc2f6 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
@@ -87,7 +87,7 @@
               offset-y
               z-index="99"
               left
-              content-class="elevation-0"
+              content-class=""
             >
               <template #activator="{on}">
                 <v-icon small v-on="on">
@@ -463,7 +463,7 @@ export default {
 
       switch (e.keyCode) {
         // tab
-        case 9: {
+        case 9:
           e.preventDefault()
           this.editEnabled = { col: null, row: null }
           if (e.shiftKey) {
@@ -479,7 +479,7 @@ export default {
             this.selected.row++
             this.selected.col = 0
           }
-        }
+
           break
         // delete
         case 46: {
@@ -541,12 +541,12 @@ export default {
               case 67:
                 copyTextToClipboard(rowObj[columnObj._cn] || '')
                 break
-              // paste ctrl/cmd + v
-              case 86: {
-                const text = await navigator.clipboard.readText()
-                this.$set(rowObj, columnObj._cn, text)
-              }
-                break
+                // // paste ctrl/cmd + v
+                // case 86: {
+                //   const text = await navigator.clipboard.readText()
+                //   this.$set(rowObj, columnObj._cn, text)
+                // }
+                // break
             }
           }
 
diff --git a/packages/nc-gui/components/project/tableTabs/webhooks.vue b/packages/nc-gui/components/project/tableTabs/webhooks.vue
index b718138685..fe58d0a8bc 100644
--- a/packages/nc-gui/components/project/tableTabs/webhooks.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhooks.vue
@@ -29,6 +29,17 @@
       </v-toolbar-title>
       <v-spacer />
 
+      <x-btn
+        outlined
+        tooltip="Close webhooks modal"
+        small
+        @click.prevent="$emit('close')"
+      >
+        <v-icon small left>
+          mdi-close-circle-outline
+        </v-icon>
+        Close
+      </x-btn>
       <x-btn
         v-ge="['hooks','reload']"
         outlined
@@ -75,268 +86,266 @@
       class="mx-auto"
       lazy-validation
     >
-      <v-card>
-        <v-container fluid>
-          <v-row>
-            <v-col cols="7">
-              <v-radio-group v-model="selectedHook" @change="onEventChange">
-                <template #default>
-                  <v-simple-table dense>
-                    <template #default>
-                      <thead>
-                        <tr>
-                          <th />
-                          <th>Title</th>
-                          <th>Event</th>
-                          <th>Condition</th>
-                          <th>Notify Via</th>
-                          <th>Action</th>
-                        </tr>
-                      </thead>
+      <v-container fluid>
+        <v-row>
+          <v-col cols="7">
+            <v-radio-group v-model="selectedHook" @change="onEventChange">
+              <template #default>
+                <v-simple-table dense>
+                  <template #default>
+                    <thead>
+                      <tr>
+                        <th />
+                        <th>Title</th>
+                        <th>Event</th>
+                        <th>Condition</th>
+                        <th>Notify Via</th>
+                        <th>Action</th>
+                      </tr>
+                    </thead>
 
-                      <tbody>
-                        <template v-if="hooks && hooks.length">
-                          <tr v-for="(item,i) in hooks" :key="i">
-                            <td>
-                              <v-radio :value="i" />
-                            </td>
-                            <td>{{ item.title }}</td>
-                            <td>{{ item.event }} {{ item.operation }}</td>
-                            <td>
-                              <v-icon v-if="item.condition" color="success" small>
-                                mdi-check-bold
-                              </v-icon>
-                            </td>
-                            <td>{{ item.notification && item.notification.type }}</td>
-                            <td>
-                              <x-icon small color="error" @click.stop="deleteHook(item, i)">
-                                mdi-delete
-                              </x-icon>
+                    <tbody>
+                      <template v-if="hooks && hooks.length">
+                        <tr v-for="(item,i) in hooks" :key="i">
+                          <td>
+                            <v-radio :value="i" />
+                          </td>
+                          <td>{{ item.title }}</td>
+                          <td>{{ item.event }} {{ item.operation }}</td>
+                          <td>
+                            <v-icon v-if="item.condition" color="success" small>
+                              mdi-check-bold
+                            </v-icon>
+                          </td>
+                          <td>{{ item.notification && item.notification.type }}</td>
+                          <td>
+                            <x-icon small color="error" @click.stop="deleteHook(item, i)">
+                              mdi-delete
+                            </x-icon>
                             <!--              <x-icon small :color="loading || !valid || !hook.event ?  'grey' : 'primary'"
                                                   @click.stop="(!loading && valid && hook.event) && saveHooks()">save
                                           </x-icon>-->
-                            </td>
-                          </tr>
-                        </template>
-                        <tr v-else>
-                          <td colspan="6" class="text-center py-5">
-                            <x-btn
-                              v-ge="['hooks','add new']"
-                              outlined
-                              tooltip="Save Changes"
-                              color="primary"
-                              small
-                              @click.prevent="addNewHook"
-                            >
-                              <v-icon small left>
-                                mdi-plus
-                              </v-icon>
-                              Add New Webhook
-                            </x-btn>
                           </td>
                         </tr>
-                      </tbody>
-                    </template>
-                  </v-simple-table>
+                      </template>
+                      <tr v-else>
+                        <td colspan="6" class="text-center py-5">
+                          <x-btn
+                            v-ge="['hooks','add new']"
+                            outlined
+                            tooltip="Save Changes"
+                            color="primary"
+                            small
+                            @click.prevent="addNewHook"
+                          >
+                            <v-icon small left>
+                              mdi-plus
+                            </v-icon>
+                            Add New Webhook
+                          </x-btn>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </template>
+                </v-simple-table>
+              </template>
+            </v-radio-group>
+          </v-col>
+          <v-col cols="5">
+            <v-card v-if="hook" class="">
+              <v-card-title>
+                Webhook
+                <v-spacer />
+                <x-btn
+                  v-ge="['hooks','save']"
+                  outlined
+                  tooltip="Save"
+                  color="primary"
+                  small
+
+                  :disabled="loading || !valid || !hook.event"
+                  @click.prevent="saveHooks"
+                >
+                  <v-icon small left>
+                    save
+                  </v-icon>
+                  Save
+                </x-btn>
+              </v-card-title>
+              <v-card-text>
+                <v-text-field
+                  v-model="hook.title"
+                  class="caption"
+                  outlined
+                  dense
+                  label="Title"
+                  required
+                  :rules="[v => !!v || 'Title Required']"
+                />
+
+                <webhook-event
+                  :event.sync="hook.event"
+                  :operation.sync="hook.operation"
+                />
+
+                <v-card class="mb-8">
+                  <v-card-text>
+                    <v-checkbox
+                      v-model="enableCondition"
+                      dense
+                      hide-details
+                      class="mt-1"
+                      label="On Condition"
+                      @change="checkConditionAvail"
+                    />
+
+                    <column-filter
+                      v-if="enableCondition && _isEE"
+                      v-model="hook.condition"
+                      :field-list="fieldList"
+                      dense
+                      style="max-width: 100%"
+                    />
+                  </v-card-text>
+                </v-card>
+
+                <v-select
+                  v-model="hook.notification.type"
+                  outlined
+                  dense
+                  label="Notification"
+                  required
+                  :items="notificationList"
+                  :rules="[v => !!v || 'Title Required']"
+                  class="caption"
+                  :prepend-inner-icon="notificationIcon[hook.notification.type]"
+                  @change="onNotTypeChange"
+                >
+                  <template #item="{item}">
+                    <v-list-item-icon>
+                      <v-icon small>
+                        {{ notificationIcon[item] }}
+                      </v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>
+                      {{ item }}
+                    </v-list-item-title>
+                  </template>
+                </v-select>
+
+                <template v-if="hook.notification.type === 'URL'">
+                  <http-webhook v-model="notification" />
                 </template>
-              </v-radio-group>
-            </v-col>
-            <v-col cols="5">
-              <v-card v-if="hook" class="">
-                <v-card-title>
-                  Webhook
-                  <v-spacer />
-                  <x-btn
-                    v-ge="['hooks','save']"
-                    outlined
-                    tooltip="Save"
-                    color="primary"
-                    small
 
-                    :disabled="loading || !valid || !hook.event"
-                    @click.prevent="saveHooks"
-                  >
-                    <v-icon small left>
-                      save
-                    </v-icon>
-                    Save
-                  </x-btn>
-                </v-card-title>
-                <v-card-text>
-                  <v-text-field
-                    v-model="hook.title"
+                <template v-if="hook.notification.type === 'Slack'">
+                  <v-combobox
+                    v-if="slackChannels"
+                    v-model="notification.channels"
+                    :rules="[v => !!v || 'Required']"
+                    :items="slackChannels"
+                    item-text="channel"
+                    label="Select Slack channels"
+                    multiple
+                    outlined
+                    dense
                     class="caption"
+                  />
+                </template>
+                <template v-if="hook.notification.type === 'Microsoft Teams'">
+                  <v-combobox
+                    v-if="teamsChannels"
+                    v-model="notification.channels"
+                    :rules="[v => !!v || 'Required']"
+                    :items="teamsChannels"
+                    item-text="channel"
+                    label="Select Teams channels"
+                    multiple
                     outlined
                     dense
-                    label="Title"
-                    required
-                    :rules="[v => !!v || 'Title Required']"
+                    class="caption"
                   />
-
-                  <webhook-event
-                    :event.sync="hook.event"
-                    :operation.sync="hook.operation"
+                </template>
+                <template v-if="hook.notification.type === 'Discord'">
+                  <v-combobox
+                    v-if="discordChannels"
+                    v-model="notification.channels"
+                    :rules="[v => !!v || 'Required']"
+                    :items="discordChannels"
+                    item-text="channel"
+                    label="Select Discord channels"
+                    multiple
+                    outlined
+                    dense
+                    class="caption"
                   />
-
-                  <v-card class="mb-8">
-                    <v-card-text>
-                      <v-checkbox
-                        v-model="enableCondition"
-                        dense
-                        hide-details
-                        class="mt-1"
-                        label="On Condition"
-                        @change="checkConditionAvail"
-                      />
-
-                      <column-filter
-                        v-if="enableCondition && _isEE"
-                        v-model="hook.condition"
-                        :field-list="fieldList"
-                        dense
-                        style="max-width: 100%"
-                      />
-                    </v-card-text>
-                  </v-card>
-
-                  <v-select
-                    v-model="hook.notification.type"
+                </template>
+                <template v-if="hook.notification.type === 'Mattermost'">
+                  <v-combobox
+                    v-if="mattermostChannels"
+                    v-model="notification.channels"
+                    :rules="[v => !!v || 'Required']"
+                    :items="mattermostChannels"
+                    item-text="channel"
+                    label="Select Mattermost channels"
+                    multiple
                     outlined
                     dense
-                    label="Notification"
-                    required
-                    :items="notificationList"
-                    :rules="[v => !!v || 'Title Required']"
                     class="caption"
-                    :prepend-inner-icon="notificationIcon[hook.notification.type]"
-                    @change="onNotTypeChange"
-                  >
-                    <template #item="{item}">
-                      <v-list-item-icon>
-                        <v-icon small>
-                          {{ notificationIcon[item] }}
-                        </v-icon>
-                      </v-list-item-icon>
-                      <v-list-item-title>
-                        {{ item }}
-                      </v-list-item-title>
-                    </template>
-                  </v-select>
-
-                  <template v-if="hook.notification.type === 'URL'">
-                    <http-webhook v-model="notification" />
-                  </template>
+                  />
+                </template>
 
-                  <template v-if="hook.notification.type === 'Slack'">
-                    <v-combobox
-                      v-if="slackChannels"
-                      v-model="notification.channels"
-                      :rules="[v => !!v || 'Required']"
-                      :items="slackChannels"
-                      item-text="channel"
-                      label="Select Slack channels"
-                      multiple
-                      outlined
-                      dense
+                <template v-if="inputs[hook.notification.type] && notification">
+                  <template v-for="input in inputs[hook.notification.type]">
+                    <v-textarea
+                      v-if="input.type === 'LongText'"
+                      :key="input.key"
+                      v-model="notification[input.key]"
                       class="caption"
-                    />
-                  </template>
-                  <template v-if="hook.notification.type === 'Microsoft Teams'">
-                    <v-combobox
-                      v-if="teamsChannels"
-                      v-model="notification.channels"
-                      :rules="[v => !!v || 'Required']"
-                      :items="teamsChannels"
-                      item-text="channel"
-                      label="Select Teams channels"
-                      multiple
-                      outlined
                       dense
-                      class="caption"
-                    />
-                  </template>
-                  <template v-if="hook.notification.type === 'Discord'">
-                    <v-combobox
-                      v-if="discordChannels"
-                      v-model="notification.channels"
-                      :rules="[v => !!v || 'Required']"
-                      :items="discordChannels"
-                      item-text="channel"
-                      label="Select Discord channels"
-                      multiple
                       outlined
-                      dense
-                      class="caption"
+                      :label="input.label"
+                      :rules="[v => !input.required || !!v || 'Required']"
                     />
-                  </template>
-                  <template v-if="hook.notification.type === 'Mattermost'">
-                    <v-combobox
-                      v-if="mattermostChannels"
-                      v-model="notification.channels"
-                      :rules="[v => !!v || 'Required']"
-                      :items="mattermostChannels"
-                      item-text="channel"
-                      label="Select Mattermost channels"
-                      multiple
-                      outlined
-                      dense
+                    <v-text-field
+                      v-else
+                      :key="input.key"
+                      v-model="notification[input.key]"
                       class="caption"
+                      dense
+                      outlined
+                      :label="input.label"
+                      :rules="[v => !input.required || !!v || 'Required']"
                     />
                   </template>
+                </template>
+              </v-card-text>
 
-                  <template v-if="inputs[hook.notification.type] && notification">
-                    <template v-for="input in inputs[hook.notification.type]">
-                      <v-textarea
-                        v-if="input.type === 'LongText'"
-                        :key="input.key"
-                        v-model="notification[input.key]"
-                        class="caption"
-                        dense
-                        outlined
-                        :label="input.label"
-                        :rules="[v => !input.required || !!v || 'Required']"
-                      />
-                      <v-text-field
-                        v-else
-                        :key="input.key"
-                        v-model="notification[input.key]"
-                        class="caption"
-                        dense
-                        outlined
-                        :label="input.label"
-                        :rules="[v => !input.required || !!v || 'Required']"
-                      />
+              <v-card-text>
+                <span class="caption grey--text">
+                  <em>Available context variables are <strong>data, user, payload and env</strong></em>
+                  <v-tooltip top>
+                    <template #activator="{on}">
+                      <v-icon
+                        small
+                        color="grey"
+                        class="ml-2"
+                        v-on="on"
+                      >mdi-information</v-icon>
                     </template>
-                  </template>
-                </v-card-text>
-
-                <v-card-text>
-                  <span class="caption grey--text">
-                    <em>Available context variables are <strong>data, user, payload and env</strong></em>
-                    <v-tooltip top>
-                      <template #activator="{on}">
-                        <v-icon
-                          small
-                          color="grey"
-                          class="ml-2"
-                          v-on="on"
-                        >mdi-information</v-icon>
-                      </template>
-                      <span class="caption">
-                        <strong>data</strong> : Row data <br>
-                        <strong>user</strong> : User information<br>
-                        <strong>payload</strong> : Plugin settings payload<br>
-                        <strong>env</strong> : Environment values (process.env)
+                    <span class="caption">
+                      <strong>data</strong> : Row data <br>
+                      <strong>user</strong> : User information<br>
+                      <strong>payload</strong> : Plugin settings payload<br>
+                      <strong>env</strong> : Environment values (process.env)
 
-                      </span>
-                    </v-tooltip>
-                  </span>
-                </v-card-text>
-              </v-card>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-card>
+                    </span>
+                  </v-tooltip>
+                </span>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-form>
   </div>
 </template>
@@ -521,7 +530,7 @@ export default {
       if (!this.hooks || !this.hooks.length) {
         return
       }
-      const { notification: { payload, type }, ...hook } = this.hooks[this.selectedHook]
+      const { notification: { payload, type } = {}, ...hook } = this.hooks[this.selectedHook] || {}
 
       this.hook = {
         ...hook,