add a button in dev-tools tab to download project grammar (#2524)

.changeset/gentle-ads-raise.md

@@ -0,0 +1,5 @@
+---
+'@finos/legend-application-studio': patch
+---
+
+Add a button in dev-tools tab to download project grammar with/without dependency projects

packages/legend-application-studio/src/components/editor/panel-group/DevToolPanel.tsx

@@ -20,10 +20,19 @@ import {
   Panel,
   PanelFormTextField,
   PanelForm,
+  CloudDownloadIcon,
+  PanelFormListItems,
 } from '@finos/legend-art';
-import { isValidUrl } from '@finos/legend-shared';
+import {
+  ContentType,
+  downloadFileUsingDataURI,
+  getContentTypeFileExtension,
+  isValidUrl,
+} from '@finos/legend-shared';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { LEGEND_STUDIO_SETTING_KEY } from '../../../__lib__/LegendStudioSetting.js';
+import { flowResult } from 'mobx';
+import type { PureModel } from '@finos/legend-graph';
 
 export const DevToolPanel = observer(() => {
   const editorStore = useEditorStore();
@@ -58,6 +67,52 @@ export const DevToolPanel = observer(() => {
     );
   };
 
+  const downloadDependencyProjectGrammars = async (): Promise<string> => {
+    const dependencyGrammars = await Promise.all(
+      Array.from(
+        editorStore.graphManagerState.graph.dependencyManager
+          .projectDependencyModelsIndex,
+      ).map(
+        (graph) =>
+          flowResult(
+            editorStore.graphManagerState.graphManager.graphToPureCode(
+              graph[1] as PureModel,
+              {
+                pretty: true,
+              },
+            ),
+          ) as string,
+      ),
+    );
+    return dependencyGrammars.join('\n');
+  };
+
+  const downloadProjectGrammar = async (
+    withDependency: boolean,
+  ): Promise<void> => {
+    const graphGrammar = (await Promise.all([
+      flowResult(
+        editorStore.graphManagerState.graphManager.graphToPureCode(
+          editorStore.graphManagerState.graph,
+          { pretty: true },
+        ),
+      ),
+    ])) as unknown as string;
+    const dependencyGrammars = withDependency
+      ? ((await Promise.all([
+          flowResult(downloadDependencyProjectGrammars()),
+        ])) as unknown as string)
+      : '';
+    const fileName = `grammar.${getContentTypeFileExtension(
+      ContentType.TEXT_PLAIN,
+    )}`;
+    downloadFileUsingDataURI(
+      fileName,
+      `${graphGrammar}\n${dependencyGrammars}`,
+      ContentType.TEXT_PLAIN,
+    );
+  };
+
   return (
     <Panel>
       <PanelForm>
@@ -130,6 +185,44 @@ export const DevToolPanel = observer(() => {
           isReadOnly={false}
           update={toggleArtifactGeneration}
         />
+        <PanelFormListItems title="Download Project Grammar">
+          <div className="developer-tools__action-groups">
+            <div className="developer-tools__action-group">
+              <button
+                className="developer-tools__action-group__btn"
+                onClick={() => {
+                  downloadProjectGrammar(false).catch(
+                    editorStore.applicationStore.alertUnhandledError,
+                  );
+                }}
+                tabIndex={-1}
+                title="Download Project Grammar"
+              >
+                <CloudDownloadIcon />
+              </button>
+              <div className="developer-tools__action-group__prompt">
+                download grammar without dependency
+              </div>
+            </div>
+            <div className="developer-tools__action-group">
+              <button
+                className="developer-tools__action-group__btn"
+                onClick={() => {
+                  downloadProjectGrammar(true).catch(
+                    editorStore.applicationStore.alertUnhandledError,
+                  );
+                }}
+                tabIndex={-1}
+                title="Download Project Grammar with Dependency"
+              >
+                <CloudDownloadIcon />
+              </button>
+              <div className="developer-tools__action-group__prompt">
+                download grammar with dependency
+              </div>
+            </div>
+          </div>
+        </PanelFormListItems>
       </PanelForm>
     </Panel>
   );

packages/legend-application-studio/style/components/_dev-tool-panel.scss

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ */
+@use 'mixins' as *;
+
+.developer-tools {
+  &__action-group {
+    @include flexVCenter;
+
+    &__btn {
+      align-self: flex-start;
+      padding-top: 0.2rem;
+
+      svg {
+        font-size: 2rem;
+        color: var(--color-dark-grey-250);
+      }
+
+      &--loading svg {
+        animation: jiggle 0.3s infinite ease;
+      }
+    }
+
+    &__prompt {
+      @include flexCenter;
+
+      word-break: break-word;
+      margin-left: 0.8rem;
+      color: var(--color-light-grey-400);
+      line-height: 2rem;
+      user-select: none;
+      cursor: pointer;
+
+      svg {
+        margin-left: 0.5rem;
+      }
+    }
+  }
+}

packages/legend-application-studio/style/index.scss

@@ -20,3 +20,4 @@
 @forward 'components/project-view';
 @forward 'components/review';
 @forward 'components/showcase-manager';
+@forward 'components/dev-tool-panel';