bugfixes(fe): adjust query examples styles (#1583)

AndreyNenashev · web-flow · commit 53408d634978 · 2024-01-17T12:31:59.000+01:00
diff --git a/odd-platform-ui/src/components/DataModelling/QueryExampleSearchResults/QueryExamplesList.tsx b/odd-platform-ui/src/components/DataModelling/QueryExampleSearchResults/QueryExamplesList.tsx
@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import { useSearchQueryExamples } from 'lib/hooks/api/dataModelling/searchQueryExamples';
 import {
   EmptyContentPlaceholder,
+  QueryExamplesListHeader,
   QueryExamplesListItem,
   QueryExamplesSkeleton,
   ScrollableContainer,
@@ -29,22 +30,25 @@ const QueryExamplesList = () => {
   );
 
   return (
-    <ScrollableContainer container id='query-examples-list' $offsetY={165}>
-      <InfiniteScroll
-        dataLength={queryExamples.length}
-        next={fetchNextPage}
-        hasMore={hasNextPage}
-        loader={<QueryExamplesSkeleton />}
-        scrollThreshold='200px'
-        scrollableTarget='query-examples-list'
-      >
-        {queryExamples.map(qe => (
-          <QueryExamplesListItem queryExample={qe} key={qe.definition} />
-        ))}
-        {isLoading && <QueryExamplesSkeleton />}
-        {isEmpty && <EmptyContentPlaceholder offsetTop={215} />}
-      </InfiniteScroll>
-    </ScrollableContainer>
+    <>
+      <QueryExamplesListHeader />
+      <ScrollableContainer container id='query-examples-list' $offsetY={165}>
+        <InfiniteScroll
+          dataLength={queryExamples.length}
+          next={fetchNextPage}
+          hasMore={hasNextPage}
+          loader={<QueryExamplesSkeleton />}
+          scrollThreshold='200px'
+          scrollableTarget='query-examples-list'
+        >
+          {queryExamples.map(qe => (
+            <QueryExamplesListItem queryExample={qe} key={qe.definition} />
+          ))}
+          {isLoading && <QueryExamplesSkeleton />}
+          {isEmpty && <EmptyContentPlaceholder offsetTop={215} />}
+        </InfiniteScroll>
+      </ScrollableContainer>
+    </>
   );
 };
 
diff --git a/odd-platform-ui/src/components/DataModelling/QueryExamples.tsx b/odd-platform-ui/src/components/DataModelling/QueryExamples.tsx
@@ -8,7 +8,6 @@ import { WithPermissions } from 'components/shared/contexts';
 import { Permission } from 'generated-sources';
 import QueryExamplesList from './QueryExampleSearchResults/QueryExamplesList';
 import DataModellingTabs from './DataModellingTabs';
-import QueryExamplesListHeader from '../shared/elements/QueryExamples/QueryExamplesListHeader';
 import QueryExampleForm from './QueryExampleForm/QueryExampleForm';
 
 const QueryExamples: React.FC = () => {
@@ -50,7 +49,6 @@ const QueryExamples: React.FC = () => {
         <DataModellingTabs />
       </Grid>
       <Grid item xs={12}>
-        <QueryExamplesListHeader />
         <QueryExamplesList />
       </Grid>
     </Grid>
diff --git a/odd-platform-ui/src/components/shared/elements/AppDateRangePicker/AppDateRangePicker.tsx b/odd-platform-ui/src/components/shared/elements/AppDateRangePicker/AppDateRangePicker.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { addDays, endOfDay, startOfDay } from 'date-fns';
-import DatePicker, { type DateObject } from 'react-multi-date-picker';
 import AppDateRangePickerFooter from 'components/shared/elements/AppDateRangePicker/AppDateRangePickerFooter/AppDateRangePickerFooter';
 import * as S from 'components/shared/elements/AppDateRangePicker/AppDateRangePickerStyles';
+import DatePicker, { type DateObject } from 'react-multi-date-picker';
 
 interface AppDateRangePickerProps {
   defaultRange: { beginDate: Date; endDate: Date };
@@ -93,7 +93,6 @@ const AppDateRangePicker: React.FC<AppDateRangePickerProps> = ({
         portal
         arrow={false}
         showOtherDays
-        multiple
         offsetY={4}
         numberOfMonths={2}
         mapDays={disableSelectedDate}
diff --git a/odd-platform-ui/src/components/shared/elements/QueryExamples/QueryExamplesListHeader.tsx b/odd-platform-ui/src/components/shared/elements/QueryExamples/QueryExamplesListHeader.tsx
@@ -8,6 +8,9 @@ const QueryExamplesListHeader = () => {
 
   return (
     <Table.HeaderContainer>
+      <Table.Cell $flex='1 0 1'>
+        <Typography variant='caption'>#</Typography>
+      </Table.Cell>
       <Table.Cell $flex='1 0 25%'>
         <Typography variant='caption'>{t('Definition')}</Typography>
       </Table.Cell>
diff --git a/odd-platform-ui/src/components/shared/elements/QueryExamples/QueryExamplesListItem.tsx b/odd-platform-ui/src/components/shared/elements/QueryExamples/QueryExamplesListItem.tsx
@@ -1,17 +1,15 @@
 import React from 'react';
 import type { QueryExample } from 'generated-sources';
 import { Permission } from 'generated-sources';
-import Button from 'components/shared/elements/Button/Button';
-import { PreviewIcon, UnlinkIcon } from 'components/shared/icons';
 import { WithPermissions } from 'components/shared/contexts';
-import ConfirmationDialog from 'components/shared/elements/ConfirmationDialog/ConfirmationDialog';
-import { useTranslation } from 'react-i18next';
-import { useUnassignEntityQueryExample } from 'lib/hooks/api/dataModelling/queryExamples';
 import { queryExamplesPath } from 'routes';
+import { Typography } from '@mui/material';
+import { Link } from 'react-router-dom';
 import TruncatedCell from '../TruncatedCell/TruncatedCell';
 import Markdown from '../Markdown/Markdown';
 import CollapsibleInfoContainer from '../CollapsibleInfoContainer/CollapsibleInfoContainer';
 import * as Table from '../StyledComponents/Table';
+import QueryExamplesUnlinkButton from './QueryExamplesUnlinkButton';
 
 interface QueryExampleSearchResultsItemProps {
   queryExample: QueryExample;
@@ -21,63 +19,43 @@ interface QueryExampleSearchResultsItemProps {
 const QueryExamplesListItem = ({
   queryExample,
   dataEntityId,
-}: QueryExampleSearchResultsItemProps) => {
-  const { t } = useTranslation();
-  const { mutateAsync } = useUnassignEntityQueryExample();
-
-  return (
-    <Table.RowContainer>
-      <Table.Cell $flex='1 0 25%'>
-        <CollapsibleInfoContainer
-          style={{ border: 'none' }}
-          initialMaxHeight={96}
-          content={<Markdown value={queryExample.definition} disableCopy />}
-        />
-      </Table.Cell>
-      <Table.Cell $flex='1 0 25%'>
-        <CollapsibleInfoContainer
-          style={{ border: 'none' }}
-          initialMaxHeight={96}
-          content={<Markdown value={queryExample.query} disableCopy />}
-        />
-      </Table.Cell>
-      <Table.Cell $flex='1 0'>
-        <TruncatedCell dataList={queryExample.linkedEntities} externalEntityId={1} />
-      </Table.Cell>
-      <Table.HiddenCell $flex='0 0 15%' $justifyContent='right'>
-        <Button
-          buttonType='linkGray-m-icon'
-          sx={{ marginRight: 1 }}
-          icon={<PreviewIcon />}
-          to={queryExamplesPath(queryExample.id)}
-        />
-        <WithPermissions permissionTo={Permission.QUERY_EXAMPLE_DATASET_DELETE}>
-          <ConfirmationDialog
-            actionTitle={t('Are you sure you want to unlink this query example?')}
-            actionName={t('Unlink')}
-            actionText={
-              <>
-                Query example #{queryExample.id} {t('will be unlinked')}.
-              </>
-            }
-            onConfirm={() =>
-              mutateAsync({
-                exampleId: queryExample.id,
-                dataEntityId: dataEntityId ?? 0,
-              })
-            }
-            actionBtn={
-              <Button
-                buttonType='linkGray-m-icon'
-                icon={<UnlinkIcon />}
-                sx={{ marginRight: 1 }}
-              />
-            }
+}: QueryExampleSearchResultsItemProps) => (
+  <Table.RowContainer>
+    <Table.Cell $flex='1 0 1'>
+      <Link to={queryExamplesPath(queryExample.id)}>
+        <Typography variant='caption' color='button.link.normal.color' fontWeight={500}>
+          {queryExample.id}
+        </Typography>
+      </Link>
+    </Table.Cell>
+    <Table.Cell $flex='1 0 25%'>
+      <CollapsibleInfoContainer
+        style={{ border: 'none' }}
+        initialMaxHeight={96}
+        content={<Markdown value={queryExample.definition} disableCopy />}
+      />
+    </Table.Cell>
+    <Table.Cell $flex='1 0 25%'>
+      <CollapsibleInfoContainer
+        style={{ border: 'none' }}
+        initialMaxHeight={96}
+        content={<Markdown value={queryExample.query} disableCopy />}
+      />
+    </Table.Cell>
+    <Table.Cell $flex='1 0'>
+      <TruncatedCell dataList={queryExample.linkedEntities} externalEntityId={1} />
+    </Table.Cell>
+    <Table.HiddenCell $flex='0 0 15%' $justifyContent='right'>
+      <WithPermissions permissionTo={Permission.QUERY_EXAMPLE_DATASET_DELETE}>
+        {dataEntityId && (
+          <QueryExamplesUnlinkButton
+            queryExampleId={queryExample.id}
+            dataEntityId={dataEntityId}
           />
-        </WithPermissions>
-      </Table.HiddenCell>
-    </Table.RowContainer>
-  );
-};
+        )}
+      </WithPermissions>
+    </Table.HiddenCell>
+  </Table.RowContainer>
+);
 
 export default QueryExamplesListItem;
diff --git a/odd-platform-ui/src/components/shared/elements/QueryExamples/QueryExamplesUnlinkButton.tsx b/odd-platform-ui/src/components/shared/elements/QueryExamples/QueryExamplesUnlinkButton.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import type { DataEntity, QueryExample } from 'generated-sources';
+import { useUnassignEntityQueryExample } from 'lib/hooks/api/dataModelling/queryExamples';
+import Button from '../Button/Button';
+import { UnlinkIcon } from '../../icons';
+import ConfirmationDialog from '../ConfirmationDialog/ConfirmationDialog';
+
+interface Props {
+  dataEntityId: DataEntity['id'];
+  queryExampleId: QueryExample['id'];
+}
+
+const QueryExamplesUnlinkButton = ({ dataEntityId, queryExampleId }: Props) => {
+  const { t } = useTranslation();
+  const { mutateAsync: unlink } = useUnassignEntityQueryExample();
+  return (
+    <ConfirmationDialog
+      actionTitle={t('Are you sure you want to unlink this query example?')}
+      actionName={t('Unlink')}
+      actionText={
+        <>
+          Query example #{queryExampleId} {t('will be unlinked')}.
+        </>
+      }
+      onConfirm={() =>
+        unlink({
+          exampleId: queryExampleId,
+          dataEntityId,
+        })
+      }
+      actionBtn={
+        <Button
+          buttonType='linkGray-m-icon'
+          icon={<UnlinkIcon />}
+          sx={{ marginRight: 1 }}
+        />
+      }
+    />
+  );
+};
+
+export default QueryExamplesUnlinkButton;
diff --git a/odd-platform-ui/src/components/shared/elements/index.ts b/odd-platform-ui/src/components/shared/elements/index.ts
@@ -82,4 +82,5 @@ export { default as DonutChart } from './DonutChart/DonutChart';
 export { default as QueryExamplesListHeader } from './QueryExamples/QueryExamplesListHeader';
 export { default as QueryExamplesListItem } from './QueryExamples/QueryExamplesListItem';
 export { default as QueryExamplesSkeleton } from './QueryExamples/QueryExamplesSkeleton';
+export { default as QueryExamplesUnlinkButton } from './QueryExamples/QueryExamplesUnlinkButton';
 export { default as SearchInput } from './SearchInput/SearchInput';
diff --git a/odd-platform-ui/src/components/shared/icons/UnlinkIcon.tsx b/odd-platform-ui/src/components/shared/icons/UnlinkIcon.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { type SvgIconProps } from '@mui/material/SvgIcon';
 import AppSvgIcon from 'components/shared/icons/AppSvgIcon';
 
-const UnlinkIcon: React.FC<SvgIconProps> = ({ sx, ...props }) => (
-  <AppSvgIcon sx={sx} viewBox='0 0 16 16' {...props}>
+const UnlinkIcon: React.FC<SvgIconProps> = ({ sx, stroke, ...props }) => (
+  <AppSvgIcon sx={sx} viewBox='0 0 16 16' stroke={stroke ?? '#091E42'} {...props}>
     <svg
       width='16'
       height='16'
@@ -16,55 +16,48 @@ const UnlinkIcon: React.FC<SvgIconProps> = ({ sx, ...props }) => (
           <path
             id='Path'
             d='M11.3026 8.47087L13.1879 6.58554C14.2292 5.5442 14.2292 3.85554 13.1879 2.8142V2.8142C12.1466 1.77287 10.4579 1.77287 9.41658 2.8142L7.53125 4.69954'
-            stroke='#091E42'
             strokeWidth='1.5'
             strokeLinecap='round'
             strokeLinejoin='round'
           />
           <path
             id='Path_2'
             d='M4.69758 7.5293L2.81225 9.41463C1.77092 10.456 1.77092 12.1446 2.81225 13.186V13.186C3.85358 14.2273 5.54225 14.2273 6.58358 13.186L8.46892 11.3006'
-            stroke='#091E42'
             strokeWidth='1.5'
             strokeLinecap='round'
             strokeLinejoin='round'
           />
           <path
             id='Path_3'
             d='M3.75708 5.64089L2.34375 5.17422'
-            stroke='#091E42'
             strokeWidth='1.5'
             strokeLinecap='round'
             strokeLinejoin='round'
           />
           <path
             id='Path_4'
             d='M5.63698 3.75904L5.17031 2.3457'
-            stroke='#091E42'
             strokeWidth='1.5'
             strokeLinecap='round'
             strokeLinejoin='round'
           />
           <path
             id='Path_5'
             d='M12.2422 10.3598L13.6622 10.8264'
-            stroke='#091E42'
             strokeWidth='1.5'
             strokeLinecap='round'
             strokeLinejoin='round'
           />
           <path
             id='Path_6'
             d='M10.3578 12.2402L10.8245 13.6602'
-            stroke='#091E42'
             strokeWidth='1.5'
             strokeLinecap='round'
             strokeLinejoin='round'
           />
           <path
             id='Path_7'
             d='M6.11719 9.88661L9.89052 6.11328'
-            stroke='#091E42'
             strokeWidth='1.5'
             strokeLinecap='round'
             strokeLinejoin='round'
diff --git a/tests/docker/docker-compose.yaml b/tests/docker/docker-compose.yaml
@@ -15,6 +15,9 @@ services:
       - SPRING_DATASOURCE_URL=jdbc:postgresql://database:5432/${POSTGRES_DATABASE}
       - SPRING_DATASOURCE_USERNAME=${POSTGRES_USER}
       - SPRING_DATASOURCE_PASSWORD=${POSTGRES_PASSWORD}
+      - SPRING_CUSTOM-DATASOURCE_URL=jdbc:postgresql://database:5432/${POSTGRES_DATABASE}?schema=lookup_tables_schema
+      - SPRING_CUSTOM-DATASOURCE_USERNAME=${POSTGRES_USER}
+      - SPRING_CUSTOM-DATASOURCE_PASSWORD=${POSTGRES_PASSWORD}
     depends_on:
       - database
     ports:
