Web: Files: SharingPanel: Refactoring, Added toggle button and dropDown to LinkRow

products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js

@@ -230,14 +230,14 @@ const SharingRow = (props) => {
           <LinkRow
             linkText="ExternalLink"
             data={externalLinkData}
-            index={index}
-            t={t}
+            embeddedComponentRender={embeddedComponentRender}
+            {...props}
           />
           <LinkRow
             linkText="InternalLink"
             data={internalLinkData}
-            index={index}
-            t={t}
+            embeddedComponentRender={embeddedComponentRender}
+            {...props}
           />
         </>
       )}

products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { Row, LinkWithDropdown, Icons } from "asc-web-components";
+import { Row, LinkWithDropdown, ToggleButton } from "asc-web-components";
+import { StyledLinkRow } from "../StyledPanels";
 
 class LinkRow extends React.Component {
   constructor(props) {
@@ -9,33 +10,40 @@ class LinkRow extends React.Component {
   }
 
   render() {
-    const { linkText, data, index, t } = this.props;
+    const {
+      linkText,
+      data,
+      index,
+      t,
+      embeddedComponentRender,
+      accessOptions,
+      item,
+    } = this.props;
 
     return (
-      <Row
-        key={`${linkText}-key_${index}`}
-        //element={embeddedComponentRender(accessOptions, item)}
-        element={
-          <Icons.AccessEditIcon
-            size="medium"
-            className="sharing_panel-owner-icon"
-          />
-        }
-        contextButtonSpacerWidth="0px"
-      >
-        <>
-          <LinkWithDropdown
-            className="sharing_panel-link"
-            color="black"
-            dropdownType="alwaysDashed"
-            data={data}
-            fontSize="14px"
-            fontWeight={600}
-          >
-            {t(linkText)}
-          </LinkWithDropdown>
-        </>
-      </Row>
+      <StyledLinkRow>
+        <Row
+          key={`${linkText}-key_${index}`}
+          element={embeddedComponentRender(accessOptions, item)}
+          contextButtonSpacerWidth="0px"
+        >
+          <>
+            <LinkWithDropdown
+              className="sharing_panel-link"
+              color="black"
+              dropdownType="alwaysDashed"
+              data={data}
+              fontSize="14px"
+              fontWeight={600}
+            >
+              {t(linkText)}
+            </LinkWithDropdown>
+            <div>
+              <ToggleButton />
+            </div>
+          </>
+        </Row>
+      </StyledLinkRow>
     );
   }
 }

products/ASC.Files/Client/src/components/panels/StyledPanels.js

@@ -358,6 +358,13 @@ const StyledFooter = styled.div`
   }
 `;
 
+const StyledLinkRow = styled.div`
+  .row_content {
+    display: grid;
+    grid-template-columns: 1fr 28px;
+  }
+`;
+
 export {
   StyledAsidePanel,
   StyledAddGroupsPanel,
@@ -369,4 +376,5 @@ export {
   StyledSharingHeaderContent,
   StyledSharingBody,
   StyledFooter,
+  StyledLinkRow,
 };