@finos/legend-extension-dsl-service 0.0.1

package/src/components/studio/ServiceQueryEditorReviewAction.tsx

@@ -0,0 +1,172 @@
+/**
+ * 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 { useApplicationStore } from '@finos/legend-application';
+import { generateReviewRoute } from '@finos/legend-application-studio';
+import {
+  Dialog,
+  ExternalLinkSquareIcon,
+  Panel,
+  PanelLoadingIndicator,
+  ReviewIcon,
+} from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState } from 'react';
+import { useServiceQueryEditorStore } from './ServiceQueryEditorStoreProvider.js';
+
+const NewReviewModal = observer(() => {
+  const editorStore = useServiceQueryEditorStore();
+  const applicationStore = useApplicationStore();
+  const messageInputRef = useRef<HTMLInputElement>(null);
+  const [message, setMessage] = useState<string>(
+    `Update query of service '${editorStore.service.path}'`,
+  );
+  const changeMessage: React.ChangeEventHandler<HTMLInputElement> = (event) =>
+    setMessage(event.target.value);
+
+  // actions
+  const handleEnter = (): void => messageInputRef.current?.focus();
+  const submitReview = (): void => {
+    if (message) {
+      flowResult(
+        editorStore.workspaceReviewState.createWorkspaceReview(message),
+      )
+        .then(() => editorStore.setShowSubmitReviewModal(false))
+        .catch(applicationStore.alertUnhandledError);
+    }
+  };
+  const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    submitReview();
+  };
+  const onClose = (): void => editorStore.setShowSubmitReviewModal(false);
+
+  return (
+    <Dialog
+      open={editorStore.showSubmitReviewModal}
+      onClose={onClose}
+      TransitionProps={{
+        onEnter: handleEnter,
+      }}
+      PaperProps={{
+        classes: {
+          root: 'search-modal__inner-container',
+        },
+      }}
+    >
+      <form onSubmit={onSubmit} className="modal search-modal modal--dark">
+        <div className="modal__title">Submit for Review</div>
+        <Panel>
+          <PanelLoadingIndicator
+            isLoading={
+              editorStore.workspaceReviewState.isCreatingWorkspaceReview
+            }
+          />
+          <div className="panel__content--full">
+            <div className="input-group">
+              <input
+                ref={messageInputRef}
+                className="input input--dark input-group__input"
+                value={message}
+                onChange={changeMessage}
+                placeholder="What is this change about?"
+              />
+              {!message && (
+                <div className="input-group__error-message">
+                  Review message must not be empty
+                </div>
+              )}
+            </div>
+          </div>
+        </Panel>
+        <div className="search-modal__actions">
+          <button
+            className="btn btn--dark"
+            disabled={
+              !message ||
+              editorStore.projectConfigurationEditorState
+                .containsSnapshotDependencies ||
+              Boolean(editorStore.workspaceReviewState.workspaceReview) ||
+              editorStore.workspaceReviewState.isCreatingWorkspaceReview
+            }
+            title={
+              editorStore.projectConfigurationEditorState
+                .containsSnapshotDependencies
+                ? `Can't submit review: workspace contains unpublished dependencies`
+                : undefined
+            }
+            onClick={submitReview}
+          >
+            Submit
+          </button>
+        </div>
+      </form>
+    </Dialog>
+  );
+});
+
+export const ServiceQueryEditorReviewAction = observer(() => {
+  const editorStore = useServiceQueryEditorStore();
+  const applicationStore = useApplicationStore();
+  const currentReview = editorStore.workspaceReviewState.workspaceReview;
+
+  const showCreateReviewModal = (): void =>
+    editorStore.setShowSubmitReviewModal(true);
+  const visitReview = (): void => {
+    if (currentReview) {
+      applicationStore.navigator.openNewWindow(
+        applicationStore.navigator.generateLocation(
+          generateReviewRoute(currentReview.projectId, currentReview.id),
+        ),
+      );
+    }
+  };
+
+  return (
+    <>
+      {currentReview && (
+        <button
+          className="service-query-editor__header__action service-query-editor__review"
+          title={`${currentReview.title}\n\nClick to see review`}
+          onClick={visitReview}
+        >
+          <div className="service-query-editor__review__icon">
+            <ReviewIcon />
+          </div>
+          <div className="service-query-editor__review__message">
+            {currentReview.title}
+          </div>
+          <div className="service-query-editor__review__action">
+            <ExternalLinkSquareIcon />
+          </div>
+        </button>
+      )}
+      {!currentReview && (
+        <button
+          className="service-query-editor__header__action service-query-editor__header__action--simple btn--dark"
+          tabIndex={-1}
+          disabled={Boolean(currentReview)}
+          title="Submit for review"
+          onClick={showCreateReviewModal}
+        >
+          <ReviewIcon />
+          {editorStore.showSubmitReviewModal && <NewReviewModal />}
+        </button>
+      )}
+    </>
+  );
+});

package/src/components/studio/ServiceQueryEditorStoreProvider.tsx

@@ -0,0 +1,89 @@
+/**
+ * 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 { createContext, useContext } from 'react';
+import { useLocalObservable } from 'mobx-react-lite';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import {
+  type ServiceQueryEditorStore,
+  ServiceQueryUpdaterStore,
+  ProjectServiceQueryUpdaterStore,
+} from '../../stores/studio/ServiceQueryEditorStore.js';
+import { useDepotServerClient } from '@finos/legend-server-depot';
+import { useSDLCServerClient } from '@finos/legend-server-sdlc';
+import { useLegendStudioApplicationStore } from '@finos/legend-application-studio';
+
+export const ServiceQueryEditorStoreContext = createContext<
+  ServiceQueryEditorStore | undefined
+>(undefined);
+
+export const ServiceQueryUpdaterStoreProvider: React.FC<{
+  children: React.ReactNode;
+  serviceCoordinates: string;
+  groupWorkspaceId: string;
+}> = ({ children, serviceCoordinates, groupWorkspaceId }) => {
+  const applicationStore = useLegendStudioApplicationStore();
+  const sdlcServerClient = useSDLCServerClient();
+  const depotServerClient = useDepotServerClient();
+  const store = useLocalObservable(
+    () =>
+      new ServiceQueryUpdaterStore(
+        applicationStore,
+        sdlcServerClient,
+        depotServerClient,
+        serviceCoordinates,
+        groupWorkspaceId,
+      ),
+  );
+  return (
+    <ServiceQueryEditorStoreContext.Provider value={store}>
+      {children}
+    </ServiceQueryEditorStoreContext.Provider>
+  );
+};
+
+export const ProjectServiceQueryUpdaterStoreProvider: React.FC<{
+  children: React.ReactNode;
+  projectId: string;
+  groupWorkspaceId: string;
+  servicePath: string;
+}> = ({ children, projectId, groupWorkspaceId, servicePath }) => {
+  const applicationStore = useLegendStudioApplicationStore();
+  const sdlcServerClient = useSDLCServerClient();
+  const depotServerClient = useDepotServerClient();
+  const store = useLocalObservable(
+    () =>
+      new ProjectServiceQueryUpdaterStore(
+        applicationStore,
+        sdlcServerClient,
+        depotServerClient,
+        projectId,
+        groupWorkspaceId,
+        servicePath,
+      ),
+  );
+  return (
+    <ServiceQueryEditorStoreContext.Provider value={store}>
+      {children}
+    </ServiceQueryEditorStoreContext.Provider>
+  );
+};
+
+export const useServiceQueryEditorStore = (): ServiceQueryEditorStore =>
+  guaranteeNonNullable(
+    useContext(ServiceQueryEditorStoreContext),
+    `Can't find service query editor store in context`,
+  );

package/src/components/studio/ServiceQueryEditorWorkspaceStatus.tsx

@@ -0,0 +1,121 @@
+/**
+ * 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 {
+  ActionAlertActionType,
+  ActionAlertType,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { CloudDownloadIcon, SyncIcon } from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useServiceQueryEditorStore } from './ServiceQueryEditorStoreProvider.js';
+
+export const ServiceQueryEditorWorkspaceStatus = observer(() => {
+  const editorStore = useServiceQueryEditorStore();
+  const applicationStore = useApplicationStore();
+  const isWorkspaceOutOfSync = editorStore.sdlcState.isWorkspaceOutOfSync;
+  const isWorkspaceOutated = editorStore.sdlcState.isWorkspaceOutdated;
+
+  const updateWorkspace = (): void => {
+    editorStore.setActionAlertInfo({
+      // TODO?: we might want to factor in change-detection to have more confidence here
+      message: `Please backup your work. Proceed to update workspace?`,
+      type: ActionAlertType.CAUTION,
+      actions: [
+        {
+          label: 'Proceed',
+          type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+          handler: () => {
+            flowResult(editorStore.recreateWorkspace()).catch(
+              applicationStore.alertUnhandledError,
+            );
+          },
+        },
+        {
+          label: 'Abort',
+          type: ActionAlertActionType.PROCEED,
+          default: true,
+        },
+      ],
+    });
+  };
+
+  const syncWorkspace = (): void => {
+    editorStore.setActionAlertInfo({
+      // TODO?: we might want to factor in change-detection to have more confidence here
+      message: `Please backup your work. Proceed to sync workspace?`,
+      type: ActionAlertType.CAUTION,
+      actions: [
+        {
+          label: 'Proceed',
+          type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+          handler: (): void => applicationStore.navigator.reload(),
+        },
+        {
+          label: 'Abort',
+          type: ActionAlertActionType.PROCEED,
+          default: true,
+        },
+      ],
+    });
+  };
+
+  return (
+    <>
+      {isWorkspaceOutOfSync && (
+        <button
+          className="service-query-editor__header__action service-query-editor__workspace-status service-query-editor__workspace-status--out-of-sync"
+          title={`Local workspace is out-of-sync. Please backup your work and refresh the application\n\nClick to sync workspace`}
+          tabIndex={-1}
+          onClick={syncWorkspace}
+        >
+          <div className="service-query-editor__workspace-status__icon">
+            <SyncIcon />
+          </div>
+          <div className="service-query-editor__workspace-status__text">
+            OUT-OF-SYNC
+          </div>
+        </button>
+      )}
+      {isWorkspaceOutated && !isWorkspaceOutOfSync && (
+        <button
+          className="service-query-editor__header__action service-query-editor__workspace-status service-query-editor__workspace-status--outdated"
+          title="Workspace is outdated. Click to update"
+          tabIndex={-1}
+          onClick={updateWorkspace}
+        >
+          <div className="service-query-editor__workspace-status__icon">
+            <CloudDownloadIcon />
+          </div>
+          <div className="service-query-editor__workspace-status__text">
+            OUTDATED
+          </div>
+        </button>
+      )}
+      {!isWorkspaceOutated && !isWorkspaceOutOfSync && (
+        <button
+          className="service-query-editor__header__action service-query-editor__workspace-status service-query-editor__workspace-status--up-to-date"
+          tabIndex={-1}
+          disabled={true}
+          title="Workspace is up-to-date"
+        >
+          <CloudDownloadIcon />
+        </button>
+      )}
+    </>
+  );
+});