fix(ui/db): co-browse (assist) list sorting and db default settings for existing users (#2977)

* fix(ui): co-browser (assist) list sorting

* fix(ui): co-browser (assist) list sorting - duration

* fix(ui): default settings values for existing users

ee/scripts/schema/db/init_dbs/postgresql/1.21.0/1.21.0.sql

@@ -93,6 +93,15 @@ DROP TYPE IF EXISTS events.resource_method;
 
 ALTER TYPE integration_provider ADD VALUE IF NOT EXISTS 'dynatrace';
 
+UPDATE users SET settings=COALESCE(settings, '{}'::jsonb) || '{
+  "modules": [
+    "usability-tests",
+    "feature-flags"
+  ]
+}'::jsonb
+WHERE settings IS NULL
+   OR settings -> 'modules' IS NULL;
+
 COMMIT;
 
 \elif :is_next

frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx

@@ -30,7 +30,7 @@ function LiveSessionList() {
   let timeoutId: any;
   const { filters } = filter;
   const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID);
-  const sortOptions = [{ label: 'Start Time', value: 'timestamp' }].concat(
+  const sortOptions = [{ label: 'Start Time', value: 'timestamp' }, { label: 'Duration', value: 'duration' }].concat(
     metaList
       .map(({ key }: any) => ({
         label: capitalize(key),

frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx

@@ -6,28 +6,22 @@ interface Props {
   sortOrder: string;
   onChange?: (sortOrder: string) => void;
 }
+
 export default React.memo(function SortOrderButton(props: Props) {
   const { sortOrder, onChange = () => null } = props;
   const isAscending = sortOrder === 'asc';
 
   return (
     <div className="rounded-full">
-
-          <Segmented
-            size='small'
-            options={[
-              { label: 'Ascending', value: 'Ascending', icon: <ArrowUpOutlined /> },
-              { label: 'Descending', value: 'Descending', icon: <ArrowDownOutlined /> },
-            ]}
-            defaultValue="Ascending"
-            onChange={(value) => {
-              if (value === 'Ascending') {
-                onChange('asc');
-              } else if (value === 'Descending') {
-                onChange('desc');
-              }
-            }}
-          />
+      <Segmented
+        size="small"
+        options={[
+          { label: 'Ascending', value: 'asc', icon: <ArrowUpOutlined /> },
+          { label: 'Descending', value: 'desc', icon: <ArrowDownOutlined /> }
+        ]}
+        defaultValue={sortOrder}
+        onChange={onChange}
+      />
     </div>
   );
 });

frontend/app/mstore/searchStoreLive.ts

@@ -49,7 +49,7 @@ class SearchStoreLive {
   latestRequestTime: number | null = null;
   latestList = List();
   alertMetricId: number | null = null;
-  instance = new Search();
+  instance = new Search({ sort: 'timestamp', order: 'desc' });
   instanceLive = new Search();
   savedSearch = new Search();
   filterSearchList: any = {};

frontend/app/mstore/sessionStore.ts

@@ -201,11 +201,15 @@ export default class SessionStore {
     });
   }
 
-  fetchLiveSessions = async (params = {}) => {
+  fetchLiveSessions = async (params: any = {}) => {
     runInAction(() => {
       this.loadingLiveSessions = true;
     })
     try {
+      if (params.sort === 'duration') { // TODO ui hack to sort by duration, should be removed once the api addressed this issue
+        params.sort = 'timestamp';
+        params.order = params.order === 'asc' ? 'desc' : 'asc';
+      }
       const data: any = await sessionService.getLiveSessions(params);
       this.liveSessions = data.sessions.map((session: any) => new Session({ ...session, live: true }));
       this.totalLiveSessions = data.total;

scripts/schema/db/init_dbs/postgresql/1.21.0/1.21.0.sql

@@ -88,6 +88,15 @@ DROP TYPE IF EXISTS events.resource_method;
 
 ALTER TYPE integration_provider ADD VALUE IF NOT EXISTS 'dynatrace';
 
+UPDATE users SET settings=COALESCE(settings, '{}'::jsonb) || '{
+  "modules": [
+    "usability-tests",
+    "feature-flags"
+  ]
+}'::jsonb
+WHERE settings IS NULL
+   OR settings -> 'modules' IS NULL;
+
 COMMIT;
 
 \elif :is_next