@rpcbase/client 0.227.0 → 0.231.0

package/access-control/ACLForm/components/RolesList.tsx

@@ -1,79 +0,0 @@
-import {useState} from "react"
-// import {arrayMoveImmutable} from "array-move"
-
-import {DragHandle, SortableContainer, SortableElement} from "../../../ui/sortable-hoc"
-import {useQuery} from "../../../rts"
-
-import {RoleForm} from "./RoleForm"
-import {RoleView} from "./RoleView"
-
-
-const SortableItem = SortableElement(({value, index, active, onClick}) => (
-  <div id={`${value._id}-role-list-item-${index}`} className="d-block px-1 py-2">
-    <div className={cx(["d-flex", "align-items-start", {active}])} onClick={onClick}>
-      <DragHandle variant="dots" className="mt-1" />
-      <RoleView role={value} />
-    </div>
-  </div>
-))
-
-const SortableList = SortableContainer(({ref, items, onClickHandler, activeTab, className = ""}) => {
-  return (
-    <div ref={ref} className={cx(className)}>
-      {items.map((value, index) => (
-        <SortableItem
-          key={`item-${value._id}`}
-          index={index}
-          value={value}
-          active={`${index}` === activeTab}
-          onClick={onClickHandler(`${index}`)}
-        />
-      ))}
-    </div>
-  )
-})
-
-export const RolesList = () => {
-  // const [roles, setRoles] = useState([])
-  // const rolesQuery = useQuery("ACLRole", {})
-  const rolesQuery = {}
-
-  const [isAddingRole, setIsAddingRole] = useState(false)
-
-  const onClickAddRole = () => setIsAddingRole(true)
-
-  const onSortEnd = ({oldIndex, newIndex}) => {
-    // setItems(arrayMoveImmutable(items, oldIndex, newIndex))
-    console.log("update sort roles", oldIndex, newIndex)
-  }
-
-  const getOnClickHandler = (arg) => () => {
-    console.log("sortable on click handler", arg)
-  }
-
-  return (
-    <div className="d-block bg-white mb-2">
-      {isAddingRole && <RoleForm onDone={() => setIsAddingRole(false)} />}
-
-      {!isAddingRole && (
-        <button className="btn btn-link ms-1" onClick={onClickAddRole}>
-          + Add Role
-        </button>
-      )}
-
-      {rolesQuery.data && (
-        <SortableList
-          className="mt-3"
-          axis="y"
-          lockAxis={"y"}
-          // distance={2} // PUTAIN
-          items={rolesQuery.data}
-          onSortEnd={onSortEnd}
-          onClickHandler={getOnClickHandler}
-          transitionDuration={200}
-          useDragHandle
-        />
-      )}
-    </div>
-  )
-}

package/access-control/ACLForm/components/constants.tsx

@@ -1 +0,0 @@
-export const GRANTS_FIELD = "grants"

package/access-control/ACLForm/components/resolver.ts

@@ -1,57 +0,0 @@
-import _set from "lodash/set"
-
-import {GRANTS_FIELD} from "./constants"
-
-const validateGrants = (grants, errors) => {
-  grants.forEach((grant, index) => {
-    const fieldKey = `${GRANTS_FIELD}.${index}`
-
-    // Ops
-    const ops = grant.ops || {}
-    const hasOps = Object.keys(ops).length > 0
-    if (!hasOps) {
-      const opsErrKey = `${fieldKey}.ops`
-      _set(errors, opsErrKey, {type: "error", message: "You must select at least one Operation"})
-    }
-
-    // Resources
-    const resources = grant.resources || {}
-    const hasResources = Object.keys(resources).length > 0
-
-    if (!hasResources) {
-      const resErrKey = `${fieldKey}.resources`
-      _set(errors, resErrKey, {type: "error", message: "You must select at least one Resource"})
-    }
-
-    // Users
-    const users = grant.users || {}
-    const hasUsers = Object.keys(users).length > 0
-
-    if (!hasUsers) {
-      const usersErrKey = `${fieldKey}.users`
-      _set(errors, usersErrKey, {type: "error", message: "You must select at least one User"})
-    }
-  })
-}
-
-export const resolver = (values) => {
-  const errors = {}
-
-  if (!values.name) {
-    errors.name = {message: "Please enter a valid name"}
-  }
-
-  if (!values.description) {
-    errors.description = {message: "Please enter a valid description"}
-  }
-
-  validateGrants(values.grants, errors)
-  if (values.grants.length === 0) {
-    errors.grants = {message: "You must add at least one Grant"}
-  }
-
-  return {
-    values,
-    errors,
-  }
-}

package/access-control/ACLForm/components/role-form.scss

@@ -1,19 +0,0 @@
-@import "helpers";
-
-.role-remove-button {
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  right: 0;
-  top: 0;
-  cursor: pointer;
-  color: $gray-500;
-
-  &:hover {
-    color: $gray-700;
-  }
-
-  &:active {
-    color: $gray-900;
-  }
-}

package/access-control/ACLForm/index.tsx

@@ -1,48 +0,0 @@
-import {useState} from "react"
-
-import {SelectPills} from "../../ui/SelectPills"
-
-import {RolesList} from "./components/RolesList"
-
-const VISIBILITY_ITEMS = [
-  {
-    name: "Private",
-    key: "private",
-    description: "Members cannot discover this group and have to be added manually",
-    icon: "/static/icons/acl/acl-visibility-private.svg",
-  },
-  {
-    name: "Public",
-    key: "public",
-    description: "Members of your organisation will be able to see this group",
-    icon: "/static/icons/acl/acl-visibility-public.svg",
-  },
-]
-
-export const ACLForm = () => {
-  const [activeVisibilityKey, setActiveVisibilityKey] = useState("private")
-
-  const onUpdateGroupVisibility = (k) => setActiveVisibilityKey(k)
-
-  return (
-    <div>
-      {/* Visibility */}
-      <div className="mx-3">
-        <label className="fw-bold mb-1">Group Visibility</label>
-        <SelectPills
-          direction="row"
-          size="sm"
-          items={VISIBILITY_ITEMS}
-          activeKey={activeVisibilityKey}
-          onChange={onUpdateGroupVisibility}
-        />
-      </div>
-
-      {/* Roles */}
-      <div>
-        <label className="fw-bold mb-1 ms-3">Roles</label>
-        <RolesList />
-      </div>
-    </div>
-  )
-}

package/access-control/ACLModal/acl-modal.scss

@@ -1,7 +0,0 @@
-@import "helpers";
-
-.group-acl-modal {
-  .modal-dialog {
-    min-width: 640px;
-  }
-}

package/access-control/ACLModal/index.tsx

@@ -1,66 +0,0 @@
-import {useState, useEffect} from "react"
-
-import {useHashState} from "../../hashState"
-import Modal from "../../ui/Modal"
-
-import {ACLForm} from "../ACLForm"
-
-import "./acl-modal.scss"
-
-
-export const ACLModal = ({}) => {
-  const {hashState, serializeHashState} = useHashState()
-
-  const [isShown, setIsShown] = useState(false)
-
-  // useEffect(() => {
-    // console.log("GOURP", envContext)
-  // }, [envContext])
-
-  useEffect(() => {
-    if (hashState.showGroupAccessControlModal) {
-      setIsShown(true)
-    } else {
-      setIsShown(false)
-    }
-  }, [hashState, setIsShown])
-
-  const onHide = () => {
-    serializeHashState({
-      showGroupAccessControlModal: null,
-    })
-  }
-
-  if (!isShown) return null
-
-  return (
-    <Modal className="group-acl-modal" onHide={onHide} size="large">
-      <Modal.Header className="close-top" closeButton>
-        <img
-          width={26}
-          height={26}
-          style={{marginTop: 0}}
-          className="me-2 align-self-start"
-          src={`/static/icons/acl-shield.svg`}
-        />
-        <div className="">
-          <div>
-            Permissions for <kbd>wow group name</kbd>
-          </div>
-          <small className="text-secondary fw-normal">
-            Permissions and Grants that control who can see what in your Group
-          </small>
-        </div>
-      </Modal.Header>
-      <Modal.Body className="px-0">
-        <ACLForm />
-      </Modal.Body>
-      <Modal.Footer className="justify-content-start">
-        Learn more about Access Control and Permissions in &nbsp;
-        <a target="_blank" rel="noopener noreferrer" href={`/docs/access-control`}>
-          /docs/access-control
-        </a>
-      </Modal.Footer>
-    </Modal>
-  )
-}

package/access-control/PolicyEditor/TargetSelector/QueryBuilder.tsx

@@ -1,48 +0,0 @@
-import {
-  QueryBuilderBootstrap,
-  bootstrapControlClassnames,
-  bootstrapControlElements,
-} from "@react-querybuilder/bootstrap"
-import {QueryBuilder as ReactQueryBuilder} from "react-querybuilder"
-import {QueryBuilderDnD as ReactQueryBuilderDnD} from "@react-querybuilder/dnd"
-import * as ReactDnD from "react-dnd"
-import * as ReactDnDHtml5Backend from "react-dnd-html5-backend"
-
-// import FieldSelector from "./FieldSelector"
-// import OperatorSelector from "./OperatorSelector"
-// import ValueEditor from "./ValueEditor"
-
-import "./query-builder.scss"
-
-
-const controlClassnames = {...bootstrapControlClassnames}
-controlClassnames.queryBuilder += " queryBuilder-branches"
-
-const QueryBuilder = ({controlElements = {}, ...props}) => {
-  return (
-    <ReactQueryBuilderDnD dnd={{...ReactDnD, ...ReactDnDHtml5Backend}}>
-      <QueryBuilderBootstrap>
-        <ReactQueryBuilder
-          addRuleToNewGroups
-          // TODO: why is DnD not working??
-          // https://react-querybuilder.js.org/docs/components/querybuilder#enabledraganddrop
-          enableDragAndDrop
-          showCombinatorsBetweenRules={false}
-          showNotToggle
-          showCloneButtons
-          controlClassnames={controlClassnames}
-          controlElements={{
-            ...bootstrapControlElements,
-            ...controlElements,
-            // fieldSelector: FieldSelector,
-            // operatorSelector: OperatorSelector,
-            // valueEditor: ValueEditor,
-          }}
-          {...props}
-        />
-      </QueryBuilderBootstrap>
-    </ReactQueryBuilderDnD>
-  )
-}
-
-export default QueryBuilder

package/access-control/PolicyEditor/TargetSelector/index.tsx

@@ -1,5 +0,0 @@
-
-
-export const TargetSelector = () => {
-
-}

package/access-control/PolicyEditor/TargetSelector/query-builder.scss

@@ -1,9 +0,0 @@
-@import "helpers";
-
-.queryBuilder {
-  .dropdown-item.active {
-    .text-secondary {
-      color: $gray-200 !important;
-    }
-  }
-}

package/access-control/PolicyEditor/index.tsx

@@ -1,165 +0,0 @@
-import {useState} from "react"
-
-
-const POLICY_EFFECT = [
-  {
-    name: "Grant",
-    key: "grant",
-  },
-  {
-    name: "Deny",
-    key: "deny",
-  },
-]
-
-const TARGET_TYPES = [
-  {
-    name: "Collection:",
-    key: "collections",
-    description: "Applies to all documents within the collection",
-  },
-  {
-    name: "Documents:",
-    key: "documents",
-    description: "Applies only to certain specific documents",
-  },
-  {
-    name: "Field:",
-    key: "fields",
-    description: "Applies only specific fields of documents",
-  },
-]
-
-const OPERATIONS = [
-  {
-    name: "Create",
-    key: "create",
-  },
-  {
-    name: "Read",
-    key: "read",
-  },
-  {
-    name: "Update",
-    key: "update",
-  },
-  {
-    name: "Delete",
-    key: "delete",
-  },
-  {
-    name: "All of the above",
-    key: "all",
-  },
-]
-
-
-//
-const APPLIES_TO = [
-  {
-    name: "Users",
-    key: "users",
-  },
-  {
-    name: "Groups",
-    key: "groups",
-  },
-]
-
-export const PolicyEditor = () => {
-  const [targetType, setTargetType] = useState("collection")
-
-  const onChangeTargetType = (event) => {
-    setTargetType(event.target.value)
-  }
-
-  return (
-    <div>
-      <h6>Policy Editor</h6>
-      <hr />
-
-      <h6>Effect:</h6>
-      <div className="mb-3" style={{maxWidth: 300}}>
-        {POLICY_EFFECT.map((type) => (
-          <div key={type.key} className="d-flex flex-row mb-1">
-            <input
-              className="form-check-input"
-              type="radio"
-              name="targetTypeOptions"
-              id={type.key}
-              value={type.key}
-              checked={targetType === type.key}
-              onChange={onChangeTargetType}
-            />
-            <label
-              className="form-check-label cursor-pointer ps-2"
-              htmlFor={type.key}
-            >
-              <b>{type.name}</b>
-            </label>
-          </div>
-        ))}
-      </div>
-
-      <div className="d-flex flex-row">
-        <div className="me-2">
-          <h6>Target Type:</h6>
-          <div style={{maxWidth: 300}}>
-            {TARGET_TYPES.map((type) => (
-              <div key={type.key} className="d-flex flex-row mb-1">
-                <input
-                  className="form-check-input"
-                  type="radio"
-                  name="targetTypeOptions"
-                  id={type.key}
-                  value={type.key}
-                  checked={targetType === type.key}
-                  onChange={onChangeTargetType}
-                />
-                <label
-                  className="form-check-label cursor-pointer ps-2"
-                  htmlFor={type.key}
-                >
-                  <b>{type.name}</b> {type.description}
-                </label>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div>
-          <h6>Targets:</h6>
-          <div>
-            <input type="text" />
-          </div>
-        </div>
-      </div>
-
-      <h6 className="mt-3">Operation:</h6>
-      <div className="" style={{maxWidth: 300}}>
-        {OPERATIONS.map((type) => (
-          <div key={type.key} className="d-flex flex-row mb-1">
-            <input
-              className="form-check-input"
-              type="radio"
-              name="targetTypeOptions"
-              id={type.key}
-              value={type.key}
-              checked={targetType === type.key}
-              onChange={onChangeTargetType}
-            />
-            <label
-              className="form-check-label cursor-pointer ps-2"
-              htmlFor={type.key}
-            >
-              <b>{type.name}</b>
-            </label>
-          </div>
-        ))}
-      </div>
-
-      <br />
-      to attributes / conditions add support for expiry date
-    </div>
-  )
-}

package/access-control/index.ts

@@ -1,3 +0,0 @@
-export * from "./ACLModal"
-export * from "./ACLForm"
-export * from "./PolicyEditor"

package/apiClient.js

@@ -1,15 +0,0 @@
-import axios from "axios"
-
-import getBaseUrl from "./getBaseUrl"
-import getTenantId from "./auth/getTenantId"
-
-
-export const apiClient = axios.create({
-  baseURL: getBaseUrl(),
-  withCredentials: true,
-  headers: {
-    "rb-tenant-id": getTenantId(),
-  },
-})
-
-export default apiClient

package/auth/authProps.js

@@ -1,8 +0,0 @@
-
-let authProps = null
-
-export const getAuthProps = () => authProps
-
-export const setAuthProps = (newAuthProps) => {
-  authProps = newAuthProps
-}

package/auth/components/AccountsList/AccountListItem.js

@@ -1,61 +0,0 @@
-/* @flow */
-import getInitials from "../../../helpers/getInitials"
-import Avatar from "../../../ui/Avatar"
-
-import "./account-list-item.scss"
-
-const getAvatarText = (user) => {
-  if (user.initials) return user.initials
-
-  const fullName = `${user.first_name || ""} ${user.last_name || ""}`
-  let initials = getInitials(fullName)
-
-  if (!initials) initials = "?"
-
-  return initials
-}
-
-
-const getTenantName = (tenant) => {
-  if (tenant.short_name) return tenant.short_name
-  else if (tenant.name) return tenant.name
-  else return tenant.slug
-}
-
-const getUserName = (user) => {
-  let name = ""
-
-  if (user.first_name) {
-    name += user.first_name
-  }
-
-  if (user.last_name) {
-    name += ` ${user.last_name}`
-  }
-
-  if (!name && user.initials) {
-    name += user.initials
-  }
-
-  if (!name) {
-    name = user.email
-  }
-
-  return name
-}
-
-export const AccountListItem = ({account, onClick, avatarProps}) => {
-
-  return (
-    <div
-      key={`acc-${account.user._id}`}
-      className="account-list-item d-flex flex-row"
-      onClick={() => onClick(account)}
-    >
-      <div>
-        <Avatar className="me-2" size="small" text={getAvatarText(account.user)} color={account.user.avatar_color} {...avatarProps} />
-      </div>
-      <div style={{wordBreak: "break-all"}}>{getTenantName(account.tenant)} / {getUserName(account.user)}</div>
-    </div>
-  )
-}

package/auth/components/AccountsList/account-list-item.scss

@@ -1,5 +0,0 @@
-@import "helpers";
-
-.account-list-item {
-  cursor: pointer;
-}

package/auth/components/AccountsList/index.js

@@ -1,17 +0,0 @@
-/* @flow */
-import {AccountListItem} from "./AccountListItem"
-
-
-export const AccountsList = ({accounts}) => {
-
-  return (
-    <>
-      {accounts.map((acc) => (
-        <AccountListItem
-          key={`acc-${acc.user._id}`}
-          account={acc}
-        />
-      ))}
-    </>
-  )
-}

package/auth/components/Footer/index.js

@@ -1,11 +0,0 @@
-/* @flow */
-const year = (new Date).getFullYear()
-
-export const Footer = ({name}) => {
-
-  return (
-    <footer className="pt-5 my-5 text-muted border-top">
-      &copy; {year} <span className="ms-1">{name}</span>
-    </footer>
-  )
-}

package/auth/components/ForgotPassword/forgot-password.scss

@@ -1,37 +0,0 @@
-@import "helpers";
-
-#forgot-password-wrapper {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  // background-color: var(--bs-secondary);
-  background-color: $gray-500;
-
-  hr {
-    background-color: $gray-500;
-  }
-
-  footer {
-    color: $light !important;
-    border-top: none !important;
-    padding-top: 0 !important;
-    margin-bottom: 0 !important;
-  }
-
-
-  .form-forgot {
-    width: 100%;
-    max-width: 380px;
-    margin: auto;
-    background-color: $light;
-    border-radius: 22px;
-    // border: 1px solid $gray-600;
-  }
-
-  .form-forgot .form-floating:focus-within {
-    z-index: 2;
-  }
-}