From f13d6b5adebfc191b64612a052e683b74955b263 Mon Sep 17 00:00:00 2001
From: Stas <dashchinskiystas@gmail.com>
Date: Thu, 18 Aug 2022 19:43:20 +0300
Subject: [PATCH 1/9] feat(webapp): add settings/apps page

---
 .../Settings/Apps/AppTableItem.module.css     |   5 +
 .../components/Settings/Apps/AppTableItem.tsx |  43 +++++++
 .../components/Settings/Apps/Apps.module.css  |  18 +++
 .../components/Settings/Apps/index.tsx        |  92 +++++++++++++++
 .../javascript/components/Settings/index.tsx  |  22 ++++
 webapp/javascript/models/app.ts               |  16 +++
 webapp/javascript/redux/reducers/settings.ts  | 110 +++++++++++++++---
 webapp/javascript/services/apps.ts            |  37 ++++++
 8 files changed, 328 insertions(+), 15 deletions(-)
 create mode 100644 webapp/javascript/components/Settings/Apps/AppTableItem.module.css
 create mode 100644 webapp/javascript/components/Settings/Apps/AppTableItem.tsx
 create mode 100644 webapp/javascript/components/Settings/Apps/Apps.module.css
 create mode 100644 webapp/javascript/components/Settings/Apps/index.tsx
 create mode 100644 webapp/javascript/models/app.ts
 create mode 100644 webapp/javascript/services/apps.ts

diff --git a/webapp/javascript/components/Settings/Apps/AppTableItem.module.css b/webapp/javascript/components/Settings/Apps/AppTableItem.module.css
new file mode 100644
index 0000000000..0d7fb267ea
--- /dev/null
+++ b/webapp/javascript/components/Settings/Apps/AppTableItem.module.css
@@ -0,0 +1,5 @@
+.actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
diff --git a/webapp/javascript/components/Settings/Apps/AppTableItem.tsx b/webapp/javascript/components/Settings/Apps/AppTableItem.tsx
new file mode 100644
index 0000000000..4062906826
--- /dev/null
+++ b/webapp/javascript/components/Settings/Apps/AppTableItem.tsx
@@ -0,0 +1,43 @@
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import Button from '@webapp/ui/Button';
+import Icon from '@webapp/ui/Icon';
+import React from 'react';
+
+import confirmDelete from '@webapp/components/Modals/ConfirmDelete';
+import { App } from '@webapp/models/app';
+import cx from 'classnames';
+import styles from './AppTableItem.module.css';
+
+function DeleteButton(props: ShamefulAny) {
+  const { onDelete, app } = props;
+
+  const handleDeleteClick = () => {
+    confirmDelete('this app', () => {
+      onDelete(app);
+    });
+  };
+
+  return (
+    <Button type="button" kind="danger" onClick={handleDeleteClick}>
+      <Icon icon={faTimes} />
+    </Button>
+  );
+}
+
+function AppTableItem(props: ShamefulAny) {
+  const { app, onDelete } = props;
+  const { name } = app as App;
+
+  return (
+    <tr>
+      <th>{name}</th>
+      <td align="center">
+        <div className={styles.actions}>
+          <DeleteButton app={app} onDelete={onDelete} />
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+export default AppTableItem;
diff --git a/webapp/javascript/components/Settings/Apps/Apps.module.css b/webapp/javascript/components/Settings/Apps/Apps.module.css
new file mode 100644
index 0000000000..1a5ab0edee
--- /dev/null
+++ b/webapp/javascript/components/Settings/Apps/Apps.module.css
@@ -0,0 +1,18 @@
+.searchContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.searchContainer button {
+  padding: 5px 20px;
+}
+
+.appsTable {
+  margin: 20px 0;
+  width: 100%;
+}
+
+.appsTableEmptyMessage {
+  text-align: center;
+  color: var(--ps-ui-foreground-text);
+}
diff --git a/webapp/javascript/components/Settings/Apps/index.tsx b/webapp/javascript/components/Settings/Apps/index.tsx
new file mode 100644
index 0000000000..a821dcd5e9
--- /dev/null
+++ b/webapp/javascript/components/Settings/Apps/index.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '@webapp/redux/hooks';
+import {
+  selectApps,
+  reloadApps,
+  deleteApp,
+} from '@webapp/redux/reducers/settings';
+import { addNotification } from '@webapp/redux/reducers/notifications';
+import { type App } from '@webapp/models/app';
+import Input from '@webapp/ui/Input';
+import AppTableItem from './AppTableItem';
+
+import appsStyles from './Apps.module.css';
+import tableStyles from '../SettingsTable.module.css';
+
+function Apps() {
+  const dispatch = useAppDispatch();
+  const apps = useAppSelector(selectApps);
+  const [search, setSearchField] = useState('');
+
+  useEffect(() => {
+    dispatch(reloadApps());
+  }, []);
+  const displayApps =
+    (apps &&
+      apps.filter(
+        (x) =>
+          JSON.stringify(x).toLowerCase().indexOf(search.toLowerCase()) !== -1
+      )) ||
+    [];
+
+  const handleDeleteApp = (app: App) => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    dispatch(deleteApp(app))
+      .unwrap()
+      .then(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        dispatch(
+          addNotification({
+            type: 'success',
+            title: 'App has been deleted',
+            message: `App name#${app.name} has been successfully deleted`,
+          })
+        );
+      });
+  };
+
+  return (
+    <>
+      <h2>Apps</h2>
+      <div className={appsStyles.searchContainer}>
+        <Input
+          type="text"
+          placeholder="Search app"
+          value={search}
+          onChange={(v) => setSearchField(v.target.value)}
+          name="Search app input"
+        />
+      </div>
+      <table
+        className={[appsStyles.appsTable, tableStyles.settingsTable].join(' ')}
+        data-testid="apps-table"
+      >
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {displayApps.length ? (
+            displayApps.map((app) => (
+              <AppTableItem
+                app={app}
+                key={`appTableItem${app.name}`}
+                onDelete={handleDeleteApp}
+              />
+            ))
+          ) : (
+            <tr>
+              <td className={appsStyles.appsTableEmptyMessage} colSpan={7}>
+                The list is empty
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+export default Apps;
diff --git a/webapp/javascript/components/Settings/index.tsx b/webapp/javascript/components/Settings/index.tsx
index 8ddf97bfb1..d453ab8965 100644
--- a/webapp/javascript/components/Settings/index.tsx
+++ b/webapp/javascript/components/Settings/index.tsx
@@ -8,6 +8,7 @@ import { faKey } from '@fortawesome/free-solid-svg-icons/faKey';
 import { faLock } from '@fortawesome/free-solid-svg-icons/faLock';
 import { faSlidersH } from '@fortawesome/free-solid-svg-icons/faSlidersH';
 import { faUserAlt } from '@fortawesome/free-solid-svg-icons/faUserAlt';
+import { faNetworkWired } from '@fortawesome/free-solid-svg-icons/faNetworkWired';
 import cx from 'classnames';
 import { useAppSelector } from '@webapp/redux/hooks';
 import { selectCurrentUser } from '@webapp/redux/reducers/user';
@@ -16,6 +17,7 @@ import PageTitle from '@webapp/components/PageTitle';
 import Preferences from './Preferences';
 import Security from './Security';
 import Users from './Users';
+import Apps from './Apps';
 import ApiKeys from './APIKeys';
 
 import styles from './Settings.module.css';
@@ -93,6 +95,20 @@ function Settings() {
                   <Icon icon={faKey} /> API keys
                 </NavLink>
               </li>
+              <li>
+                <NavLink
+                  to={`${url}/apps`}
+                  className={(isActive) =>
+                    cx({
+                      [styles.navLink]: true,
+                      [styles.navLinkActive]: isActive,
+                    })
+                  }
+                  data-testid="settings-appstab"
+                >
+                  <Icon icon={faNetworkWired} /> Apps
+                </NavLink>
+              </li>
             </>
           ) : null}
         </ul>
@@ -136,6 +152,12 @@ function Settings() {
                 <APIKeyAddForm />
               </>
             </Route>
+            <Route exact path={`${path}/apps`}>
+              <>
+                <PageTitle title="Settings / Apps" />
+                <Apps />
+              </>
+            </Route>
           </Switch>
         </Box>
       </div>
diff --git a/webapp/javascript/models/app.ts b/webapp/javascript/models/app.ts
new file mode 100644
index 0000000000..ff3a2fa6c6
--- /dev/null
+++ b/webapp/javascript/models/app.ts
@@ -0,0 +1,16 @@
+import { z, ZodError } from 'zod';
+import { Result } from '@webapp/util/fp';
+import { modelToResult } from './utils';
+
+export const appModel = z.object({
+  name: z.string(),
+});
+
+export const appsModel = z.array(appModel);
+
+export type Apps = z.infer<typeof appsModel>;
+export type App = z.infer<typeof appModel>;
+
+export function parse(a: unknown): Result<Apps, ZodError> {
+  return modelToResult(appsModel, a);
+}
diff --git a/webapp/javascript/redux/reducers/settings.ts b/webapp/javascript/redux/reducers/settings.ts
index 614bc5a710..bdc2a317f8 100644
--- a/webapp/javascript/redux/reducers/settings.ts
+++ b/webapp/javascript/redux/reducers/settings.ts
@@ -1,6 +1,7 @@
 import { createSlice, combineReducers } from '@reduxjs/toolkit';
 import { Users, type User } from '@webapp/models/users';
 import { APIKey, APIKeys } from '@webapp/models/apikeys';
+import { Apps, type App } from '@webapp/models/app';
 
 import {
   fetchUsers,
@@ -15,25 +16,36 @@ import {
   createAPIKey as createAPIKeyAPI,
   deleteAPIKey as deleteAPIKeyAPI,
 } from '@webapp/services/apiKeys';
+import { fetchApps, deleteApp as deleteAppAPI } from '@webapp/services/apps';
 import type { RootState } from '@webapp/redux/store';
 import { addNotification } from './notifications';
 import { createAsyncThunk } from '../async-thunk';
 
-type UsersState = {
-  type: 'pristine' | 'loading' | 'loaded' | 'failed';
-  data?: Users;
-};
+enum FetchStatus {
+  pristine = 'pristine',
+  loading = 'loading',
+  loaded = 'loaded',
+  failed = 'failed',
+}
+type FetchedState<T> = { type: FetchStatus; data?: T };
 
+type UsersState = FetchedState<Users>;
 const usersInitialState: UsersState = {
-  type: 'pristine',
+  type: FetchStatus.pristine,
+  data: undefined,
+};
+
+type ApiKeysState = FetchedState<APIKeys>;
+const apiKeysInitialState: ApiKeysState = {
+  type: FetchStatus.pristine,
   data: undefined,
 };
 
-type ApiKeysState = {
-  type: 'pristine' | 'loading' | 'loaded' | 'failed';
-  data?: APIKeys;
+type AppsState = FetchedState<Apps>;
+const appsInitialState: AppsState = {
+  type: FetchStatus.pristine,
+  data: undefined,
 };
-const apiKeysInitialState: ApiKeysState = { type: 'pristine', data: undefined };
 
 export const reloadApiKeys = createAsyncThunk(
   'newRoot/reloadAPIKeys',
@@ -76,6 +88,28 @@ export const reloadUsers = createAsyncThunk(
   }
 );
 
+export const reloadApps = createAsyncThunk(
+  'newRoot/reloadApps',
+  async (_, thunkAPI) => {
+    const res = await fetchApps();
+
+    if (res.isOk) {
+      return Promise.resolve(res.value);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    thunkAPI.dispatch(
+      addNotification({
+        type: 'danger',
+        title: 'Failed to load apps',
+        message: res.error.message,
+      })
+    );
+
+    return Promise.reject(res.error);
+  }
+);
+
 export const enableUser = createAsyncThunk(
   'newRoot/enableUser',
   async (user: User, thunkAPI) => {
@@ -231,20 +265,44 @@ export const deleteAPIKey = createAsyncThunk(
   }
 );
 
+export const deleteApp = createAsyncThunk(
+  'newRoot/deleteApp',
+  async (app: App, thunkAPI) => {
+    const res = await deleteAppAPI({ name: app.name });
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    thunkAPI.dispatch(reloadApps());
+
+    if (res.isOk) {
+      return Promise.resolve(true);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    thunkAPI.dispatch(
+      addNotification({
+        type: 'danger',
+        title: 'Failed to delete app',
+        message: res.error.message,
+      })
+    );
+    return Promise.reject(res.error);
+  }
+);
+
 export const usersSlice = createSlice({
   name: 'users',
   initialState: usersInitialState,
   reducers: {},
   extraReducers: (builder) => {
     builder.addCase(reloadUsers.fulfilled, (state, action) => {
-      return { type: 'loaded', data: action.payload };
+      return { type: FetchStatus.loaded, data: action.payload };
     });
 
     builder.addCase(reloadUsers.pending, (state) => {
-      return { type: 'loading', data: state.data };
+      return { type: FetchStatus.loading, data: state.data };
     });
     builder.addCase(reloadUsers.rejected, (state) => {
-      return { type: 'failed', data: state.data };
+      return { type: FetchStatus.failed, data: state.data };
     });
   },
 });
@@ -255,13 +313,30 @@ export const apiKeysSlice = createSlice({
   reducers: {},
   extraReducers: (builder) => {
     builder.addCase(reloadApiKeys.fulfilled, (_, action) => {
-      return { type: 'loaded', data: action.payload };
+      return { type: FetchStatus.loaded, data: action.payload };
     });
     builder.addCase(reloadApiKeys.pending, (state) => {
-      return { type: 'loading', data: state.data };
+      return { type: FetchStatus.loading, data: state.data };
     });
     builder.addCase(reloadApiKeys.rejected, (state) => {
-      return { type: 'failed', data: state.data };
+      return { type: FetchStatus.failed, data: state.data };
+    });
+  },
+});
+
+export const appsSlice = createSlice({
+  name: 'apps',
+  initialState: appsInitialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(reloadApps.fulfilled, (_, action) => {
+      return { type: FetchStatus.loaded, data: action.payload };
+    });
+    builder.addCase(reloadApps.pending, (state) => {
+      return { type: FetchStatus.loading, data: state.data };
+    });
+    builder.addCase(reloadApps.rejected, (state) => {
+      return { type: FetchStatus.failed, data: state.data };
     });
   },
 });
@@ -274,7 +349,12 @@ export const selectUsers = (state: RootState) => state.settings.users.data;
 export const apiKeysState = (state: RootState) => state.settings.apiKeys;
 export const selectAPIKeys = (state: RootState) => state.settings.apiKeys.data;
 
+export const appsState = (state: RootState) => state.settings.apps;
+export const selectApps = (state: RootState) => state.settings.apps.data;
+
+// TODO: split setting reducers into separate files
 export default combineReducers({
   users: usersSlice.reducer,
   apiKeys: apiKeysSlice.reducer,
+  apps: appsSlice.reducer,
 });
diff --git a/webapp/javascript/services/apps.ts b/webapp/javascript/services/apps.ts
new file mode 100644
index 0000000000..c58a86afed
--- /dev/null
+++ b/webapp/javascript/services/apps.ts
@@ -0,0 +1,37 @@
+import { Apps, appsModel } from '@webapp/models/app';
+import { Result } from '@webapp/util/fp';
+import type { ZodError } from 'zod';
+import type { RequestError } from './base';
+import { parseResponse, request } from './base';
+
+export interface FetchAppsError {
+  message?: string;
+}
+
+export async function fetchApps(): Promise<
+  Result<Apps, RequestError | ZodError>
+> {
+  const response = await request('/api/apps');
+
+  if (response.isOk) {
+    return parseResponse(response, appsModel);
+  }
+
+  return Result.err<Apps, RequestError>(response.error);
+}
+
+export async function deleteApp(data: {
+  name: string;
+}): Promise<Result<boolean, RequestError | ZodError>> {
+  const { name } = data;
+  const response = await request(`/api/apps`, {
+    method: 'DELETE',
+    body: JSON.stringify({ name }),
+  });
+
+  if (response.isOk) {
+    return Result.ok(true);
+  }
+
+  return Result.err<boolean, RequestError>(response.error);
+}

From cee6097d735d0d907fca5d5bc2f503a6d5aaaecd Mon Sep 17 00:00:00 2001
From: Stas <dashchinskiystas@gmail.com>
Date: Thu, 18 Aug 2022 20:40:25 +0300
Subject: [PATCH 2/9] fix(webapp): Table component for settings/apps

---
 .../components/Settings/Apps/AppTableItem.tsx | 43 --------------
 .../Settings/Apps/getAppTableRows.tsx         | 54 +++++++++++++++++
 .../components/Settings/Apps/index.tsx        | 58 +++++++++----------
 webapp/javascript/models/app.ts               |  8 +--
 4 files changed, 82 insertions(+), 81 deletions(-)
 delete mode 100644 webapp/javascript/components/Settings/Apps/AppTableItem.tsx
 create mode 100644 webapp/javascript/components/Settings/Apps/getAppTableRows.tsx

diff --git a/webapp/javascript/components/Settings/Apps/AppTableItem.tsx b/webapp/javascript/components/Settings/Apps/AppTableItem.tsx
deleted file mode 100644
index 4062906826..0000000000
--- a/webapp/javascript/components/Settings/Apps/AppTableItem.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
-import Button from '@webapp/ui/Button';
-import Icon from '@webapp/ui/Icon';
-import React from 'react';
-
-import confirmDelete from '@webapp/components/Modals/ConfirmDelete';
-import { App } from '@webapp/models/app';
-import cx from 'classnames';
-import styles from './AppTableItem.module.css';
-
-function DeleteButton(props: ShamefulAny) {
-  const { onDelete, app } = props;
-
-  const handleDeleteClick = () => {
-    confirmDelete('this app', () => {
-      onDelete(app);
-    });
-  };
-
-  return (
-    <Button type="button" kind="danger" onClick={handleDeleteClick}>
-      <Icon icon={faTimes} />
-    </Button>
-  );
-}
-
-function AppTableItem(props: ShamefulAny) {
-  const { app, onDelete } = props;
-  const { name } = app as App;
-
-  return (
-    <tr>
-      <th>{name}</th>
-      <td align="center">
-        <div className={styles.actions}>
-          <DeleteButton app={app} onDelete={onDelete} />
-        </div>
-      </td>
-    </tr>
-  );
-}
-
-export default AppTableItem;
diff --git a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
new file mode 100644
index 0000000000..5f87b838ff
--- /dev/null
+++ b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+
+import Button from '@webapp/ui/Button';
+import Icon from '@webapp/ui/Icon';
+import { App, Apps } from '@webapp/models/app';
+import type { BodyRow } from '@webapp/ui/Table';
+
+import confirmDelete from '@webapp/components/Modals/ConfirmDelete';
+import styles from './AppTableItem.module.css';
+
+function DeleteButton(props: { onDelete: (app: App) => void; app: App }) {
+  const { onDelete, app } = props;
+
+  const handleDeleteClick = () => {
+    confirmDelete('this app', () => {
+      onDelete(app);
+    });
+  };
+
+  return (
+    <Button type="button" kind="danger" onClick={handleDeleteClick}>
+      <Icon icon={faTimes} />
+    </Button>
+  );
+}
+
+export function getAppTableRows(
+  displayApps: Apps,
+  handleDeleteApp: (app: App) => void
+): BodyRow[] {
+  const bodyRows = displayApps.reduce((acc, app) => {
+    const { name } = app;
+
+    const row = {
+      cells: [
+        { value: name },
+        {
+          value: (
+            <div className={styles.actions}>
+              <DeleteButton app={app} onDelete={handleDeleteApp} />
+            </div>
+          ),
+          align: 'center',
+        },
+      ],
+    };
+
+    acc.push(row);
+    return acc;
+  }, [] as BodyRow[]);
+
+  return bodyRows;
+}
diff --git a/webapp/javascript/components/Settings/Apps/index.tsx b/webapp/javascript/components/Settings/Apps/index.tsx
index a821dcd5e9..043f9f5d0d 100644
--- a/webapp/javascript/components/Settings/Apps/index.tsx
+++ b/webapp/javascript/components/Settings/Apps/index.tsx
@@ -8,10 +8,18 @@ import {
 import { addNotification } from '@webapp/redux/reducers/notifications';
 import { type App } from '@webapp/models/app';
 import Input from '@webapp/ui/Input';
-import AppTableItem from './AppTableItem';
+import TableUI from '@webapp/ui/Table';
+import cl from 'classnames';
 
 import appsStyles from './Apps.module.css';
-import tableStyles from '../SettingsTable.module.css';
+import tableStyles from '../SettingsTable.module.scss';
+import { getAppTableRows } from './getAppTableRows';
+
+const headRow = [
+  { name: '', label: '', sortable: 0 },
+  { name: '', label: 'Name', sortable: 0 },
+  { name: '', label: '', sortable: 0 },
+];
 
 function Apps() {
   const dispatch = useAppDispatch();
@@ -20,7 +28,7 @@ function Apps() {
 
   useEffect(() => {
     dispatch(reloadApps());
-  }, []);
+  });
   const displayApps =
     (apps &&
       apps.filter(
@@ -45,6 +53,18 @@ function Apps() {
       });
   };
 
+  const tableBodyProps =
+    displayApps.length > 0
+      ? {
+          bodyRows: getAppTableRows(displayApps, handleDeleteApp),
+          type: 'filled' as const,
+        }
+      : {
+          type: 'not-filled' as const,
+          value: 'The list is empty',
+          bodyClassName: appsStyles.appsTableEmptyMessage,
+        };
+
   return (
     <>
       <h2>Apps</h2>
@@ -57,34 +77,10 @@ function Apps() {
           name="Search app input"
         />
       </div>
-      <table
-        className={[appsStyles.appsTable, tableStyles.settingsTable].join(' ')}
-        data-testid="apps-table"
-      >
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
-          {displayApps.length ? (
-            displayApps.map((app) => (
-              <AppTableItem
-                app={app}
-                key={`appTableItem${app.name}`}
-                onDelete={handleDeleteApp}
-              />
-            ))
-          ) : (
-            <tr>
-              <td className={appsStyles.appsTableEmptyMessage} colSpan={7}>
-                The list is empty
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
+      <TableUI
+        className={cl(appsStyles.appsTable, tableStyles.settingsTable)}
+        table={{ headRow, ...tableBodyProps }}
+      />
     </>
   );
 }
diff --git a/webapp/javascript/models/app.ts b/webapp/javascript/models/app.ts
index ff3a2fa6c6..66296b4987 100644
--- a/webapp/javascript/models/app.ts
+++ b/webapp/javascript/models/app.ts
@@ -1,6 +1,4 @@
-import { z, ZodError } from 'zod';
-import { Result } from '@webapp/util/fp';
-import { modelToResult } from './utils';
+import { z } from 'zod';
 
 export const appModel = z.object({
   name: z.string(),
@@ -10,7 +8,3 @@ export const appsModel = z.array(appModel);
 
 export type Apps = z.infer<typeof appsModel>;
 export type App = z.infer<typeof appModel>;
-
-export function parse(a: unknown): Result<Apps, ZodError> {
-  return modelToResult(appsModel, a);
-}

From 66cc28df6dc973c3295e501e65807ebd888b5195 Mon Sep 17 00:00:00 2001
From: Dmitry Filimonov <dmitry@pyroscope.io>
Date: Fri, 19 Aug 2022 03:09:19 -0700
Subject: [PATCH 3/9] small improvements

---
 webapp/javascript/components/Settings/Apps/index.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/webapp/javascript/components/Settings/Apps/index.tsx b/webapp/javascript/components/Settings/Apps/index.tsx
index 043f9f5d0d..1e70844cce 100644
--- a/webapp/javascript/components/Settings/Apps/index.tsx
+++ b/webapp/javascript/components/Settings/Apps/index.tsx
@@ -16,7 +16,6 @@ import tableStyles from '../SettingsTable.module.scss';
 import { getAppTableRows } from './getAppTableRows';
 
 const headRow = [
-  { name: '', label: '', sortable: 0 },
   { name: '', label: 'Name', sortable: 0 },
   { name: '', label: '', sortable: 0 },
 ];
@@ -28,12 +27,12 @@ function Apps() {
 
   useEffect(() => {
     dispatch(reloadApps());
-  });
+  }, []);
+
   const displayApps =
     (apps &&
       apps.filter(
-        (x) =>
-          JSON.stringify(x).toLowerCase().indexOf(search.toLowerCase()) !== -1
+        (x) => x.name.toLowerCase().indexOf(search.toLowerCase()) !== -1
       )) ||
     [];
 
@@ -47,7 +46,7 @@ function Apps() {
           addNotification({
             type: 'success',
             title: 'App has been deleted',
-            message: `App name#${app.name} has been successfully deleted`,
+            message: `App ${app.name} has been successfully deleted`,
           })
         );
       });

From e73eb546d74340e139c2851e4b9cd1e5eb686462 Mon Sep 17 00:00:00 2001
From: Stas <dashchinskiystas@gmail.com>
Date: Fri, 19 Aug 2022 16:52:43 +0300
Subject: [PATCH 4/9] feat(webapp): spinner for app under deletion

---
 .../Settings/Apps/getAppTableRows.tsx         | 24 +++++++++++++++----
 .../components/Settings/Apps/index.tsx        |  9 ++++++-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
index 5f87b838ff..9b3e28e929 100644
--- a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
+++ b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
@@ -5,12 +5,19 @@ import Button from '@webapp/ui/Button';
 import Icon from '@webapp/ui/Icon';
 import { App, Apps } from '@webapp/models/app';
 import type { BodyRow } from '@webapp/ui/Table';
-
 import confirmDelete from '@webapp/components/Modals/ConfirmDelete';
+import LoadingSpinner from '@webapp/ui/LoadingSpinner';
+
 import styles from './AppTableItem.module.css';
 
-function DeleteButton(props: { onDelete: (app: App) => void; app: App }) {
-  const { onDelete, app } = props;
+interface IDeleteButtorProps {
+  onDelete: (app: App) => void;
+  isLoading: boolean;
+  app: App;
+}
+
+function DeleteButton(props: IDeleteButtorProps) {
+  const { onDelete, app, isLoading } = props;
 
   const handleDeleteClick = () => {
     confirmDelete('this app', () => {
@@ -18,7 +25,9 @@ function DeleteButton(props: { onDelete: (app: App) => void; app: App }) {
     });
   };
 
-  return (
+  return isLoading ? (
+    <LoadingSpinner />
+  ) : (
     <Button type="button" kind="danger" onClick={handleDeleteClick}>
       <Icon icon={faTimes} />
     </Button>
@@ -27,6 +36,7 @@ function DeleteButton(props: { onDelete: (app: App) => void; app: App }) {
 
 export function getAppTableRows(
   displayApps: Apps,
+  appsInProcessing: string[],
   handleDeleteApp: (app: App) => void
 ): BodyRow[] {
   const bodyRows = displayApps.reduce((acc, app) => {
@@ -38,7 +48,11 @@ export function getAppTableRows(
         {
           value: (
             <div className={styles.actions}>
-              <DeleteButton app={app} onDelete={handleDeleteApp} />
+              <DeleteButton
+                app={app}
+                onDelete={handleDeleteApp}
+                isLoading={appsInProcessing.includes(name)}
+              />
             </div>
           ),
           align: 'center',
diff --git a/webapp/javascript/components/Settings/Apps/index.tsx b/webapp/javascript/components/Settings/Apps/index.tsx
index 1e70844cce..16f093c586 100644
--- a/webapp/javascript/components/Settings/Apps/index.tsx
+++ b/webapp/javascript/components/Settings/Apps/index.tsx
@@ -24,6 +24,7 @@ function Apps() {
   const dispatch = useAppDispatch();
   const apps = useAppSelector(selectApps);
   const [search, setSearchField] = useState('');
+  const [appsInProcessing, setAppsInProcessing] = useState([] as string[]);
 
   useEffect(() => {
     dispatch(reloadApps());
@@ -37,10 +38,12 @@ function Apps() {
     [];
 
   const handleDeleteApp = (app: App) => {
+    setAppsInProcessing([...appsInProcessing, app.name]);
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     dispatch(deleteApp(app))
       .unwrap()
       .then(() => {
+        setAppsInProcessing(appsInProcessing.filter((x) => x !== app.name));
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         dispatch(
           addNotification({
@@ -55,7 +58,11 @@ function Apps() {
   const tableBodyProps =
     displayApps.length > 0
       ? {
-          bodyRows: getAppTableRows(displayApps, handleDeleteApp),
+          bodyRows: getAppTableRows(
+            displayApps,
+            appsInProcessing,
+            handleDeleteApp
+          ),
           type: 'filled' as const,
         }
       : {

From d128322b28f8efa5571c6af631ccd44b7224d7f0 Mon Sep 17 00:00:00 2001
From: Stas <dashchinskiystas@gmail.com>
Date: Mon, 22 Aug 2022 12:11:07 +0300
Subject: [PATCH 5/9] fix(webapp): spinner's logic and styles for apps page

---
 .../Settings/Apps/AppTableItem.module.css     |  6 ++++-
 .../components/Settings/Apps/Apps.module.css  |  6 +++++
 .../Settings/Apps/getAppTableRows.tsx         |  2 +-
 .../components/Settings/Apps/index.tsx        | 23 +++++++++++++++----
 webapp/javascript/redux/reducers/settings.ts  |  4 +++-
 webapp/javascript/ui/LoadingSpinner.tsx       |  8 +++++--
 webapp/javascript/ui/Table.module.scss        |  5 ++++
 webapp/javascript/ui/Table.tsx                |  9 +++++++-
 8 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/webapp/javascript/components/Settings/Apps/AppTableItem.module.css b/webapp/javascript/components/Settings/Apps/AppTableItem.module.css
index 0d7fb267ea..52588664e8 100644
--- a/webapp/javascript/components/Settings/Apps/AppTableItem.module.css
+++ b/webapp/javascript/components/Settings/Apps/AppTableItem.module.css
@@ -1,5 +1,9 @@
 .actions {
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: right;
+}
+
+.loadingIcon {
+  margin-right: 8px;
 }
diff --git a/webapp/javascript/components/Settings/Apps/Apps.module.css b/webapp/javascript/components/Settings/Apps/Apps.module.css
index 1a5ab0edee..6496643173 100644
--- a/webapp/javascript/components/Settings/Apps/Apps.module.css
+++ b/webapp/javascript/components/Settings/Apps/Apps.module.css
@@ -3,6 +3,12 @@
   flex-direction: column;
 }
 
+.tabNameContrainer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 .searchContainer button {
   padding: 5px 20px;
 }
diff --git a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
index 9b3e28e929..98e08cd112 100644
--- a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
+++ b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
@@ -26,7 +26,7 @@ function DeleteButton(props: IDeleteButtorProps) {
   };
 
   return isLoading ? (
-    <LoadingSpinner />
+    <LoadingSpinner className={styles.loadingIcon} />
   ) : (
     <Button type="button" kind="danger" onClick={handleDeleteClick}>
       <Icon icon={faTimes} />
diff --git a/webapp/javascript/components/Settings/Apps/index.tsx b/webapp/javascript/components/Settings/Apps/index.tsx
index 16f093c586..3e84ccbb17 100644
--- a/webapp/javascript/components/Settings/Apps/index.tsx
+++ b/webapp/javascript/components/Settings/Apps/index.tsx
@@ -1,19 +1,21 @@
 import React, { useEffect, useState } from 'react';
+import cl from 'classnames';
 import { useAppDispatch, useAppSelector } from '@webapp/redux/hooks';
 import {
   selectApps,
   reloadApps,
   deleteApp,
+  selectIsLoadingApps,
 } from '@webapp/redux/reducers/settings';
 import { addNotification } from '@webapp/redux/reducers/notifications';
 import { type App } from '@webapp/models/app';
 import Input from '@webapp/ui/Input';
 import TableUI from '@webapp/ui/Table';
-import cl from 'classnames';
+import LoadingSpinner from '@webapp/ui/LoadingSpinner';
+import { getAppTableRows } from './getAppTableRows';
 
 import appsStyles from './Apps.module.css';
 import tableStyles from '../SettingsTable.module.scss';
-import { getAppTableRows } from './getAppTableRows';
 
 const headRow = [
   { name: '', label: 'Name', sortable: 0 },
@@ -23,8 +25,10 @@ const headRow = [
 function Apps() {
   const dispatch = useAppDispatch();
   const apps = useAppSelector(selectApps);
+  const isLoading = useAppSelector(selectIsLoadingApps);
   const [search, setSearchField] = useState('');
   const [appsInProcessing, setAppsInProcessing] = useState([] as string[]);
+  const [deletedApps, setDeletedApps] = useState([] as string[]);
 
   useEffect(() => {
     dispatch(reloadApps());
@@ -33,7 +37,9 @@ function Apps() {
   const displayApps =
     (apps &&
       apps.filter(
-        (x) => x.name.toLowerCase().indexOf(search.toLowerCase()) !== -1
+        (x) =>
+          x.name.toLowerCase().indexOf(search.toLowerCase()) !== -1 &&
+          !deletedApps.includes(x.name)
       )) ||
     [];
 
@@ -44,6 +50,7 @@ function Apps() {
       .unwrap()
       .then(() => {
         setAppsInProcessing(appsInProcessing.filter((x) => x !== app.name));
+        setDeletedApps([...deletedApps, app.name]);
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         dispatch(
           addNotification({
@@ -52,6 +59,10 @@ function Apps() {
             message: `App ${app.name} has been successfully deleted`,
           })
         );
+      })
+      .catch(() => {
+        setDeletedApps(deletedApps.filter((x) => x !== app.name));
+        setAppsInProcessing(appsInProcessing.filter((x) => x !== app.name));
       });
   };
 
@@ -73,7 +84,10 @@ function Apps() {
 
   return (
     <>
-      <h2>Apps</h2>
+      <h2 className={appsStyles.tabNameContrainer}>
+        Apps
+        {isLoading && !!apps ? <LoadingSpinner /> : null}
+      </h2>
       <div className={appsStyles.searchContainer}>
         <Input
           type="text"
@@ -86,6 +100,7 @@ function Apps() {
       <TableUI
         className={cl(appsStyles.appsTable, tableStyles.settingsTable)}
         table={{ headRow, ...tableBodyProps }}
+        isLoading={isLoading && !apps}
       />
     </>
   );
diff --git a/webapp/javascript/redux/reducers/settings.ts b/webapp/javascript/redux/reducers/settings.ts
index bdc2a317f8..1fdd30de0f 100644
--- a/webapp/javascript/redux/reducers/settings.ts
+++ b/webapp/javascript/redux/reducers/settings.ts
@@ -351,8 +351,10 @@ export const selectAPIKeys = (state: RootState) => state.settings.apiKeys.data;
 
 export const appsState = (state: RootState) => state.settings.apps;
 export const selectApps = (state: RootState) => state.settings.apps.data;
+export const selectIsLoadingApps = (state: RootState) => {
+  return state.settings.apps.type === FetchStatus.loading;
+};
 
-// TODO: split setting reducers into separate files
 export default combineReducers({
   users: usersSlice.reducer,
   apiKeys: apiKeysSlice.reducer,
diff --git a/webapp/javascript/ui/LoadingSpinner.tsx b/webapp/javascript/ui/LoadingSpinner.tsx
index 16593d92eb..24f049ad71 100644
--- a/webapp/javascript/ui/LoadingSpinner.tsx
+++ b/webapp/javascript/ui/LoadingSpinner.tsx
@@ -3,10 +3,14 @@ import React from 'react';
 // @ts-ignore
 import Spinner from 'react-svg-spinner';
 
-export default function LoadingSpinner() {
+interface LoadingSpinnerProps {
+  className?: string;
+}
+
+export default function LoadingSpinner({ className }: LoadingSpinnerProps) {
   // TODO ditch the library and create ourselves
   return (
-    <span role="progressbar">
+    <span role="progressbar" className={className}>
       <Spinner color="rgba(255,255,255,0.6)" size="20px" />
     </span>
   );
diff --git a/webapp/javascript/ui/Table.module.scss b/webapp/javascript/ui/Table.module.scss
index af632d6f21..3f36340a32 100644
--- a/webapp/javascript/ui/Table.module.scss
+++ b/webapp/javascript/ui/Table.module.scss
@@ -69,3 +69,8 @@
     }
   }
 }
+
+.loadingSpinner {
+  text-align: center;
+  margin-top: 50px;
+}
diff --git a/webapp/javascript/ui/Table.tsx b/webapp/javascript/ui/Table.tsx
index f9c5a58838..df093e9d7b 100644
--- a/webapp/javascript/ui/Table.tsx
+++ b/webapp/javascript/ui/Table.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 
 // eslint-disable-next-line css-modules/no-unused-class
 import styles from './Table.module.scss';
+import LoadingSpinner from './LoadingSpinner';
 
 interface CustomProp {
   [k: string]: string | CSSProperties | ReactNode | number | undefined;
@@ -82,6 +83,7 @@ interface TableProps {
   table: Table;
   tableBodyRef?: RefObject<HTMLTableSectionElement>;
   className?: string;
+  isLoading?: boolean;
 }
 
 function Table({
@@ -91,9 +93,14 @@ function Table({
   table,
   tableBodyRef,
   className,
+  isLoading,
 }: TableProps) {
   const hasSort = sortByDirection && sortBy && updateSortParams;
-  return (
+  return isLoading ? (
+    <div className={styles.loadingSpinner}>
+      <LoadingSpinner />
+    </div>
+  ) : (
     <table
       className={clsx(styles.table, {
         [className || '']: className,

From 11fc434659bbb21fb7398be92c64a04b97a86b25 Mon Sep 17 00:00:00 2001
From: Stas <dashchinskiystas@gmail.com>
Date: Mon, 22 Aug 2022 12:15:00 +0300
Subject: [PATCH 6/9] chore(webapp): app name for delete app confirmation modal

---
 .../components/Modals/ConfirmDelete/index.tsx | 38 +++++++++++++++++--
 .../components/Settings/APIKeys/index.tsx     |  5 ++-
 .../Settings/Apps/getAppTableRows.tsx         |  9 ++++-
 .../Settings/Users/getUserTableRows.tsx       |  5 ++-
 webapp/javascript/ui/Modals/Modal.module.css  |  4 --
 webapp/javascript/ui/Modals/index.ts          |  3 ++
 6 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/webapp/javascript/components/Modals/ConfirmDelete/index.tsx b/webapp/javascript/components/Modals/ConfirmDelete/index.tsx
index 4e6a225abf..0d257eab49 100644
--- a/webapp/javascript/components/Modals/ConfirmDelete/index.tsx
+++ b/webapp/javascript/components/Modals/ConfirmDelete/index.tsx
@@ -1,11 +1,43 @@
-import ShowModal from '@webapp/ui/Modals';
+import ShowModal, { ShowModalParams } from '@webapp/ui/Modals';
 
-function confirmDelete(object: string, onConfirm: () => void) {
+interface ConfirmDeleteProps {
+  objectType?: string;
+  objectName?: string;
+  object?: string;
+  warningMsg?: string;
+  onConfirm: () => void;
+  withConfirmationInput?: boolean;
+}
+
+function confirmDelete({
+  objectName,
+  objectType,
+  object,
+  onConfirm,
+  withConfirmationInput,
+  warningMsg,
+}: ConfirmDeleteProps) {
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  const confirmationInputProps: Partial<ShowModalParams> = withConfirmationInput
+    ? {
+        input: 'text' as ShowModalParams['input'],
+        inputLabel: `Please type ${objectType} name`,
+        inputPlaceholder: objectName,
+        inputValidator: (value) =>
+          value === objectName ? null : 'Name does not match',
+      }
+    : {};
+
+  object = object || `${objectName} ${objectType}`;
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
   ShowModal({
-    title: `Are you sure you want to delete ${object}?`,
+    title: `Are you sure you want to delete ${object}? ${
+      warningMsg ? `\n ${warningMsg}` : ''
+    }`,
     confirmButtonText: 'Delete',
     type: 'danger',
     onConfirm,
+    ...confirmationInputProps,
   });
 }
 
diff --git a/webapp/javascript/components/Settings/APIKeys/index.tsx b/webapp/javascript/components/Settings/APIKeys/index.tsx
index bde7445aab..24d0304457 100644
--- a/webapp/javascript/components/Settings/APIKeys/index.tsx
+++ b/webapp/javascript/components/Settings/APIKeys/index.tsx
@@ -24,8 +24,9 @@ const getBodyRows = (
   const now = new Date();
 
   const handleDeleteClick = (key: APIKey) => {
-    confirmDelete('this key', () => {
-      onDelete(key);
+    confirmDelete({
+      object: 'this key',
+      onConfirm: () => onDelete(key),
     });
   };
 
diff --git a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
index 98e08cd112..7ed8993ab9 100644
--- a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
+++ b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
@@ -20,8 +20,13 @@ function DeleteButton(props: IDeleteButtorProps) {
   const { onDelete, app, isLoading } = props;
 
   const handleDeleteClick = () => {
-    confirmDelete('this app', () => {
-      onDelete(app);
+    confirmDelete({
+      objectName: app.name,
+      objectType: 'app',
+      withConfirmationInput: true,
+      warningMsg:
+        'This action can take significant amount of time and cannot be undone.',
+      onConfirm: () => onDelete(app),
     });
   };
 
diff --git a/webapp/javascript/components/Settings/Users/getUserTableRows.tsx b/webapp/javascript/components/Settings/Users/getUserTableRows.tsx
index 3dbb4c5c1a..7f408570de 100644
--- a/webapp/javascript/components/Settings/Users/getUserTableRows.tsx
+++ b/webapp/javascript/components/Settings/Users/getUserTableRows.tsx
@@ -56,8 +56,9 @@ function DeleteButton(props: { onDelete: (user: User) => void; user: User }) {
   const { onDelete, user } = props;
 
   const handleDeleteClick = () => {
-    confirmDelete('this user', () => {
-      onDelete(user);
+    confirmDelete({
+      object: 'this user',
+      onConfirm: () => onDelete(user),
     });
   };
 
diff --git a/webapp/javascript/ui/Modals/Modal.module.css b/webapp/javascript/ui/Modals/Modal.module.css
index 8422f460ea..f3b5398b97 100644
--- a/webapp/javascript/ui/Modals/Modal.module.css
+++ b/webapp/javascript/ui/Modals/Modal.module.css
@@ -2,10 +2,6 @@
   background-color: var(--ps-ui-foreground);
 }
 
-.popup label {
-  color: var(--ps-neutral-2);
-}
-
 .popup button.button:focus {
   box-shadow: none;
 }
diff --git a/webapp/javascript/ui/Modals/index.ts b/webapp/javascript/ui/Modals/index.ts
index eb54f2d031..e053639a8c 100644
--- a/webapp/javascript/ui/Modals/index.ts
+++ b/webapp/javascript/ui/Modals/index.ts
@@ -31,6 +31,7 @@ export type ShowModalParams = {
   inputLabel?: string;
   inputPlaceholder?: string;
   validationMessage?: string;
+  inputValidator?: (value: string) => string | null;
 };
 
 const ShowModal = async ({
@@ -43,6 +44,7 @@ const ShowModal = async ({
   inputLabel,
   inputPlaceholder,
   validationMessage,
+  inputValidator,
 }: ShowModalParams) => {
   const { isConfirmed, value } = await Swal.fire({
     title,
@@ -52,6 +54,7 @@ const ShowModal = async ({
     inputPlaceholder,
     inputValue,
     validationMessage,
+    inputValidator,
     confirmButtonColor: getButtonStyleFromType(type),
     ...defaultParams,
   });

From b657d188bae82215f556420defb98d0b78af8c62 Mon Sep 17 00:00:00 2001
From: Stas <dashchinskiystas@gmail.com>
Date: Mon, 22 Aug 2022 14:24:46 +0300
Subject: [PATCH 7/9] fix(webapp): removed unused types

---
 webapp/javascript/redux/reducers/settings.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/webapp/javascript/redux/reducers/settings.ts b/webapp/javascript/redux/reducers/settings.ts
index 1fdd30de0f..a01f050545 100644
--- a/webapp/javascript/redux/reducers/settings.ts
+++ b/webapp/javascript/redux/reducers/settings.ts
@@ -27,22 +27,19 @@ enum FetchStatus {
   loaded = 'loaded',
   failed = 'failed',
 }
-type FetchedState<T> = { type: FetchStatus; data?: T };
+type DataWithStatus<T> = { type: FetchStatus; data?: T };
 
-type UsersState = FetchedState<Users>;
-const usersInitialState: UsersState = {
+const usersInitialState: DataWithStatus<Users> = {
   type: FetchStatus.pristine,
   data: undefined,
 };
 
-type ApiKeysState = FetchedState<APIKeys>;
-const apiKeysInitialState: ApiKeysState = {
+const apiKeysInitialState: DataWithStatus<APIKeys> = {
   type: FetchStatus.pristine,
   data: undefined,
 };
 
-type AppsState = FetchedState<Apps>;
-const appsInitialState: AppsState = {
+const appsInitialState: DataWithStatus<Apps> = {
   type: FetchStatus.pristine,
   data: undefined,
 };

From 64817defb321b9e16bc26044ad69e687e2a64d61 Mon Sep 17 00:00:00 2001
From: Stas <dashchinskiystas@gmail.com>
Date: Mon, 22 Aug 2022 15:07:06 +0300
Subject: [PATCH 8/9] fix(webapp): small fixes for namings and types

---
 .../javascript/components/Modals/ConfirmDelete/index.tsx  | 8 ++++----
 webapp/javascript/components/Settings/APIKeys/index.tsx   | 2 +-
 .../components/Settings/Apps/getAppTableRows.tsx          | 4 ++--
 webapp/javascript/components/Settings/Apps/index.tsx      | 6 ++----
 .../components/Settings/Users/getUserTableRows.tsx        | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/webapp/javascript/components/Modals/ConfirmDelete/index.tsx b/webapp/javascript/components/Modals/ConfirmDelete/index.tsx
index 0d257eab49..059904c9b5 100644
--- a/webapp/javascript/components/Modals/ConfirmDelete/index.tsx
+++ b/webapp/javascript/components/Modals/ConfirmDelete/index.tsx
@@ -2,8 +2,7 @@ import ShowModal, { ShowModalParams } from '@webapp/ui/Modals';
 
 interface ConfirmDeleteProps {
   objectType?: string;
-  objectName?: string;
-  object?: string;
+  objectName: string;
   warningMsg?: string;
   onConfirm: () => void;
   withConfirmationInput?: boolean;
@@ -12,7 +11,6 @@ interface ConfirmDeleteProps {
 function confirmDelete({
   objectName,
   objectType,
-  object,
   onConfirm,
   withConfirmationInput,
   warningMsg,
@@ -28,7 +26,9 @@ function confirmDelete({
       }
     : {};
 
-  object = object || `${objectName} ${objectType}`;
+  const object = withConfirmationInput
+    ? `${objectName} ${objectType}`
+    : objectName;
   // eslint-disable-next-line @typescript-eslint/no-floating-promises
   ShowModal({
     title: `Are you sure you want to delete ${object}? ${
diff --git a/webapp/javascript/components/Settings/APIKeys/index.tsx b/webapp/javascript/components/Settings/APIKeys/index.tsx
index 24d0304457..002f435a85 100644
--- a/webapp/javascript/components/Settings/APIKeys/index.tsx
+++ b/webapp/javascript/components/Settings/APIKeys/index.tsx
@@ -25,7 +25,7 @@ const getBodyRows = (
 
   const handleDeleteClick = (key: APIKey) => {
     confirmDelete({
-      object: 'this key',
+      objectName: 'this key',
       onConfirm: () => onDelete(key),
     });
   };
diff --git a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
index 7ed8993ab9..769c884b1d 100644
--- a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
+++ b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
@@ -10,13 +10,13 @@ import LoadingSpinner from '@webapp/ui/LoadingSpinner';
 
 import styles from './AppTableItem.module.css';
 
-interface IDeleteButtorProps {
+interface DeleteButtorProps {
   onDelete: (app: App) => void;
   isLoading: boolean;
   app: App;
 }
 
-function DeleteButton(props: IDeleteButtorProps) {
+function DeleteButton(props: DeleteButtorProps) {
   const { onDelete, app, isLoading } = props;
 
   const handleDeleteClick = () => {
diff --git a/webapp/javascript/components/Settings/Apps/index.tsx b/webapp/javascript/components/Settings/Apps/index.tsx
index 3e84ccbb17..cebeec32e1 100644
--- a/webapp/javascript/components/Settings/Apps/index.tsx
+++ b/webapp/javascript/components/Settings/Apps/index.tsx
@@ -27,8 +27,8 @@ function Apps() {
   const apps = useAppSelector(selectApps);
   const isLoading = useAppSelector(selectIsLoadingApps);
   const [search, setSearchField] = useState('');
-  const [appsInProcessing, setAppsInProcessing] = useState([] as string[]);
-  const [deletedApps, setDeletedApps] = useState([] as string[]);
+  const [appsInProcessing, setAppsInProcessing] = useState<string[]>([]);
+  const [deletedApps, setDeletedApps] = useState<string[]>([]);
 
   useEffect(() => {
     dispatch(reloadApps());
@@ -45,13 +45,11 @@ function Apps() {
 
   const handleDeleteApp = (app: App) => {
     setAppsInProcessing([...appsInProcessing, app.name]);
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     dispatch(deleteApp(app))
       .unwrap()
       .then(() => {
         setAppsInProcessing(appsInProcessing.filter((x) => x !== app.name));
         setDeletedApps([...deletedApps, app.name]);
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         dispatch(
           addNotification({
             type: 'success',
diff --git a/webapp/javascript/components/Settings/Users/getUserTableRows.tsx b/webapp/javascript/components/Settings/Users/getUserTableRows.tsx
index 7f408570de..d1f4934b01 100644
--- a/webapp/javascript/components/Settings/Users/getUserTableRows.tsx
+++ b/webapp/javascript/components/Settings/Users/getUserTableRows.tsx
@@ -57,7 +57,7 @@ function DeleteButton(props: { onDelete: (user: User) => void; user: User }) {
 
   const handleDeleteClick = () => {
     confirmDelete({
-      object: 'this user',
+      objectName: 'this user',
       onConfirm: () => onDelete(user),
     });
   };

From 36ad6354b8d9fd12650477c1f15b654e22393f79 Mon Sep 17 00:00:00 2001
From: Stas <dashchinskiystas@gmail.com>
Date: Wed, 24 Aug 2022 17:33:31 +0300
Subject: [PATCH 9/9] chore(webapp): update confirmDelete modal text and styles

---
 .../components/Modals/ConfirmDelete/index.tsx     | 15 ++++++---------
 .../components/Settings/APIKeys/index.tsx         |  3 ++-
 .../components/Settings/Apps/getAppTableRows.tsx  |  3 +--
 .../Settings/Users/getUserTableRows.tsx           |  3 ++-
 webapp/javascript/ui/Modals/index.ts              |  3 +++
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/webapp/javascript/components/Modals/ConfirmDelete/index.tsx b/webapp/javascript/components/Modals/ConfirmDelete/index.tsx
index 059904c9b5..f8b9ecf4f9 100644
--- a/webapp/javascript/components/Modals/ConfirmDelete/index.tsx
+++ b/webapp/javascript/components/Modals/ConfirmDelete/index.tsx
@@ -1,10 +1,10 @@
 import ShowModal, { ShowModalParams } from '@webapp/ui/Modals';
 
 interface ConfirmDeleteProps {
-  objectType?: string;
+  objectType: string;
   objectName: string;
-  warningMsg?: string;
   onConfirm: () => void;
+  warningMsg?: string;
   withConfirmationInput?: boolean;
 }
 
@@ -15,24 +15,21 @@ function confirmDelete({
   withConfirmationInput,
   warningMsg,
 }: ConfirmDeleteProps) {
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
   const confirmationInputProps: Partial<ShowModalParams> = withConfirmationInput
     ? {
         input: 'text' as ShowModalParams['input'],
-        inputLabel: `Please type ${objectType} name`,
+        inputLabel: `To confirm deletion enter ${objectType} name below.`,
         inputPlaceholder: objectName,
         inputValidator: (value) =>
           value === objectName ? null : 'Name does not match',
       }
     : {};
 
-  const object = withConfirmationInput
-    ? `${objectName} ${objectType}`
-    : objectName;
   // eslint-disable-next-line @typescript-eslint/no-floating-promises
   ShowModal({
-    title: `Are you sure you want to delete ${object}? ${
-      warningMsg ? `\n ${warningMsg}` : ''
+    title: `Delete ${objectType}`,
+    html: `Are you sure you want to delete<br><strong>${objectName}</strong> ?${
+      warningMsg ? `<br><br>${warningMsg}` : ''
     }`,
     confirmButtonText: 'Delete',
     type: 'danger',
diff --git a/webapp/javascript/components/Settings/APIKeys/index.tsx b/webapp/javascript/components/Settings/APIKeys/index.tsx
index 002f435a85..b6b0a63b36 100644
--- a/webapp/javascript/components/Settings/APIKeys/index.tsx
+++ b/webapp/javascript/components/Settings/APIKeys/index.tsx
@@ -25,7 +25,8 @@ const getBodyRows = (
 
   const handleDeleteClick = (key: APIKey) => {
     confirmDelete({
-      objectName: 'this key',
+      objectType: 'key',
+      objectName: key.name,
       onConfirm: () => onDelete(key),
     });
   };
diff --git a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
index 769c884b1d..a4bb504994 100644
--- a/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
+++ b/webapp/javascript/components/Settings/Apps/getAppTableRows.tsx
@@ -24,8 +24,7 @@ function DeleteButton(props: DeleteButtorProps) {
       objectName: app.name,
       objectType: 'app',
       withConfirmationInput: true,
-      warningMsg:
-        'This action can take significant amount of time and cannot be undone.',
+      warningMsg: `Note: This action can take up to ~15 minutes depending on the size of your application and wont' be reflected in the UI until it is complete.`,
       onConfirm: () => onDelete(app),
     });
   };
diff --git a/webapp/javascript/components/Settings/Users/getUserTableRows.tsx b/webapp/javascript/components/Settings/Users/getUserTableRows.tsx
index d1f4934b01..4d35e6a192 100644
--- a/webapp/javascript/components/Settings/Users/getUserTableRows.tsx
+++ b/webapp/javascript/components/Settings/Users/getUserTableRows.tsx
@@ -57,7 +57,8 @@ function DeleteButton(props: { onDelete: (user: User) => void; user: User }) {
 
   const handleDeleteClick = () => {
     confirmDelete({
-      objectName: 'this user',
+      objectName: user.name,
+      objectType: 'user',
       onConfirm: () => onDelete(user),
     });
   };
diff --git a/webapp/javascript/ui/Modals/index.ts b/webapp/javascript/ui/Modals/index.ts
index e053639a8c..9f6754a298 100644
--- a/webapp/javascript/ui/Modals/index.ts
+++ b/webapp/javascript/ui/Modals/index.ts
@@ -23,6 +23,7 @@ const defaultParams: Partial<SweetAlertOptions> = {
 
 export type ShowModalParams = {
   title: string;
+  html?: string;
   confirmButtonText: string;
   type: 'danger' | 'normal';
   onConfirm?: ShamefulAny;
@@ -36,6 +37,7 @@ export type ShowModalParams = {
 
 const ShowModal = async ({
   title,
+  html,
   confirmButtonText,
   type,
   onConfirm,
@@ -48,6 +50,7 @@ const ShowModal = async ({
 }: ShowModalParams) => {
   const { isConfirmed, value } = await Swal.fire({
     title,
+    html,
     confirmButtonText,
     input,
     inputLabel,