#3352 remove saved queries from freactal (#3355)

* #3352 remove saved queries from freactal

* remove todo

* #3352 incorporate comments from code review

* #3352 changed error language

src/components/Login/utils.js

@@ -1,20 +1,18 @@
+import jwtDecode from 'jwt-decode';
 import get from 'lodash/get';
 import isArrayLikeObject from 'lodash/isArrayLikeObject';
 import toLower from 'lodash/toLower';
-import jwtDecode from 'jwt-decode';
 
-import { getProfile, createProfile } from 'services/profiles';
+import { CAVATICA, FENCES } from 'common/constants';
 import { getUser as getCavaticaUser } from 'services/cavatica';
 import { getAccessToken } from 'services/fence';
-import { createExampleQueries } from 'services/riffQueries';
-import { FENCES, CAVATICA } from 'common/constants';
+import { createProfile, getProfile } from 'services/profiles';
 import { store } from 'store';
-import { loginSuccess, loginFailure } from 'store/actionCreators/user';
+import { loginFailure, loginSuccess } from 'store/actionCreators/user';
 
 const initProfile = async (api, user, egoId) => {
   const profileCreation = createProfile(api)({ ...user, egoId });
-  const sampleQueryCreation = createExampleQueries(api, egoId);
-  const [x] = await Promise.all([profileCreation, sampleQueryCreation]);
+  const [x] = await Promise.all([profileCreation]);
   return x;
 };
 

src/components/UserDashboard/SavedQueries/SavedQueriesTab.tsx

@@ -0,0 +1,102 @@
+import React, { ReactNode } from 'react';
+import { DeleteFilled, WarningFilled } from '@ant-design/icons';
+import { Alert, Button, List, Popconfirm, Space } from 'antd';
+import { distanceInWords } from 'date-fns';
+
+import { SavedQueriesStatuses, SavedQueryWithFileContent } from 'store/SavedQueriesTypes';
+import { VirtualStudyPlusId } from 'store/virtualStudiesTypes';
+import styleThemeColors from 'style/themes/default/colors.module.scss';
+import { toKebabCase } from 'utils';
+
+type Item = VirtualStudyPlusId | SavedQueryWithFileContent;
+
+type Items = Array<Item>;
+
+type Props = {
+  items: Items;
+  queryIdToStatus: Record<string, SavedQueriesStatuses>;
+  makeDescription: (item: Item) => ReactNode;
+  makeItemTitle: (item: Item) => ReactNode;
+  makeNoItemsInfoMessage: () => ReactNode;
+  onConfirmCb: (item: Item) => Promise<void>;
+};
+
+const sortByEarliestToLatest = (items: Items) =>
+  [...items].sort((a, b) => Number(new Date(b.creationDate)) - Number(new Date(a.creationDate)));
+
+const SavedQueriesTab = (props: Props) => {
+  const {
+    items,
+    queryIdToStatus,
+    makeDescription,
+    makeItemTitle,
+    makeNoItemsInfoMessage,
+    onConfirmCb,
+  } = props;
+
+  if (items.length === 0) {
+    return <Alert message={makeNoItemsInfoMessage()} type="info" />;
+  }
+  const sortedQueries = sortByEarliestToLatest(items);
+
+  return (
+    <List
+      size={'small'}
+      itemLayout="horizontal"
+      dataSource={sortedQueries}
+      renderItem={(item) => {
+        const currentItemIsDeleting = queryIdToStatus[item.id] === SavedQueriesStatuses.deleting;
+        const currentItemIsInError = queryIdToStatus[item.id] === SavedQueriesStatuses.error;
+        return (
+          <List.Item
+            actions={[
+              <Popconfirm
+                key={`popUp-${toKebabCase(item.id)}`}
+                title={'Permanently delete this query?'}
+                okText="Delete"
+                cancelText="Cancel"
+                onConfirm={async () => {
+                  await onConfirmCb(item);
+                }}
+              >
+                <Button
+                  type={'text'}
+                  icon={
+                    currentItemIsInError ? (
+                      <WarningFilled style={{ color: styleThemeColors.warningColor }} />
+                    ) : (
+                      <DeleteFilled />
+                    )
+                  }
+                  disabled={currentItemIsDeleting || currentItemIsInError}
+                  loading={currentItemIsDeleting}
+                />
+              </Popconfirm>,
+            ]}
+          >
+            <List.Item.Meta
+              title={makeItemTitle(item)}
+              description={
+                <Space direction={'vertical'}>
+                  {makeDescription(item)}
+                  <span>Saved {distanceInWords(new Date(), new Date(item.creationDate))} ago</span>
+                  {currentItemIsInError && (
+                    <Alert
+                      type={'error'}
+                      message={
+                        'An error occurred while trying to delete the query.' +
+                        ' Please refresh and retry or contact support.'
+                      }
+                    />
+                  )}
+                </Space>
+              }
+            />
+          </List.Item>
+        );
+      }}
+    />
+  );
+};
+
+export default SavedQueriesTab;