Set spaces inactive and disable new proposal from UI, #1283 (#1284)

* Set inactive spaces, #1283

* refactor, #1283

Author: hyifeng

backend/packages/backend/src/scripts/set-space-inactive.js

@@ -0,0 +1,29 @@
+require("dotenv").config();
+
+const { getSpaceCollection } = require("../mongo");
+
+const spaceIds = [
+  "interlay",
+  "kintsugi",
+  "centrifuge",
+  "zeitgeist",
+  "stafi",
+  "stellaswap",
+  "crust",
+  "basilisk",
+  "rmrk",
+  "rmrk-curation",
+];
+
+async function main() {
+  const col = await getSpaceCollection();
+  const result = await col.updateMany(
+    { id: { $in: spaceIds } },
+    { $set: { inactive: true } },
+  );
+  console.log(`Updated ${result.modifiedCount} spaces to inactive status`);
+}
+
+main()
+  .catch(console.error)
+  .finally(() => process.exit());

next/components/listTab.js

@@ -10,6 +10,7 @@ import { useSelector } from "react-redux";
 import { loginAccountSelector } from "store/reducers/accountSlice";
 import { isAdmin } from "frontedUtils/admin";
 import { ReactComponent as SettingsSVG } from "../public/imgs/icons/setting.svg";
+import { ReactComponent as AddSVG } from "../public/imgs/icons/add.svg";
 
 const Wrapper = styled(FlexBetween)`
   align-items: flex-start;
@@ -65,6 +66,18 @@ const NewPostLink = styled(Flex)`
   }
 `;
 
+const NewPostLinkDisabled = styled(Flex)`
+  cursor: not-allowed;
+  ${p_16_semibold};
+  color: var(--textQuaternary);
+  > .img-div {
+    display: inline-flex;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+  }
+`;
+
 export default function ListTab({
   spaceId,
   space,
@@ -155,14 +168,25 @@ export default function ListTab({
       <div className="flex items-center gap-[16px] ml-[32px]">
         {settings}
 
-        <a href={`/space/${spaceId}/create`}>
-          <NewPostLink>
-            <div className="img-div">
-              <img src="/imgs/icons/add.svg" alt="" />
-            </div>
-            New Proposal
-          </NewPostLink>
-        </a>
+        {space?.inactive ? (
+          <Tooltip content="This space is inactive">
+            <NewPostLinkDisabled>
+              <div className="img-div [&_svg_path]:fill-textQuaternary">
+                <AddSVG width={24} height={24} />
+              </div>
+              New Proposal
+            </NewPostLinkDisabled>
+          </Tooltip>
+        ) : (
+          <a href={`/space/${spaceId}/create`}>
+            <NewPostLink>
+              <div className="img-div">
+                <AddSVG width={24} height={24} />
+              </div>
+              New Proposal
+            </NewPostLink>
+          </a>
+        )}
       </div>
     </Wrapper>
   );

next/components/spaceListItem/index.js

@@ -59,6 +59,13 @@ const ActiveCircle = styled.div`
   margin-right: 8px;
 `;
 
+const InactiveCircle = styled.div`
+  ${makeSquare(6)};
+  border-radius: 50%;
+  background-color: var(--textTertiary);
+  margin-right: 8px;
+`;
+
 const Count = styled.span`
   margin-left: auto;
 `;
@@ -140,8 +147,19 @@ export default function SpaceListItem({ name, space }) {
       </IconWrapper>
       <Divider />
       <ActiveWrapper>
-        <ActiveCircle />
-        <InternalLink href={`/space/${name}?tab=active`}>Active</InternalLink>
+        {space.inactive ? (
+          <>
+            <InactiveCircle />
+            <span>Inactive</span>
+          </>
+        ) : (
+          <>
+            <ActiveCircle />
+            <InternalLink href={`/space/${name}?tab=active`}>
+              Active
+            </InternalLink>
+          </>
+        )}
         <Count>
           <ActiveCount>{space.activeProposalsCount ?? 0}</ActiveCount>/
           {space.proposalsCount}