diff --git a/src/app.tsx b/src/app.tsx
index 23124d63f..9c684ff80 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -20,6 +20,7 @@ import AssetSettings from "@reearth/components/pages/Settings/Workspace/Asset";
import ProjectSettings from "@reearth/components/pages/Settings/Project";
import SettingsProjectList from "@reearth/components/pages/Settings/ProjectList";
import WorkspaceList from "@reearth/components/pages/Settings/WorkspaceList";
+import PublicSettings from "@reearth/components/pages/Settings/Project/Public";
import DatasetSettings from "@reearth/components/pages/Settings/Project/Dataset";
import PluginSettings from "@reearth/components/pages/Settings/Project/Plugin";
import Preview from "./components/pages/Preview";
@@ -62,6 +63,7 @@ const App: React.FC = () => {
+
diff --git a/src/components/molecules/Settings/Navigation/index.tsx b/src/components/molecules/Settings/Navigation/index.tsx
index b224d63f0..2af851bf0 100644
--- a/src/components/molecules/Settings/Navigation/index.tsx
+++ b/src/components/molecules/Settings/Navigation/index.tsx
@@ -15,6 +15,7 @@ type Team = {
type Project = {
id?: string;
name?: string;
+ isArchived?: boolean;
};
type Props = {
@@ -55,8 +56,12 @@ const Navigation: React.FC = ({ team, project }) => {
- {project && (
+ {project && !project.isArchived && (
+
{
{intl.formatMessage({
defaultMessage:
- "Most project settings are hidden for archived repositories. This project mus be unarchived to make changes to them.",
+ "Most project settings are hidden when the project is archived. Please unarchive the project to view and edit these settings.",
})}
diff --git a/src/components/molecules/Settings/Project/DangerSection/index.tsx b/src/components/molecules/Settings/Project/DangerSection/index.tsx
index 45cebbc3b..764850c0f 100644
--- a/src/components/molecules/Settings/Project/DangerSection/index.tsx
+++ b/src/components/molecules/Settings/Project/DangerSection/index.tsx
@@ -48,7 +48,13 @@ const DangerSection: React.FC = ({ project, teamId, archiveProject, delet
}
/>
*/}
-
+
= ({ project, teamId, archiveProject, delet
large
text={
project?.isArchived
- ? intl.formatMessage({ defaultMessage: "Unarchive this project" })
- : intl.formatMessage({ defaultMessage: "Archive this project" })
+ ? intl.formatMessage({ defaultMessage: "Unarchive project" })
+ : intl.formatMessage({ defaultMessage: "Archive project" })
}
onClick={() => openModal(project?.isArchived ? "unarchive" : "archive")}
buttonType="danger"
@@ -76,12 +82,12 @@ const DangerSection: React.FC = ({ project, teamId, archiveProject, delet
openModal("delete")}
/>
diff --git a/src/components/molecules/Settings/Project/Dataset/DatasetSection/index.tsx b/src/components/molecules/Settings/Project/Dataset/DatasetSection/index.tsx
index eb590c47c..ce6c4c69d 100644
--- a/src/components/molecules/Settings/Project/Dataset/DatasetSection/index.tsx
+++ b/src/components/molecules/Settings/Project/Dataset/DatasetSection/index.tsx
@@ -11,17 +11,17 @@ import DatasetList, {
type Props = {
datasetSchemas: Item[];
- importDataset: (file: FileList) => void;
removeDatasetSchema: (schemaId: string) => void;
+ onDatasetImport?: (file: File, datasetSchemaId: string | null) => void | Promise;
};
const DatasetSection: React.FC = ({
datasetSchemas,
- importDataset,
removeDatasetSchema,
+ onDatasetImport,
}) => {
const intl = useIntl();
- const handleFileSelect = useFileInput(files => importDataset?.(files), {
+ const handleFileSelect = useFileInput(files => onDatasetImport?.(files[0], null), {
multiple: false,
accept: "text/csv",
});
diff --git a/src/components/molecules/Settings/Project/PublicSection/index.tsx b/src/components/molecules/Settings/Project/PublicSection/index.tsx
new file mode 100644
index 000000000..f6f758e24
--- /dev/null
+++ b/src/components/molecules/Settings/Project/PublicSection/index.tsx
@@ -0,0 +1,82 @@
+import React, { useCallback, useState } from "react";
+import Section from "@reearth/components/molecules/Settings/Section";
+import EditableItem from "@reearth/components/molecules/Settings/Project/EditableItem";
+import AssetModal, { Asset as AssetType } from "@reearth/components/molecules/Common/AssetModal";
+import { styled } from "@reearth/theme";
+import { useIntl } from "react-intl";
+
+export type Asset = AssetType;
+
+export type Props = {
+ currentProject?: {
+ id: string;
+ publicTitle: string;
+ publicDescription: string;
+ publicImageUrl?: string;
+ };
+ updatePublicTitle?: (title: string) => void;
+ updatePublicDescription?: (description: string) => void;
+ updatePublicImage?: (imageUrl: string | null) => void;
+ assets?: Asset[];
+ createAssets?: (files: FileList) => Promise;
+};
+
+const PublicSection: React.FC = ({
+ currentProject,
+ updatePublicTitle,
+ updatePublicDescription,
+ updatePublicImage,
+ assets,
+ createAssets,
+}) => {
+ const intl = useIntl();
+ const [isAssetModalOpen, setAssetModalOpen] = useState(false);
+ const openAssetModal = useCallback(() => setAssetModalOpen(true), []);
+ const closeAssetModal = useCallback(() => setAssetModalOpen(false), []);
+
+ return (
+
+
+
+
+ openAssetModal()}
+ onEditCancel={() => closeAssetModal()}
+ />
+
+
+
+ );
+};
+
+const Wrapper = styled.div`
+ background-color: ${props => props.theme.colors.bg[3]};
+`;
+
+export default PublicSection;
diff --git a/src/components/molecules/Settings/Project/PublishSection/index.tsx b/src/components/molecules/Settings/Project/PublishSection/index.tsx
index c7fc240a1..11261809c 100644
--- a/src/components/molecules/Settings/Project/PublishSection/index.tsx
+++ b/src/components/molecules/Settings/Project/PublishSection/index.tsx
@@ -34,7 +34,6 @@ const PublishSection: React.FC = ({
}) => {
const url = window.REEARTH_CONFIG?.published?.split("{}");
- // const [customUrlState, setCustomUrlState] = useState("");
const [showDModal, setDModal] = useState(false);
const intl = useIntl();
const theme = useTheme();
@@ -76,10 +75,14 @@ const PublishSection: React.FC = ({
{intl.formatMessage({ defaultMessage: "Site name" })}
- {intl.formatMessage({
- defaultMessage:
- "By default, once published your project will be accessible via the URL below.",
- })}
+ {alias
+ ? intl.formatMessage({
+ defaultMessage: "Access your project, copy or edit the URL below.",
+ })
+ : intl.formatMessage({
+ defaultMessage:
+ "Once your project is published from the editor page the URL details will be shown here.",
+ })}
{alias && (
= ({ title, actions, children }) => {
+const Section: React.FC = ({ title, subtitle, actions, children }) => {
const theme = useTheme();
return (
{title && (
<>
-
-
- {title}
-
+
+
+
+ {title}
+
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
{actions}
-
+
)}
- {children}
+ {children}