@finos/legend-application-data-cube 0.2.4 → 0.2.6

package/src/components/{query-builder/LegendDataCubeQueryLoader.tsx → builder/LegendDataCubeLoader.tsx}

@@ -15,7 +15,13 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { cn, DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
+import {
+  cn,
+  DataCubeIcon,
+  DropdownMenu,
+  DropdownMenuItem,
+  useDropdownMenu,
+} from '@finos/legend-art';
 import {
   debounce,
   formatDistanceToNow,
@@ -30,29 +36,30 @@ import {
   FormDropdownMenuTrigger,
   FormTextInput,
 } from '@finos/legend-data-cube';
-import { useLegendDataCubeQueryBuilderStore } from './LegendDataCubeQueryBuilderStoreProvider.js';
+import { useLegendDataCubeBuilderStore } from './LegendDataCubeBuilderStoreProvider.js';
 import {
-  DATA_CUBE_QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT,
-  DataCubeQuerySortByType,
-} from '../../stores/query-builder/LegendDataCubeQueryLoaderState.js';
+  DATA_CUBE_LOADER_TYPEAHEAD_SEARCH_LIMIT,
+  DataCubeSortByType,
+} from '../../stores/builder/LegendDataCubeLoaderState.js';
+import { useApplicationStore } from '@finos/legend-application';
 
-const LegendDataCubeQuerySearcher = observer(() => {
-  const store = useLegendDataCubeQueryBuilderStore();
+const LegendDataCubeSearcher = observer(() => {
+  const store = useLegendDataCubeBuilderStore();
   const state = store.loader;
 
   const searchInputRef = useRef<HTMLInputElement>(null);
-  const searchResults = state.queries;
+  const searchResults = state.searchResults;
 
   useEffect(() => {
     searchInputRef.current?.focus();
   }, [state]);
 
   // search text
-  const debouncedLoadQueries = useMemo(
+  const debouncedLoader = useMemo(
     () =>
       debounce((input: string) => {
         state
-          .searchQueries(input)
+          .searchDataCubes(input)
           .catch((error) => store.alertService.alertUnhandledError(error));
       }, 500),
     [store, state],
@@ -62,21 +69,21 @@ const LegendDataCubeQuerySearcher = observer(() => {
   ) => {
     if (event.target.value !== state.searchText) {
       state.setSearchText(event.target.value);
-      debouncedLoadQueries.cancel();
-      debouncedLoadQueries(event.target.value);
+      debouncedLoader.cancel();
+      debouncedLoader(event.target.value);
     }
   };
   const clearSearches = () => {
     state.setSearchText('');
-    debouncedLoadQueries.cancel();
-    debouncedLoadQueries('');
+    debouncedLoader.cancel();
+    debouncedLoader('');
   };
 
   // filter and sort
-  const toggleShowCurrentUserQueriesOnly = () => {
-    state.setShowCurrentUserQueriesOnly(!state.showCurrentUserQueriesOnly);
-    debouncedLoadQueries.cancel();
-    debouncedLoadQueries(state.searchText);
+  const toggleShowCurrentUserResultsOnly = () => {
+    state.setShowCurrentUserResultsOnly(!state.showCurrentUserResultsOnly);
+    debouncedLoader.cancel();
+    debouncedLoader(state.searchText);
   };
 
   const [
@@ -85,15 +92,15 @@ const LegendDataCubeQuerySearcher = observer(() => {
     sortDropdownProps,
     sortDropdownPropsOpen,
   ] = useDropdownMenu();
-  const applySort = (value: DataCubeQuerySortByType) => {
+  const applySort = (value: DataCubeSortByType) => {
     state.setSortBy(value);
-    debouncedLoadQueries.cancel();
-    debouncedLoadQueries(state.searchText);
+    debouncedLoader.cancel();
+    debouncedLoader(state.searchText);
   };
 
   useEffect(() => {
     state
-      .searchQueries('')
+      .searchDataCubes('')
       .catch((error) => store.alertService.alertUnhandledError(error));
   }, [store, state]);
 
@@ -108,7 +115,7 @@ const LegendDataCubeQuerySearcher = observer(() => {
             })}
             onChange={onSearchTextChange}
             value={state.searchText}
-            placeholder="Search for queries by name or ID"
+            placeholder="Search for DataCube(s) by name or ID"
           />
           <div className="absolute flex aspect-square h-full items-center justify-center">
             <DataCubeIcon.Search className="text-lg text-neutral-600" />
@@ -132,8 +139,8 @@ const LegendDataCubeQuerySearcher = observer(() => {
             <div className="flex h-6 w-[calc(100%_-_40px)] overflow-x-auto">
               <FormCheckbox
                 label="Mine Only"
-                checked={state.showCurrentUserQueriesOnly}
-                onChange={toggleShowCurrentUserQueriesOnly}
+                checked={state.showCurrentUserResultsOnly}
+                onChange={toggleShowCurrentUserResultsOnly}
               />
             </div>
           </div>
@@ -148,7 +155,7 @@ const LegendDataCubeQuerySearcher = observer(() => {
               Sort by: {state.sortBy}
             </FormDropdownMenuTrigger>
             <FormDropdownMenu className="w-32" {...sortDropdownProps}>
-              {Object.values(DataCubeQuerySortByType).map((option) => (
+              {Object.values(DataCubeSortByType).map((option) => (
                 <FormDropdownMenuItem
                   key={option}
                   onClick={() => {
@@ -170,15 +177,15 @@ const LegendDataCubeQuerySearcher = observer(() => {
           {state.searchState.hasCompleted && (
             <>
               <div className="mb-1 flex h-5 w-full items-center px-1.5 text-sm text-neutral-600">
-                {state.showingDefaultQueries ? (
+                {state.showingDefaultResults ? (
                   `Refine your search to get better matches`
                 ) : searchResults.length >=
-                  DATA_CUBE_QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT ? (
+                  DATA_CUBE_LOADER_TYPEAHEAD_SEARCH_LIMIT ? (
                   <>
-                    {`Found ${DATA_CUBE_QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT}+ matches`}{' '}
+                    {`Found ${DATA_CUBE_LOADER_TYPEAHEAD_SEARCH_LIMIT}+ matches`}{' '}
                     <DataCubeIcon.AlertInfo
                       className="ml-1 text-lg"
-                      title="Some queries are not listed, refine your search to get better matches"
+                      title="Some DataCubes are not listed, refine your search to get better matches"
                     />
                   </>
                 ) : (
@@ -186,25 +193,25 @@ const LegendDataCubeQuerySearcher = observer(() => {
                 )}
               </div>
               {searchResults
-                .slice(0, DATA_CUBE_QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT)
-                .map((query, idx) => (
+                .slice(0, DATA_CUBE_LOADER_TYPEAHEAD_SEARCH_LIMIT)
+                .map((result, idx) => (
                   <div
                     className="mx-1.5 mb-0.5 flex h-[42px] w-[calc(100%_-_12px)] cursor-pointer border border-neutral-200 bg-neutral-100 hover:bg-neutral-200"
-                    key={query.id}
-                    title="Click to choose query"
-                    onClick={() => state.setSelectedQuery(query)}
+                    key={result.id}
+                    title="Click to choose DataCube"
+                    onClick={() => state.setSelectedResult(result)}
                   >
                     <div className="w-[calc(100%_-_16px)]">
                       <div className="h-6 w-4/5 overflow-hidden text-ellipsis whitespace-nowrap px-1.5 leading-6">
-                        {query.name}
+                        {result.name}
                       </div>
                       <div className="flex h-[18px] items-start justify-between px-1.5">
                         <div className="flex">
                           <DataCubeIcon.ClockEdit className="text-sm text-neutral-500" />
                           <div className="ml-1 text-sm text-neutral-500">
-                            {query.lastUpdatedAt
+                            {result.lastUpdatedAt
                               ? formatDistanceToNow(
-                                  new Date(query.lastUpdatedAt),
+                                  new Date(result.lastUpdatedAt),
                                   {
                                     includeSeconds: true,
                                     addSuffix: true,
@@ -216,7 +223,7 @@ const LegendDataCubeQuerySearcher = observer(() => {
                         <div className="flex">
                           <DataCubeIcon.User className="text-sm text-neutral-500" />
                           <div className="ml-1 text-sm text-neutral-500">
-                            {query.owner}
+                            {result.owner}
                           </div>
                         </div>
                       </div>
@@ -240,52 +247,108 @@ const LegendDataCubeQuerySearcher = observer(() => {
   );
 });
 
-export const LegendDataCubeQueryLoader = observer(() => {
-  const store = useLegendDataCubeQueryBuilderStore();
+export const LegendDataCubeLoader = observer(() => {
+  const store = useLegendDataCubeBuilderStore();
+  const application = useApplicationStore();
   const state = store.loader;
-  const query = state.selectedQuery;
+  const selectedResult = state.selectedResult;
+  const [openManageDropdown, closeManageDropdown, manageDropdownProps] =
+    useDropdownMenu();
 
   return (
     <>
       <div className="h-[calc(100%_-_40px)] w-full px-2 pt-2">
         <div className="h-full w-full overflow-auto border border-neutral-300 bg-white">
-          {!query ? (
-            <LegendDataCubeQuerySearcher />
+          {!selectedResult ? (
+            <LegendDataCubeSearcher />
           ) : (
             <div className="h-full w-full p-1.5">
-              <div className="mb-0.5 flex h-[42px] w-full border border-neutral-200 bg-neutral-100">
+              <div className="relative mb-0.5 flex h-[42px] w-full border border-neutral-200 bg-neutral-100">
                 <div className="w-full">
                   <div className="h-6 w-4/5 overflow-hidden text-ellipsis whitespace-nowrap px-1.5 leading-6">
-                    {query.name}
+                    {selectedResult.name}
                   </div>
+                  <button
+                    className="absolute right-0.5 top-0.5 flex aspect-square w-5 items-center justify-center text-neutral-500"
+                    title="Copy ID to clipboard"
+                    onClick={() => {
+                      application.clipboardService
+                        .copyTextToClipboard(selectedResult.id)
+                        .catch((error) =>
+                          store.alertService.alertUnhandledError(error),
+                        );
+                    }}
+                  >
+                    <DataCubeIcon.Clipboard />
+                  </button>
                   <div className="flex h-[18px] items-start justify-between px-1.5">
                     <div className="flex">
                       <DataCubeIcon.ClockEdit className="text-sm text-neutral-500" />
                       <div className="ml-1 text-sm text-neutral-500">
-                        {query.lastUpdatedAt
-                          ? formatDistanceToNow(new Date(query.lastUpdatedAt), {
-                              includeSeconds: true,
-                              addSuffix: true,
-                            })
+                        {selectedResult.lastUpdatedAt
+                          ? formatDistanceToNow(
+                              new Date(selectedResult.lastUpdatedAt),
+                              {
+                                includeSeconds: true,
+                                addSuffix: true,
+                              },
+                            )
                           : '(unknown)'}
                       </div>
                     </div>
                     <div className="flex">
                       <DataCubeIcon.User className="text-sm text-neutral-500" />
                       <div className="ml-1 text-sm text-neutral-500">
-                        {query.owner}
+                        {selectedResult.owner}
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
 
-              <FormButton
-                className="mt-1.5"
-                onClick={() => state.setSelectedQuery(undefined)}
-              >
-                Select Another Query
-              </FormButton>
+              <div className="mt-1.5 flex justify-between">
+                <FormButton
+                  className="flex items-center pl-1"
+                  onClick={() => state.setSelectedResult(undefined)}
+                >
+                  <DataCubeIcon.ChevronLeft className="mr-0.5" />
+                  Go Back
+                </FormButton>
+
+                {store.canCurrentUserManageDataCube(selectedResult) && (
+                  <>
+                    <FormButton
+                      className="flex w-[138px] items-center justify-start px-0"
+                      onClick={openManageDropdown}
+                    >
+                      <div className="px-2.5">Manage DataCube</div>
+                      <div className="flex h-4 w-4 items-center justify-center border-l border-neutral-400">
+                        <DataCubeIcon.CaretDown className="text-sm" />
+                      </div>
+                    </FormButton>
+                    <DropdownMenu
+                      {...manageDropdownProps}
+                      menuProps={{
+                        classes: {
+                          paper: 'rounded-none mt-[1px]',
+                          list: 'w-[138px] p-0 rounded-none border border-neutral-400 bg-white max-h-40 overflow-y-auto py-0.5',
+                        },
+                      }}
+                    >
+                      <DropdownMenuItem
+                        className="flex h-[22px] w-full items-center px-2.5 text-base hover:bg-neutral-100 focus:bg-neutral-100"
+                        onClick={() => {
+                          store.setDataCubeToDelete(selectedResult);
+                          store.deleteConfirmationDisplay.open();
+                          closeManageDropdown();
+                        }}
+                      >
+                        Delete...
+                      </DropdownMenuItem>
+                    </DropdownMenu>
+                  </>
+                )}
+              </div>
             </div>
           )}
         </div>
@@ -294,7 +357,7 @@ export const LegendDataCubeQueryLoader = observer(() => {
         <FormButton onClick={() => state.display.close()}>Cancel</FormButton>
         <FormButton
           className="ml-2"
-          disabled={!query || state.finalizeState.isInProgress}
+          disabled={!selectedResult || state.finalizeState.isInProgress}
           onClick={() => {
             state
               .finalize()

package/src/components/builder/LegendDataCubeSaver.tsx

@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  DataCubeSpecification,
+  DEFAULT_REPORT_NAME,
+  FormBadge_Advanced,
+  FormButton,
+  FormCheckbox,
+  FormTextInput,
+} from '@finos/legend-data-cube';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
+import { useLegendDataCubeBuilderStore } from './LegendDataCubeBuilderStoreProvider.js';
+import { guaranteeNonNullable, returnUndefOnError } from '@finos/legend-shared';
+
+export const LegendDataCubeSaver = observer(() => {
+  const [name, setName] = useState(DEFAULT_REPORT_NAME);
+  const [syncName, setSyncName] = useState(false);
+  const [autoEnableCache, setAutoEnableCache] = useState(false);
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
+  const store = useLegendDataCubeBuilderStore();
+  const builder = guaranteeNonNullable(store.builder);
+
+  useEffect(() => {
+    const persistentDataCube = builder.persistentDataCube;
+    const latestSpecification = persistentDataCube
+      ? returnUndefOnError(() =>
+          DataCubeSpecification.serialization.fromJson(
+            persistentDataCube.content,
+          ),
+        )
+      : undefined;
+
+    setName(
+      persistentDataCube?.name ??
+        builder.initialSpecification.configuration?.name ??
+        DEFAULT_REPORT_NAME,
+    );
+    setSyncName(false);
+    setAutoEnableCache(latestSpecification?.options?.autoEnableCache ?? false);
+  }, [builder]);
+
+  return (
+    <>
+      <div className="h-[calc(100%_-_40px)] w-full px-2 pt-2">
+        <div className="h-full w-full overflow-auto border border-neutral-300 bg-white">
+          <div className="h-full w-full select-none p-2">
+            <div className="flex h-5 w-full items-center">
+              <div className="flex h-full w-20 flex-shrink-0 items-center text-sm">
+                Name:
+              </div>
+              <FormTextInput
+                className="w-80"
+                value={name}
+                onChange={(event) => {
+                  setName(event.target.value);
+                }}
+                autoFocus={true}
+              />
+            </div>
+            <div className="mt-2 flex h-5 w-full items-center">
+              <div className="flex h-full w-20 flex-shrink-0" />
+              <FormCheckbox
+                label="Ensure report name is in sync with DataCube name"
+                checked={syncName}
+                onChange={() => setSyncName(!syncName)}
+              />
+            </div>
+            {showAdvancedSettings && (
+              <>
+                <div className="my-2 h-[1px] w-full bg-neutral-200" />
+                <div className="mt-2 flex h-5 w-full items-center">
+                  <div className="flex h-full w-20 flex-shrink-0 items-center text-sm">
+                    Caching:
+                  </div>
+                  <FormCheckbox
+                    label="Auto-enable caching"
+                    checked={autoEnableCache}
+                    onChange={() => setAutoEnableCache(!autoEnableCache)}
+                  />
+                  <FormBadge_Advanced />
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex h-10 items-center justify-between px-2">
+        <div className="flex h-full items-center pl-1">
+          <FormCheckbox
+            label="Show advanced settings?"
+            checked={showAdvancedSettings}
+            onChange={() => setShowAdvancedSettings(!showAdvancedSettings)}
+          />
+          <FormBadge_Advanced />
+        </div>
+        <div className="flex">
+          <FormButton onClick={() => store.saverDisplay.close()}>
+            Cancel
+          </FormButton>
+          {builder.persistentDataCube ? (
+            // updating existing DataCube
+            <>
+              <FormButton
+                className="ml-2"
+                disabled={
+                  !builder.dataCube ||
+                  store.saveState.isInProgress ||
+                  !store.canCurrentUserManageDataCube(
+                    builder.persistentDataCube,
+                  )
+                }
+                onClick={() => {
+                  store
+                    .saveDataCube(name, {
+                      syncName,
+                      autoEnableCache,
+                      saveAsNew: false,
+                    })
+                    .catch((error) =>
+                      store.alertService.alertUnhandledError(error),
+                    );
+                }}
+              >
+                Save
+              </FormButton>
+              <FormButton
+                className="ml-2"
+                disabled={!builder.dataCube || store.saveState.isInProgress}
+                onClick={() => {
+                  store
+                    .saveDataCube(name, {
+                      syncName,
+                      autoEnableCache,
+                      saveAsNew: true,
+                    })
+                    .catch((error) =>
+                      store.alertService.alertUnhandledError(error),
+                    );
+                }}
+              >
+                Save As
+              </FormButton>
+            </>
+          ) : (
+            // creating new DataCube
+            <>
+              <FormButton
+                className="ml-2"
+                disabled={!builder.dataCube || store.saveState.isInProgress}
+                onClick={() => {
+                  store
+                    .createNewDataCube(name, {
+                      syncName,
+                      autoEnableCache,
+                    })
+                    .catch((error) =>
+                      store.alertService.alertUnhandledError(error),
+                    );
+                }}
+              >
+                Save
+              </FormButton>
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});

package/src/components/builder/LegendDataCubeSourceViewer.tsx

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useLegendDataCubeBuilderStore } from './LegendDataCubeBuilderStoreProvider.js';
+import { LegendQueryDataCubeSource } from '../../stores/model/LegendQueryDataCubeSource.js';
+import { useLegendDataCubeApplicationStore } from '../LegendDataCubeFrameworkProvider.js';
+import { EXTERNAL_APPLICATION_NAVIGATION__generateQueryViewUrl } from '../../__lib__/LegendDataCubeNavigation.js';
+import { DataCubeIcon } from '@finos/legend-art';
+
+export const LegendDataCubeSourceViewer = observer(() => {
+  const store = useLegendDataCubeBuilderStore();
+  const source = store.builder?.source;
+  const application = useLegendDataCubeApplicationStore();
+
+  if (!source) {
+    return null;
+  }
+  if (source instanceof LegendQueryDataCubeSource) {
+    const link = application.config.queryApplicationUrl
+      ? EXTERNAL_APPLICATION_NAVIGATION__generateQueryViewUrl(
+          application.config.queryApplicationUrl,
+          source.info.id,
+        )
+      : undefined;
+    return (
+      <div className="h-full w-full px-2 pt-2">
+        <div className="h-[calc(100%_-_8px)] w-full border border-neutral-300 bg-white">
+          <div className="h-full w-full select-none p-2">
+            <div className="flex h-6">
+              <div className="flex h-6 items-center text-xl font-medium">
+                <DataCubeIcon.Table />
+              </div>
+              <div className="ml-1 flex h-6 items-center text-xl font-medium">
+                Legend Query
+              </div>
+            </div>
+            {link && (
+              <div className="mt-2 flex h-6 w-full">
+                <div className="flex h-full w-[calc(100%_-_20px)] items-center border border-r-0 border-neutral-400 px-1.5 font-bold text-sky-500 underline">
+                  <a
+                    href={link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="overflow-hidden overflow-ellipsis whitespace-nowrap"
+                  >
+                    {link}
+                  </a>
+                </div>
+                <button
+                  className="flex aspect-square h-full w-6 items-center justify-center border border-neutral-400 bg-neutral-300 hover:brightness-95"
+                  onClick={() => {
+                    store.application.clipboardService
+                      .copyTextToClipboard(link)
+                      .catch((error) =>
+                        store.alertService.alertUnhandledError(error),
+                      );
+                  }}
+                  title="Copy Link"
+                >
+                  <DataCubeIcon.Clipboard />
+                </button>
+              </div>
+            )}
+            {!link && (
+              <div className="mt-2 flex h-6 w-full">
+                <div className="flex h-full w-[calc(100%_-_20px)] items-center border border-r-0 border-neutral-400 bg-neutral-200 px-1.5">
+                  <div className="overflow-hidden overflow-ellipsis whitespace-nowrap">
+                    {source.info.id}
+                  </div>
+                </div>
+                <button
+                  className="flex aspect-square h-full w-6 items-center justify-center border border-neutral-400 bg-neutral-300 hover:brightness-95"
+                  onClick={() => {
+                    application.clipboardService
+                      .copyTextToClipboard(source.info.id)
+                      .catch((error) =>
+                        store.alertService.alertUnhandledError(error),
+                      );
+                  }}
+                  title="Copy ID"
+                >
+                  <DataCubeIcon.Clipboard />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="h-full w-full px-2 pt-2">{`Can't display source`}</div>
+  );
+});

package/src/components/{query-builder/source-builder → builder/source}/AdhocQueryDataCubeSourceBuilder.tsx

@@ -15,7 +15,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import type { AdhocQueryDataCubeSourceBuilderState } from '../../../stores/query-builder/source-builder/AdhocQueryDataCubeSourceBuilderState.js';
+import type { AdhocQueryDataCubeSourceBuilderState } from '../../../stores/builder/source/AdhocQueryDataCubeSourceBuilderState.js';
 import { FormBadge_WIP } from '@finos/legend-data-cube';
 
 export const AdhocQueryDataCubeSourceBuilder = observer(