@finos/legend-extension-dsl-data-space 9.1.4 → 9.1.6

package/src/components/DataSpaceDiagramViewer.tsx

@@ -0,0 +1,199 @@
+/**
+ * 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 {
+  AnchorLinkIcon,
+  CircleIcon,
+  ThinChevronLeftIcon,
+  ThinChevronRightIcon,
+  clsx,
+  useResizeDetector,
+} from '@finos/legend-art';
+import type { DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import { observer } from 'mobx-react-lite';
+import { forwardRef, useEffect, useRef } from 'react';
+import {
+  DiagramRenderer,
+  type Diagram,
+} from '@finos/legend-extension-dsl-diagram';
+import {
+  getNullableFirstElement,
+  getNullableLastElement,
+  guaranteeNonNullable,
+} from '@finos/legend-shared';
+import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
+
+const DataSpaceDiagramCanvas = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      dataSpaceViewerState: DataSpaceViewerState;
+      diagram: Diagram;
+    }
+  >(function DataSpaceDiagramCanvas(props, ref) {
+    const { dataSpaceViewerState, diagram } = props;
+    const diagramCanvasRef = ref as React.MutableRefObject<HTMLDivElement>;
+
+    const { width, height } = useResizeDetector<HTMLDivElement>({
+      refreshMode: 'debounce',
+      refreshRate: 50,
+      targetRef: diagramCanvasRef,
+    });
+
+    useEffect(() => {
+      const renderer = new DiagramRenderer(diagramCanvasRef.current, diagram);
+      dataSpaceViewerState.setRenderer(renderer);
+      dataSpaceViewerState.setupRenderer();
+      renderer.render({ initial: true });
+    }, [diagramCanvasRef, dataSpaceViewerState, diagram]);
+
+    useEffect(() => {
+      if (dataSpaceViewerState.isDiagramRendererInitialized) {
+        dataSpaceViewerState.renderer.refresh();
+      }
+    }, [dataSpaceViewerState, width, height]);
+
+    return (
+      <div
+        ref={diagramCanvasRef}
+        className={clsx(
+          'diagram-canvas ',
+          dataSpaceViewerState.diagramCursorClass,
+        )}
+        tabIndex={0}
+      />
+    );
+  }),
+);
+
+export const DataSpaceDiagramViewer = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+
+    // diagram selector
+    const diagramCanvasRef = useRef<HTMLDivElement>(null);
+
+    const showPreviousDiagram = (): void => {
+      if (!dataSpaceViewerState.currentDiagram) {
+        return;
+      }
+      const idx = analysisResult.diagrams.indexOf(
+        dataSpaceViewerState.currentDiagram,
+      );
+      if (idx === 0 || idx === -1) {
+        return;
+      }
+      dataSpaceViewerState.setCurrentDiagram(
+        guaranteeNonNullable(analysisResult.diagrams[idx - 1]),
+      );
+    };
+    const showNextDiagram = (): void => {
+      if (!dataSpaceViewerState.currentDiagram) {
+        return;
+      }
+      const idx = analysisResult.diagrams.indexOf(
+        dataSpaceViewerState.currentDiagram,
+      );
+      if (idx === analysisResult.diagrams.length - 1 || idx === -1) {
+        return;
+      }
+      dataSpaceViewerState.setCurrentDiagram(
+        guaranteeNonNullable(analysisResult.diagrams[idx + 1]),
+      );
+    };
+
+    return (
+      <div className="data-space__viewer__wiki__section">
+        <div className="data-space__viewer__wiki__section__header">
+          <div className="data-space__viewer__wiki__section__header__label">
+            Diagrams
+            <div className="data-space__viewer__wiki__section__header__anchor">
+              <AnchorLinkIcon />
+            </div>
+          </div>
+        </div>
+        <div className="data-space__viewer__wiki__section__content">
+          {analysisResult.diagrams.length > 0 && (
+            <div className="data-space__viewer__diagram-viewer">
+              <div className="data-space__viewer__diagram-viewer__carousel">
+                <div className="data-space__viewer__diagram-viewer__carousel__frame">
+                  <div className="data-space__viewer__diagram-viewer__carousel__frame__display">
+                    {dataSpaceViewerState.currentDiagram && (
+                      <DataSpaceDiagramCanvas
+                        dataSpaceViewerState={dataSpaceViewerState}
+                        diagram={dataSpaceViewerState.currentDiagram.diagram}
+                        ref={diagramCanvasRef}
+                      />
+                    )}
+                  </div>
+                  <button
+                    className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--back"
+                    tabIndex={-1}
+                    title="Previous"
+                    disabled={
+                      getNullableFirstElement(analysisResult.diagrams) ===
+                      dataSpaceViewerState.currentDiagram
+                    }
+                    onClick={showPreviousDiagram}
+                  >
+                    <ThinChevronLeftIcon />
+                  </button>
+                  <button
+                    className="data-space__viewer__diagram-viewer__carousel__frame__navigator data-space__viewer__diagram-viewer__carousel__frame__navigator--next"
+                    tabIndex={-1}
+                    title="Next"
+                    disabled={
+                      getNullableLastElement(analysisResult.diagrams) ===
+                      dataSpaceViewerState.currentDiagram
+                    }
+                    onClick={showNextDiagram}
+                  >
+                    <ThinChevronRightIcon />
+                  </button>
+                  <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators">
+                    <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators__notch">
+                      {analysisResult.diagrams.map((diagram) => (
+                        <button
+                          key={diagram.diagram.path}
+                          className={clsx(
+                            'data-space__viewer__diagram-viewer__carousel__frame__indicator',
+                            {
+                              'data-space__viewer__diagram-viewer__carousel__frame__indicator--active':
+                                dataSpaceViewerState.currentDiagram === diagram,
+                            },
+                          )}
+                          onClick={() =>
+                            dataSpaceViewerState.setCurrentDiagram(diagram)
+                          }
+                        >
+                          <CircleIcon />
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {analysisResult.diagrams.length <= 0 && (
+            <DataSpaceWikiPlaceholder message="No diagrams provided" />
+          )}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/DataSpaceExecutionContextViewer.tsx

@@ -0,0 +1,167 @@
+/**
+ * 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 {
+  CustomSelectorInput,
+  PURE_MappingIcon,
+  PURE_RuntimeIcon,
+  PlayIcon,
+} from '@finos/legend-art';
+import { type PackageableRuntime } from '@finos/legend-graph';
+import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import type { DataSpaceExecutionContextAnalysisResult } from '../graphManager/action/analytics/DataSpaceAnalysis.js';
+import { useApplicationStore } from '@finos/legend-application';
+
+type ExecutionContextOption = {
+  label: string;
+  value: DataSpaceExecutionContextAnalysisResult;
+};
+const buildExecutionContextOption = (
+  value: DataSpaceExecutionContextAnalysisResult,
+): ExecutionContextOption => ({
+  label: value.name,
+  value: value,
+});
+
+type RuntimeOption = {
+  label: string;
+  value: PackageableRuntime;
+};
+const buildRuntimeOption = (value: PackageableRuntime): RuntimeOption => ({
+  label: value.name,
+  value: value,
+});
+
+export const DataSpaceExecutionContextViewer = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const applicationStore = useApplicationStore();
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+    const executionContexts = Array.from(
+      dataSpaceViewerState.dataSpaceAnalysisResult.executionContextsIndex.values(),
+    );
+
+    // execution
+    const executionContextOptions = executionContexts.map(
+      buildExecutionContextOption,
+    );
+    const selectedExecutionContextOption = buildExecutionContextOption(
+      dataSpaceViewerState.currentExecutionContext,
+    );
+    const onExecutionContextOptionChange = (
+      option: ExecutionContextOption,
+    ): void => {
+      if (option.value !== dataSpaceViewerState.currentExecutionContext) {
+        dataSpaceViewerState.setCurrentExecutionContext(option.value);
+      }
+    };
+    const formatExecutionContextOptionLabel = (
+      option: ExecutionContextOption,
+    ): React.ReactNode => (
+      <div className="data-space__viewer__execution-context__entry__content__dropdown__option">
+        <div className="data-space__viewer__execution-context__entry__content__dropdown__option__label">
+          {option.label}
+        </div>
+        {option.value === analysisResult.defaultExecutionContext && (
+          <div className="data-space__viewer__execution-context__entry__content__dropdown__option__tag">
+            default
+          </div>
+        )}
+      </div>
+    );
+
+    // runtime
+    const runtimeOptions =
+      dataSpaceViewerState.currentExecutionContext.compatibleRuntimes.map(
+        buildRuntimeOption,
+      );
+    const selectedRuntimeOption = buildRuntimeOption(
+      dataSpaceViewerState.currentRuntime,
+    );
+    const onRuntimeOptionChange = (option: RuntimeOption): void => {
+      if (option.value !== dataSpaceViewerState.currentRuntime) {
+        dataSpaceViewerState.setCurrentRuntime(option.value);
+      }
+    };
+    const formatRuntimeOptionLabel = (
+      option: RuntimeOption,
+    ): React.ReactNode => (
+      <div className="data-space__viewer__execution-context__entry__content__dropdown__option">
+        <div className="data-space__viewer__execution-context__entry__content__dropdown__option__label">
+          {option.label}
+        </div>
+        {option.value ===
+          dataSpaceViewerState.currentExecutionContext.defaultRuntime && (
+          <div className="data-space__viewer__execution-context__entry__content__dropdown__option__tag">
+            default
+          </div>
+        )}
+      </div>
+    );
+
+    return (
+      <div className="data-space__viewer__panel">
+        <div className="data-space__viewer__execution-context">
+          <div className="data-space__viewer__execution-context__entry">
+            <div className="data-space__viewer__execution-context__entry__icon">
+              <PlayIcon className="data-space__viewer__execution-context__context-icon" />
+            </div>
+            <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__dropdown__container">
+              <CustomSelectorInput
+                className="data-space__viewer__execution-context__entry__content__dropdown"
+                options={executionContextOptions}
+                onChange={onExecutionContextOptionChange}
+                value={selectedExecutionContextOption}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
+                formatOptionLabel={formatExecutionContextOptionLabel}
+              />
+            </div>
+          </div>
+          <div className="data-space__viewer__execution-context__entry data-space__viewer__execution-context__mapping">
+            <div className="data-space__viewer__execution-context__entry__icon">
+              <PURE_MappingIcon />
+            </div>
+            <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__text">
+              {dataSpaceViewerState.currentExecutionContext.mapping.path}
+            </div>
+          </div>
+          <div className="data-space__viewer__execution-context__entry">
+            <div className="data-space__viewer__execution-context__entry__icon">
+              <PURE_RuntimeIcon />
+            </div>
+            <div className="data-space__viewer__execution-context__entry__content data-space__viewer__execution-context__entry__content__dropdown__container">
+              <CustomSelectorInput
+                className="data-space__viewer__execution-context__entry__content__dropdown"
+                options={runtimeOptions}
+                onChange={onRuntimeOptionChange}
+                value={selectedRuntimeOption}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
+                formatOptionLabel={formatRuntimeOptionLabel}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/DataSpaceInfoPanel.tsx

@@ -0,0 +1,170 @@
+/**
+ * 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 { ExternalLinkIcon, PencilIcon } from '@finos/legend-art';
+import { extractElementNameFromPath } from '@finos/legend-graph';
+import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import { generateGAVCoordinates } from '@finos/legend-storage';
+import { useApplicationStore } from '@finos/legend-application';
+
+export const DataSpaceInfoPanel = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const applicationStore = useApplicationStore();
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+
+    const viewProject = (): void =>
+      dataSpaceViewerState.viewProject(
+        dataSpaceViewerState.groupId,
+        dataSpaceViewerState.artifactId,
+        dataSpaceViewerState.versionId,
+        undefined,
+      );
+    const viewDataSpaceInProject = (): void =>
+      dataSpaceViewerState.viewProject(
+        dataSpaceViewerState.groupId,
+        dataSpaceViewerState.artifactId,
+        dataSpaceViewerState.versionId,
+        analysisResult.path,
+      );
+    const viewDataSpaceInSDLCProject = (): void => {
+      dataSpaceViewerState
+        .viewSDLCProject(
+          dataSpaceViewerState.groupId,
+          dataSpaceViewerState.artifactId,
+          analysisResult.path,
+        )
+        .catch(applicationStore.alertUnhandledError);
+    };
+
+    return (
+      <div className="data-space__viewer__panel">
+        <div className="data-space__viewer__info">
+          <div className="data-space__viewer__info__section">
+            <div className="data-space__viewer__info__section__entry">
+              <div className="data-space__viewer__info__project-info__label">
+                Project
+              </div>
+              <button
+                className="data-space__viewer__info__project-info__value"
+                tabIndex={-1}
+                title="Click to View Project"
+                onClick={viewProject}
+              >
+                {generateGAVCoordinates(
+                  dataSpaceViewerState.groupId,
+                  dataSpaceViewerState.artifactId,
+                  dataSpaceViewerState.versionId,
+                )}
+              </button>
+              <button
+                className="data-space__viewer__info__project-info__link"
+                tabIndex={-1}
+                title="View Project"
+                onClick={viewProject}
+              >
+                <ExternalLinkIcon />
+              </button>
+            </div>
+            <div className="data-space__viewer__info__section__entry">
+              <div className="data-space__viewer__info__project-info__label">
+                Data Space
+              </div>
+              <button
+                className="data-space__viewer__info__project-info__value"
+                tabIndex={-1}
+                title="Click to View Data Space"
+                onClick={viewDataSpaceInProject}
+              >
+                {analysisResult.path}
+              </button>
+              <button
+                className="data-space__viewer__info__project-info__link"
+                tabIndex={-1}
+                title="Edit Data Space"
+                onClick={viewDataSpaceInSDLCProject}
+              >
+                <PencilIcon />
+              </button>
+              <button
+                className="data-space__viewer__info__project-info__link"
+                tabIndex={-1}
+                title="View Data Space"
+                onClick={viewDataSpaceInProject}
+              >
+                <ExternalLinkIcon />
+              </button>
+            </div>
+          </div>
+          <div className="data-space__viewer__info__section">
+            <div className="data-space__viewer__info__section__title">
+              Tagged Values
+            </div>
+            {analysisResult.taggedValues.length !== 0 &&
+              analysisResult.taggedValues.map((taggedValue) => (
+                <div
+                  key={taggedValue._UUID}
+                  className="data-space__viewer__info__section__entry"
+                >
+                  <div
+                    className="data-space__viewer__info__tagged-value__tag"
+                    title={`${taggedValue.profile}.${taggedValue.tag}`}
+                  >
+                    {`${extractElementNameFromPath(taggedValue.profile)}.${
+                      taggedValue.tag
+                    }`}
+                  </div>
+                  <div className="data-space__viewer__info__tagged-value__value">
+                    {taggedValue.value}
+                  </div>
+                </div>
+              ))}
+            {analysisResult.taggedValues.length === 0 && (
+              <div className="data-space__viewer__info__section__placeholder">
+                (empty)
+              </div>
+            )}
+          </div>
+          <div className="data-space__viewer__info__section">
+            <div className="data-space__viewer__info__section__title">
+              Stereotypes
+            </div>
+            {analysisResult.stereotypes.length !== 0 &&
+              analysisResult.stereotypes.map((stereotype) => (
+                <div
+                  key={stereotype._UUID}
+                  className="data-space__viewer__info__section__entry"
+                  title={`${stereotype.profile}.${stereotype.value}`}
+                >
+                  <div className="data-space__viewer__info__steoreotype">
+                    {`${extractElementNameFromPath(stereotype.profile)}.${
+                      stereotype.value
+                    }`}
+                  </div>
+                </div>
+              ))}
+            {analysisResult.stereotypes.length === 0 && (
+              <div className="data-space__viewer__info__section__placeholder">
+                (empty)
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/DataSpaceMarkdownTextViewer.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 { MarkdownTextViewer } from '@finos/legend-art';
+
+export const DataSpaceMarkdownTextViewer: React.FC<{ value: string }> = (
+  props,
+) => (
+  <MarkdownTextViewer
+    className="data-space__viewer__markdown-text-viewer"
+    value={{
+      value: props.value,
+    }}
+    components={{
+      h1: 'h2',
+      h2: 'h3',
+      h3: 'h4',
+    }}
+  />
+);

package/src/components/DataSpaceModelsDocumentation.tsx

@@ -0,0 +1,99 @@
+/**
+ * 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 { AnchorLinkIcon, SearchIcon } from '@finos/legend-art';
+import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
+import { AgGridReact } from '@ag-grid-community/react';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
+
+export const DataSpaceModelsDocumentation = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const documentationEntries =
+      dataSpaceViewerState.dataSpaceAnalysisResult.elementDocs;
+
+    return (
+      <div className="data-space__viewer__wiki__section">
+        <div className="data-space__viewer__wiki__section__header">
+          <div className="data-space__viewer__wiki__section__header__label">
+            Models Documentation
+            <div className="data-space__viewer__wiki__section__header__anchor">
+              <AnchorLinkIcon />
+            </div>
+          </div>
+        </div>
+        <div className="data-space__viewer__wiki__section__content">
+          {documentationEntries.length > 0 && (
+            <div className="data-space__viewer__models-documentation">
+              <div className="data-space__viewer__models-documentation__search">
+                <div className="data-space__viewer__models-documentation__search__input-group">
+                  <input className="data-space__viewer__models-documentation__search__input-group__input input" />
+                  <div className="data-space__viewer__models-documentation__search__input-group__icon">
+                    <SearchIcon />
+                  </div>
+                </div>
+              </div>
+              <div className="data-space__viewer__models-documentation__grid data-space__viewer__grid ag-theme-balham-dark">
+                <AgGridReact
+                  rowData={documentationEntries}
+                  gridOptions={{
+                    suppressScrollOnNewData: true,
+                    getRowId: (rowData) => rowData.data.uuid,
+                  }}
+                  modules={[ClientSideRowModelModule]}
+                  suppressFieldDotNotation={true}
+                  columnDefs={[
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      field: 'elementPath',
+                      headerName: 'Model',
+                      flex: 1,
+                    },
+                    {
+                      minWidth: 50,
+                      sortable: false,
+                      resizable: true,
+                      field: 'subElementText',
+                      headerName: '',
+                      flex: 1,
+                    },
+                    {
+                      minWidth: 50,
+                      sortable: false,
+                      resizable: true,
+                      field: 'doc',
+                      headerName: 'Documentation',
+                      flex: 1,
+                      wrapText: true,
+                      autoHeight: true,
+                    },
+                  ]}
+                />
+              </div>
+            </div>
+          )}
+          {documentationEntries.length === 0 && (
+            <DataSpaceWikiPlaceholder message="No documentation provided" />
+          )}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/DataSpacePlaceholder.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+export const DataSpaceWikiPlaceholder: React.FC<{ message: string }> = (
+  props,
+) => (
+  <div className="data-space__viewer__wiki__placeholder">{props.message}</div>
+);