Skip to content

Commit

Permalink
Solved css change merge conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
@mjhuff
mjhuff committed Apr 14, 2023
2 parents 7c13c03 + 7eedb7a commit a109dd2
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 73 deletions.
86 changes: 45 additions & 41 deletions client/components/Remote.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
import React, { useEffect } from "react";
import { updateSecretKey, updateAccessId, updateAccountId } from "../slice";
import { useDispatch, useSelector } from "react-redux";
import BucketSelect from "./BucketSelect";
import { getUserBuckets } from "../services/getBuckets";
import aws_edited from "../public/aws_edited.png";
import cloudflare_edited from "../public/cloudflare_edited.png";
import ErrorDisplay from "./ErrorDisplay";
import StartMigrationButton from "./MigrationButton";
import React, { useEffect } from 'react';
import { updateSecretKey, updateAccessId, updateAccountId } from '../slice';
import { useDispatch, useSelector } from 'react-redux';
import BucketSelect from './BucketSelect';
import { getUserBuckets } from '../services/getBuckets';
import ErrorDisplay from './ErrorDisplay';
import StartMigrationButton from './MigrationButton';

const Remote = (props) => {
const dispatch = useDispatch();
const { origin, destination } = useSelector((state) => state.GUI);

let { remoteType } = props;

const remote = remoteType === "origin" ? origin : destination;
const remote = remoteType === 'origin' ? origin : destination;

let bucketSelect;

const requireAccountId = remote.name === "Cloudflare" ? true : false;
const requireAccountId = remote.name === 'Cloudflare' ? true : false;

if (!requireAccountId) {
bucketSelect = remote.accessId && remote.secretKey && (
Expand All @@ -33,36 +31,31 @@ const Remote = (props) => {
//Get the list of buckets if all credentials are present.
useEffect(() => {
if (!remote.accessId || !remote.secretKey) return;
if (remote.name === "Cloudflare" && !remote.accountId) return;
if (remote.name === 'Cloudflare' && !remote.accountId) return;
dispatch(getUserBuckets({ ...remote, originOrDestination: remoteType }));
}, [remote.accessId, remote.secretKey, remote.name, remote.accountId]);

let correctInputClass =
"block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer";
'block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer';
let wrongInputClass =
"block py-2.5 px-0 w-full text-sm text-red-600 bg-transparent border-2 border-b-2 border-red-600 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-red-600 peer";
'block py-2.5 px-0 w-full text-sm text-red-600 bg-transparent border-0 border-b-2 border-red-600 appearance-none focus:outline-none focus:ring-0 focus:border-red-600 peer';

return (
<div>
<div className="relative z-0 w-full h-full mb-6 group">
<div class="grid grid-cols-3 gap-2">
<h1 class="mx-auto text-sm flex items-center font-mono">
<div class="grid grid-cols-1 gap-2 items-center">
<div class="mx-auto text-sm flex items-center font-mono">
{props.remoteType.charAt(0).toUpperCase() +
props.remoteType.slice(1)}
: {props.displayName}
</h1>
</div>
</div>
</div>

<div className="relative z-0 w-full h-full mb-6 group">
<input
type="key"
className={
remote.errorField === "accessId" ||
(remote.name === "azureblob" && remote.errorMessage)
? wrongInputClass
: correctInputClass
}
className={remote.errorMessage ? wrongInputClass : correctInputClass}
placeholder=" "
required
name="accessId"
Expand All @@ -74,21 +67,20 @@ const Remote = (props) => {
></input>
<label
htmlFor={`${remoteType}AccessId`}
className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
className={`${
remote.errorMessage
? 'text-red-600 peer-focus:text-red-600'
: 'peer-focus:text-blue-600'
} peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6`}
>
{remote.name === "azureblob" ? "Account ID" : "Access ID"}
{remote.accessId ? <>{" \u2705"}</> : <></>}
{remote.name === 'azureblob' ? 'Account ID' : 'Access ID'}
{remote.accessId ? <>{' \u2705'}</> : <></>}
</label>
</div>

<div className="block relative z-0 w-full h-full mb-6 group">
<input
className={
remote.errorField === "secretKey" ||
(remote.name === "azureblob" && remote.errorMessage)
? wrongInputClass
: correctInputClass
}
className={remote.errorMessage ? wrongInputClass : correctInputClass}
placeholder=" "
required
type="key"
Expand All @@ -102,17 +94,23 @@ const Remote = (props) => {

<label
htmlFor="secretKey"
className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
className={`${
remote.errorMessage
? 'text-red-600 peer-focus:text-red-600'
: 'peer-focus:text-blue-600'
} peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6`}
>
{remote.name === "azureblob" ? "Access Key" : "Secret Key"}
{remote.secretKey ? <>{" \u2705"}</> : <></>}
{remote.name === 'azureblob' ? 'Access Key' : 'Secret Key'}
{remote.secretKey ? <>{' \u2705'}</> : <></>}
</label>
</div>

{remote.name === "Cloudflare" && (
{remote.name === 'Cloudflare' && (
<div className="relative z-0 w-full h-full mb-6 group">
<input
className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
className={
remote.errorMessage ? wrongInputClass : correctInputClass
}
placeholder=" "
required
type="id"
Expand All @@ -122,16 +120,20 @@ const Remote = (props) => {
dispatch(
updateAccountId({
accountId: e.target.value.trim(),
remoteType,
remoteType
})
);
}}
></input>
<label
htmlFor="accountId"
className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
className={`${
remote.errorMessage
? 'text-red-600 peer-focus:text-red-600'
: 'peer-focus:text-blue-600'
} peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6`}
>
Account ID {remote.accountId.length > 1 && <>{"\u2705"}</>}
Account ID {remote.accountId.length === 32 && <>{'\u2705'}</>}
</label>
</div>
)}
Expand All @@ -144,7 +146,9 @@ const Remote = (props) => {
</div>
)}

{remote.selectedBucket && remoteType === "destination" ? (
{origin.selectedBucket &&
destination.selectedBucket &&
remoteType === 'destination' ? (
<StartMigrationButton></StartMigrationButton>
) : null}
</div>
Expand Down
26 changes: 13 additions & 13 deletions client/components/RemoteContainer.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import { useSelector } from "react-redux";
import RemoteSelection from "./RemoteSelection";
import Remote from "./Remote";
import React from 'react';
import { useSelector } from 'react-redux';
import RemoteSelection from './RemoteSelection';
import Remote from './Remote';

export const RemoteContainer = (props) => {
const { origin, destination } = useSelector((state) => state.GUI);
Expand All @@ -11,10 +11,10 @@ export const RemoteContainer = (props) => {
<div className="grid grid-rows-1 grid-cols-2 mx-32 my-16 p-6">
<div className="mx-20 my-8">
{!origin.name ? (
<RemoteSelection source={"Origin"}></RemoteSelection>
<RemoteSelection source={'Origin'}></RemoteSelection>
) : (
<Remote
remoteType={"origin"}
remoteType={'origin'}
accessIdHandler={accessIdHandler}
secretKeyHandler={secretKeyHandler}
displayName={origin.displayName}
Expand All @@ -24,10 +24,10 @@ export const RemoteContainer = (props) => {

<div className="mx-20 my-8">
{!destination.name ? (
<RemoteSelection source={"Destinaton"}></RemoteSelection>
<RemoteSelection source={'Destination'}></RemoteSelection>
) : (
<Remote
remoteType={"destination"}
remoteType={'destination'}
accessIdHandler={accessIdHandler}
secretKeyHandler={secretKeyHandler}
displayName={destination.displayName}
Expand All @@ -46,20 +46,20 @@ const accessIdHandler = (e, remote) => {
);
const isCloudflareAccessId = /^[a-z0-9]{32}$/.test(accessId);
const isMicrosoftAccessId =
remote.name === "azureblob" && !isAmazonAccessId && !isCloudflareAccessId
remote.name === 'azureblob' && !isAmazonAccessId && !isCloudflareAccessId
? true
: false;
if (isAmazonAccessId || isCloudflareAccessId || isMicrosoftAccessId) {
return {
...remote,
accessId: accessId.trim(),
errorField: "",
errorField: ''
};
} else {
//this should probably just return a red check mark
return {
...remote,
accessId: "",
accessId: ''
};
}
};
Expand All @@ -74,13 +74,13 @@ const secretKeyHandler = (e, remote) => {
return {
...remote,
secretKey: secretKey.trim(),
errorField: "",
errorField: ''
};
} else {
//this should probably just return a red check mark
return {
...remote,
secretKey: "",
secretKey: ''
};
}
};
62 changes: 43 additions & 19 deletions client/components/RemoteSelection.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import React from "react";
import { useDispatch } from "react-redux";
import React from 'react';
import { useDispatch } from 'react-redux';

import awsIcon from "../public/aws_edited.png";
import cloudflareIcon from "../public/cloudflare_edited.png";
import { updateRemoteName } from "../slice";
import awsIcon from '../public/aws_edited.png';
import azureIcon from '../public/azure.png';
import cloudflareIcon from '../public/cloudflare_edited.png';
import { updateRemoteName } from '../slice';

const RemoteSelection = (props) => {
const dispatch = useDispatch();
const { source } = props;

const changeSourceHandler = (e) => {
const displayNames = {
azureblob: "Microsoft Storage Container",
Cloudflare: "Cloudflare R2",
AWS: "Amazon S3",
azureblob: 'Microsoft Storage Container',
Cloudflare: 'Cloudflare R2',
AWS: 'Amazon S3'
};

const name = e.target.id;
Expand All @@ -24,17 +25,40 @@ const RemoteSelection = (props) => {

return (
<>
<h1>{props.source}</h1>
<button typeof="button" onClick={changeSourceHandler}>
<img id="AWS" src={awsIcon} alt="aws"></img>AWS
</button>
<button typeof="button" onClick={changeSourceHandler}>
<img id="Cloudflare" src={cloudflareIcon} alt="cloudflare"></img>
Cloudflare
</button>
<button typeof="button" onClick={changeSourceHandler}>
<img id="azureblob" src={awsIcon} alt="azure"></img>MS Azure
</button>
<div class="grid grid-rows-5 items-center px-10">
<div class="text-center text-base font-mono row-span-1">
{props.source}
</div>
<div class="text-base flex justify-center align-top row-span-4">
<button class="p-2" typeof="button" onClick={changeSourceHandler}>
<img
class="flex items-center mx-auto object-scale-down h-24 w-24"
id="AWS"
src={awsIcon}
alt="aws"
/>
AWS
</button>
<button class="p-2" typeof="button" onClick={changeSourceHandler}>
<img
class="flex items-center mx-auto object-scale-down h-24 w-24"
id="Cloudflare"
src={cloudflareIcon}
alt="cloudflare"
/>
Cloudflare
</button>
<button class="p-2" typeof="button" onClick={changeSourceHandler}>
<img
class="flex items-center mx-auto object-scale-down h-24 w-24"
id="azureblob"
src={azureIcon}
alt="azure"
/>
MS Azure
</button>
</div>
</div>
</>
);
};
Expand Down
Binary file added client/public/azure.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a109dd2

Please sign in to comment.