AddRegistryForm.js with secrets support

/* eslint-disable eqeqeq */
import React, { useState, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@mui/styles'; // Temporarily using makeStyles
import Grid from '@mui/material/Grid';
import properties from '../../../../../properties/properties';
import { Input } from '../../../../../components/genericComponents/Input';

import { Navigate, Link, useParams } from 'react-router-dom';
import { getCommonFunctions } from '../../../../serviceRevamp/add/ci_flow/SourceDetails';
import GenerateURL from '../../../../../util/APIUrlProvider';
import { ValidateDataSet, VALIDATION_TYPE_REQUIRED } from '../../../../../util/Validator';
import InvokeApi, { PostData } from '../../../../../util/apiInvoker';
import { ErrorComponent } from '../../../../utils/Error';
import Dialog from '@mui/material/Dialog';
import { useCustomSnackbar } from '../../../../../contexts/SnackbarContext';
import { showErrorHandlerUpdated } from '../../../../../util/util';
import Button from '../../../../../components/genericComponents/Button';

export default function AddRegistryForm(props) {
  const { showSnackbar } = useCustomSnackbar();
  const registry_properties = properties.registries_option;
  console.log(registry_properties, "registry_properties___")
  const inherits = props.inherits ? props.inherits : {};
  const aws_market_place_flag = properties.aws_market_place_flag;

  const { registery_id } = useParams();

  const [state, setState] = useState({
    data: {},
    error: {},
    show_loading: false,
    registryTypeList: [],
    openInfoDialog: false,
    saving_data: false,
    credentialsList: [],
    credentialsLoading: false
  })
  const commonFunctions = getCommonFunctions(state, setState, inherits)

  const classes = useStyles();

  const credential_types_list = [
    {
      id: "Secret",
      label: "Secret"
    },
    {
      id: "Profile Based",
      label: "Profile Based"
    },
    {
      id: "arn_role",
      label: "ARN Role"
    },
  ]

  useEffect(() => {
    fetchRegistryType()
    fetchCredentials()
    if (registery_id) {
      getRegistryDataByID(registery_id)
    }
  }, [])

  const getRegistryUrl = (id) => {
    var postUrl = ""
    if (id) {
      postUrl = GenerateURL({ docker_registry_id: id }, properties.api.get_registry_details)
    }
    else {
      postUrl = GenerateURL({}, properties.api.nexus_setup)
    }
    return postUrl
  }

  const validateAndSave = () => {
    console.log(state.data.credential_type, "svdgvsgvcgd")
    let validationsNexus = {              //validations
      username: [VALIDATION_TYPE_REQUIRED],
      url: [VALIDATION_TYPE_REQUIRED],
      name: [VALIDATION_TYPE_REQUIRED],
      password: [VALIDATION_TYPE_REQUIRED],
      access_key: [VALIDATION_TYPE_REQUIRED],
      access_key_secret: [VALIDATION_TYPE_REQUIRED],
      region: [VALIDATION_TYPE_REQUIRED],
      json_key: [VALIDATION_TYPE_REQUIRED],
      project_name: [VALIDATION_TYPE_REQUIRED],
      support_registry_name: [VALIDATION_TYPE_REQUIRED],
      profile_name: [VALIDATION_TYPE_REQUIRED],
      arn_role: [VALIDATION_TYPE_REQUIRED],
    }
    if (state.data.support_registry_id !== 4000) {
      delete validationsNexus['profile_name']
      delete validationsNexus['arn_role']
    }

    if (state.data.support_registry_id == 4000) {
      if (state.data.credential_type == "Profile Based") {
        delete validationsNexus['username']
        delete validationsNexus['password']
        delete validationsNexus['arn_role']
        delete validationsNexus['credential']
      }
      if (state.data.credential_type == "arn_role") {
        delete validationsNexus['username']
        delete validationsNexus['password']
        delete validationsNexus['profile_name']
        delete validationsNexus['credential']
      }
      if (state.data.credential_type === "Secret" || !state.data.credential_type) {
        delete validationsNexus['username']
        delete validationsNexus['password']
        delete validationsNexus['profile_name']
        delete validationsNexus['arn_role']
        validationsNexus['credential'] = [VALIDATION_TYPE_REQUIRED]
      }
    }

    if (state.data.support_registry_id !== 4000 && state.data.support_registry_id !== 5000 && state.data.support_registry_id !== 2000) {
      delete validationsNexus['username']
      delete validationsNexus['password']
      delete validationsNexus['profile_name']
      delete validationsNexus['arn_role']
      validationsNexus['credential'] = [VALIDATION_TYPE_REQUIRED]
    }

    if (state.data.support_registry_id !== 2000) {
      delete validationsNexus['access_key']
      delete validationsNexus['access_key_secret']
      delete validationsNexus['region']
    } else {
      delete validationsNexus['username']
      delete validationsNexus['password']
    }
    if (state.data.support_registry_id !== 5000) {
      delete validationsNexus['project_name']
      delete validationsNexus['json_key']
    } else {
      delete validationsNexus['username']
      delete validationsNexus['password']
    }
    if (state.data.support_registry_id == 3000) {
      validationsNexus['repo_type'] = [VALIDATION_TYPE_REQUIRED]
      if (state.data.repo_type && state.data.repo_type == 'org') {
        validationsNexus['org_name'] = [VALIDATION_TYPE_REQUIRED]
      }
    }
    if (state.data.support_registry_id == 6000) {
      delete validationsNexus['username']
      delete validationsNexus['password']
    }
    // else {
    //   if (state.data.repo_type)
    //     delete state.data['repo_type']
    //   if (state.data.org_name)
    //     delete state.data['org_name']
    // }

    console.log(validationsNexus, "svdgvsgvcgd")

    const verifyNexus = ValidateDataSet(state.data, validationsNexus)

    console.log(verifyNexus, "svdgvsgvcgd")

    if (verifyNexus.valid) {

      const postUrlNexus = getRegistryUrl(state.data.id)

      let postDataNexus = { ...state.data }

      if (state.data.support_registry_id === 2000) {

        postDataNexus = {
          ...postDataNexus,
          key_value_pair: {
            access_key: state.data.access_key,
            access_key_secret: state.data.access_key_secret,
            region: state.data.region
          }
        }
      }
      else if (state.data.support_registry_id === 3000) {
        let key_value_pair = {}
        if (state.data.repo_type) {
          key_value_pair['repo_type'] = state.data.repo_type
        }
        if (state.data.org_name) {
          key_value_pair['org_name'] = state.data.org_name
        }
        postDataNexus = {
          ...postDataNexus,
          key_value_pair: key_value_pair
        }
      } else if (state.data.support_registry_id === 4000) {
        if (state.data.credential_type === "Secret" || !state.data.credential_type) {
          postDataNexus.username = null
          postDataNexus.password = null
          postDataNexus.profile_name = null
          postDataNexus.arn_role = null
        } else if (state.data.credential_type === "Profile Based") {
          postDataNexus.username = null
          postDataNexus.password = null
          postDataNexus.credential = null
          postDataNexus.arn_role = null
        } else if (state.data.credential_type === "arn_role") {
          postDataNexus.username = null
          postDataNexus.password = null
          postDataNexus.credential = null
          postDataNexus.profile_name = null
        }
      }
      else {
        if (state.data.support_registry_id === 5000) {
          postDataNexus = {
            ...postDataNexus,
            key_value_pair: {
              project_name: state.data.project_name,
              json_key: state.data.json_key,
            }
          }
        } else {
          if (state.data.support_registry_id === 6000) {

            if (state.data.username == "" || state.data.username == null) {
              postDataNexus = {
                ...postDataNexus,
                // username:  null,
                // password: null
              }
              console.log(postDataNexus, "fkjsdjfnajk")
            }
            if (state.data.password == "" || state.data.password == null) {

              postDataNexus = {
                ...postDataNexus,
                password: ""
              }
              console.log(postDataNexus, "fkjsdjfnajk")
            }
            postDataNexus.username = null
            postDataNexus.password = null
          } else {
            postDataNexus['key_value_pair'] = null
            delete postDataNexus['project_name']
            delete postDataNexus['json_key']
            delete postDataNexus['access_key']
            delete postDataNexus['access_key_secret']
            delete postDataNexus['region']
            postDataNexus.username = null
            postDataNexus.password = null
          }

        }
      }
      if (state?.data?.id) {
        showSnackbar("info", "Updating container registry...")
      } else {
        showSnackbar("info", "creating container registry...")
      }
      setState(prev => ({
        ...prev,
        saving_data: true
      }))

      PostData(postUrlNexus, postDataNexus, onSuccessPost, onFail)
    }
    else {
      let error_msg = showErrorHandlerUpdated({ ...verifyNexus.error })
      if (state?.data?.id) {
        showSnackbar('error', "Unable to update container registry.", error_msg)
      } else {
        showSnackbar("error", "Unable to create container registry.", error_msg)
      }

      setState(prev => ({
        ...prev,
        error: verifyNexus.error,
        saving_data: false
      }))
    }
  }

  const onSuccessPost = (response) => {
    if (state?.data?.id) {
      showSnackbar("success", "Container registry updated successfully.")
    } else {
      showSnackbar("success", "Container registry created successfully.")
    }
    setState(prev => ({
      ...prev,
      redirect: true,
      saving_data: false
    }))
  }
  const onFail = (error) => {
    let error_msg = showErrorHandlerUpdated(error)
    if (state?.data?.id) {
      showSnackbar('error', "Unable to update container registry.", error_msg)
    } else {
      showSnackbar("error", "Unable to create container registry.", error_msg)
    }
    setState(prev => ({
      ...prev,
      error: {
        ...prev.error,
        ...error
      },
      saving_data: false
    }))
  }

  function handleSuccessRegistryType(response) {
    console.log(response,'response_data_0021')
    if (aws_market_place_flag) {
      setState(new_state => ({
        ...new_state,
        registryTypeList: [{
          "id": 4000,
          "created_at": "2020-01-07T06:25:50.166670+05:30",
          "updated_at": "2020-01-07T06:25:50.166670+05:30",
          "code": "ECR",
          "name": "Elastic Container Registry", "input_fields": [
            "username",
            "password",
            "url"
          ]
        }],
        show_loading: false
      }))
    } else {
      setState(new_state => ({
        ...new_state,
        registryTypeList: response,
        show_loading: false
      }))
    }


  }

  const fetchRegistryType = () => {

    var requestInfo = {
      endPoint: GenerateURL({}, properties.api.get_docker_registry_type),
      httpMethod: "GET",
      httpHeaders: { "Content-Type": "application/json" }
    }
    InvokeApi(requestInfo, handleSuccessRegistryType, onFail);

  }

  const fetchCredentials = () => {
    var requestInfo = {
      endPoint: GenerateURL({}, properties.api.credential_all),
      httpMethod: "GET",
      httpHeaders: { "Content-Type": "application/json" }
    }

    requestInfo.endPoint = requestInfo.endPoint + "?all=true";
    setState(prev => ({ ...prev, credentialsLoading: true }));
    InvokeApi(requestInfo, CredentialsFetchSuccess, CredentialsFetchFailure);
  }

  function CredentialsFetchSuccess(data) {
    if (data && data.results) {
      var credentials = data.results.length > 0 ? data.results.map(
        item => {
          return {
            id: item.id,
            label: item.name
          }
        }
      ) : []
      setState(prev => ({ ...prev, credentialsList: credentials, credentialsLoading: false }))

    } else {
      setState(prev => ({ ...prev, credentialsLoading: false }));
    }
  }

  function CredentialsFetchFailure(error, exception) {
    setState(prev => ({ ...prev, credentialsList: [], credentialsLoading: false }));
  };

  function getRegistryDataByID(id) {
    var requestInfo = {
      endPoint: GenerateURL({ docker_registry_id: id }, properties.api.get_registry_details),
      httpMethod: "GET",
      httpHeaders: { "Content-Type": "application/json" }
    }
    InvokeApi(requestInfo, handleSuccessGetRegistryByID, onFail);
  }

  function handleSuccessGetRegistryByID(response) {
    console.log(response, "sjbvdsgdvcvsdvc")
    const supportRegistryName = registry_properties && registry_properties.find(item => item.id === response.support_registry_id).label;

    if (response.support_registry_id === 2000) {
      setState(prevState => ({
        ...prevState,
        data: {
          id: response.id,
          support_registry_id: response.support_registry_id,
          username: response.username,
          url: response.url,
          name: response.name,
          access_key: response.key_value_pair.access_key,
          access_key_secret: response.key_value_pair.access_key_secret,
          region: response.key_value_pair.region,
          support_registry_name: supportRegistryName
        },
      }))
    } else {
      if (response.support_registry_id === 5000) {
        setState(prevState => ({
          ...prevState,
          data: {
            id: response.id,
            support_registry_id: response.support_registry_id,
            username: response.username,
            url: response.url,
            name: response.name,
            support_registry_name: supportRegistryName,
            json_key: response.key_value_pair ? response.key_value_pair.json_key ? response.key_value_pair.json_key : null : null,
            project_name: response.key_value_pair ? response.key_value_pair.project_name ? response.key_value_pair.project_name : null : null
          },
        }))
      } else {
        if (response.support_registry_id === 6000) {

          setState(prevState => ({
            ...prevState,
            data: {
              id: response.id,
              support_registry_id: response.support_registry_id,
              username: response.username,
              url: response.url,
              name: response.name,
              support_registry_name: supportRegistryName,
              credential: response.credential ? response.credential : null
            },
          }))
        } else {
          setState(prevState => ({
            ...prevState,
            data: {
              id: response.id,
              support_registry_id: response.support_registry_id,
              username: response.username,
              url: response.url,
              name: response.name,
              support_registry_name: supportRegistryName,
              repo_type: response.key_value_pair ? response.key_value_pair.repo_type ? response.key_value_pair.repo_type : null : null,
              org_name: response.key_value_pair ? response.key_value_pair.org_name ? response.key_value_pair.org_name : null : null,
              credential_type: response.credential ? "Secret" : response.profile_name ? "Profile Based" : response?.arn_role ? "arn_role" : "Secret",
              profile_name: response.profile_name ? response.profile_name : null,
              arn_role: response?.arn_role ? response.arn_role : null,
              credential: response.credential ? response.credential : null
            },
          }))
        }

      }
    }


  }

  const attachImagesToDockerRegistryList = (list) => {      //fun for adding logos to type

    if (list && list.length !== 0) {
      let dockerRegistryList = list && list.map(dockerRegistry => {
        const imgSrc = registry_properties && registry_properties.find(item => item.id === dockerRegistry.id)?.src

        return {
          id: dockerRegistry.id,
          label: dockerRegistry.name,
          src: imgSrc ? imgSrc : null
        }

      })

      if (dockerRegistryList) {
        dockerRegistryList.sort((a, b) => {
          
          if (a.label === 'Other' || a.label === 'Others') return 1;
          if (b.label === 'Other' || b.label === 'Others') return -1;
          
          if (a.label === 'Huawei') return 1;
          if (b.label === 'Huawei') return -1;
          return 0;
        });
      }

      return dockerRegistryList
    }

    return []
  }

  const supportedRegiestryList = useMemo(       //memoized fun call

    () => attachImagesToDockerRegistryList(state.registryTypeList),

    [state.registryTypeList])
  const onChangeHandlerForCheck = (value) => {
    // console.log(e.target.value, 'data_ref_001_0210');
    // const value = e.target.value;
    const selectedRegistryType = state.registryTypeList.find(item => item.name === value)

    selectedRegistryType && setState(prevState => ({

      ...prevState,
      data: { ...prevState.data, support_registry_name: value, support_registry_id: selectedRegistryType.id }
    }))

  }

  function handleClickOpen() {
    setState(prevState => ({
      ...prevState,
      openInfoDialog: true,
    }))
  }

  function handleClose() {
    setState(prevState => ({
      ...prevState,
      openInfoDialog: false,
    }))
  }

  console.log('registr_state_0001', state)

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
        {
          state.redirect && <Navigate to="/integration/containerRegistries" />
        }
        {
          state.openInfoDialog &&
          <div className={classes.root}>
            <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={state.openInfoDialog}>
              <div className="card" style={{ height: "250px" }}>
                <div style={{ display: "flex", height: "50px", alignItems: "center", justifyContent: "space-between", padding: "16px", background: "#FAFAFA" }}>
                  <span style={{ fontSize: "16px", fontWeight: 600, lineHeight: "normal" }}>INFORMATION</span>
                  <span className='ri-close-line' onClick={handleClose} style={{ fontSize: "large", cursor: "pointer" }} role='button' tabIndex={0} onKeyDown={() => { }}></span>
                </div>
                <div className="card-body" style={{ padding: "24px 16px" }}>
                  <p className="font-16 font-weight-600 mb-5" >Please make sure that AWS profile is pre-configured on the Buildpiper VM instance</p>
                  <div className='info-part'>
                    <p className="font-14" >For more details please refer the below link:</p>

                    <a href='https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html' target='_blank' className='font-14'>https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html</a>
                  </div>

                </div>
              </div>
            </Dialog>

          </div>
        }

        {state.error && <ErrorComponent error={state.error} />}

        <div className={classes.wrapbox} style={{ flex: 1, overflowY: 'auto' }}>
          <Grid container>
            <Grid item xs={10}>
              <div className='addregistry-heading'>
                <div className='main-heading'>Select Supported Container Registries</div>
                <div className='sub-heading-txt'>To learn more about Container Registries please read the Documentation</div>
              </div>
            </Grid>
            <Grid item xs={2} style={{ textAlign: 'right' }}>
              <Link to="/integration/containerRegistries">
                <div className='close'>
                  <button className="btn btn-transparent">
                    <span className='ri-close-line font-18 ' style={{ fontWeight: '500', color: "#721c24" }}  ></span>
                  </button>
                </div>
              </Link>
            </Grid>
          </Grid>


          <Input
            type="imgCheckbox"
            name="support_registry_name"
            variant="reg-updated"
            label=""
            mandatorySign
            onChangeHandler={onChangeHandlerForCheck}
            list={supportedRegiestryList}
            data={state.data}
            error={state.error}
          />
          <Grid className='input-registry-wrap' container spacing={2}>
            {
              state.data.support_registry_id == 3000 &&
              <>
                <Grid item xs={12}>
                  <Input
                    type="select"
                    label="Repo Type"
                    name="repo_type"
                    mandatorySign
                    list={[{ label: 'User', id: 'user' }, { label: 'Organization', id: 'org' }]}
                    onChangeHandler={commonFunctions.onChangeHandler}
                    data={state.data}
                    error={state.error}
                  />
                </Grid>

                {
                  state.data.repo_type && state.data.repo_type === 'org' &&
                  <Grid item xs={12}>
                    <Input
                      type="text"
                      label="Organization Name"
                      placeholder="Enter Organization Name"
                      name="org_name"
                      mandatorySign
                      onChangeHandler={commonFunctions.onChangeHandler}
                      data={state.data}
                      error={state.error}
                    />
                  </Grid>
                }

              </>
            }
            <Grid item xs={12}>
              <Input
                type="text"
                name="name"
                label="Give a name to the Registry"
                placeholder="AWS - custom_registry"
                mandatorySign
                onChangeHandler={commonFunctions.onChangeHandlerWithHyphenDahs}
                data={state.data}
                error={state.error}
                paramsHeading={
                  <div className='d-flex align-center color-dark-blue font-12'>
                    <span className='ri-information-line font-16 mr-5' style={{lineHeight:'1.2'}}></span>{' '}
                    Spaces are not allowed in Registry name
                  </div>
                }
              />
            </Grid>

            <Grid item xs={12}>
              <Input
                type="text"
                name="url"
                label="Registry URL"
                placeholder="https://aws_registry.buildpiper.in"
                mandatorySign
                onChangeHandler={commonFunctions.onChangeHandler}
                data={state.data}
                error={state.error}
              />
            </Grid>
            {
              state.data.support_registry_id === 4000 &&
              <>
                <Grid item xs={12} style={{ position: "relative" }}>
                  <Input
                    type="select"
                    name="credential_type"
                    label="Credential Type"
                    mandatorySign
                    list={credential_types_list}
                    onChangeHandler={commonFunctions.onChangeHandler}
                    data={state.data}
                    error={state.error}
                  />
                </Grid>
              </>
            }
            {
              (state.data.support_registry_id !== 5000 && state.data.support_registry_id !== 2000) && (
                state.data.support_registry_id === 4000 ? (
                  state.data.credential_type === "Profile Based" ? (
                    <Grid item xs={12} style={{ position: "relative" }}>
                      <Input
                        type="text"
                        name="profile_name"
                        label="Profile Name"
                        placeholder=""
                        mandatorySign
                        onChangeHandler={commonFunctions.onChangeHandler}
                        data={state.data}
                        error={state.error}
                      />
                      <i className="ri-information-line" onClick={handleClickOpen} style={{ position: "absolute", zIndex: "999", top: "0", right: "15", color: "#124d9b", fontSize: "large" }} role='button' tabIndex={0} onKeyDown={() => { }} />
                    </Grid>
                  ) : state.data.credential_type === "arn_role" ? (
                    <Grid item xs={12} style={{ position: "relative" }}>
                      <Input
                        type="text"
                        name="arn_role"
                        label="ARN Role"
                        placeholder=""
                        mandatorySign
                        onChangeHandler={commonFunctions.onChangeHandler}
                        data={state.data}
                        error={state.error}
                      />
                    </Grid>
                  ) : (
                    <Grid item xs={12}>
                      <Input
                        type="select"
                        name="credential"
                        list={state.credentialsList}
                        label="Select Secrets"
                        placeholder="test-username"
                        mandatorySign
                        onChangeHandler={commonFunctions.onChangeHandler}
                        data={state.data}
                        error={state.error}
                        extraDiv={
                          <Link className='text-anchor-blue d-flex align-center' to="/secrets/add"><i className="ri-add-line"></i> New Secret</Link>
                        }
                      />
                    </Grid>
                  )
                ) : (
                  <Grid item xs={12}>
                    <Input
                      type="select"
                      name="credential"
                      list={state.credentialsList}
                      label="Select Secrets"
                      placeholder="test-username"
                      mandatorySign
                      onChangeHandler={commonFunctions.onChangeHandler}
                      data={state.data}
                      error={state.error}
                      extraDiv={
                        <Link className='text-anchor-blue d-flex align-center' to="/secrets/add"><i className="ri-add-line"></i> New Secret</Link>
                      }
                    />
                  </Grid>
                )
              )
            }

            {
              state.data.support_registry_id === 5000 &&
              <>
                <Grid item xs={12}>
                  <Input
                    type="text"
                    name="project_name"
                    placeholder="Project Name"
                    mandatorySign
                    label="Project Name"
                    data={state.data}
                    error={state.error}
                    onChangeHandler={commonFunctions.onChangeHandler}
                  />
                </Grid>
                <Grid item xs={12}>
                  <Input
                    type="textarea"
                    name="json_key"
                    placeholder="{name: gcr }"
                    mandatorySign
                    label="Enter JSON key"
                    data={state.data}
                    error={state.error}
                    onChangeHandler={commonFunctions.onChangeHandler}
                  />
                </Grid>
              </>
            }
            {

              state.data.support_registry_id === 2000

              &&

              <>
                <Grid item xs={6}>
                  <Input
                    type="text"
                    name="access_key"
                    placeholder="Access Key"
                    mandatorySign
                    label="Access Key"
                    data={state.data}
                    error={state.error}
                    onChangeHandler={commonFunctions.onChangeHandler}
                  />
                </Grid>
                <Grid item xs={6}>
                  <Input
                    type="text"
                    name="access_key_secret"
                    placeholder="Access Secret Key"
                    mandatorySign
                    label="Access Secret Key"
                    data={state.data}
                    error={state.error}
                    onChangeHandler={commonFunctions.onChangeHandler}
                  />
                </Grid>

                <Grid item xs={12}>
                  <Input
                    type="text"
                    name="region"
                    placeholder="Region"
                    mandatorySign
                    label="Region"
                    data={state.data}
                    error={state.error}
                    onChangeHandler={commonFunctions.onChangeHandler}
                  />
                </Grid>
              </>
            }

          </Grid>

        </div>
        {/* button  */}
        <div className='' style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', background: '#ffffff', padding: '16px 34px', marginTop: 'auto' }}>
          <Link to="/integration/containerRegistries"><button className="btn btn-outline-grey mr-10">Close</button></Link>
          <Button isLoading={state.saving_data} className='btn' onClick={validateAndSave} endIcon={"ri-arrow-right-s-line"}>Save</Button>

        </div>
      </div>


    </>
  )
}
AddRegistryForm.propTypes = {
  ...PropTypes.objectOf(PropTypes.any),
}

const useStyles = makeStyles({
  wrapbox: {
    padding: '32px 32px 0 32px',
    backgroundColor: '#fff',
    '& .close': {
      textAlign: 'right',
    },

    '& .addregistry-heading': {
      fontWeight: '300',

      color: '#222a34',
      lineHeight: '20px',
      marginBottom: '20px',

      '& .main-heading': {
        fontSize: '20px',
      },
      '& .sub-heading-txt': {
        fontSize: '11px',
        color: '#999999',
      },
    },

  },

  root: {

    "& .MuiDialog-scrollPaper": {

      "& .MuiDialog-paper": {
        width: "600px !important",
        height: "200px !important",

      },
    },

  }

})