This is an automated email from the ASF dual-hosted git repository.

madhan pushed a commit to branch RANGER-3923
in repository https://gitbox.apache.org/repos/asf/ranger.git


The following commit(s) were added to refs/heads/RANGER-3923 by this push:
     new c71e57fd6 RANGER-4283: [WIP] UI for GDS: shared resource design fix, 
CSS. bug fixes
c71e57fd6 is described below

commit c71e57fd62587033c389ebfaf58c4984474c3cd4
Author: Anand Nadar <nadaranand...@gmail.com>
AuthorDate: Thu Nov 9 07:45:43 2023 -0800

    RANGER-4283: [WIP] UI for GDS: shared resource design fix, CSS. bug fixes
    
    Signed-off-by: Madhan Neethiraj <mad...@apache.org>
---
 .../react-webapp/src/images/view-request.svg       |   3 +
 .../main/webapp/react-webapp/src/styles/style.css  |  14 +-
 .../views/GovernedData/Dataset/AccessGrantForm.jsx | 530 ++++++++---------
 .../GovernedData/Dataset/DatasetDetailLayout.jsx   | 207 +++----
 .../Dataset/DatashareInDatasetListComp.jsx         |  18 +-
 .../GovernedData/Dataset/MyDatasetListing.jsx      |   2 +-
 .../Dataset/PrinciplePermissionComp.jsx            |   8 +-
 .../GovernedData/Datashare/AddDatashareView.jsx    |  86 +--
 .../Datashare/AddSharedResourceComp.jsx            | 159 ++----
 .../Datashare/DatashareDetailLayout.jsx            | 624 ++++++---------------
 .../GovernedData/Datashare/MyDatashareListing.jsx  |   6 +-
 .../PolicyListing/PolicyValidityPeriodComp.jsx     |   4 +-
 12 files changed, 672 insertions(+), 989 deletions(-)

diff --git 
a/security-admin/src/main/webapp/react-webapp/src/images/view-request.svg 
b/security-admin/src/main/webapp/react-webapp/src/images/view-request.svg
new file mode 100644
index 000000000..d502e1d10
--- /dev/null
+++ b/security-admin/src/main/webapp/react-webapp/src/images/view-request.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" 
xmlns="http://www.w3.org/2000/svg";>
+<path d="M6.875 9.7913V8.54134H13.125V9.7913H6.875ZM6.875 
6.45797V5.20801H13.125V6.45797H6.875ZM4.99998 11.8747H11.25C11.6207 11.8747 
11.9636 11.9548 12.2788 12.1151C12.594 12.2753 12.8616 12.5018 13.0817 
12.7945L15 15.2946V3.58943C15 3.51463 14.9759 3.4532 14.9279 3.40511C14.8798 
3.35703 14.8183 3.33299 14.7435 3.33299H5.25642C5.18163 3.33299 5.12019 3.35703 
5.0721 3.40511C5.02402 3.4532 4.99998 3.51463 4.99998 3.58943V11.8747ZM5.25642 
16.6663H14.4728L12.0977 13.5589C11.993 13.4211 11.8 [...]
+</svg>
diff --git a/security-admin/src/main/webapp/react-webapp/src/styles/style.css 
b/security-admin/src/main/webapp/react-webapp/src/styles/style.css
index e00450bf0..6e514be9e 100755
--- a/security-admin/src/main/webapp/react-webapp/src/styles/style.css
+++ b/security-admin/src/main/webapp/react-webapp/src/styles/style.css
@@ -100,6 +100,10 @@ a:active {
   margin-left: 20px;
 }
 
+.mg-l-32 {
+  margin-left: 32px;
+}
+
 .mg-t-5 {
   margin-top: 5px;
 }
@@ -2601,7 +2605,7 @@ li.list-group-item:hover {
 .gds-header {
   color: #222222;
   font-size: 18px;
-  font-weight: 300;
+  font-weight: 400;
   line-height: 20px;
   margin: 0;
   padding: 0;
@@ -2611,7 +2615,8 @@ li.list-group-item:hover {
 
 .gds-header-btn-grp {
   display: flex;
-  gap: 0.875rem;
+  gap: 0.5rem;
+  height: 39px;
 }
 
 .gds-form-wrap {
@@ -2843,7 +2848,7 @@ li.list-group-item:hover {
 .gds-grant-row {
   display: grid;
   grid-gap: 0.5rem;
-  grid-template-columns: 32px 1fr 32px;
+  grid-template-columns: 24px 1fr 32px;
 }
 
 .gds-flex {
@@ -2998,8 +3003,9 @@ textarea.gds-placeholder::placeholder,
 .gds-grant-condition .editable-label {
   margin-top: 0;
   margin-bottom: 0;
-  max-height: 126px;
+  max-height: 118px;
   overflow-y: scroll;
+  background-color: hsl(0, 0%, 90%);
 }
 
 .gds-grant-principle [class$="-indicatorsContainer"],
diff --git 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
index 4a6b7c402..203f40258 100755
--- 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
+++ 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
@@ -73,6 +73,7 @@ function AccessGrantForm({ dataset, onDataChange, 
serviceCompDetails }) {
   const [validityPeriod, setValidityPeriod] = useState([]);
   const dragOverItem = useRef();
   const dragItem = useRef();
+  const addPolicyItemClickRef = useRef();
 
   useEffect(() => {
     fetchInitalData();
@@ -91,6 +92,10 @@ function AccessGrantForm({ dataset, onDataChange, 
serviceCompDetails }) {
         formData: generateFormData(policyData, serviceCompDetails)
       });
     }
+    if (policyData == null) {
+      addPolicyItemClickRef.current.click();
+    }
+    return policyData;
   };
 
   const fetchAccessGrantData = async () => {
@@ -445,199 +450,202 @@ function AccessGrantForm({ dataset, onDataChange, 
serviceCompDetails }) {
               dirty,
               modified,
               initialValues
-            }) => (
-              <div className="gds-access-content">
-                <FormChange
-                  isDirtyField={
-                    dirty == true || !isEqual(initialValues, values)
-                      ? isDirtyFieldCheck(
-                          dirtyFields,
-                          modified,
-                          values,
-                          initialValues
-                        )
-                      : false
-                  }
-                  formValues={values}
-                />
-                <div className="datasetPolicyItem">
-                  <div className="mb-5 gds-content-border">
-                    <div>
-                      <p className="formHeader">Grants</p>
-                    </div>
-                    <div className="drag-drop-wrap">
-                      <FieldArray name="policyItems">
-                        {({ fields }) =>
-                          fields.map((name, index) => (
-                            <table className="w-100">
-                              <tr
-                                key={name}
-                                onDragStart={(e) =>
-                                  dragStart(e, index, dragItem)
-                                }
-                                onDragEnter={(e) =>
-                                  dragEnter(e, index, dragOverItem)
-                                }
-                                onDragEnd={(e) =>
-                                  drop(e, fields, dragItem, dragOverItem)
-                                }
-                                onDragOver={(e) => dragOver(e)}
-                                draggable
-                                id={index}
-                                className="drag-drop-wrap"
-                              >
-                                <div className="gds-grant-row">
-                                  <i className="fa-fw fa fa-bars mt-2"></i>
-                                  <div className="d-flex gap-half">
-                                    <div className="flex-1 mg-b-10 
gds-grant-principle">
-                                      <Field
-                                        name={`${name}.principle`}
-                                        render={({ input, meta }) => (
-                                          <div>
-                                            <AsyncSelect
-                                              {...input}
-                                              placeholder="Select users, 
groups, roles"
-                                              isMulti
-                                              loadOptions={fetchPrincipleData}
-                                              
data-name="usersSeusersPrinciplelect"
-                                              data-cy="usersPrinciple"
-                                            />
-                                          </div>
-                                        )}
-                                      />
-                                    </div>
+            }) => {
+              return (
+                <div className="gds-access-content">
+                  <FormChange
+                    isDirtyField={
+                      dirty == true || !isEqual(initialValues, values)
+                        ? isDirtyFieldCheck(
+                            dirtyFields,
+                            modified,
+                            values,
+                            initialValues
+                          )
+                        : false
+                    }
+                    formValues={values}
+                  />
+                  <div className="datasetPolicyItem">
+                    <div className="mb-5 gds-content-border gds-action-card 
pb-4 mt-3">
+                      <div className="gds-section-title">
+                        <p
+                          className="formHeader border-0 m-0"
+                          style={{ fontSize: "1.125rem", fontWeight: "400" }}
+                        >
+                          Grants
+                        </p>
+                        <div className="d-flex gap-half">
+                          {(values.conditions == undefined ||
+                            isEmpty(values.conditions)) && (
+                            <Button
+                              className="btn btn-sm"
+                              onClick={() => {
+                                policyConditionState(true);
+                              }}
+                              data-js="customPolicyConditions"
+                              data-cy="customPolicyConditions"
+                              variant="secondary"
+                            >
+                              Add Conditions
+                            </Button>
+                          )}
+                          {(validityPeriod == undefined ||
+                            validityPeriod.length == 0) && (
+                            <PolicyValidityPeriodComp
+                              addPolicyItem={addPolicyItem}
+                              isGDS={true}
+                            />
+                          )}
+                        </div>
+                      </div>
+                      <div className="drag-drop-wrap pt-3">
+                        <FieldArray name="policyItems">
+                          {({ fields }) =>
+                            fields.map((name, index) => (
+                              <table className="w-100 mg-b-10">
+                                <tr
+                                  key={name}
+                                  onDragStart={(e) =>
+                                    dragStart(e, index, dragItem)
+                                  }
+                                  onDragEnter={(e) =>
+                                    dragEnter(e, index, dragOverItem)
+                                  }
+                                  onDragEnd={(e) =>
+                                    drop(e, fields, dragItem, dragOverItem)
+                                  }
+                                  onDragOver={(e) => dragOver(e)}
+                                  draggable
+                                  id={index}
+                                  className="drag-drop-wrap"
+                                >
+                                  <div className="gds-grant-row">
+                                    <i className="fa-fw fa fa-bars mt-2"></i>
+                                    <div className="d-flex gap-half">
+                                      <div className="flex-1 mg-b-10 
gds-grant-principle">
+                                        <Field
+                                          name={`${name}.principle`}
+                                          render={({ input, meta }) => (
+                                            <div>
+                                              <AsyncSelect
+                                                {...input}
+                                                placeholder="Select users, 
groups, roles"
+                                                isMulti
+                                                
loadOptions={fetchPrincipleData}
+                                                
data-name="usersSeusersPrinciplelect"
+                                                data-cy="usersPrinciple"
+                                              />
+                                            </div>
+                                          )}
+                                        />
+                                      </div>
 
-                                    <div className="d-flex gap-1 mg-b-10 
gds-grant-permission">
-                                      <Field
-                                        name={`${name}.accesses`}
-                                        render={({ input, meta }) => (
-                                          <div className="flex-1">
-                                            <Select
-                                              {...input}
-                                              options={getAccessTypeOptions()}
-                                              menuPlacement="auto"
-                                              placeholder="Permissions"
-                                              isClearable
-                                              isMulti
+                                      <div className="d-flex gap-1 mg-b-10 
gds-grant-permission">
+                                        <Field
+                                          name={`${name}.accesses`}
+                                          render={({ input, meta }) => (
+                                            <div className="flex-1">
+                                              <Select
+                                                {...input}
+                                                
options={getAccessTypeOptions()}
+                                                menuPlacement="auto"
+                                                placeholder="Permissions"
+                                                isClearable
+                                                isMulti
+                                              />
+                                            </div>
+                                          )}
+                                        />
+                                      </div>
+                                      <div className="d-flex gap-1 mg-b-10 
gds-grant-condition">
+                                        {serviceCompDetails?.policyConditions
+                                          ?.length > 0 && (
+                                          <div
+                                            key="Policy Conditions"
+                                            className="align-middle w-100"
+                                          >
+                                            <Field
+                                              className="form-control "
+                                              name={`${name}.conditions`}
+                                              validate={(value, formValues) =>
+                                                requiredForPolicyItem(
+                                                  formValues["policyItems"],
+                                                  index
+                                                )
+                                              }
+                                              render={({ input }) => (
+                                                <div 
className="table-editable">
+                                                  <Editable
+                                                    {...input}
+                                                    placement="auto"
+                                                    type="custom"
+                                                    
conditionDefVal={policyConditionUpdatedJSON(
+                                                      
serviceCompDetails.policyConditions
+                                                    )}
+                                                    selectProps={{
+                                                      isMulti: true
+                                                    }}
+                                                    isGDS={true}
+                                                  />
+                                                </div>
+                                              )}
                                             />
                                           </div>
                                         )}
-                                      />
+                                      </div>
                                     </div>
-                                    <div className="d-flex gap-1 mg-b-10 
gds-grant-condition">
-                                      {serviceCompDetails?.policyConditions
-                                        ?.length > 0 && (
-                                        <td
-                                          key="Policy Conditions"
-                                          className="align-middle w-100"
-                                        >
-                                          <Field
-                                            className="form-control "
-                                            name={`${name}.conditions`}
-                                            validate={(value, formValues) =>
-                                              requiredForPolicyItem(
-                                                formValues["policyItems"],
-                                                index
-                                              )
-                                            }
-                                            render={({ input }) => (
-                                              <div className="table-editable">
-                                                <Editable
-                                                  {...input}
-                                                  placement="auto"
-                                                  type="custom"
-                                                  
conditionDefVal={policyConditionUpdatedJSON(
-                                                    
serviceCompDetails.policyConditions
-                                                  )}
-                                                  selectProps={{
-                                                    isMulti: true
-                                                  }}
-                                                  isGDS={true}
-                                                />
-                                              </div>
-                                            )}
-                                          />
-                                        </td>
-                                      )}
+                                    <div>
+                                      <Button
+                                        variant="danger"
+                                        size="sm"
+                                        title="Remove"
+                                        onClick={() => {
+                                          fields.remove(index);
+                                          onRemovingPolicyItem();
+                                        }}
+                                        data-action="delete"
+                                        data-cy="delete"
+                                      >
+                                        <i className="fa-fw fa fa-remove"></i>
+                                      </Button>
                                     </div>
                                   </div>
-                                  <div>
-                                    <Button
-                                      variant="danger"
-                                      size="sm"
-                                      title="Remove"
-                                      onClick={() => {
-                                        fields.remove(index);
-                                        onRemovingPolicyItem();
-                                      }}
-                                      data-action="delete"
-                                      data-cy="delete"
-                                    >
-                                      <i className="fa-fw fa fa-remove"></i>
-                                    </Button>
-                                  </div>
-                                </div>
-                              </tr>
-                            </table>
-                          ))
-                        }
-                      </FieldArray>
-                    </div>
-                    <Button
-                      className="btn btn-mini mt-2"
-                      type="button"
-                      onClick={() => addPolicyItem("policyItems", undefined)}
-                      data-action="addGroup"
-                      data-cy="addGroup"
-                      title="Add"
-                    >
-                      Add More
-                    </Button>
-                  </div>
-                </div>
-
-                <div className="d-flex gap-1">
-                  <Card
-                    className={
-                      isEmpty(values.conditions)
-                        ? "gds-no-data gds-action-card gds-grant-det-cond 
gds-bg-white"
-                        : "gds-action-card gds-grant-det-cond gds-bg-white"
-                    }
-                  >
-                    <div className="gds-section-title">
-                      <p className="gds-card-heading">Conditions</p>
+                                </tr>
+                              </table>
+                            ))
+                          }
+                        </FieldArray>
+                      </div>
                       <Button
-                        className="btn btn-sm"
-                        onClick={() => {
-                          policyConditionState(true);
-                        }}
-                        data-js="customPolicyConditions"
-                        data-cy="customPolicyConditions"
+                        className="btn btn-sm mt-2 mg-l-32 mb-5"
+                        type="button"
+                        onClick={() => addPolicyItem("policyItems", undefined)}
+                        data-action="addGroup"
+                        data-cy="addGroup"
+                        title="Add"
+                        ref={addPolicyItemClickRef}
                       >
-                        Add Conditions
+                        Add More
                       </Button>
-                      {/* <div> */}
-                      {showModal && (
-                        <Field
-                          className="form-control"
-                          name="conditions"
-                          render={({ input }) => (
-                            <PolicyConditionsComp
-                              
policyConditionDetails={policyConditionUpdatedJSON(
-                                serviceCompDetails.policyConditions
-                              )}
-                              inputVal={input}
-                              showModal={showModal}
-                              handleCloseModal={policyConditionState}
-                            />
-                          )}
-                        />
-                      )}
-                    </div>
-                    <Card.Body className="px-0 pb-0">
-                      <>
-                        {values?.conditions && !isEmpty(values.conditions) ? (
-                          Object.keys(values.conditions).map((keyName) => {
+
+                      {values?.conditions && !isEmpty(values.conditions) && (
+                        <div className="gds-action-card mb-5 pl-0 pr-0">
+                          <div className="gds-section-title">
+                            <p className="gds-card-heading">Conditions</p>
+                            <Button
+                              className="btn btn-sm"
+                              onClick={() => {
+                                policyConditionState(true);
+                              }}
+                              data-js="customPolicyConditions"
+                              data-cy="customPolicyConditions"
+                              variant="secondary"
+                            >
+                              Edit Conditions
+                            </Button>
+                          </div>
+                          {Object.keys(values.conditions).map((keyName) => {
                             if (
                               values.conditions[keyName] != "" &&
                               values.conditions[keyName] != null
@@ -651,10 +659,10 @@ function AccessGrantForm({ dataset, onDataChange, 
serviceCompDetails }) {
                                 }
                               );
                               return (
-                                <div>
+                                <div className="pt-3">
                                   {isObject(values.conditions[keyName]) ? (
                                     <div>
-                                      <span>
+                                      <span className="fnt-14">
                                         {values.conditions[keyName].length > 1
                                           ? values.conditions[keyName].map(
                                               (m) => {
@@ -666,89 +674,97 @@ function AccessGrantForm({ dataset, onDataChange, 
serviceCompDetails }) {
                                     </div>
                                   ) : (
                                     <div>
-                                      <span>{values.conditions[keyName]}</span>
+                                      <span className="fnt-14">
+                                        {values.conditions[keyName]}
+                                      </span>
                                     </div>
                                   )}
                                 </div>
                               );
                             }
-                          })
-                        ) : (
-                          <div></div>
-                        )}
-                      </>
-                    </Card.Body>
-                  </Card>
-                </div>
-                <div className="d-flex gap-1">
-                  <Card
-                    className={
-                      validityPeriod == undefined || validityPeriod.length == 0
-                        ? "gds-no-data gds-action-card gds-grant-det-cond 
gds-bg-white"
-                        : "gds-action-card gds-grant-det-cond gds-bg-white"
-                    }
-                  >
-                    <div className="gds-section-title">
-                      <p className="gds-card-heading">Validity Period</p>
-                      <PolicyValidityPeriodComp addPolicyItem={addPolicyItem} 
/>
-                    </div>
-                    <Card.Body className="px-0 pb-0">
-                      <>
-                        {validityPeriod != undefined &&
-                        validityPeriod.length > 0 ? (
-                          validityPeriod.map((obj, index) => {
-                            return (
-                              <div className="gds-inline-field-grp 
gds-inline-listing w-100">
-                                <div className="wrapper">
-                                  <div className="gds-left-inline-field">
-                                    <span className="gds-label-color">
-                                      Start Date{" "}
+                          })}
+                        </div>
+                      )}
+                      {showModal && (
+                        <Field
+                          className="form-control"
+                          name="conditions"
+                          render={({ input }) => (
+                            <PolicyConditionsComp
+                              
policyConditionDetails={policyConditionUpdatedJSON(
+                                serviceCompDetails.policyConditions
+                              )}
+                              inputVal={input}
+                              showModal={showModal}
+                              handleCloseModal={policyConditionState}
+                            />
+                          )}
+                        />
+                      )}
+
+                      {validityPeriod != undefined &&
+                        validityPeriod.length > 0 && (
+                          <div className="gds-action-card pl-0 pr-0">
+                            <div className="gds-section-title">
+                              <p className="gds-card-heading">
+                                Validity Period
+                              </p>
+                              <PolicyValidityPeriodComp
+                                addPolicyItem={addPolicyItem}
+                                editValidityPeriod={true}
+                                isGDS={true}
+                              />
+                            </div>
+                            {validityPeriod.map((obj, index) => {
+                              return (
+                                <div className="gds-inline-field-grp 
gds-inline-listing w-100">
+                                  <div className="wrapper pt-3">
+                                    <div className="gds-left-inline-field">
+                                      <span className="gds-label-color fnt-14">
+                                        Start Date
+                                      </span>
+                                    </div>
+                                    {obj?.startTime != undefined ? (
+                                      <span className="fnt-14">
+                                        {dateFormat(
+                                          obj.startTime,
+                                          "mm/dd/yyyy hh:MM:ss TT"
+                                        )}
+                                      </span>
+                                    ) : (
+                                      <p className="mb-0">--</p>
+                                    )}
+                                    <span className="gds-label-color pl-5 
fnt-14">
+                                      {obj?.timeZone}
                                     </span>
                                   </div>
-                                  {obj?.startTime != undefined ? (
-                                    <span>
-                                      {dateFormat(
-                                        obj.startTime,
-                                        "mm/dd/yyyy hh:MM:ss TT"
-                                      )}
-                                    </span>
-                                  ) : (
-                                    <p className="mb-0">--</p>
-                                  )}
-                                  <span className="gds-label-color pl-5">
-                                    {obj?.timeZone}
-                                  </span>
-                                </div>
-                                <div className="wrapper ">
-                                  <div className="gds-left-inline-field">
-                                    <span className="gds-label-color">
-                                      {" "}
-                                      End Date{" "}
-                                    </span>
+                                  <div className="wrapper ">
+                                    <div className="gds-left-inline-field">
+                                      <span className="gds-label-color fnt-14">
+                                        End Date
+                                      </span>
+                                    </div>
+                                    {obj?.endTime != undefined ? (
+                                      <span className="fnt-14">
+                                        {dateFormat(
+                                          obj.endTime,
+                                          "mm/dd/yyyy hh:MM:ss TT"
+                                        )}
+                                      </span>
+                                    ) : (
+                                      <p className="mb-0">--</p>
+                                    )}
                                   </div>
-                                  {obj?.endTime != undefined ? (
-                                    <span>
-                                      {dateFormat(
-                                        obj.endTime,
-                                        "mm/dd/yyyy hh:MM:ss TT"
-                                      )}
-                                    </span>
-                                  ) : (
-                                    <p className="mb-0">--</p>
-                                  )}
                                 </div>
-                              </div>
-                            );
-                          })
-                        ) : (
-                          <div></div>
+                              );
+                            })}
+                          </div>
                         )}
-                      </>
-                    </Card.Body>
-                  </Card>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            )}
+              );
+            }}
           />
         </div>
       )}
diff --git 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailLayout.jsx
 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailLayout.jsx
index 43d023caa..5bbd99924 100755
--- 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailLayout.jsx
+++ 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailLayout.jsx
@@ -165,10 +165,13 @@ const DatasetDetailLayout = () => {
   const handleDatasetDeleteClick = async () => {
     toggleClose();
     try {
+      let params = {};
+      params["forceDelete"] = true;
       setBlockUI(true);
       await fetchApi({
         url: `gds/dataset/${datasetId}`,
-        method: "DELETE"
+        method: "DELETE",
+        params: params
       });
       setBlockUI(false);
       toast.success(" Success! Dataset deleted successfully");
@@ -665,6 +668,11 @@ const DatasetDetailLayout = () => {
     setRequestActiveKey(key);
   };
 
+  const updateDatasetAndAccessGrant = async () => {
+    updateDatasetDetails();
+    updateDatasetAccessGrant();
+  };
+
   const updateDatasetDetails = async () => {
     datasetInfo.name = datasetName;
     datasetInfo.description = datasetDescription;
@@ -806,6 +814,7 @@ const DatasetDetailLayout = () => {
             "Access Grant updated successfully!!"
           );
           showSaveCancelButton(false);
+          setAccessGrantFormValues();
         } catch (error) {
           setLoader(false);
           let errorMsg = `Failed to update Access Grant`;
@@ -829,6 +838,7 @@ const DatasetDetailLayout = () => {
             "Access Grant created successfully!!"
           );
           showSaveCancelButton(false);
+          setAccessGrantFormValues();
         } catch (error) {
           setLoader(false);
           let errorMsg = `Failed to create Access Grant`;
@@ -1140,13 +1150,20 @@ const DatasetDetailLayout = () => {
   const handleEditClick = () => {
     if (isSystemAdmin() || userAclPerm == "ADMIN") {
       isDatasetNameEditable(true);
+      showSaveCancelButton(true);
     }
   };
 
   return (
     <>
       <React.Fragment>
-        <div className="gds-header-wrapper gap-half">
+        <div
+          className={
+            saveCancelButtons
+              ? "gds-header-wrapper gap-half pt-2 pb-2"
+              : "gds-header-wrapper gap-half"
+          }
+        >
           <Button
             variant="light"
             className="border-0 bg-transparent"
@@ -1158,44 +1175,42 @@ const DatasetDetailLayout = () => {
             <i className="fa fa-angle-left fa-lg font-weight-bold" />
           </Button>
           <h3 className="gds-header bold">
-            <span>Dataset :</span>
-            {!datasetNameEditable ? (
-              <span
-                title={datasetName}
-                className="text-truncate"
-                style={{ maxWidth: "700px", display: "inline-block" }}
-                onClick={() => handleEditClick()}
-              >
-                {datasetName}
-              </span>
-            ) : (
-              <input
-                type="text"
-                name="shareName"
-                className="form-control"
-                data-cy="shareName"
-                value={datasetName}
-                onChange={onDatasetNameChange}
-              />
-            )}
-
-            {/* <input
-              type="text"
-              name="shareName"
-              className="form-control"
-              data-cy="shareName"
-              value={datasetName}
-              onChange={onDatasetNameChange}
-            /> */}
+            <div className="d-flex align-items-center">
+              <span className="mr-1">Dataset: </span>
+              {!datasetNameEditable ? (
+                <span
+                  title={datasetName}
+                  className="text-truncate"
+                  style={{ maxWidth: "700px", display: "inline-block" }}
+                  onClick={() => handleEditClick()}
+                >
+                  {datasetName}
+                </span>
+              ) : (
+                <input
+                  type="text"
+                  name="datasetName"
+                  style={{ height: "39px" }}
+                  className="form-control"
+                  data-cy="datasetName"
+                  value={datasetName}
+                  onChange={onDatasetNameChange}
+                />
+              )}
+            </div>
           </h3>
-          <CustomBreadcrumb />
-          {(isSystemAdmin() || userAclPerm == "ADMIN") && (
-            <span className="pipe"></span>
+          {!datasetNameEditable && !saveCancelButtons && (
+            <>
+              <CustomBreadcrumb />
+              <span className="pipe" />
+            </>
           )}
-          {(isSystemAdmin() ||
+
+          {datasetNameEditable ||
+          ((isSystemAdmin() ||
             userAclPerm == "ADMIN" ||
             userAclPerm == "POLICY_ADMIN") &&
-          saveCancelButtons ? (
+            saveCancelButtons) ? (
             <div className="gds-header-btn-grp">
               <Button
                 variant="secondary"
@@ -1209,7 +1224,12 @@ const DatasetDetailLayout = () => {
               <Button
                 variant="primary"
                 onClick={
-                  activeKey != "accessGrants"
+                  activeKey == "accessGrants" &&
+                  accessGrantFormValues != undefined &&
+                  datasetNameEditable
+                    ? updateDatasetAndAccessGrant
+                    : activeKey != "accessGrants" ||
+                      (activeKey == "accessGrants" && datasetNameEditable)
                     ? updateDatasetDetails
                     : updateDatasetAccessGrant
                 }
@@ -1223,58 +1243,60 @@ const DatasetDetailLayout = () => {
           ) : (
             <div></div>
           )}
-          <div>
-            <DropdownButton
-              id="dropdown-item-button"
-              title={<i className="fa fa-ellipsis-v" fontSize="36px" />}
-              size="sm"
-              className="hide-arrow"
-            >
-              <Dropdown.Item
-                as="button"
-                onClick={() => {
-                  navidateToFullViewPage();
-                }}
-                data-name="fullView"
-                data-id="fullView"
-                data-cy="fullView"
-              >
-                Full View
-              </Dropdown.Item>
-              <Dropdown.Item
-                as="button"
-                onClick={() => {
-                  copyURL();
-                }}
-                data-name="copyDatasetLink"
-                data-id="copyDatasetLink"
-                data-cy="copyDatasetLink"
-              >
-                Copy Dataset Link
-              </Dropdown.Item>
-              <Dropdown.Item
-                as="button"
-                onClick={() => downloadJsonFile()}
-                data-name="downloadJson"
-                data-id="downloadJson"
-                data-cy="downloadJson"
-              >
-                Download Json
-              </Dropdown.Item>
-              <hr />
-              <Dropdown.Item
-                as="button"
-                onClick={() => {
-                  toggleConfirmModalForDatasetDelete();
-                }}
-                data-name="deleteDataset"
-                data-id="deleteDataset"
-                data-cy="deleteDataset"
+          {!datasetNameEditable && !saveCancelButtons && (
+            <div>
+              <DropdownButton
+                id="dropdown-item-button"
+                title={<i className="fa fa-ellipsis-v" fontSize="36px" />}
+                size="sm"
+                className="hide-arrow"
               >
-                Delete Dataset
-              </Dropdown.Item>
-            </DropdownButton>
-          </div>
+                <Dropdown.Item
+                  as="button"
+                  onClick={() => {
+                    navidateToFullViewPage();
+                  }}
+                  data-name="fullView"
+                  data-id="fullView"
+                  data-cy="fullView"
+                >
+                  Full View
+                </Dropdown.Item>
+                <Dropdown.Item
+                  as="button"
+                  onClick={() => {
+                    copyURL();
+                  }}
+                  data-name="copyDatasetLink"
+                  data-id="copyDatasetLink"
+                  data-cy="copyDatasetLink"
+                >
+                  Copy Dataset Link
+                </Dropdown.Item>
+                <Dropdown.Item
+                  as="button"
+                  onClick={() => downloadJsonFile()}
+                  data-name="downloadJson"
+                  data-id="downloadJson"
+                  data-cy="downloadJson"
+                >
+                  Download Json
+                </Dropdown.Item>
+                <hr />
+                <Dropdown.Item
+                  as="button"
+                  onClick={() => {
+                    toggleConfirmModalForDatasetDelete();
+                  }}
+                  data-name="deleteDataset"
+                  data-id="deleteDataset"
+                  data-cy="deleteDataset"
+                >
+                  Delete Dataset
+                </Dropdown.Item>
+              </DropdownButton>
+            </div>
+          )}
         </div>
         {loader ? (
           <Loader />
@@ -1366,10 +1388,7 @@ const DatasetDetailLayout = () => {
                                 </div>
                               </div>
                             </div>
-                            {(isSystemAdmin() ||
-                              userAclPerm == "ADMIN" ||
-                              userAclPerm == "POLICY_ADMIN" ||
-                              userAclPerm == "AUDIT") && (
+                            {(isSystemAdmin() || userAclPerm != "VIEW") && (
                               <PrinciplePermissionComp
                                 userList={userList}
                                 groupList={groupList}
@@ -1459,7 +1478,7 @@ const DatasetDetailLayout = () => {
                             <input
                               type="search"
                               className="form-control gds-input"
-                              placeholder="Search..."
+                              placeholder="Search Users, Groups and Roles..."
                               onChange={(e) =>
                                 onChangeSharedWithPrincipleName(e)
                               }
@@ -1475,7 +1494,7 @@ const DatasetDetailLayout = () => {
                               }
                               value={sharedWithAccessFilter}
                               menuPlacement="auto"
-                              placeholder="All Permissions"
+                              placeholder="Select Permission"
                               isClearable
                             />
                           </div>
diff --git 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatashareInDatasetListComp.jsx
 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatashareInDatasetListComp.jsx
index 5616fca6f..e7cd9bcda 100644
--- 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatashareInDatasetListComp.jsx
+++ 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatashareInDatasetListComp.jsx
@@ -26,6 +26,7 @@ import StructuredFilter from 
"../../../components/structured-filter/react-typeah
 import { Loader, BlockUi } from "../../../components/CommonComponents";
 import { toast } from "react-toastify";
 import moment from "moment-timezone";
+import viewRequestIcon from "../../../images/view-request.svg";
 
 import {
   getTableSortBy,
@@ -278,7 +279,6 @@ const DatashareInDatasetListComp = ({
       {
         Header: "",
         accessor: "actions",
-        width: 100,
         Cell: ({ row: { original } }) => {
           return (
             <div>
@@ -286,7 +286,19 @@ const DatashareInDatasetListComp = ({
                 variant="outline-dark"
                 size="sm"
                 className="mr-2"
-                title="View"
+                style={{ height: "31px" }}
+                title="View Request"
+                onClick={() => navigate(`/gds/request/detail/${original.id}`)}
+                data-name="viewRequest"
+                data-id={original.dataShareId}
+              >
+                <img src={viewRequestIcon} height="18px" width="18px" />
+              </Button>
+              <Button
+                variant="outline-dark"
+                size="sm"
+                className="mr-2"
+                title="View Datashare"
                 onClick={() =>
                   navigate(`/gds/datashare/${original.dataShareId}/detail`)
                 }
@@ -333,7 +345,7 @@ const DatashareInDatasetListComp = ({
   const toggleConfirmModalForDelete = (id, name, status) => {
     let deleteMsg = "";
     if (status == "ACTIVE") {
-      deleteMsg = `Do you want to remove Datashare ${id} from 
${datasetInfo.name}`;
+      deleteMsg = `Do you want to remove Datashare ${id} from ${name}`;
     } else {
       deleteMsg = `Do you want to delete request of Datashare ${id}`;
     }
diff --git 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/MyDatasetListing.jsx
 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/MyDatasetListing.jsx
index e0b9a19f9..87d808ae4 100755
--- 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/MyDatasetListing.jsx
+++ 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/MyDatasetListing.jsx
@@ -469,7 +469,7 @@ const MyDatasetListing = () => {
   const searchFilterOptions = [
     {
       category: "datasetNamePartial",
-      label: "DatasetName Name",
+      label: "Name",
       urlLabel: "datasetNamePartial",
       type: "text"
     }
diff --git 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/PrinciplePermissionComp.jsx
 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/PrinciplePermissionComp.jsx
index c39201941..475ef1015 100755
--- 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/PrinciplePermissionComp.jsx
+++ 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/PrinciplePermissionComp.jsx
@@ -386,7 +386,7 @@ const PrinciplePermissionComp = ({
 
   return (
     <div className="gds-tab-content">
-      {!isDetailView && isAdmin && (
+      {!isDetailView && (
         <div className="gds-form-input">
           <Field
             className="form-control"
@@ -574,7 +574,7 @@ const PrinciplePermissionComp = ({
                                 defaultValue={[
                                   { label: obj.perm, value: obj.perm }
                                 ]}
-                                isDisabled={!isAdmin}
+                                isDisabled={isDetailView && !isAdmin}
                                 isClearable
                               />
                             )}
@@ -644,7 +644,7 @@ const PrinciplePermissionComp = ({
                                 defaultValue={[
                                   { label: obj.perm, value: obj.perm }
                                 ]}
-                                isDisabled={!isAdmin}
+                                isDisabled={isDetailView && !isAdmin}
                                 isClearable
                               />
                             )}
@@ -709,7 +709,7 @@ const PrinciplePermissionComp = ({
                                     "ROLE"
                                   )
                                 }
-                                isDisabled={!isAdmin}
+                                isDisabled={isDetailView && !isAdmin}
                                 menuPlacement="auto"
                                 defaultValue={[
                                   { label: obj.perm, value: obj.perm }
diff --git 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddDatashareView.jsx
 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddDatashareView.jsx
index 483b89ea0..e6a41c74c 100755
--- 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddDatashareView.jsx
+++ 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddDatashareView.jsx
@@ -17,47 +17,21 @@
  * under the License.
  */
 
-import React, { useState, useReducer, useEffect, useMemo } from "react";
-import {
-  serverError,
-  policyConditionUpdatedJSON
-} from "../../../utils/XAUtils";
-import Editable from "Components/Editable";
+import React, { useState, useReducer } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button, Form as FormB, Card } from "react-bootstrap";
 import Select from "react-select";
-import { filter, groupBy, some, sortBy, forIn, has, isArray } from "lodash";
+import { groupBy } from "lodash";
 import AsyncSelect from "react-select/async";
 import { Form, Field } from "react-final-form";
 import { fetchApi } from "Utils/fetchAPI";
 import PrinciplePermissionComp from "../Dataset/PrinciplePermissionComp";
 import { FieldArray } from "react-final-form-arrays";
-import AddSharedResourceComp from "./AddSharedResourceComp";
 import { toast } from "react-toastify";
 import arrayMutators from "final-form-arrays";
+import { BlockUi } from "../../../components/CommonComponents";
 
-const initialState = {
-  loader: false,
-  preventUnBlock: false,
-  blockUI: false,
-  formData: {}
-};
-
-function reducer(state, action) {
-  switch (action.type) {
-    case "SET_DATA":
-      return {
-        ...state,
-        loader: false,
-        serviceDetails: action.serviceDetails,
-        serviceCompDetails: action.serviceCompDetails,
-        policyData: action?.policyData,
-        formData: action.formData
-      };
-    default:
-      throw new Error();
-  }
-}
+const initialState = {};
 
 const datashareFormReducer = (state, action) => {
   switch (action.type) {
@@ -71,16 +45,6 @@ const datashareFormReducer = (state, action) => {
         ...state,
         selectedZone: action.selectedZone
       };
-    case "SET_PREVENT_ALERT":
-      return {
-        ...state,
-        preventUnBlock: action.preventUnBlock
-      };
-    case "SET_BLOCK_UI":
-      return {
-        ...state,
-        blockUI: action.blockUI
-      };
     default:
       throw new Error();
   }
@@ -95,17 +59,9 @@ const AddDatashareView = () => {
     datashareFormReducer,
     initialState
   );
-  const { loader, selectedService, selectedZone, preventUnBlock } =
-    datashareDetails;
+  const { selectedService, selectedZone } = datashareDetails;
   const [serviceDef, setServiceDef] = useState({});
-  const [serviceDetails, setService] = useState({});
-  const [policyState, policyDispatch] = useReducer(reducer, initialState);
-  const { loaders, serviceDetailss, serviceCompDetails, policyData, formData } 
=
-    policyState;
   const [blockUI, setBlockUI] = useState(false);
-  const [tagName, setTagName] = useState();
-  const [showModal, policyConditionState] = useState(false);
-  const [sharedResourceList, setSharedResourceList] = useState([]);
   const [userList, setUserList] = useState([]);
   const [groupList, setGroupList] = useState([]);
   const [roleList, setRoleList] = useState([]);
@@ -197,32 +153,25 @@ const AddDatashareView = () => {
       roleList.forEach((role) => {
         dataShareInfo.acl.roles[role.name] = role.perm;
       });
-
-      dispatch({
-        type: "SET_PREVENT_ALERT",
-        preventUnBlock: true
-      });
       try {
-        dispatch({
-          type: "SET_BLOCK_UI",
-          blockUI: true
-        });
+        setBlockUI(true);
         const createDatashareResp = await fetchApi({
           url: `gds/datashare`,
           method: "post",
-          data: dataShareInfo
+          data: dataShareInfo,
+          skipNavigate: true
         });
         toast.success("Datashare created successfully!!");
-        self.location.hash = "#/gds/mydatasharelisting";
+        navigate("/gds/mydatasharelisting");
       } catch (error) {
-        dispatch({
-          type: "SET_BLOCK_UI",
-          blockUI: false
-        });
-        serverError(error);
-        toast.error(error);
+        let errorMsg = `Failed to create datashare`;
+        if (error?.response?.data?.msgDesc) {
+          errorMsg = `Error! ${error.response.data.msgDesc}`;
+        }
+        toast.error(errorMsg);
         console.error(`Error occurred while creating datashare  ${error}`);
       }
+      setBlockUI(false);
     } else if (step == 4) {
       setSaveButtonText("Create Datashare");
       setStep(step + 1);
@@ -294,10 +243,6 @@ const AddDatashareView = () => {
     console.log("DatashareName is:", event.target.value);
   };
 
-  const tagNameChange = (event) => {
-    setTagName(event.target.value);
-  };
-
   const datashareDescriptionChange = (event) => {
     setDatashareDescription(event.target.value);
     console.log("Datashare Description is:", event.target.value);
@@ -920,6 +865,7 @@ const AddDatashareView = () => {
                 </table>
               </div>
             )}
+            <BlockUi isUiBlock={blockUI} />
           </div>
         )}
       />
diff --git 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddSharedResourceComp.jsx
 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddSharedResourceComp.jsx
index eb489535c..254e0d00e 100755
--- 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddSharedResourceComp.jsx
+++ 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddSharedResourceComp.jsx
@@ -30,7 +30,7 @@ import {
   Modal,
   Form as FormB
 } from "react-bootstrap";
-import { Form, Field } from "react-final-form";
+import { Form, Field, useForm } from "react-final-form";
 import arrayMutators from "final-form-arrays";
 import Select from "react-select";
 import { groupBy, isArray, maxBy, find } from "lodash";
@@ -40,14 +40,12 @@ import { getServiceDef } from "../../../utils/appState";
 
 const AddSharedResourceComp = ({
   datashareId,
-  onToggleAddResourceClose,
   sharedResource,
   showModal,
   setShowModal,
   resourceModalUpdateTable,
   datashareInfo,
   setResourceUpdateTable,
-  resourceUpdateTable,
   serviceDetails,
   isEdit
 }) => {
@@ -58,42 +56,17 @@ const AddSharedResourceComp = ({
   const [showAddResourceModal, setShowAddResourceModal] = useState(
     showModal ? true : false
   );
+  let closeModalFag = false;
   const [openConfigAccordion, setOpenConfigAccordion] = useState(false);
   const [formData, setFormData] = useState();
   const [selectedResShareMask, setSelectedResShareMask] = useState({});
-  //const [loadSharedResource, setLoadSharedResource] = useState();
-  //const [serviceDef, setServiceDef] = useState();
-  //const [serviceDetails, setService] = useState({});
-  //const serviceDef = getServiceDef();
   const { allServiceDefs } = getServiceDef();
+
   const serviceDef = allServiceDefs?.find((servicedef) => {
     return servicedef.name == serviceDetails?.type;
   });
 
-  const fetchSharedResource = async () => {
-    try {
-      let params = {};
-      const resp = await fetchApi({
-        url: `gds/resource/${sharedResourceId}`
-      });
-      setLoadSharedResource(resp.data);
-      setFormData(generateFormData(resp.data, serviceDef));
-    } catch (error) {
-      console.error(
-        `Error occurred while fetching shared resource details ! ${error}`
-      );
-    }
-  };
-
   useEffect(() => {
-    // if (isEdit) {
-    //   //fetchSharedResource(sharedResourceId);
-    //   setLoadSharedResource(sharedResource);
-    // }
-    //
-    // //setShowAddResourceModal(true);
-    // fetchDatashareInfo(datashareId);
-    //fetchDatashareInfo(datashareId);
     loadData();
   }, [resourceModalUpdateTable]);
 
@@ -209,9 +182,7 @@ const AddSharedResourceComp = ({
     input.onChange(event);
   };
 
-  const handleSubmit = async (values, closeModal) => {
-    console.log(values);
-    console.log(values);
+  const handleSubmit = async (values, form) => {
     let data = {};
     data.dataShareId = datashareId;
     let serviceCompRes = serviceDef.resources;
@@ -244,10 +215,10 @@ const AddSharedResourceComp = ({
     data.accessTypes = values.permission?.map((item) => item.value);
     data.rowFilter = values.rowFilter;
     data.resourceMask = values.resourceMask;
-
-    try {
+    let errorList = [];
+    if (isEdit) {
       setLoader(true);
-      if (isEdit) {
+      try {
         data.guid = sharedResource.guid;
         await fetchApi({
           url: `gds/resource/${sharedResource.id}`,
@@ -255,31 +226,40 @@ const AddSharedResourceComp = ({
           data: data
         });
         toast.success("Shared resource updated successfully!!");
-      } else {
+        setShowModal(false);
+      } catch (error) {
+        errorList.push(error);
+        toast.error("Error occurred while updating Shared resource");
+        console.error(`Error occurred while updating Shared resource 
${error}`);
+      }
+    } else {
+      try {
         await fetchApi({
           url: `gds/resource`,
           method: "post",
-          data: data
+          data: data,
+          skipNavigate: true
         });
         toast.success("Shared resource created successfully!!");
+        if (closeModalFag) {
+          closeModalFag = false;
+          setShowModal(false);
+          values = {};
+        } else {
+          Object.keys(values).forEach((key) => {
+            if (!key.includes("resourceName")) {
+              form.change(key, undefined);
+            }
+          });
+        }
+      } catch (error) {
+        errorList.push(error);
+        toast.error("Error occurred while creating Shared resource");
+        console.error(`Error occurred while creating Shared resource 
${error}`);
       }
-    } catch (error) {
-      serverError(error);
-      if (sharedResource != undefined) {
-        toast.success("Error occurred while updating Shared resource");
-      } else {
-        toast.success("Error occurred while creating Shared resource");
-      }
-      console.error(
-        `Error occurred while creating/updating Shared resource  ${error}`
-      );
     }
     setResourceUpdateTable(moment.now());
     setLoader(false);
-    if (closeModal) {
-      setShowModal(false);
-    }
-    console.log(data);
   };
 
   const toggleAddResourceClose = () => {
@@ -301,63 +281,18 @@ const AddSharedResourceComp = ({
 
   return (
     <>
-      {/* <div className="gds-form-header-wrapper gap-half">
-        <Button
-          variant="light"
-          className="border-0 bg-transparent"
-          onClick={back}
-          size="sm"
-          data-id="back"
-          data-cy="back"
-        >
-          <i className="fa fa-angle-left fa-lg font-weight-bold" />
-        </Button>
-        <h3 className="gds-header bold">Add Resource</h3>
-      </div> */}
       {loader ? (
         <Loader />
       ) : (
         <>
-          {/* <div className="gds-header-btn-grp">
-            {!isEdit ? (
-              <Button
-                variant="primary"
-                onClick={addResource}
-                style={{ whiteSpace: "nowrap" }}
-                size="sm"
-                data-id="save"
-                data-cy="save"
-              >
-                Add Resources
-              </Button>
-            ) : (
-              <Button
-                variant="outline-dark"
-                size="sm"
-                title="Edit"
-                onClick={(e) => {
-                  fetchSharedResource(sharedResourceId);
-                  setShowAddResourceModal(true);
-                }}
-                data-name="editSharedResource"
-                data-id="editSharedResource"
-              >
-                <i className="fa-fw fa fa-edit"></i>
-              </Button>
-            )}
-          </div> */}
           <Modal
-            //show={showAddResourceModal}
             show={showModal}
             onHide={toggleAddResourceModalClose}
-            //className="mb-7"
             size="xl"
           >
             <Modal.Header closeButton>
               <h5 className="mb-0">Add Resources</h5>
             </Modal.Header>
-            {/* <div className="gds-form-wrap"> */}
-            {/* <div className="gds-form-content"> */}
             <div>
               <div className="mb-2 gds-chips flex-wrap">
                 <span
@@ -397,7 +332,8 @@ const AddSharedResourceComp = ({
                   values,
                   invalid,
                   errors,
-                  required
+                  required,
+                  form
                 }) => (
                   <div>
                     <form
@@ -504,8 +440,6 @@ const AddSharedResourceComp = ({
                                           onChange={(e) =>
                                             onAccessTypeChange(e, input)
                                           }
-                                          //menuPortalTarget={document.body}
-                                          //value={accessType}
                                           menuPlacement="auto"
                                           isClearable
                                           isMulti
@@ -592,11 +526,12 @@ const AddSharedResourceComp = ({
                                                             {...input}
                                                             placeholder="Enter 
masked value or expression..."
                                                           />
-                                                          {meta.error && (
-                                                            <span 
className="invalid-field">
-                                                              {meta.error}
-                                                            </span>
-                                                          )}
+                                                          {meta.error &&
+                                                            meta.touched && (
+                                                              <span 
className="invalid-field">
+                                                                {meta.error}
+                                                              </span>
+                                                            )}
                                                         </>
                                                       )}
                                                     />
@@ -652,16 +587,20 @@ const AddSharedResourceComp = ({
                           <Button
                             variant="primary"
                             size="sm"
-                            onClick={(event) => {
-                              handleSubmit(event, true);
+                            name="SaveAndClose"
+                            onClick={() => {
+                              closeModalFag = true;
+                              handleSubmit();
                             }}
                           >
                             {isEdit ? "Update" : "Save & Close"}
                           </Button>
                           {!isEdit ? (
                             <Button
-                              onClick={(event) => {
-                                handleSubmit(event, false);
+                              name="Save"
+                              onClick={() => {
+                                closeModalFag = false;
+                                handleSubmit();
                               }}
                               variant="primary"
                               size="sm"
@@ -680,8 +619,6 @@ const AddSharedResourceComp = ({
                 )}
               />
             </div>
-            {/* </div> */}
-            {/* </div> */}
           </Modal>
         </>
       )}
diff --git 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx
 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx
index 4c777286d..945d4de8c 100755
--- 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx
+++ 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx
@@ -54,36 +54,20 @@ import arrayMutators from "final-form-arrays";
 import ReactPaginate from "react-paginate";
 import AddSharedResourceComp from "./AddSharedResourceComp";
 import CustomBreadcrumb from "../../CustomBreadcrumb";
-import { isSystemAdmin, parseSearchFilter } from "../../../utils/XAUtils";
+import {
+  isSystemAdmin,
+  parseSearchFilter,
+  serverError
+} from "../../../utils/XAUtils";
 import XATableLayout from "../../../components/XATableLayout";
 import moment from "moment-timezone";
 import { getServiceDef } from "../../../utils/appState";
 
-// const initialState = {
-//   serviceDef: {},
-//   serviceDetails: {}
-// };
-
-// function reducer(state, action) {
-//   switch (action.type) {
-//     case "SET_SERVICE_DATA":
-//       return {
-//         ...state,
-//         serviceDef: action?.serviceDef,
-//         serviceDetails: action.serviceDetails
-//       };
-//     default:
-//       throw new Error();
-//   }
-// }
-
 const DatashareDetailLayout = () => {
   let { datashareId } = useParams();
   const { state } = useLocation();
-  // const [serviceState, dispatch] = useReducer(reducer, initialState);
-  // const { serviceDef, serviceDetails } = serviceState;
   const userAclPerm = state?.userAclPerm;
-  const datashareName = state?.datashareName;
+  const [datashareName, setDatashareName] = useState(state?.datashareName);
   const [activeKey, setActiveKey] = useState("overview");
   const [datashareInfo, setDatashareInfo] = useState({});
   const [datashareDescription, setDatashareDescription] = useState();
@@ -110,11 +94,9 @@ const DatashareDetailLayout = () => {
   const [resourceAccordionState, setResourceAccordionState] = useState({});
   const [requestAccordionState, setRequestAccordionState] = useState({});
   const itemsPerPage = 5;
-  const [currentPage, setCurrentPage] = useState(0);
   const [requestCurrentPage, setRequestCurrentPage] = useState(0);
   const [sharedResourcePageCount, setSharedResourcePageCount] = useState();
   const [requestPageCount, setRequestPageCount] = useState();
-  const [loadSharedResource, setLoadSharedResource] = useState();
   const [showConfirmModal, setShowConfirmModal] = useState(false);
   const [deleteDatashareReqInfo, setDeleteDatashareReqInfo] = useState({});
   const [
@@ -125,7 +107,6 @@ const DatashareDetailLayout = () => {
     useState(false);
   const [serviceDef, setServiceDef] = useState();
   const [serviceDetails, setService] = useState({});
-  const [sharedResourceTotalCount, setSharedResourceTotalCount] = useState(0);
   const [datashareRequestTotalCount, setDatashareRequestTotalCount] =
     useState(0);
   const [resourceSearchFilterParams, setResourceSearchFilterParams] = useState(
@@ -139,12 +120,9 @@ const DatashareDetailLayout = () => {
   const [sharedResourceListData, setSharedResourceListData] = useState([]);
   const [entries, setEntries] = useState([]);
   const [resourceUpdateTable, setResourceUpdateTable] = useState(moment.now());
-  const serviceDef2 = useRef({});
   const toggleConfirmModalForDatashareDelete = () => {
     setShowDeleteDatashareModal(true);
   };
-  const [showEditSharedResourceModal, setShowEditSharedResourceModal] =
-    useState(false);
   const [sharedResource, setSharedResource] = useState();
   const toggleConfirmModalClose = () => {
     setShowConfirmModal(false);
@@ -155,53 +133,17 @@ const DatashareDetailLayout = () => {
   const [resourceModalUpdateTable, setResourceModalUpdateTable] = useState(
     moment.now()
   );
+  const [datashareNameEditable, isDatashareNameEditable] = useState(false);
 
   useEffect(() => {
     fetchDatashareInfo(datashareId);
   }, []);
 
-  // const fetchServiceByName = async (serviceName) => {
-  //   let serviceResp = [];
-  //   try {
-  //     serviceResp = await fetchApi({
-  //       url: `plugins/services/name/${serviceName}`
-  //     });
-  //   } catch (error) {
-  //     console.error(
-  //       `Error occurred while fetching Service or CSRF headers! ${error}`
-  //     );
-  //   }
-  //   setService(serviceResp.data);
-  //   fetchServiceDef(serviceResp.data.type);
-  // };
-
-  // const fetchServiceDef = async (serviceDefName) => {
-  //   let serviceDefsResp = [];
-  //   try {
-  //     serviceDefsResp = await fetchApi({
-  //       url: `plugins/definitions/name/${serviceDefName}`
-  //     });
-  //   } catch (error) {
-  //     console.error(
-  //       `Error occurred while fetching Service Definition or CSRF headers! 
${error}`
-  //     );
-  //   }
-  //   let modifiedServiceDef = serviceDefsResp.data;
-  //   for (const obj of modifiedServiceDef.resources) {
-  //     obj.recursiveSupported = false;
-  //     obj.excludesSupported = false;
-  //   }
-  //   setServiceDef(modifiedServiceDef);
-  // };
-
   const handleTabSelect = (key) => {
     if (saveCancelButtons == true) {
       setShowConfirmModal(true);
     } else {
-      if (key == "resources") {
-        //fetchServiceByName(datashareInfo.service);
-        //fetchSharedResourceForDatashare(resourceSearchFilterParams, 0, 
false);
-      } else if (key == "sharedWith") {
+      if (key == "sharedWith") {
         fetchDatashareRequestList(undefined, 0, false);
       }
       setActiveKey(key);
@@ -211,7 +153,6 @@ const DatashareDetailLayout = () => {
   const fetchDatashareInfo = async (datashareId) => {
     let datashareResp = {};
     let serviceResp = [];
-    let serviceDefsResp = [];
     try {
       setLoader(true);
       datashareResp = await fetchApi({
@@ -220,9 +161,6 @@ const DatashareDetailLayout = () => {
       serviceResp = await fetchApi({
         url: `plugins/services/name/${datashareResp.data.service}`
       });
-      // serviceDefsResp = await fetchApi({
-      //   url: `plugins/definitions/name/${serviceResp.data.type}`
-      // });
       const serviceDefs = getServiceDef();
       let serviceDef = serviceDefs?.allServiceDefs?.find((servicedef) => {
         return servicedef.name == serviceResp.type;
@@ -234,28 +172,16 @@ const DatashareDetailLayout = () => {
         `Error occurred while fetching datashare details ! ${error}`
       );
     }
-    // let modifiedServiceDef = serviceDefsResp.data;
-    // for (const obj of modifiedServiceDef.resources) {
-    //   obj.recursiveSupported = false;
-    //   obj.excludesSupported = false;
-    // }
-    //serviceState.serviceDef = modifiedServiceDef;
-    //serviceDef2.current = modifiedServiceDef;
+    setDatashareName(datashareResp.data.name);
     setService(serviceResp.data);
     setDatashareInfo(datashareResp.data);
     setDatashareDescription(datashareResp.data.description);
     setDatashareTerms(datashareResp.data.termsOfUse);
     if (datashareResp.data.acl != undefined)
       setPrincipleAccordianData(datashareResp.data.acl);
-    //fetchServiceByName(datashareResp.data.service);
     setLoader(false);
   };
 
-  const showConfitionModal = (data) => {
-    setConditionModalData(data);
-    setShowConditionModal(true);
-  };
-
   const toggleConditionModalClose = () => {
     setShowConditionModal(false);
   };
@@ -324,7 +250,6 @@ const DatashareDetailLayout = () => {
       if (!getCompleteList) {
         setSharedResources(resp.data.list);
       }
-      setSharedResourceTotalCount(resp.data.totalCount);
       return resp.data.list;
     } catch (error) {
       setResourceContentLoader(false);
@@ -334,15 +259,6 @@ const DatashareDetailLayout = () => {
     }
   };
 
-  const handleSharedResourcePageClick = ({ selected }) => {
-    setCurrentPage(selected);
-    fetchSharedResourceForDatashare(
-      resourceSearchFilterParams,
-      selected,
-      false
-    );
-  };
-
   const handleRequestPageClick = ({ selected }) => {
     setRequestCurrentPage(selected);
     fetchDatashareRequestList(undefined, selected, false);
@@ -422,7 +338,6 @@ const DatashareDetailLayout = () => {
       setBlockUI(false);
       toast.success(" Success! Shared resource deleted successfully");
       setResourceUpdateTable(moment.now());
-      //fetchSharedResourceForDatashare(undefined, 0, false);
     } catch (error) {
       setBlockUI(false);
       let errorMsg = "Failed to delete Shared resource  : ";
@@ -436,21 +351,6 @@ const DatashareDetailLayout = () => {
     }
   };
 
-  const fetchSharedResource = async (sharedResourceId) => {
-    try {
-      let params = {};
-      const resp = await fetchApi({
-        url: `gds/resource/${sharedResourceId}`
-      });
-      setLoadSharedResource(resp.data);
-      //setFormData(generateFormData(resp.data, serviceDef));
-    } catch (error) {
-      console.error(
-        `Error occurred while fetching shared resource details ! ${error}`
-      );
-    }
-  };
-
   const handleDataChange = (userList, groupList, roleList) => {
     setUserList(userList);
     setGroupList(groupList);
@@ -464,13 +364,6 @@ const DatashareDetailLayout = () => {
 
   const handleSubmit = () => {};
 
-  const onSharedResourceAccordionChange = (id) => {
-    setResourceAccordionState({
-      ...resourceAccordionState,
-      ...{ [id]: !resourceAccordionState[id] }
-    });
-  };
-
   const onRequestAccordionChange = (id) => {
     setRequestAccordionState({
       ...requestAccordionState,
@@ -479,6 +372,7 @@ const DatashareDetailLayout = () => {
   };
 
   const updateDatashareDetails = async () => {
+    datashareInfo.name = datashareName;
     datashareInfo.description = datashareDescription;
     datashareInfo.termsOfUse = datashareTerms;
 
@@ -503,21 +397,23 @@ const DatashareDetailLayout = () => {
         method: "put",
         data: datashareInfo
       });
-      setBlockUI(false);
       toast.success("Datashare updated successfully!!");
+      isDatashareNameEditable(false);
       showSaveCancelButton(false);
     } catch (error) {
-      setBlockUI(false);
       serverError(error);
       console.error(`Error occurred while updating datashare  ${error}`);
     }
-    toggleConfirmModalClose();
+    setBlockUI(false);
+    setShowConfirmModal(false);
   };
 
   const removeChanges = () => {
     fetchDatashareInfo(datashareId);
     showSaveCancelButton(false);
-    toggleConfirmModalClose();
+    setShowConfirmModal(false);
+    isDatashareNameEditable(false);
+    setShowDatashareRequestDeleteConfirmModal(false);
   };
 
   const toggleRequestDeleteModal = (id, datashareId, name, status) => {
@@ -573,10 +469,13 @@ const DatashareDetailLayout = () => {
   const handleDatashareDeleteClick = async () => {
     toggleClose();
     try {
+      let params = {};
+      params["forceDelete"] = true;
       setBlockUI(true);
       await fetchApi({
         url: `gds/datashare/${datashareId}`,
-        method: "DELETE"
+        method: "DELETE",
+        params: params
       });
       setBlockUI(false);
       toast.success(" Success! Datashare deleted successfully");
@@ -618,7 +517,7 @@ const DatashareDetailLayout = () => {
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = datashareInfo.name + ".json"; // Set the desired file name
+    a.download = datashareInfo.name + ".json";
     a.click();
     URL.revokeObjectURL(url);
   };
@@ -639,7 +538,6 @@ const DatashareDetailLayout = () => {
     );
     setResourceSearchFilterParams(searchFilterParam);
     setSearchFilterParams(searchFilterParam);
-    //fetchSharedResourceForDatashare(searchFilterParam, 0, false);
   };
 
   const requestSearchFilterOptions = [];
@@ -654,15 +552,13 @@ const DatashareDetailLayout = () => {
   };
 
   const fetchSharedResourcetList = useCallback(
-    async ({ pageSize, pageIndex, sortBy, gotoPage }) => {
-      //setLoader(true);
+    async ({ pageSize, pageIndex }) => {
+      setResourceContentLoader(true);
       let resp = [];
-      let totalCount = 0;
       let page =
         state && state.showLastPage
           ? state.addPageData.totalPage - 1
           : pageIndex;
-      let totalPageCount = 0;
       const fetchId = ++fetchIdRef.current;
       let params = { ...searchFilterParams };
       if (fetchId === fetchIdRef.current) {
@@ -671,37 +567,30 @@ const DatashareDetailLayout = () => {
           state && state.showLastPage
             ? (state.addPageData.totalPage - 1) * pageSize
             : pageIndex * pageSize;
-        // if (sortBy.length > 0) {
-        //   params["sortBy"] = getTableSortBy(sortBy);
-        //   params["sortType"] = getTableSortType(sortBy);
-        // }
         params["dataShareId"] = datashareId;
         try {
           resp = await fetchApi({
             url: "gds/resource",
             params: params
           });
+          setSharedResourceListData(resp.data?.list);
+          setEntries(resp.data);
+          setSharedResourcePageCount(
+            Math.ceil(resp.data.totalCount / pageSize)
+          );
         } catch (error) {
           console.error(
             `Error occurred while fetching Datashare list! ${error}`
           );
         }
-        //await fetchServiceByName(datashareInfo.service);
-        console.log(serviceDef, "table call");
-        setSharedResourceListData(resp.data?.list);
-        setEntries(resp.data);
-        setSharedResourcePageCount(Math.ceil(resp.data.totalCount / pageSize));
-        //setResetpage({ page: gotoPage });
       }
-      //setLoader(false);
+      setResourceContentLoader(false);
     },
     [resourceUpdateTable, searchFilterParams]
   );
 
   const editSharedResourceModal = (sharedResource) => {
-    //fetchSharedResource(sharedResourceId);
     setSharedResource(sharedResource);
-    //setShowEditSharedResourceModal(true);
     setResourceModalUpdateTable(moment.now());
     setIsEditSharedResourceModal(true);
     setShowAddResourceModal(true);
@@ -729,7 +618,7 @@ const DatashareDetailLayout = () => {
       {
         Header: "Resource",
         accessor: "resource",
-        //width: 500,
+        width: 450,
         disableSortBy: true,
         Cell: ({ row: { original } }) => {
           return (
@@ -739,7 +628,7 @@ const DatashareDetailLayout = () => {
                 console.log(value);
                 return (
                   <div className="mb-1 form-group row">
-                    <Col sm={3}>
+                    <Col sm={4}>
                       <span
                         className="form-label fnt-14 text-muted"
                         style={{ textTransform: "capitalize" }}
@@ -747,7 +636,7 @@ const DatashareDetailLayout = () => {
                         {key}
                       </span>
                     </Col>
-                    <Col sm={9}>
+                    <Col sm={8}>
                       <span>{value.values.toString()}</span>
                     </Col>
                   </div>
@@ -775,14 +664,6 @@ const DatashareDetailLayout = () => {
                   </span>
                 ))}
               </div>
-              {/* {original.accessTypes?.accessTypes?.toString()}
-              <Link
-                className="mb-3"
-                to=""
-                onClick={() => showConfitionModal(original)}
-              >
-                View Access Details
-              </Link> */}
             </div>
           );
         }
@@ -838,6 +719,18 @@ const DatashareDetailLayout = () => {
     []
   );
 
+  const onDatashareNameChange = (event) => {
+    setDatashareName(event.target.value);
+    showSaveCancelButton(true);
+  };
+
+  const handleEditClick = () => {
+    if (isSystemAdmin() || userAclPerm == "ADMIN") {
+      isDatashareNameEditable(true);
+      showSaveCancelButton(true);
+    }
+  };
+
   return (
     <>
       <Form
@@ -847,7 +740,13 @@ const DatashareDetailLayout = () => {
         }}
         render={({}) => (
           <React.Fragment>
-            <div className="gds-header-wrapper gap-half">
+            <div
+              className={
+                saveCancelButtons
+                  ? "gds-header-wrapper gap-half pt-2 pb-2"
+                  : "gds-header-wrapper gap-half"
+              }
+            >
               <Button
                 variant="light"
                 className="border-0 bg-transparent"
@@ -859,13 +758,31 @@ const DatashareDetailLayout = () => {
                 <i className="fa fa-angle-left fa-lg font-weight-bold" />
               </Button>
               <h3 className="gds-header bold">
-                <span
-                  title={datashareInfo?.name}
-                  className="text-truncate"
-                  style={{ maxWidth: "300px", display: "inline-block" }}
-                >
-                  Datashare: {datashareInfo?.name}
-                </span>
+                <div className="d-flex align-items-center">
+                  <span className="mr-1">Datashare: </span>
+                  {!datashareNameEditable ? (
+                    <div>
+                      <span
+                        title={datashareName}
+                        className="text-truncate"
+                        style={{ maxWidth: "300px", display: "inline-block" }}
+                        onClick={() => handleEditClick()}
+                      >
+                        {datashareName}
+                      </span>
+                    </div>
+                  ) : (
+                    <input
+                      type="text"
+                      name="shareName"
+                      style={{ height: "39px" }}
+                      className="form-control"
+                      data-cy="shareName"
+                      value={datashareName}
+                      onChange={onDatashareNameChange}
+                    />
+                  )}
+                </div>
               </h3>
               <h3 className="gds-header bold">
                 <span
@@ -876,99 +793,108 @@ const DatashareDetailLayout = () => {
                   Service: {datashareInfo?.service}
                 </span>
               </h3>
-              <h3 className="gds-header bold">
-                <span
-                  title={datashareInfo?.zone}
-                  className="text-truncate"
-                  style={{ maxWidth: "300px", display: "inline-block" }}
-                >
-                  Zone: {datashareInfo?.zone}
-                </span>
-              </h3>
-              <CustomBreadcrumb />
+              {datashareInfo?.zone?.length > 0 && (
+                <h3 className="gds-header bold">
+                  <span
+                    title={datashareInfo?.zone}
+                    className="text-truncate"
+                    style={{ maxWidth: "300px", display: "inline-block" }}
+                  >
+                    Zone: {datashareInfo?.zone}
+                  </span>
+                </h3>
+              )}
 
-              {(isSystemAdmin() || userAclPerm == "ADMIN") && (
-                <span className="pipe"></span>
+              {!datashareNameEditable && !saveCancelButtons && (
+                <>
+                  <CustomBreadcrumb />
+                  <span className="pipe" />
+                </>
               )}
-              {(isSystemAdmin() || userAclPerm == "ADMIN") && (
+              {!datashareNameEditable ||
+                ((isSystemAdmin() ||
+                  userAclPerm == "ADMIN" ||
+                  userAclPerm == "POLICY_ADMIN") && (
+                  <div>
+                    {saveCancelButtons ? (
+                      <div className="gds-header-btn-grp">
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          onClick={() => removeChanges()}
+                          data-id="cancel"
+                          data-cy="cancel"
+                        >
+                          Cancel
+                        </Button>
+                        <Button
+                          variant="primary"
+                          onClick={updateDatashareDetails}
+                          size="sm"
+                          data-id="save"
+                          data-cy="save"
+                        >
+                          Save
+                        </Button>
+                      </div>
+                    ) : (
+                      <p></p>
+                    )}
+                  </div>
+                ))}
+
+              {!datashareNameEditable && !saveCancelButtons && (
                 <div>
-                  {saveCancelButtons ? (
-                    <div className="gds-header-btn-grp">
-                      <Button
-                        variant="primary"
-                        size="sm"
-                        onClick={() => removeChanges()}
-                        data-id="cancel"
-                        data-cy="cancel"
-                      >
-                        Cancel
-                      </Button>
-                      <Button
-                        variant="primary"
-                        onClick={updateDatashareDetails}
-                        size="sm"
-                        data-id="save"
-                        data-cy="save"
-                      >
-                        Save
-                      </Button>
-                    </div>
-                  ) : (
-                    <p></p>
-                  )}
+                  <DropdownButton
+                    id="dropdown-item-button"
+                    title={<i className="fa fa-ellipsis-v" fontSize="36px" />}
+                    size="sm"
+                    className="hide-arrow"
+                  >
+                    <Dropdown.Item
+                      as="button"
+                      onClick={() => navigateToFullView()}
+                      data-name="fullView"
+                      data-id="fullView"
+                      data-cy="fullView"
+                    >
+                      Full View
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      as="button"
+                      onClick={() => {
+                        copyURL();
+                      }}
+                      data-name="copyDatashareLink"
+                      data-id="copyDatashareLink"
+                      data-cy="copyDatashareLink"
+                    >
+                      Copy Datashare Link
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      as="button"
+                      onClick={() => downloadJsonFile()}
+                      data-name="downloadJson"
+                      data-id="downloadJson"
+                      data-cy="downloadJson"
+                    >
+                      Download Json
+                    </Dropdown.Item>
+                    <hr />
+                    <Dropdown.Item
+                      as="button"
+                      onClick={() => {
+                        toggleConfirmModalForDatashareDelete();
+                      }}
+                      data-name="deleteDatashare"
+                      data-id="deleteDatashare"
+                      data-cy="deleteDatashare"
+                    >
+                      Delete Datashare
+                    </Dropdown.Item>
+                  </DropdownButton>
                 </div>
               )}
-
-              <div>
-                <DropdownButton
-                  id="dropdown-item-button"
-                  title={<i className="fa fa-ellipsis-v" fontSize="36px" />}
-                  size="sm"
-                  className="hide-arrow"
-                >
-                  <Dropdown.Item
-                    as="button"
-                    onClick={() => navigateToFullView()}
-                    data-name="fullView"
-                    data-id="fullView"
-                    data-cy="fullView"
-                  >
-                    Full View
-                  </Dropdown.Item>
-                  <Dropdown.Item
-                    as="button"
-                    onClick={() => {
-                      copyURL();
-                    }}
-                    data-name="copyDatashareLink"
-                    data-id="copyDatashareLink"
-                    data-cy="copyDatashareLink"
-                  >
-                    Copy Datashare Link
-                  </Dropdown.Item>
-                  <Dropdown.Item
-                    as="button"
-                    onClick={() => downloadJsonFile()}
-                    data-name="downloadJson"
-                    data-id="downloadJson"
-                    data-cy="downloadJson"
-                  >
-                    Download Json
-                  </Dropdown.Item>
-                  <hr />
-                  <Dropdown.Item
-                    as="button"
-                    onClick={() => {
-                      toggleConfirmModalForDatashareDelete();
-                    }}
-                    data-name="deleteDatashare"
-                    data-id="deleteDatashare"
-                    data-cy="deleteDatashare"
-                  >
-                    Delete Datashare
-                  </Dropdown.Item>
-                </DropdownButton>
-              </div>
             </div>
             {loader ? (
               <Loader />
@@ -985,6 +911,15 @@ const DatashareDetailLayout = () => {
                         <div>
                           <div className="gds-tab-content gds-content-border 
px-3">
                             <div className="gds-inline-field-grp">
+                              <div className="wrapper">
+                                <div
+                                  className="gds-left-inline-field"
+                                  height="30px"
+                                >
+                                  <span className="gds-label-color">ID</span>
+                                </div>
+                                <div 
line-height="30px">{datashareInfo.id}</div>
+                              </div>
                               <div className="wrapper">
                                 <div
                                   className="gds-left-inline-field pl-1 fnt-14"
@@ -1043,9 +978,7 @@ const DatashareDetailLayout = () => {
                               </div>
                             </div>
                           </div>
-                          {(isSystemAdmin() ||
-                            userAclPerm == "ADMIN" ||
-                            userAclPerm == "AUDIT") && (
+                          {(isSystemAdmin() || userAclPerm != "VIEW") && (
                             <PrinciplePermissionComp
                               userList={userList}
                               groupList={groupList}
@@ -1067,7 +1000,7 @@ const DatashareDetailLayout = () => {
                     </Tab>
                     <Tab eventKey="resources" title="RESOURCES">
                       {activeKey == "resources" ? (
-                        <div className="gds-tab-content">
+                        <div className="gds-request-content">
                           <div className="mb-3">
                             <div className="w-100 d-flex gap-1 mb-3">
                               <StructuredFilter
@@ -1075,7 +1008,6 @@ const DatashareDetailLayout = () => {
                                 placeholder="Search resources..."
                                 options={resourceSearchFilterOptions}
                                 onChange={updateResourceSearchFilter}
-                                //defaultSelected={defaultSearchFilterParams}
                               />
                               {(isSystemAdmin() || userAclPerm == "ADMIN") && (
                                 <>
@@ -1099,7 +1031,6 @@ const DatashareDetailLayout = () => {
                               getRowProps={(row) => ({
                                 onClick: (e) => {
                                   e.stopPropagation();
-                                  //rowModal(row);
                                 }
                               })}
                               columnHide={false}
@@ -1107,193 +1038,7 @@ const DatashareDetailLayout = () => {
                               columnSort={true}
                               defaultSort={getDefaultSort}
                             />
-                            {/* <input
-                              type="search"
-                              className="form-control gds-input"
-                              placeholder="Search..."
-                              onChange={(e) => onResourceNameChange(e)}
-                              onKeyPress={handleSearchResourceNameKeyPress}
-                              value={searchResourceName}
-                            /> */}
                           </div>
-
-                          {/* <div>
-                            <Card className="border-0">
-                              <div>
-                                {resourceContentLoader ? (
-                                  <Loader />
-                                ) : (
-                                  <div>
-                                    {sharedResources.length > 0 ? (
-                                      sharedResources.map((obj, index) => {
-                                        return (
-                                          // <ResourceAccordian item={obj} />
-                                          <div>
-                                            <Accordion
-                                              className="mg-b-10"
-                                              defaultActiveKey="0"
-                                            >
-                                              <div className="border-bottom">
-                                                <Accordion.Toggle
-                                                  as={Card.Header}
-                                                  eventKey={obj.id}
-                                                  onClick={() =>
-                                                    
onSharedResourceAccordionChange(
-                                                      obj.id
-                                                    )
-                                                  }
-                                                  className="border-bottom-0"
-                                                  data-id="panel"
-                                                  data-cy="panel"
-                                                >
-                                                  <div className="d-flex 
justify-content-between align-items-center">
-                                                    <div className="d-flex 
align-items-center gap-1">
-                                                      {resourceAccordionState[
-                                                        obj.id
-                                                      ] ? (
-                                                        <i className="fa 
fa-angle-up fa-lg font-weight-bold"></i>
-                                                      ) : (
-                                                        <i className="fa 
fa-angle-down fa-lg font-weight-bold"></i>
-                                                      )}
-                                                      <div className="d-flex 
justify-content-between">
-                                                        <h6 className="m-0">
-                                                          {obj.name}
-                                                        </h6>
-                                                      </div>
-                                                    </div>
-                                                    {(isSystemAdmin() ||
-                                                      userAclPerm ==
-                                                        "ADMIN") && (
-                                                      <div className="d-flex 
gap-half align-items-start">
-                                                        <AddSharedResourceComp
-                                                          datashareId={
-                                                            datashareId
-                                                          }
-                                                          
onSharedResourceDataChange={
-                                                            
handleSharedResourceChange
-                                                          }
-                                                          
onToggleAddResourceClose={
-                                                            
toggleAddResourceModalClose
-                                                          }
-                                                          isEdit={true}
-                                                          sharedResourceId={
-                                                            obj.id
-                                                          }
-                                                          loadSharedResource={
-                                                            loadSharedResource
-                                                          }
-                                                          datashareInfo={
-                                                            datashareInfo
-                                                          }
-                                                          serviceDef={
-                                                            serviceDef
-                                                          }
-                                                          serviceDetails={
-                                                            serviceDetails
-                                                          }
-                                                          
setResourceUpdateTable={
-                                                            
setResourceUpdateTable
-                                                          }
-                                                        />
-                                                        <Button
-                                                          variant="danger"
-                                                          size="sm"
-                                                          title="Delete"
-                                                          onClick={() =>
-                                                            
toggleConfirmModalForDelete(
-                                                              obj.id,
-                                                              obj.name
-                                                            )
-                                                          }
-                                                          
data-name="deleteDatashareRequest"
-                                                          data-id={obj.id}
-                                                          data-cy={obj.id}
-                                                        >
-                                                          <i className="fa-fw 
fa fa-trash fa-fw fa fa-large" />
-                                                        </Button>
-                                                      </div>
-                                                    )}
-                                                  </div>
-                                                </Accordion.Toggle>
-                                                <Accordion.Collapse
-                                                  eventKey={obj.id}
-                                                >
-                                                  <Card.Body>
-                                                    <div 
className="gds-added-res-listing">
-                                                      {Object.entries(
-                                                        obj.resource
-                                                      ).map(([key, value]) => {
-                                                        console.log(key);
-                                                        console.log(value);
-                                                        return (
-                                                          <div className="mb-1 
form-group row">
-                                                            <Col sm={3}>
-                                                              <label 
className="form-label fnt-14">
-                                                                {key}
-                                                              </label>
-                                                            </Col>
-                                                            <Col sm={9}>
-                                                              
{value.values.toString()}
-                                                            </Col>
-                                                          </div>
-                                                        );
-                                                      })}
-                                                      <div className="mb-1 
form-group row">
-                                                        <Col sm={3}>
-                                                          <label 
className="form-label gds-detail-label fnt-14">
-                                                            Additional Info
-                                                          </label>
-                                                        </Col>
-                                                        <Col sm={9}>
-                                                          <Link
-                                                            className="mb-3"
-                                                            to=""
-                                                            onClick={() =>
-                                                              
showConfitionModal(
-                                                                obj
-                                                              )
-                                                            }
-                                                          >
-                                                            View Access Details
-                                                          </Link>
-                                                        </Col>
-                                                      </div>
-                                                    </div>
-                                                  </Card.Body>
-                                                </Accordion.Collapse>
-                                              </div>
-                                            </Accordion>
-                                          </div>
-                                        );
-                                      })
-                                    ) : (
-                                      <div></div>
-                                    )}
-                                  </div>
-                                )}
-
-                                {sharedResourceTotalCount > itemsPerPage && (
-                                  <ReactPaginate
-                                    previousLabel={"Previous"}
-                                    nextLabel={"Next"}
-                                    pageClassName="page-item"
-                                    pageLinkClassName="page-link"
-                                    previousClassName="page-item"
-                                    previousLinkClassName="page-link"
-                                    nextClassName="page-item"
-                                    nextLinkClassName="page-link"
-                                    breakLabel={"..."}
-                                    pageCount={sharedResourcePageCount}
-                                    
onPageChange={handleSharedResourcePageClick}
-                                    breakClassName="page-item"
-                                    breakLinkClassName="page-link"
-                                    containerClassName="pagination"
-                                    activeClassName="active"
-                                  />
-                                )}
-                              </div>
-                            </Card>
-                          </div> */}
                         </div>
                       ) : (
                         <div></div>
@@ -1771,7 +1516,6 @@ const DatashareDetailLayout = () => {
                   datashareId={datashareId}
                   onToggleAddResourceClose={toggleAddResourceModalClose}
                   sharedResource={sharedResource}
-                  loadSharedResource={loadSharedResource}
                   datashareInfo={datashareInfo}
                   serviceDef={serviceDef}
                   showModal={showAddResourceModal}
diff --git 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/MyDatashareListing.jsx
 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/MyDatashareListing.jsx
index eb877a04b..15c3d5688 100755
--- 
a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/MyDatashareListing.jsx
+++ 
b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/MyDatashareListing.jsx
@@ -66,19 +66,19 @@ const MyDatashareListing = () => {
   const searchFilterOptions = [
     {
       category: "dataShareNamePartial",
-      label: "Datashare Name",
+      label: "Name",
       urlLabel: "dataShareNamePartial",
       type: "text"
     },
     {
       category: "serviceNamePartial",
-      label: "Service Name",
+      label: "Service",
       urlLabel: "serviceNamePartial",
       type: "text"
     },
     {
       category: "zoneNamePartial",
-      label: "Zone Name",
+      label: "Zone",
       urlLabel: "zoneNamePartial",
       type: "text"
     }
diff --git 
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyValidityPeriodComp.jsx
 
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyValidityPeriodComp.jsx
index e2ef63188..890722990 100644
--- 
a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyValidityPeriodComp.jsx
+++ 
b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyValidityPeriodComp.jsx
@@ -87,13 +87,13 @@ export default function PolicyValidityPeriodComp(props) {
     <>
       <Button
         onClick={handleBtnClick}
-        variant="primary"
+        variant={props.isGDS ? "secondary" : "primary"}
         size="sm"
         className="pull-right btn-sm"
         data-js="policyTimeBtn"
         data-cy="policyTimeBtn"
       >
-        <i className="fa fa-clock-o"></i>{" "}
+        {!props.isGDS && <i className="fa fa-clock-o"></i>}{" "}
         {props.editValidityPeriod ? "Edit" : "Add"} Validity Period
       </Button>
       <Modal show={showModal} size="lg" onHide={toggleModal} backdrop="static">

Reply via email to