Proposals UI update

src/modules/explorer/components/AllProposalsList.tsx

@@ -1,19 +1,22 @@
-import { Collapse, Grid, IconButton, styled, Typography } from "@material-ui/core"
+import { Collapse, Grid, styled, Theme, Typography } from "@material-ui/core"
 import { ProposalItem } from "modules/explorer/pages/User"
-import React, { useCallback, useEffect, useMemo, useState } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import { Link } from "react-router-dom"
 import { Proposal, ProposalStatus } from "services/services/dao/mappers/proposal/types"
 import { ContentContainer } from "./ContentContainer"
-import { Dropdown } from "./Dropdown"
+import { ProposalFilter } from "./ProposalsFilter"
 
 const TableContainer = styled(ContentContainer)({
   width: "100%"
 })
 
-const TableHeader = styled(Grid)({
+const TableHeader = styled(Grid)(({ theme }: { theme: Theme }) => ({
   padding: "16px 46px",
-  minHeight: 34
-})
+  minHeight: 34,
+  [theme.breakpoints.down("sm")]: {
+    gap: 10
+  }
+}))
 
 const ProposalsFooter = styled(Grid)({
   padding: "16px 46px",
@@ -31,13 +34,13 @@ interface Props {
 
 export const AllProposalsList: React.FC<Props> = ({ currentLevel, proposals, title, showFooter, rightItem }) => {
   const [filteredProposal, setFilteredProposals] = useState(proposals)
-  const [filter, setFilter] = useState("All")
+  const [filter, setFilter] = useState("all")
 
   const filterProposals = useCallback(
     (status?: any) => {
-      if (status === "All") {
+      if (status === "all") {
         return setFilteredProposals(proposals)
-      } else if (status !== "All" && status !== undefined) {
+      } else if (status !== "all" && status !== undefined) {
         const filtered = proposals.filter(proposal => proposal["cachedStatus"]?.status === status)
         setFilteredProposals(filtered)
       } else {
@@ -65,32 +68,11 @@ export const AllProposalsList: React.FC<Props> = ({ currentLevel, proposals, tit
       <Grid container direction="column" wrap={"nowrap"}>
         <TableHeader item container justifyContent="space-between" alignItems="center">
           <Grid item>
-            <Typography variant="body2" style={{ fontWeight: "500" }} color="textPrimary">
+            <Typography variant="body1" style={{ fontWeight: "500" }} color="textPrimary">
               {title}
             </Typography>
           </Grid>
-          {proposals.length ? (
-            <Grid item>
-              <IconButton aria-label="expand row" size="small">
-                <Dropdown
-                  options={[
-                    { name: "All", value: "All" },
-                    { name: ProposalStatus.ACTIVE, value: ProposalStatus.ACTIVE },
-                    { name: ProposalStatus.DROPPED, value: ProposalStatus.DROPPED },
-                    { name: ProposalStatus.EXECUTABLE, value: ProposalStatus.EXECUTABLE },
-                    { name: ProposalStatus.EXECUTED, value: ProposalStatus.EXECUTED },
-                    { name: ProposalStatus.EXPIRED, value: ProposalStatus.EXPIRED },
-                    { name: ProposalStatus.NO_QUORUM, value: ProposalStatus.NO_QUORUM },
-                    { name: ProposalStatus.PASSED, value: ProposalStatus.PASSED },
-                    { name: ProposalStatus.PENDING, value: ProposalStatus.PENDING },
-                    { name: ProposalStatus.REJECTED, value: ProposalStatus.REJECTED }
-                  ]}
-                  value={"All"}
-                  onSelected={filterProposalByStatus}
-                />{" "}
-              </IconButton>
-            </Grid>
-          ) : null}
+          {proposals.length ? <ProposalFilter filterProposalByStatus={filterProposalByStatus} /> : null}
         </TableHeader>
         {filteredProposal.length ? (
           <Grid

src/modules/explorer/components/ConfigProposalFormLambda.tsx

@@ -87,7 +87,7 @@ enum LambdaProposalState {
 const codeEditorPlaceholder = {
   addLambda: `Write Michelson Code for Lambda's Implementation
 
-Eg:- 
+Eg:-
 
 (Left (Left (Pair (Pair { DROP ;
     NIL operation ;
@@ -102,7 +102,7 @@ Eg:-
   `,
   lambdaExecuteArgumentsCode: `Write Michelson Code for the input Paramerers of your Lambda
 
-Eg:- 
+Eg:-
 
 {
   "prim": "pair",
@@ -127,7 +127,7 @@ Eg:-
 `,
   lambdaExecuteParams: `Enter the values for the given params in a JSON/JavaScript Object format.
 
-Eg:- 
+Eg:-
 
 {
   xtz_transfer_type: {
@@ -352,7 +352,7 @@ export const ProposalFormLambda: React.FC<Props> = ({ open, handleClose, action
         open={open}
         onClose={handleClose}
         title={ProposalAction[action] + " Lambda Proposal"}
-        template="lambda"
+        template="md"
       >
         {state === LambdaProposalState.write_action ? (
           <>

src/modules/explorer/components/NavigationMenu.tsx

@@ -133,12 +133,6 @@ const getPages = (daoId: string): Page[] => [
     name: "User",
     icon: UserIcon,
     href: `/explorer/dao/${daoId}/user`
-  },
-  {
-    pathId: "config",
-    name: "Config",
-    icon: ConfigIcon,
-    href: `/explorer/dao/${daoId}/config`
   }
 ]
 

src/modules/explorer/components/ProposalActionsDialog.tsx

@@ -0,0 +1,184 @@
+/* eslint-disable react/display-name */
+import { Grid, styled, Button, Typography, useMediaQuery, useTheme } from "@material-ui/core"
+import { RegistryProposalFormValues } from "modules/explorer/components/UpdateRegistryDialog"
+import { TreasuryProposalFormValues } from "modules/explorer/components/NewTreasuryProposalDialog"
+import React, { useState } from "react"
+import { NFTTransferFormValues } from "./NFTTransfer"
+import { useDAOID } from "../pages/DAO/router"
+import { ProposalFormContainer } from "./ProposalForm"
+import { ConfigProposalForm } from "./ConfigProposalForm"
+import { ResponsiveDialog } from "./ResponsiveDialog"
+import { GuardianChangeProposalForm } from "./GuardianChangeProposalForm"
+import { DelegationChangeProposalForm } from "./DelegationChangeProposalForm"
+import { MainButton } from "../../common/MainButton"
+import { SupportedLambdaProposalKey } from "services/bakingBad/lambdas"
+import { ProposalAction, ProposalFormLambda } from "modules/explorer/components/ConfigProposalFormLambda"
+import { useDAO } from "services/services/dao/hooks/useDAO"
+
+type RecursivePartial<T> = {
+  [P in keyof T]?: RecursivePartial<T[P]>
+}
+
+type Values = {
+  agoraPostId: string
+} & TreasuryProposalFormValues &
+  RegistryProposalFormValues &
+  NFTTransferFormValues
+
+export type ProposalFormDefaultValues = RecursivePartial<Values>
+
+const OptionContainer = styled(Grid)(({ theme }) => ({
+  "minHeight": 80,
+  "background": theme.palette.primary.main,
+  "borderRadius": 8,
+  "padding": "35px 42px",
+  "marginBottom": 16,
+  "cursor": "pointer",
+  "height": 110,
+  "&:hover": {
+    background: theme.palette.secondary.dark,
+    scale: 1.01,
+    transition: "0.15s ease-in"
+  }
+}))
+
+const ActionText = styled(Typography)(({ theme }) => ({
+  fontWeight: 400,
+  fontSize: 20,
+  marginBottom: 8
+}))
+
+const ActionDescriptionText = styled(Typography)(({ theme }) => ({
+  fontWeight: 300,
+  fontSize: 16
+}))
+
+interface Action {
+  id: any
+  name: string
+  description: string
+  isLambda: boolean
+}
+
+const getActions = (): Action[] => [
+  {
+    name: "Add Lambda",
+    description: "Write Michelson code to add Lambda",
+    id: ProposalAction.new,
+    isLambda: true
+  },
+  {
+    name: "Remove Lambda",
+    description: "Choose which Lambda to remove",
+    id: ProposalAction.remove,
+    isLambda: true
+  },
+  {
+    name: "Execute Lambda",
+    description: "Execute a Lambda already installed on DAO",
+    id: ProposalAction.execute,
+    isLambda: true
+  },
+  {
+    name: "DAO Configuration",
+    description: "Change proposal fee and returned token amount",
+    id: SupportedLambdaProposalKey.ConfigurationProposal,
+    isLambda: false
+  },
+  {
+    name: "Change Guardian",
+    description: "Change the DAO Guardian Address",
+    id: SupportedLambdaProposalKey.UpdateGuardianProposal,
+    isLambda: false
+  },
+  {
+    name: "Change Delegate",
+    description: "Change the DAO Delegate Address",
+    id: SupportedLambdaProposalKey.UpdateContractDelegateProposal,
+    isLambda: false
+  }
+]
+
+interface Props {
+  open: boolean
+  handleClose: () => void
+}
+
+const defaultOpenSupportedExecuteProposalModal = "none"
+
+export const ProposalActionsDialog: React.FC<Props> = ({ open, handleClose }) => {
+  const daoId = useDAOID()
+  const { data: dao } = useDAO(daoId)
+  const [proposalAction, setProposalAction] = useState<ProposalAction>(ProposalAction.none)
+  const [openProposalFormLambda, setOpenProposalFormLambda] = useState(false)
+  const theme = useTheme()
+  const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
+
+  const handleOpenCustomProposalModal = (key: ProposalAction) => {
+    setProposalAction(key)
+    setOpenProposalFormLambda(true)
+    handleClose()
+  }
+
+  const handleCloseCustomProposalModal = () => {
+    setProposalAction(ProposalAction.none)
+    setOpenProposalFormLambda(false)
+    handleClose()
+  }
+
+  const handleOpenSupportedExecuteProposalModal = (lambdaKey: string) => {
+    setOpenSupportedExecuteProposalModal(lambdaKey)
+    handleClose()
+  }
+
+  const handleCloseSupportedExecuteProposalModal = () => {
+    setOpenSupportedExecuteProposalModal(defaultOpenSupportedExecuteProposalModal)
+    handleClose()
+  }
+
+  const [openSupportedExecuteProposalModalKey, setOpenSupportedExecuteProposalModal] = useState<string>(
+    defaultOpenSupportedExecuteProposalModal
+  )
+
+  return (
+    <>
+      <ResponsiveDialog open={open} onClose={handleClose} title={"New Proposal"} template="xs">
+        <Grid container style={{ marginTop: 32 }} spacing={2}>
+          {getActions().map((elem, index) => (
+            <Grid key={index} item xs={isMobileSmall ? 12 : 4}>
+              <OptionContainer
+                onClick={() =>
+                  elem.isLambda
+                    ? handleOpenCustomProposalModal(elem.id)
+                    : handleOpenSupportedExecuteProposalModal(elem.id)
+                }
+              >
+                <ActionText color="textPrimary">{elem.name}</ActionText>
+                <ActionDescriptionText color="textPrimary"> {elem.description} </ActionDescriptionText>
+              </OptionContainer>
+            </Grid>
+          ))}
+        </Grid>
+      </ResponsiveDialog>
+
+      <ProposalFormLambda
+        action={proposalAction}
+        open={openProposalFormLambda}
+        handleClose={handleCloseCustomProposalModal}
+      />
+      <ConfigProposalForm
+        open={openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.ConfigurationProposal}
+        handleClose={handleCloseSupportedExecuteProposalModal}
+      />
+      <GuardianChangeProposalForm
+        open={openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.UpdateGuardianProposal}
+        handleClose={handleCloseSupportedExecuteProposalModal}
+      />
+
+      <DelegationChangeProposalForm
+        open={openSupportedExecuteProposalModalKey === SupportedLambdaProposalKey.UpdateContractDelegateProposal}
+        handleClose={handleCloseSupportedExecuteProposalModal}
+      />
+    </>
+  )
+}